Przeglądaj źródła

解决菜单不可见情况下左侧菜单失焦问题

lfeish 1 rok temu
rodzic
commit
a14c4f11d8
2 zmienionych plików z 14 dodań i 4 usunięć
  1. 12 4
      src/router/full-routes.ts
  2. 2 0
      src/views/system/menu/MenuForm.vue

+ 12 - 4
src/router/full-routes.ts

@@ -1,7 +1,8 @@
 /**
  * 1. 前端维护的完整路由表, 用于创建"菜单"
  * 2. component 是 string,并不是 组件对象。
- * 3. 生成菜单,关注的 path,name,component,icon
+ * 3. 生成菜单,关注的 path,name,component,icon。
+ * 4. 部分路由组件是菜单不可见的,当访问该路由时,左侧菜单的menu item会失去active状态。需要设置 meta.activeMenu 保持选中状态。
  */
 import { AppRouteRecordRaw } from './types';
 import { getTreeItem } from '@/utils';
@@ -143,7 +144,8 @@ const fullRoutes: AppRouteRecordRaw[] = [
         component: '/page-config/PageSceneList',
         meta: {
           icon: '',
-          title: '场景布局列表'
+          title: '场景布局列表',
+          activeMenu: 'LayoutScene',
         }
       },
       {
@@ -153,7 +155,8 @@ const fullRoutes: AppRouteRecordRaw[] = [
         component: '/page-config/ConfigEdit',
         meta: {
           icon: '',
-          title: '场景布局配置'
+          title: '场景布局配置',
+          activeMenu: 'LayoutScene',
         }
       },
       {
@@ -174,6 +177,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         meta: { 
           icon: '',
           title: '相机布局列表',
+          activeMenu: 'LayoutCamera',
         }
       },
       {
@@ -184,6 +188,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         meta: { 
           icon: '',
           title: '相机布局配置',
+          activeMenu: 'LayoutCamera',
         }
       }
     ]
@@ -309,7 +314,8 @@ const fullRoutes: AppRouteRecordRaw[] = [
         component: '/message/reportmessage/ReportOperation',
         meta: { 
           icon: '',
-          title: '报表推送配置' 
+          title: '报表推送配置',
+          activeMenu: 'MessageReport',
         },
       },
       {
@@ -330,6 +336,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         meta: { 
           icon: '',
           title: '报警推送配置',
+          activeMenu: 'MessageAlarm',
         },
       },
       {
@@ -350,6 +357,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         meta: { 
           icon: '',
           title: '系统通知配置',
+          activeMenu: 'MessageSysNotification',
         },
       }, 
       {

+ 2 - 0
src/views/system/menu/MenuForm.vue

@@ -362,6 +362,7 @@
     frameSrc: '',
     openType: 1, 
     query: '',
+    activeMenu: '',
   };
   const formParams = ref({ ...defaultFormParams });
 
@@ -423,6 +424,7 @@
     formParams.value.component = currentRoute.component;
     formParams.value.icon = currentRoute.meta.icon as string;
     formParams.value.menuName = currentRoute.meta.title as string;
+    formParams.value.activeMenu = currentRoute.meta.activeMenu as string || '';
   });
 
   function setData(data: MenuDetailItem) {