优化菜单选中

src/layout/index.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {nextTick, onMounted, ref, watch} from "vue";
 import {useRouter, useRoute} from 'vue-router'
 import {useAppStore} from "~src/store";
 import avatarPng from '~src/assets/images/avatar.png';
@@ -69,7 +69,6 @@ const AppColor = ref(useAppState.getColor);
 //顶部菜单数据和相关处理
 const MenuBarKey = ref(BarMenuKey);
 const MenuBarData = ref(useAppState.getMenus)
-//const MenuBarData = ref(menus)
 const isCollapse = ref(useAppState.getCollapse)
 const userInfo = ref(useAppState.getUserInfo);
 
@@ -77,6 +76,7 @@ const userInfo = ref(useAppState.getUserInfo);
 onMounted(() => {
     initButtons()
     setLogoImageColor()
+    setRouteParentMenu(useRoutes?.meta?.parentMenu)
 })
 
 //监听
@@ -98,6 +98,22 @@ watch(() => [
     setLogoImageColor()
 })
 
+//监听
+watch(() => [
+    useRoutes?.meta,
+], ([meta]) => {
+    setRouteParentMenu(meta?.parentMenu)
+}, {deep: true})
+
+//设置路由选中父级菜单
+const setRouteParentMenu = (parentMenu) => {
+    if (parentMenu) {
+        nextTick(() => {
+            MenuBarKey.value = parentMenu;
+        })
+    }
+}
+
 //设置Logo图片颜色
 const setLogoImageColor = () => {
     setImageColorStyle('logo-icon', AppColor.value?.color)

src/router/modules/base.js

@@ -1,6 +1,9 @@
 import Layout from "~src/layout/index.vue";
 
-//路由菜单系统内置页面配置, noMenuBar: true 不显示在菜单栏记录里， isAuth: true 权限验证
+//路由菜单系统内置页面配置,
+// isAuth: true 权限验证
+// parentMenu: '' 父级菜单
+
 export default [
     {
         path: '/',
@@ -42,7 +45,7 @@ export default [
             {
                 path: '/home/task-details',
                 name: 'home-task-details',
-                meta: {title: '任务详情', isAuth: true}, //, noMenuBar: true
+                meta: {title: '任务详情', parentMenu: 'home-task', isAuth: true},
                 component: () => import('~src/views/home/task/task-details.vue')
             },
         ],
@@ -64,7 +67,7 @@ export default [
             {
                 path: '/project/list-info',
                 name: 'project-list-info',
-                meta: {title: '项目信息', isAuth: true},
+                meta: {title: '项目信息', parentMenu: 'project-index', isAuth: true},
                 component: () => import('~src/views/project/list/list-info.vue')
             },
             //成本测算
@@ -77,13 +80,13 @@ export default [
             {
                 path: '/project/cost/form',
                 name: 'project-cost-form',
-                meta: {title: '成本测算', text: '新增编辑', isAuth: true},
+                meta: {title: '成本测算', parentMenu: 'project-cost', text: '新增编辑', isAuth: true},
                 component: () => import('~src/views/project/cost/form.vue')
             },
             {
                 path: '/project/cost-data',
                 name: 'project-cost-data',
-                meta: {title: '成本测算预览', isAuth: true},
+                meta: {title: '成本测算预览', parentMenu: 'project-cost', isAuth: true},
                 component: () => import('~src/views/project/cost/data.vue')
             },
             //项目合同
@@ -96,13 +99,13 @@ export default [
             {
                 path: '/project/contract/form',
                 name: 'project-contract-form',
-                meta: {title: '项目合同信息', isAuth: true},
+                meta: {title: '项目合同信息', parentMenu: 'project-contract', isAuth: true},
                 component: () => import('~src/views/project/contract/form.vue')
             },
             {
                 path: '/project/contract/update',
                 name: 'project-contract-update',
-                meta: {title: '合同回款更新', isAuth: true},
+                meta: {title: '合同回款更新', parentMenu: 'project-contract', isAuth: true},
                 component: () => import('~src/views/project/contract/update.vue')
             },
         ],
@@ -124,13 +127,13 @@ export default [
             {
                 path: '/program/annual-form',
                 name: 'program-annual-form',
-                meta: {title: '年度经营预算信息', isAuth: true},
+                meta: {title: '年度经营预算信息', parentMenu: 'program-annual', isAuth: true},
                 component: () => import('~src/views/program/annual/form.vue')
             },
             {
                 path: '/program/annual-view',
                 name: 'program-annual-view',
-                meta: {title: '预览年度经营预算', isAuth: true},
+                meta: {title: '预览年度经营预算', parentMenu: 'program-annual', isAuth: true},
                 component: () => import('~src/views/program/annual/view.vue')
             },
             //项目计划预算
@@ -143,7 +146,7 @@ export default [
             {
                 path: '/program/project-form',
                 name: 'program-project-form',
-                meta: {title: '项目计划预算信息', isAuth: true},
+                meta: {title: '项目计划预算信息', parentMenu: 'program-project', isAuth: true},
                 component: () => import('~src/views/program/project/form.vue')
             },
             //部门月度计划预算
@@ -156,7 +159,7 @@ export default [
             {
                 path: '/program/section-form',
                 name: 'program-section-form',
-                meta: {title: '部门月度计划预算信息', isAuth: true},
+                meta: {title: '部门月度计划预算信息', parentMenu: 'program-section', isAuth: true},
                 component: () => import('~src/views/program/section/form.vue')
             },
         ],
@@ -199,7 +202,7 @@ export default [
             {
                 path: '/expense/finReimburse/record',
                 name: 'expense-finReimburse-record',
-                meta: {title: '财务报销记录', isAuth: true},
+                meta: {title: '财务报销记录', parentMenu: 'expense-finReimburse', isAuth: true},
                 component: () => import('~src/views/expense/finReimburse/record.vue')
             },
             //支付申请
@@ -212,7 +215,7 @@ export default [
             {
                 path: '/expense/paymentRequest/record',
                 name: 'expense-paymentRequest-record',
-                meta: {title: '支付申请记录', isAuth: true},
+                meta: {title: '支付申请记录', parentMenu: 'expense-paymentRequest', isAuth: true},
                 component: () => import('~src/views/expense/paymentRequest/record.vue')
             },
             //借款申请
@@ -225,7 +228,7 @@ export default [
             {
                 path: '/expense/loanRequest/record',
                 name: 'expense-loanRequest-record',
-                meta: {title: '借款申请记录', isAuth: true},
+                meta: {title: '借款申请记录', parentMenu: 'expense-loanRequest', isAuth: true},
                 component: () => import('~src/views/expense/loanRequest/record.vue')
             },
             //采购申请
@@ -238,7 +241,7 @@ export default [
             {
                 path: '/expense/purchaseRequest/record',
                 name: 'expense-purchaseRequest-record',
-                meta: {title: '采购申请记录', isAuth: true},
+                meta: {title: '采购申请记录', parentMenu: 'expense-purchaseRequest', isAuth: true},
                 component: () => import('~src/views/expense/purchaseRequest/record.vue')
             },
             //用车申请
@@ -251,7 +254,7 @@ export default [
             {
                 path: '/expense/vehicleRequest/record',
                 name: 'expense-vehicleRequest-record',
-                meta: {title: '用车申请记录', isAuth: true},
+                meta: {title: '用车申请记录', parentMenu: 'expense-vehicleRequest', isAuth: true},
                 component: () => import('~src/views/expense/vehicleRequest/record.vue')
             },
             //发票管理
@@ -264,7 +267,7 @@ export default [
             {
                 path: '/expense/invoice/billing',
                 name: 'expense-invoice-billing',
-                meta: {title: '开票审批', isAuth: true},
+                meta: {title: '开票审批', parentMenu: 'expense-invoice', isAuth: true},
                 component: () => import('~src/views/expense/invoice/billing.vue')
             },
             //外包支付
@@ -277,7 +280,7 @@ export default [
             {
                 path: '/expense/outsourcing/record',
                 name: 'expense-outsourcing-record',
-                meta: {title: '外包支付记录', isAuth: true},
+                meta: {title: '外包支付记录', parentMenu: 'expense-outsourcing', isAuth: true},
                 component: () => import('~src/views/expense/outsourcing/record.vue')
             },
         ],
@@ -298,7 +301,7 @@ export default [
             {
                 path: '/attendance/business-trip-info',
                 name: 'attendance-business-trip-info',
-                meta: {title: '出差管理信息', isAuth: true},
+                meta: {title: '出差管理信息', parentMenu: 'attendance-business-trip', isAuth: true},
                 component: () => import('~src/views//attendance/business-trip/info.vue')
             },
             {
@@ -413,7 +416,7 @@ export default [
             {
                 path: '/people/archive-info',
                 name: 'people-archive-info',
-                meta: {title: '员工档案信息', isAuth: true},
+                meta: {title: '员工档案信息', parentMenu: 'people-archive', isAuth: true},
                 component: () => import('~src/views/people/archive/info.vue')
             },
             {
@@ -425,7 +428,7 @@ export default [
             {
                 path: '/people/contract-info',
                 name: 'people-contract-info',
-                meta: {title: '员工合同信息', isAuth: true},
+                meta: {title: '员工合同信息', parentMenu: 'people-contract', isAuth: true},
                 component: () => import('~src/views/people/contract/info.vue')
             },
             {