src/const/website.ts

@@ -1,7 +1,5 @@
 export default {
-  title: "接诉即处",
-  subtitle: "“接诉即处”业务管理系统",
-  copyright: "",
+  title: "中央应急物资储备管理系统",
   isFirstPage: true, // 配置首页不可关闭
   key: "avenue", // 配置主键,目前用于存储
   validateCode: true, // 是否开启验证码校验
@@ -17,7 +15,7 @@ export default {
   whiteList: ["/login", "/404", "/401", "/lock"], // 配置无权限可以访问的页面
   whiteTagList: ["/login", "/404", "/401", "/lock"], // 配置不添加tags页面 （'/advanced-router/mutative-detail/*'——*为通配符）
   fistPage: {
-    label: "出库信息填报",
+    label: "首页",
     value: "/home/index",
     params: {},
     query: {},

src/layout/components/sidebar/sidebar.vue

@@ -3,7 +3,7 @@
     <div class="sidebar_menu_scroll">
       <el-menu default-active="1" @open="handleOpen" @close="handleClose">
         <template v-for="(item, index) in menu">
-          <el-sub-menu v-if="item.children.length > 0" :key="item.path" :index="index">
+          <el-sub-menu v-if="item.children.length > 0" :key="item.path" :index="`${index}`">
             <template #title>
               <span>{{ item.name }}</span>
             </template>
@@ -41,7 +41,7 @@ const menuClick = (item: any) => {
 </script>
 <style lang="scss" scoped>
 .sidebar_menu {
-  height: calc(100vh - 90px);
+  height: calc(100vh - 130px);
   width: 200px;
   overflow: hidden;
   &_scroll {

src/layout/components/topbar/index.vue

@@ -3,10 +3,6 @@
     <div class="topbar_title">
       <img src="~@/assets/img/logo.png" />
     </div>
-    <!-- <div class="topbar_help">
-      <el-icon color="#767DEA"><QuestionFilled /></el-icon>
-      帮助
-    </div> -->
     <div class="topbar_user">
       <el-dropdown @command="handleCommand" trigger="hover">
         <div class="avatar-wrapper">
@@ -26,16 +22,17 @@
       </el-dropdown>
     </div>
   </div>
+  <topTag />
 </template>
 
 <script setup lang="ts">
+import topTag from "./topTag.vue";
+
 import { ref } from "vue";
 import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import { ElMessageBox, ElMessage } from "element-plus";
-import { QuestionFilled, UserFilled, ArrowDown } from "@element-plus/icons-vue";
+import { ElMessageBox } from "element-plus";
+import { UserFilled, ArrowDown } from "@element-plus/icons-vue";
 
-const router = useRouter();
 const store = useStore();
 const userInfo: any = ref("");
 
@@ -48,18 +45,12 @@ const handleCommand = () => {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning"
-  })
-    .then(() => {
-      store.dispatch("LogOut").then(() => {
-        // 刷新登录页面，避免多次弹框
-        window.location.reload();
-        ElMessage({
-          type: "success",
-          message: "成功退出登录"
-        });
-      });
-    })
-    .catch(() => console.log("取消"));
+  }).then(() => {
+    store.dispatch("LogOut").then(() => {
+      // 刷新登录页面，避免多次弹框
+      window.location.reload();
+    });
+  });
 };
 </script>
 
@@ -85,16 +76,6 @@ const handleCommand = () => {
       margin-right: 30px;
     }
   }
-  &_help {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    margin-right: 30px;
-    color: #fff;
-    .el-icon {
-      font-size: 18px;
-    }
-  }
   &_user {
     min-width: 180px;
     .avatar-wrapper {

src/layout/components/topbar/logo.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="logo">
-    <img src="~@/assets/img/logo.png" />
-  </div>
-</template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped>
-.logo {
-  width: 90px;
-  height: 90px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

src/layout/components/topbar/topTag.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="top_tag">
+    <el-tabs
+      v-model="active"
+      :closable="tagList.length !== 1"
+      type="card"
+      @contextmenu="handleContextmenu"
+      @tab-click="openTag"
+      @tab-remove="removeTag"
+    >
+      <el-tab-pane v-for="item in tagList" :key="item.value" :label="item.label" :name="item.value" />
+    </el-tabs>
+    <el-dropdown class="top_tag__menu">
+      <el-button>
+        更多
+        <el-icon><ArrowDown /></el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="closeOthersTags">关闭其他</el-dropdown-item>
+          <el-dropdown-item @click="closeAllTags">关闭全部</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import { useGetters } from "@/hooks/storeHooks";
+import { ArrowDown } from "@element-plus/icons-vue";
+
+const router = useRouter();
+const store = useStore();
+const { tagWel, tagList, tag, website } = useGetters(["tagWel", "tagList", "tag", "website"]);
+const active = computed(() => tag.value.value);
+
+// 右键点击事件
+const handleContextmenu = () => {
+  console.log(1);
+};
+
+// 点击事件
+const openTag = (item: any) => {
+  router.push(item.props.name);
+};
+
+// 删除事件
+const removeTag = (name: string) => {
+  const { foundTag, key } = findTag(name);
+  store.commit("DEL_TAG", foundTag);
+  if (foundTag.value === tag.value.value) {
+    router.push(tagList.value[key === 0 ? key : key - 1].value);
+  }
+};
+
+// 关闭其他
+const closeOthersTags = () => {
+  store.commit("DEL_TAG_OTHER");
+};
+
+// 关闭所有
+const closeAllTags = () => {
+  store.commit("DEL_ALL_TAG");
+  nextTick(() => {
+    router.push(tagWel.value.value);
+  });
+};
+
+const findTag = (value: string) => {
+  let foundTag: any, key: any;
+  tagList.value.map((item: any, index: number) => {
+    if (item.value === value) {
+      foundTag = item;
+      key = index;
+    }
+  });
+  return { foundTag, key };
+};
+</script>
+
+<style lang="scss" scoped>
+.top_tag {
+  user-select: none;
+  position: relative;
+  padding: 0 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin-left: 200px;
+  height: 40px;
+  padding-right: 106px;
+  :deep(.el-tabs--card) {
+    .el-tabs__header {
+      border: none;
+    }
+    .el-tabs__header {
+      .el-tabs__item {
+        border: none;
+        margin: 0 3px;
+        height: 40px;
+        font-size: 14px;
+        line-height: 40px;
+        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+        font-weight: 400;
+        color: #000000;
+        &.is-active {
+          color: #4069f2;
+          border-bottom: 4px solid #4069f2;
+        }
+      }
+      .el-tabs__nav {
+        border: none;
+      }
+    }
+  }
+  &__menu {
+    position: absolute !important;
+    top: 3px;
+    right: 0;
+    padding: 1px 0 0 15px;
+    box-sizing: border-box;
+
+    .el-button {
+      background: rgba(52, 112, 255, 0.1);
+      border: 1px solid #3470ff;
+      color: #4069f2;
+      margin-right: 17px;
+    }
+  }
+}
+</style>

src/router/Routermethods.ts

@@ -1,4 +1,5 @@
 import router from ".";
+import store from "@/store";
 
 const layout = () => import("@/layout/index.vue");
 
@@ -33,3 +34,9 @@ export function setTitle(title: string) {
   title = title ? `${title}——${defaultTitle}` : defaultTitle;
   document.title = title;
 }
+
+// 移除选中tag，如果是最后一个则打开前一个tag
+export function closeTagOrOpenLastTag(value: string) {
+  console.log(store.getters.tagList);
+  store.getters.tagList;
+}

src/store/getters.ts

@@ -5,6 +5,7 @@ export default {
 
   tag: (state: any) => state.tag.tag,
   tagWel: (state: any) => state.tag.tagWel,
+  tagList: (state: any) => state.tag.tagList,
 
   website: (state: any) => state.common.website
 };

src/store/modules/tag.ts

@@ -48,11 +48,11 @@ export default {
         return !diff(item, action);
       });
       setFistTag(state.tagList);
-      cache.session.set("tagList", state.tagList);
+      cache.session.setJSON("tagList", state.tagList);
     },
     DEL_ALL_TAG: (state: any) => {
-      state.tagList = [state.tagWel];
-      cache.session.set("tagList", state.tagList);
+      state.tagList = [];
+      cache.session.setJSON("tagList", state.tagList);
     },
     DEL_TAG_OTHER: (state: any) => {
       state.tagList = state.tagList.filter((item: ITagType) => {
@@ -63,7 +63,7 @@ export default {
         }
       });
       setFistTag(state.tagList);
-      cache.session.set("tagList", state.tagList);
+      cache.session.setJSON("tagList", state.tagList);
     }
   },
   actions: {}

src/styles/media.scss

@@ -23,20 +23,6 @@
   z-index: 1025;
 }
 
-.avue--collapse {
-  .avue-left,
-  .avue-logo {
-    width: 60px;
-  }
-  .avue-header {
-    padding-left: 60px;
-  }
-  .avue-main {
-    width: calc(100% - 60px);
-    left: 60px;
-  }
-}
-
 .avue-header {
   width: 100%;
   background-color: #fff;
@@ -49,7 +35,7 @@
   padding: 0;
   padding-bottom: 20px;
   width: calc(100% - 200px);
-  height: calc(100% - 90px);
+  height: calc(100% - 130px);
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -97,71 +83,3 @@
     display: block;
   }
 }
-
-@media screen and (max-width: 992px) {
-  $width: 240px;
-  // ele的自适应
-  .el-dialog,
-  .el-message-box {
-    width: 98% !important;
-  }
-  //登录页面
-  .login-left {
-    display: none !important;
-  }
-  .login-logo {
-    padding-top: 30px !important;
-    margin-left: -30px;
-  }
-  .login-weaper {
-    margin: 0 auto;
-    width: 96% !important;
-  }
-  .login-border {
-    border-radius: 5px;
-    padding: 40px;
-    margin: 0 auto;
-    float: none !important;
-    width: 100% !important;
-  }
-  .login-main {
-    width: 100% !important;
-  }
-  //主框架
-  .avue-tags {
-    display: none;
-  }
-  .avue-left,
-  .avue-logo {
-    left: -$width;
-  }
-  .avue-main {
-    left: 0;
-    width: 100%;
-  }
-  .avue-header {
-    margin-bottom: 15px;
-    padding-left: 15px;
-  }
-  .top-bar__item {
-    display: none;
-  }
-  .avue--collapse {
-    .avue-left,
-    .avue-logo {
-      width: $width;
-      left: 0;
-    }
-    .avue-main {
-      left: $width;
-      width: 100%;
-    }
-    .avue-header {
-      padding: 0;
-      transform: translate3d(230px, 0, 0);
-    }
-    .avue-shade {
-      display: block;
-    }
-  }
-}

src/views/dataStatistics/droughtResistant/index.vue

@@ -174,7 +174,6 @@ const getSpanArr = (data: any) => {
       }
     });
   });
-  console.log(mergeObj.value);
 };
 
 // 获取表格数据
@@ -209,12 +208,18 @@ const getList = () => {
   });
 };
 
-const arraySpanMethod = ({ column, rowIndex }: any) => {
+const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
+  if (rowIndex === 0) {
+    if (columnIndex === 1) {
+      return [1, 2];
+    } else if (columnIndex === 2) {
+      return [0, 0];
+    }
+  }
   const mergeCol = ["upidName", "username"];
   // 判断列的属性
   if (mergeCol.indexOf(column.property) !== -1) {
     // 判断其值是不是为0
-    console.log(column.property, rowIndex);
     if (mergeObj.value[column.property][rowIndex]) {
       return [mergeObj.value[column.property][rowIndex], 1];
     } else {

src/views/dataStatistics/reliefMaterial/index.vue

@@ -203,7 +203,14 @@ const clearSearch = () => {
   getList();
 };
 
-const arraySpanMethod = ({ column, rowIndex }: any) => {
+const arraySpanMethod = ({ column, rowIndex, columnIndex }: any) => {
+  if (rowIndex === 0) {
+    if (columnIndex === 1) {
+      return [1, 2];
+    } else if (columnIndex === 2) {
+      return [0, 0];
+    }
+  }
   const mergeCol = ["upidName", "username"];
   // 判断列的属性
   if (mergeCol.indexOf(column.property) !== -1) {