From 6f16458f60a9ec0ff921757df9f57b319e06f185 Mon Sep 17 00:00:00 2001
From: fangyuan <527392886@qq.com>
Date: 星期二, 29 十一月 2022 15:50:27 +0800
Subject: [PATCH] 141

---
 src/views/layout/components/Menu/index.vue |  165 +++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 113 insertions(+), 52 deletions(-)

diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 8ad84aa..680d186 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -1,19 +1,62 @@
 <template>
-  <div class="Menu">
-    <!-- 鑿滃崟鏍� -->
-    <el-aside width="200px" class="menu">
+  <div>
+    <!-- 渚ц竟瀵艰埅鏍� -->
+    <el-aside width="200px">
       <h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2>
-      <el-scrollbar class="MenuScroll">
+      <el-scrollbar>
         <!-- 璺敱 -->
-        <el-menu class="el-menu-vertical">
-          <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
-            <template slot="title" class="firstSpan">
+        <el-menu router class="el-menu-vertical" :default-active="$route.path">
+          <el-submenu
+            :index="menu.url ? menu.url : menu.id.toString()"
+            v-for="menu in menuList"
+            :key="menu.id"
+            class="firstMenu"
+          >
+            <template slot="title">
               <span slot="prefix" class="icon-padding fisrtSpan">
-                <svg-icon :icon-class="item.icon"></svg-icon>
+                <svg-icon :icon-class="menu.icon"></svg-icon>
               </span>
-              <span class="fisrtSpan">{{item.name}}</span>
+              <span class="fisrtSpan">{{ menu.title }}</span>
             </template>
-          </el-menu-item>
+            <template v-if="menu.menuVoArrayList.length > 0">
+              <template v-for="secondMenu in menu.menuVoArrayList">
+                <el-submenu
+                  :key="secondMenu.id"
+                  v-if="secondMenu.menuVoArrayList.length > 0"
+                  :index="
+                    secondMenu.url ? secondMenu.url : secondMenu.id.toString()
+                  "
+                  class="secondMenu"
+                >
+                  <template slot="title">
+                    <span class="secondSpan">{{ secondMenu.title }}</span>
+                  </template>
+                  <el-menu-item
+                    v-for="thirdMenu in secondMenu.menuVoArrayList"
+                    :key="thirdMenu.id"
+                    :index="`${thirdMenu.id}`"
+                    :route="{ name: thirdMenu.url }"
+                    >{{ thirdMenu.title }}</el-menu-item
+                  >
+                </el-submenu>
+
+                <el-menu-item
+                  v-else
+                  :index="`${secondMenu.id}`"
+                  :route="{ name: secondMenu.url }"
+                  >{{ secondMenu.title }}</el-menu-item
+                >
+              </template>
+            </template>
+
+            <el-menu-item
+              v-else
+              :key="menu.id"
+              :index="`${menu.id}`"
+              :route="{ name: menu.url }"
+              >{{ menu.title }}</el-menu-item
+            >
+          </el-submenu>
         </el-menu>
       </el-scrollbar>
     </el-aside>
@@ -21,39 +64,28 @@
 </template>
 
 <script>
+import users from "@/api/users";
+
 export default {
   data() {
     return {
-      menu: [
-        {
-          name: "绯荤粺璁剧疆", icon: "system", index: "/home/system", 
-        },
-        {
-          name: "杩愯惀绠＄悊", icon: "operate", index: "/home/operate",
-        },
-        {
-          name: "瑙嗛宸℃煡", icon: "video", index: "/home/video",
-        },
-        {
-          name: "娌圭儫淇℃伅鏌ヨ", icon: "intelligence", index: "/home/lampblack",
-        },
-        {
-          name: "鎵ф硶绠＄悊", icon: "intelligence", index: "/home/law",
-        },
-        {
-          name: "鏅鸿兘宸℃煡", icon: "intelligence", index: "/home/intellect",
-        },
-        {
-          name: "骞冲彴鍩烘湰淇℃伅", icon: "intelligence", index: "/home/info",
-        }
-      ],
-    }
+      menuList: [],
+    };
   },
-  methods:{
-    Jump(url){
-      this.$router.push(url);
-    }
-  }
+  created() {
+    this.loadMenu();
+  },
+  methods: {
+    loadMenu() {
+      const userName = sessionStorage.getItem('name');
+      users.getMenu({ name: userName })
+          .then(res => {
+            this.menuList = res.menus;
+            sessionStorage.setItem('user', JSON.stringify(res));
+          })
+          .catch(err => this.$message.error(err))
+    },
+  },
 };
 </script>
 
@@ -61,12 +93,14 @@
 .icon-padding {
   padding-right: 10px;
 }
-.menu {
+
+.el-aside {
   background: #07162e;
   color: #e9eef3;
   text-align: center;
   box-sizing: border-box;
   position: relative;
+
   //    鍥哄畾鏍囬
   .siderbar-title {
     position: fixed;
@@ -78,35 +112,42 @@
     top: 0;
     left: 0;
     z-index: 999;
-    background-color: #08162f;
   }
 
-  .MenuScroll {
+  .el-scrollbar {
     height: calc(100vh - 66px);
-    box-sizing: border-box;
     margin-top: 66px;
+    box-sizing: border-box;
+
     .el-menu {
       background: linear-gradient(#07162e, #0f2b56);
       border: 0;
 
       .firstMenu {
-        background:  #07162e;
+        background: #07162e;
         text-align: left;
-        &:hover .fisrtSpan {
-          color: #fff;
+
+        &:hover > .el-submenu__title {
+          background-color: #092c4a;
         }
 
+        &:hover .fisrtSpan {
+          color: #22d3eb;
+        }
+
+        span,
         span {
           color: #e9eef3;
         }
 
         .el-menu-item {
-          color: #c3c3c4;
+          color: #e9eef3;
           background-color: #07162e;
-          &:hover {
-            color: #fff;
-            background-color: #0c2c4c;
-          }
+        }
+
+        .el-menu-item:hover {
+          background-color: #092c4a;
+          color: #22d3eb;
         }
 
         .is-active {
@@ -115,8 +156,28 @@
         }
       }
 
+      .secondMenu {
+        &:hover > .el-submenu__title {
+          background-color: #092c4a;
+        }
+
+        &:hover .secondSpan {
+          color: #22d3eb;
+        }
+      }
+
+      .thirdMenu {
+        &:hover > .el-submenu__title {
+          background-color: #092c4a;
+        }
+
+        &:hover .thirdSpan {
+          color: #22d3eb;
+        }
+      }
+
       .is-active {
-        background-color: #07162e;
+        background-color: #092c4a;
       }
     }
 

--
Gitblit v1.8.0