菜单优化

src/router/filter.js

@@ -9,7 +9,7 @@ Router.prototype.push = function push(location) {
 
 
 router.beforeEach((to, from, next) => {
-    console.log(to);
+    // console.log(to);
     if (to.fullPath === '/' || to.name === '*') {
         let {
             code,

src/router/index.js

@@ -30,7 +30,7 @@ const routes = [{
         // meta: {
         //   tabname: "首页"
         // },
-        component: () => import("../views/mainPage.vue")
+        component: () => import("@/views/mainPage.vue")
       },
       {
         path: "/modelLibrary",
@@ -89,8 +89,8 @@ const routes = [{
           tabname: "个人信息"
         },
         component: () => import("@/views/personalInformation/personalInformation"),
-        redirect: '/index',
-        children: personalInformation,
+        // redirect: '/index',
+        // children: personalInformation,
       }, 
     ]
     // .concat([{

src/views/index.vue

@@ -1,6 +1,10 @@
 <template>
     <div id="main" v-bind:class="{ fold: isFold }">
-        <page-menu @menuFold="menuFold" :menuItems="menuItems" ref="menu"></page-menu>
+        <page-menu
+            @menuFold="menuFold"
+            :menuItems="menuItems"
+            ref="menu"
+        ></page-menu>
         <bread-crumb></bread-crumb>
         <router-view class="mainBox" ref="curRouter"></router-view>
     </div>
@@ -20,42 +24,77 @@ export default {
     data() {
         return {
             isFold: false, // menu是否折叠
-            menuItems:[]
+            menuItems: [],
         };
     },
     methods: {
         menuFold(flag) {
             this.isFold = flag;
         },
-        getMenuItems(){
+        getMenuItems() {
             this.$axios({
                 method: "POST",
                 url: this.$api.common.getMyMenuTree,
-                data: {}
-            }).then(res => {
+                data: {},
+            }).then((res) => {
                 if (res.code == 200 && res.info) {
-                    this.menuItems = res.info
-                }else{
-                    this.$message.error(res.message || '获取用户菜单失败')
+                    this.menuItems = res.info;
+
+                    this.$nextTick(() => {
+                        let menuKind = this.$route.meta.menuKind;
+                        if (
+                            menuKind &&
+                            menuKind !== "mainPage" &&
+                            menuKind !== "personalInformation"
+                        ) {
+                            let name = "";
+                            switch (menuKind) {
+                                case "modelLibrary":
+                                    name = "模型库";
+                                    break;
+                                case "algorithmsLibrary":
+                                    name = "算法库";
+                                    break;
+                                case "sceneLibrary":
+                                    name = "场景库";
+                                    break;
+                                case "workManagement":
+                                    name = "工作管理";
+                                    break;
+                                case "systemManagement":
+                                    name = "系统管理";
+                                    break;
+                                default:
+                                    break;
+                            }
+
+                            let menu = this.menuItems.find(
+                                (i) => i.name === name
+                            );
+                            if (menu) this.$refs.menu.$refs.menu.open(menu.id);
+                        }
+                    });
+                } else {
+                    this.$message.error(res.message || "获取用户菜单失败");
                 }
-            })
+            });
         },
-        getUserInfo(){
+        getUserInfo() {
             this.$axios({
                 method: "POST",
                 url: this.$api.common.getCurrentUserInfo,
-                data: {}
-            }).then(res => {
+                data: {},
+            }).then((res) => {
                 if (res.code == 200 && res.info) {
-                    this.$store.commit("getUserId", res.info.id)
-                    this.$store.commit("getUsername", res.info.username)
-                    this.$store.commit("getRoleCode", res.info.roleCode)
-                    this.$store.commit("getUseType", res.info.useType)
-                }else{
-                    this.$message.error(res.message || '获取用户信息失败')
+                    this.$store.commit("getUserId", res.info.id);
+                    this.$store.commit("getUsername", res.info.username);
+                    this.$store.commit("getRoleCode", res.info.roleCode);
+                    this.$store.commit("getUseType", res.info.useType);
+                } else {
+                    this.$message.error(res.message || "获取用户信息失败");
                 }
-            })
-        }
+            });
+        },
     },
     created() {
         let { code, ticket } = this.$route.query;
@@ -70,25 +109,28 @@ export default {
                 if (res.code == 200 && !!res.info.access_token) {
                     localStorage.setItem(
                         "Authorization",
-                        res.info.token_type + ' ' + res.info.access_token
+                        res.info.token_type + " " + res.info.access_token
+                    );
+                    localStorage.setItem(
+                        "refreshToken",
+                        res.info.refresh_token
                     );
-                    localStorage.setItem("refreshToken", res.info.refresh_token);
                     localStorage.setItem("expiresTime", res.info.expires_time);
 
                     this.$nextTick(() => {
                         this.$refs.curRouter.init &&
                             this.$refs.curRouter.init();
 
-                        this.getMenuItems()
-                        this.getUserInfo()
+                        this.getMenuItems();
+                        this.getUserInfo();
                     });
                 } else {
                     this.$message.error(res.message || "网络异常");
                 }
             });
-        }else{
-            this.getMenuItems()
-            this.getUserInfo()
+        } else {
+            this.getMenuItems();
+            this.getUserInfo();
         }
     },
 };

src/views/page/pageMenu.vue

@@ -46,13 +46,22 @@
                     <b class="my-icon-menuF"></b>
                 </li> 
                 -->
-                <li 
-                    v-for="(item, i) in menuItems" :key="i"
+                <li
+                    v-for="(item, i) in menuItems"
+                    :key="i"
                     @click="menuFoldHandle(1)"
                     :class="{ isOpened: opened === item.id }"
                 >
                     <b :class="item.icon"></b>
                 </li>
+                <li
+                    @click="menuFoldHandle(1)"
+                    v-bind:class="{
+                        isOpened: opened === 'personalInformation',
+                    }"
+                >
+                    <b class="el-icon-user-solid white is"></b>
+                </li>
             </ul>
 
             <div class="menuList" v-show="!menuFold">
@@ -70,11 +79,7 @@
                         <i class="my-icon-home"></i>
                         <span>首页</span>
                     </el-menu-item>
-                    <el-menu-item index="scenePacketListManagement" class="indexMenu">
-                        <i class="my-icon-home"></i>
-                        <span>场景包管理</span>
-                    </el-menu-item>
-                    
+
                     <!--
                     <el-submenu :index="menus[1]">
                         <template slot="title">
@@ -151,17 +156,25 @@
                     </el-submenu>
                     -->
 
-                    <el-submenu v-for="(item, i) in menuItems" :index="item.id" :key="i">
+                    <el-submenu
+                        v-for="(item, i) in menuItems"
+                        :index="item.id"
+                        :key="i"
+                    >
                         <template slot="title">
                             <i :class="item.icon"></i>
-                            <span>{{item.name}}</span>  
+                            <span>{{ item.name }}</span>
                         </template>
-                        <el-menu-item v-for="(item2, i2) in item.children" :index="item2.router" :key="i2">
-                            {{item2.name}}
+                        <el-menu-item
+                            v-for="(item2, i2) in item.children"
+                            :index="item2.router"
+                            :key="i2"
+                        >
+                            {{ item2.name }}
                         </el-menu-item>
                     </el-submenu>
-                    <el-menu-item index="/personalInformation" class="indexMenu">
-                        <i class=""></i>
+                    <el-menu-item index="personalInformation" class="indexMenu">
+                        <i class="el-icon-user-solid"></i>
                         <span>个人信息</span>
                     </el-menu-item>
                 </el-menu>
@@ -175,11 +188,13 @@ import { mapState } from "vuex";
 
 export default {
     name: "pageMenu",
-    props:{
-        menuItems:{
+    props: {
+        menuItems: {
             type: Array,
-            default(){return []}
-        }
+            default() {
+                return [];
+            },
+        },
     },
     data() {
         return {
@@ -191,10 +206,12 @@ export default {
                 "algorithmsLibrary",
                 "sceneLibrary",
                 "workManagement",
+                "systemManagement",
+                "personalInformation",
             ],
             activeMenu: "mainPage", // 当前menu
-            expiresTime: '',
-            toExpiresTime: '',
+            expiresTime: "",
+            toExpiresTime: "",
             tokenTimer: undefined,
         };
     },
@@ -202,33 +219,29 @@ export default {
         ...mapState(["themeColor"]),
     },
     mounted() {
-        let menuKind = this.$route.meta.menuKind;
-
-        if (menuKind && menuKind !== "mainPage") {
-            this.$refs.menu.open(menuKind);
-        }
-
         //设置一个定时器，定时在距离过期前5min，这个定时器会发送refreshToken请求
-        
-        this.expiresTime = localStorage.getItem('expiresTime')
-        if(this.expiresTime){
-            this.toExpiresTime = new Date(this.expiresTime).getTime() - new Date().getTime();
+
+        this.expiresTime = localStorage.getItem("expiresTime");
+        if (this.expiresTime) {
+            this.toExpiresTime =
+                new Date(this.expiresTime).getTime() - new Date().getTime();
             let that = this;
-            if(this.toExpiresTime < 5*60*1000){
-                this.refreshToken()
-            }else{
-                if(this.toExpiresTime < 24*60*60*1000){   //当过期时间小于一天时才会定时执行，否则会因为过期时间过大无法执行
-                    this.tokenTimer = setTimeout(function(){
-                        that.refreshToken()
-                    }, this.toExpiresTime - 5*60*1000)
+            if (this.toExpiresTime < 5 * 60 * 1000) {
+                this.refreshToken();
+            } else {
+                if (this.toExpiresTime < 24 * 60 * 60 * 1000) {
+                    //当过期时间小于一天时才会定时执行，否则会因为过期时间过大无法执行
+                    this.tokenTimer = setTimeout(function () {
+                        that.refreshToken();
+                    }, this.toExpiresTime - 5 * 60 * 1000);
                 }
             }
         }
     },
-    watch:{
-        activeMenu(newV){
-            console.log(newV)
-        }
+    watch: {
+        activeMenu(newV) {
+            console.log(newV);
+        },
     },
     methods: {
         menuFoldHandle(val) {
@@ -240,23 +253,23 @@ export default {
             this.$emit("menuFold", this.menuFold);
         },
         menuSel(index, indexPath) {
-            // console.log(index, indexPath);
-            this.opened = indexPath[0];
+            this.opened = indexPath[indexPath.length - 1];
 
-            // 如果是首页 手动关闭其他菜单
-            if (index === this.menus[0]) {
-                this.menus.forEach((i) => {
-                    this.$refs.menu.close(i);
+            // 如果是首页or个人信息 手动关闭其他菜单
+            if (index === this.menus[0] || index === this.menus[6]) {
+                this.menuItems.forEach((i) => {
+                    this.$refs.menu.close(i.id);
                 });
             }
         },
-        checkExpiresTime(){
-            this.toExpiresTime = new Date(this.expiresTime).getTime() - new Date().getTime();
-            if(this.toExpiresTime < 5*60*1000){
-                this.refreshToken()
+        checkExpiresTime() {
+            this.toExpiresTime =
+                new Date(this.expiresTime).getTime() - new Date().getTime();
+            if (this.toExpiresTime < 5 * 60 * 1000) {
+                this.refreshToken();
             }
         },
-        refreshToken(){
+        refreshToken() {
             this.$axios({
                 method: "post",
                 url: this.$api.common.refreshToken,
@@ -266,35 +279,39 @@ export default {
                 },
             }).then((res) => {
                 if (res.code == 200 && res.info) {
-                    let Authorization = res.info.token_type + ' ' + res.info.access_token;
+                    let Authorization =
+                        res.info.token_type + " " + res.info.access_token;
                     let refreshToken = res.info.refresh_token;
                     let expiresTime = res.info.expires_time;
                     localStorage.clear();
                     localStorage.setItem("Authorization", Authorization);
                     localStorage.setItem("refreshToken", refreshToken);
                     localStorage.setItem("expiresTime", expiresTime);
-                    
-                    this.expiresTime = expiresTime
-                    this.toExpiresTime = new Date(this.expiresTime).getTime() - new Date().getTime();
-                    clearTimeout(this.tokenTimer)
-                    if(this.toExpiresTime < 5*60*1000){
+
+                    this.expiresTime = expiresTime;
+                    this.toExpiresTime =
+                        new Date(this.expiresTime).getTime() -
+                        new Date().getTime();
+                    clearTimeout(this.tokenTimer);
+                    if (this.toExpiresTime < 5 * 60 * 1000) {
                         //this.refreshToken()
-                    }else{
-                        if(this.toExpiresTime < 24*60*60*1000){  
-                            this.tokenTimer = setTimeout(function(){
+                    } else {
+                        if (this.toExpiresTime < 24 * 60 * 60 * 1000) {
+                            this.tokenTimer = setTimeout(function () {
                                 let that = this;
-                                that.refreshToken()
-                            }, this.toExpiresTime - 5*60*1000)
+                                that.refreshToken();
+                            }, this.toExpiresTime - 5 * 60 * 1000);
                         }
                     }
-                }else{
-                    if(res.code == 400){  //refreshToken请求返回400则跳回登录页
-                        let loginUrl = window.location.origin + '/login'
-                        window.location.href = loginUrl
+                } else {
+                    if (res.code == 400) {
+                        //refreshToken请求返回400则跳回登录页
+                        let loginUrl = window.location.origin + "/login";
+                        window.location.href = loginUrl;
                     }
                 }
-            })
-        }
+            });
+        },
     },
 };
 </script>
@@ -509,4 +526,12 @@ export default {
 .my-icon-system {
     background: url("../../assets/common/image/menu/menuF.png") center no-repeat;
 }
+.el-icon-user-solid {
+    width: 24px;
+    height: 18px;
+    font-size: 20px;
+}
+&.white {
+    color: #ffffff;
+}
 </style>