feat: 侧边栏功能优化

src/components/layout/header/index.vue

@@ -87,7 +87,7 @@ export default {
       if (this.$route.path.startsWith(nav_.link)) {
         this.currentNav = nav_.id;
         nav_.children &&
-          nav_.children.legnth > 0 &&
+          nav_.children.length > 0 &&
           this.$store.commit("system/SET_SUB_NAV", nav_.children);
         if (nav_.link === this.$route.path) {
           nav_.breadcrumb &&

src/components/layout/header/mock.js

@@ -40,7 +40,7 @@ export const nav = [
     id: "2",
     name: "业务大厅",
     index: 2,
-    link: "/buiss",
+    link: "/Business",
     children: [],
   },
   {

src/views/comps/SubNav.vue

 <template>
   <el-menu
-    :default-active="activeMenu"
-    class="el-menu-vertical gs-subnav"
-    :collapse="false"
-    @select="handleSelect"
+      :default-active="activeMenu"
+      class="el-menu-vertical gs-subnav"
+      :collapse="false"
+      @select="handleSelect"
   >
     <template v-for="submenu in subNav">
       <el-submenu
-        v-if="submenu.children && submenu.children.length > 0"
-        :key="submenu.id"
-        :index="submenu.name"
+          v-if="submenu.children && submenu.children.length > 0"
+          :key="submenu.id"
+          :index="submenu.name"
       >
         <template slot="title">
-          <span style="margin-left: 6px">{{ submenu.name }}</span>
+          <span>{{ submenu.name }}</span>
         </template>
         <template v-for="item in submenu.children">
           <template v-if="item.children && item.children.length > 0">
             <el-submenu
-              :index="item.name"
-              :key="item.id"
-              :background-color="theme.subMenuBg"
-              :text-color="theme.menuText"
-              :active-text-color="theme.menuActiveText"
+                :index="item.name"
+                :key="item.id"
             >
               <template slot="title">
-                <i
-                  v-show="item.icon_name"
-                  :style="{ color: theme.menuText }"
-                  style="font-size: 13px"
-                  :class="['qycloud', `${item.icon_name}`]"
-                />
                 <span style="margin-left: 6px">{{ item.name }}</span>
               </template>
               <template v-for="third in item.children">
                 <el-menu-item
-                  :key="third.id"
-                  :index="third.name"
-                  :class="{ 'is-active': activeMenu === third.id }"
+                    :key="third.id"
+                    :index="third.name"
+                    :class="{ 'is-active': activeMenu === third.id }"
                 >
                   {{ third.name }}
                 </el-menu-item>
               </template>
             </el-submenu>
           </template>
-
           <template v-else>
             <el-menu-item
-              :key="item.id"
-              :index="item.name"
-              :class="{ 'is-active': activeMenu === item.id }"
+                :key="item.id"
+                :index="item.name"
+                :class="{ 'is-active': activeMenu === item.id }"
             >
               {{ item.name }}
             </el-menu-item>
@@ -57,17 +47,10 @@
       </el-submenu>
       <template v-else>
         <el-menu-item
-          :key="submenu.id"
-          :index="submenu.name"
-          :class="{ 'is-active': activeMenu === submenu.id }"
+            :key="submenu.id"
+            :index="submenu.name"
+            :class="{ 'is-active': activeMenu === submenu.id }"
         >
-          {{ submenu.name }}
-          <i
-            v-show="submenu.icon_name"
-            :style="{ color: theme.menuText }"
-            style="font-size: 13px;margin-right: 6px"
-            :class="['qycloud', `${submenu.icon_name}`]"
-          />
           <span>{{ submenu.name }}</span>
         </el-menu-item>
       </template>
@@ -75,12 +58,12 @@
   </el-menu>
 </template>
 <script>
-import { mapState } from "vuex";
+import {mapState} from "vuex";
 
 export default {
   data() {
     return {
-      defaultOpeneds: ["1", "2"],
+      activeMenu: '',
     };
   },
   computed: {
@@ -90,6 +73,60 @@ export default {
     console.log(this.subNav);
   },
   methods: {
+    handleSelect(index, indexP) {
+      console.log(index, indexP);
+      const temp = JSON.parse(JSON.stringify(indexP));
+      const key = temp.shift();
+      this.subNav.forEach((item) => {
+        if (item.name === key) {
+          if (temp.length > 1) {
+            this.checkChildren(index, temp, item.children);
+          } else if (temp.length === 0) {
+            this.activeMenu = item.name;
+            this.showApp(item);
+          } else {
+            item.children.forEach((_item) => {
+              if (_item.name === index) {
+                this.activeMenu = _item.name;
+                this.showApp(_item);
+              }
+            });
+          }
+        }
+      });
+    },
+
+    checkChildren(index, indexP, list) {
+      const key = indexP.shift();
+      list.forEach((item) => {
+        console.log(key);
+        if (item.name === key) {
+          if (indexP.length > 1) {
+            this.checkChildren(index, indexP, item.children);
+          } else {
+            item.children.forEach((_item) => {
+              if (_item.name === index) {
+                this.activeMenu = _item.name;
+                this.showApp(_item);
+              }
+            });
+          }
+        }
+      });
+    },
+
+    showApp(item) {
+      console.log(item)
+      if(item.link.startsWith('http')){
+        window.open(item.link)
+      }else{
+        if (item.breadcrumb) {
+          this.$store.commit('system/SET_BREADCRUMB', item.breadcrumb)
+        }
+        this.$router.push({path: item.link})
+      }
+    },
+
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
@@ -103,11 +140,13 @@ export default {
 .el-menu.gs-subnav {
   border-right: none;
   background: $side-bg-color;
+
   .el-submenu__title {
     background: $side-bg-color;
     height: 44px;
     line-height: 44px;
   }
+
   .menu-title {
     margin-top: 25px;
     margin-bottom: 10px;
@@ -115,12 +154,14 @@ export default {
     font-size: 14px;
     color: #b7b6b6;
   }
+
   .el-menu-item {
     height: 44px;
     line-height: 44px;
     color: #6b6a6a;
     background: transparent;
     font-size: 14px;
+
     i {
       color: $side-bg-color;
       font-size: 25px;
@@ -128,6 +169,7 @@ export default {
       top: 15px;
       right: 15px;
     }
+
     &:hover,
     &:focus,
     &.is-active {