获取菜单

src/components/auth-btn/index.js

@@ -0,0 +1,13 @@
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore();
+
+//自定义权限指令
+export const vAuthBtn = {
+    mounted(el, {value}) {
+        if (value && value.length > 0 && value[0]) {
+            if (el.parentNode && !useAppState.getButtonsVal(value[0])) {
+                el.parentNode.removeChild(el);
+            }
+        }
+    }
+}

src/components/btn-auth/index.vue

@@ -1,43 +0,0 @@
-<template>
-    <div v-if="btn_Info">
-        <slot></slot>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch,onMounted} from "vue";
-import {useAppStore} from "~src/store";
-const useAppState = useAppStore()
-
-//参数
-const props = defineProps({
-    keys: {
-        type: String,
-        default: ''
-    }
-})
-
-//变量
-const btn_Info = ref(false);
-
-//监听
-watch(() => [
-    props.keys,
-], ([keys]) => {
-    getButtonsVal(keys)
-})
-
-//渲染完成
-onMounted(()=> {
-    getButtonsVal(props.keys)
-})
-
-//获取气泡数据
-const getButtonsVal = (value) => {
-    if (value) {
-        btn_Info.value = useAppState.getButtonsVal(value);
-    } else {
-        btn_Info.value = false;
-    }
-}
-</script>

src/components/index.js

@@ -1,12 +1,13 @@
 import HcDropdown from './dropdown/index.vue'
 import HcGradientCard from './gradient-card/index.vue'
 import FormItemUpload from './upload/FormItemUpload.vue'
-import HcBtnAuth from './btn-auth/index.vue'
+import {vAuthBtn} from './auth-btn/index'
 
 //注册全局组件
 export const setupComponents = (App) => {
     App.component('HcDropdown', HcDropdown)
     App.component('HcGradientCard', HcGradientCard)
     App.component('FormItemUpload', FormItemUpload)
-    App.component('HcBtnAuth', HcBtnAuth)
+    //自定义指令
+    App.directive('auth-btn', vAuthBtn)
 }

src/layout/index.vue

@@ -53,7 +53,6 @@ import UserInfoBar from "./modules/UserInfoBar.vue"
 import TopMenuBar from "./modules/TopMenuBar.vue"
 import {setImageColorStyle} from "js-fast-way";
 import {initButtons} from "~sto/app";
-import menus from '~src/router/menus'
 
 //初始组合式
 const router = useRouter()
@@ -69,8 +68,8 @@ const AppColor = ref(useAppState.getColor);
 
 //顶部菜单数据和相关处理
 const MenuBarKey = ref(BarMenuKey);
-//const MenuBarData = ref(useAppState.getMenus)
-const MenuBarData = ref(menus)
+const MenuBarData = ref(useAppState.getMenus)
+//const MenuBarData = ref(menus)
 const isCollapse = ref(useAppState.getCollapse)
 const userInfo = ref(useAppState.getUserInfo);
 
@@ -86,7 +85,7 @@ watch(() => [
     useRoutes?.name,
     useAppState.getCollapse,
 ], ([userMenus, RouteName, collapse]) => {
-    //MenuBarData.value = userMenus
+    MenuBarData.value = userMenus
     MenuBarKey.value = RouteName ?? 'home-index'
     isCollapse.value = collapse
 })

src/layout/modules/UserInfoBar.vue

@@ -42,7 +42,7 @@ watch(() => [
 })
 
 onMounted(() => {
-    //getRefreshToken()
+    getRefreshToken()
 })
 
 //刷新token

src/router/index.js

@@ -16,21 +16,14 @@ const router = vueRouter.createRouter({
 router.beforeResolve(async (to) => {
     NProgress.start();
     const token = getToken()
-    if (to.path === '/login') {
-        return true
-    } else if (to.path === '/auth') {
-        return true
-    } else if (!token) {
-        return '/login'
-    } else {
-        return true
-        /*const res = await getRouterData(to.name)
-        if (res) {
-            return true
-        } else {
-            return '/login'
-        }*/
-    }
+    console.log(to.meta)
+    if (to.path === '/login') return true
+    if (to.path === '/auth') return true
+    if (!token) return '/login'
+    if (to.meta?.isAuth) return true
+    const res = await getRouterData(to.name)
+    if (!res) return '/login'
+    return true
 })
 
 router.afterEach((to) => {

src/router/menus.js

@@ -1,248 +0,0 @@
-export default [
-    {
-        source: 'home-3-line',
-        name: '门户',
-        code: 'home',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '普通权限',
-                code: 'home-index',
-            },
-            {
-                source: 'home-3-line',
-                name: '领导权限',
-                code: 'home-admin',
-            },
-            {
-                source: 'home-3-line',
-                name: '审批管理',
-                code: 'home-task',
-            }
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '项目管理',
-        code: 'project',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '项目列表',
-                code: 'project-index',
-            },
-            {
-                source: 'home-3-line',
-                name: '成本测算',
-                code: 'project-cost',
-            },
-            {
-                source: 'home-3-line',
-                name: '项目合同',
-                code: 'project-contract',
-            },
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '预算计划管理',
-        code: 'program',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '年度经营预算',
-                code: 'program-annual',
-            },
-            {
-                source: 'home-3-line',
-                name: '项目计划预算',
-                code: 'program-project',
-            },
-            {
-                source: 'home-3-line',
-                name: '部门月度计划预算',
-                code: 'program-section',
-            },
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '任务管理',
-        code: 'task',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '日志填报',
-                code: 'task-logs',
-            },
-            {
-                source: 'home-3-line',
-                name: '计划任务执行',
-                code: 'task-plan',
-            },
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '费用管理',
-        code: 'expense',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '财务报销',
-                code: 'expense-finReimburse',
-            },
-            {
-                source: 'home-3-line',
-                name: '支付申请',
-                code: 'expense-paymentRequest',
-            },
-            {
-                source: 'home-3-line',
-                name: '借款申请',
-                code: 'expense-loanRequest',
-            },
-            {
-                source: 'home-3-line',
-                name: '采购申请',
-                code: 'expense-purchaseRequest',
-            },
-            {
-                source: 'home-3-line',
-                name: '用车申请',
-                code: 'expense-vehicleRequest',
-            },
-            {
-                source: 'home-3-line',
-                name: '发票管理',
-                code: 'expense-invoice',
-            },
-            {
-                source: 'home-3-line',
-                name: '外包支付',
-                code: 'expense-outsourcing',
-            },
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '考勤管理',
-        code: 'attendance',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '出差管理',
-                code: 'attendance-business-trip',
-            },
-            {
-                source: 'home-3-line',
-                name: '考勤统计',
-                code: 'attendance-statistic',
-            },
-
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '人资管理',
-        code: 'people',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '公司制度',
-                code: 'people-company-rule',
-            },
-            {
-                source: 'home-3-line',
-                name: '员工档案',
-                code: 'people-archive',
-            },
-            {
-                source: 'home-3-line',
-                name: '员工合同',
-                code: 'people-contract',
-            },
-            {
-                source: 'home-3-line',
-                name: '薪酬管理',
-                code: 'people-salary',
-            },
-            {
-                source: 'home-3-line',
-                name: '入职管理',
-                code: 'people-entry',
-            },
-            {
-                source: 'home-3-line',
-                name: '离职管理',
-                code: 'people-dimission',
-            },
-
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '系统设置',
-        code: 'system',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '账户管理',
-                code: 'system-user',
-            },
-            {
-                source: 'home-3-line',
-                name: '菜单管理',
-                code: 'system-menu',
-            },
-            {
-                source: 'home-3-line',
-                name: '参数配置',
-                code: 'system-parameter',
-            },
-            {
-                source: 'home-3-line',
-                name: '组织架构管理',
-                code: 'system-organization',
-            },
-
-        ]
-    },
-    {
-        source: 'home-3-line',
-        name: '综合查询统计',
-        code: 'static',
-        children: [
-            {
-                source: 'home-3-line',
-                name: '预算与实际统计',
-                code: 'static-actual',
-            },
-            {
-                source: 'home-3-line',
-                name: '项目统计',
-                code: 'static-project',
-            },
-            {
-                source: 'home-3-line',
-                name: '任务统计',
-                code: 'static-plan',
-            },
-
-        ]
-    },
-    // {
-    //     source: 'home-3-line',
-    //     name: '风险预警',
-    //     code: 'risk',
-    //     children: [
-    //         {
-    //             source: 'home-3-line',
-    //             name: '风险预警',
-    //             code: 'risk-warning',
-    //         },
-
-
-    //     ]
-    // },
-]

src/router/modules/base.js

@@ -1,6 +1,6 @@
 import Layout from "~src/layout/index.vue";
 
-//路由菜单系统内置页面配置, noMenuBar: true 不显示在菜单栏记录里
+//路由菜单系统内置页面配置, noMenuBar: true 不显示在菜单栏记录里， isAuth: true 权限验证
 export default [
     {
         path: '/',
@@ -29,7 +29,7 @@ export default [
             {
                 path: '/home/admin',
                 name: 'home-admin',
-                meta: {title: '领导权限'},
+                meta: {title: '领导权限', isAuth: true},
                 component: () => import('~src/views/home/index/admin.vue')
             },
             //审批管理
@@ -42,7 +42,7 @@ export default [
             {
                 path: '/home/task-details',
                 name: 'home-task-details',
-                meta: {title: '任务详情'}, //, noMenuBar: true
+                meta: {title: '任务详情', isAuth: true}, //, noMenuBar: true
                 component: () => import('~src/views/home/task/task-details.vue')
             },
         ],
@@ -64,7 +64,7 @@ export default [
             {
                 path: '/project/list-info',
                 name: 'project-list-info',
-                meta: {title: '项目信息'},
+                meta: {title: '项目信息', isAuth: true},
                 component: () => import('~src/views/project/list/list-info.vue')
             },
             //成本测算
@@ -77,13 +77,13 @@ export default [
             {
                 path: '/project/cost/form',
                 name: 'project-cost-form',
-                meta: {title: '成本测算', text: '新增编辑'},
+                meta: {title: '成本测算', text: '新增编辑', isAuth: true},
                 component: () => import('~src/views/project/cost/form.vue')
             },
             {
                 path: '/project/cost-data',
                 name: 'project-cost-data',
-                meta: {title: '成本测算预览'},
+                meta: {title: '成本测算预览', isAuth: true},
                 component: () => import('~src/views/project/cost/data.vue')
             },
             //项目合同
@@ -96,13 +96,13 @@ export default [
             {
                 path: '/project/contract/form',
                 name: 'project-contract-form',
-                meta: {title: '项目合同信息'},
+                meta: {title: '项目合同信息', isAuth: true},
                 component: () => import('~src/views/project/contract/form.vue')
             },
             {
                 path: '/project/contract/update',
                 name: 'project-contract-update',
-                meta: {title: '合同回款更新'},
+                meta: {title: '合同回款更新', isAuth: true},
                 component: () => import('~src/views/project/contract/update.vue')
             },
         ],
@@ -124,13 +124,13 @@ export default [
             {
                 path: '/program/annual-form',
                 name: 'program-annual-form',
-                meta: {title: '年度经营预算信息'},
+                meta: {title: '年度经营预算信息', isAuth: true},
                 component: () => import('~src/views/program/annual/form.vue')
             },
             {
                 path: '/program/annual-view',
                 name: 'program-annual-view',
-                meta: {title: '预览年度经营预算'},
+                meta: {title: '预览年度经营预算', isAuth: true},
                 component: () => import('~src/views/program/annual/view.vue')
             },
             //项目计划预算
@@ -143,7 +143,7 @@ export default [
             {
                 path: '/program/project-form',
                 name: 'program-project-form',
-                meta: {title: '项目计划预算信息'},
+                meta: {title: '项目计划预算信息', isAuth: true},
                 component: () => import('~src/views/program/project/form.vue')
             },
             //部门月度计划预算
@@ -156,7 +156,7 @@ export default [
             {
                 path: '/program/section-form',
                 name: 'program-section-form',
-                meta: {title: '部门月度计划预算信息'},
+                meta: {title: '部门月度计划预算信息', isAuth: true},
                 component: () => import('~src/views/program/section/form.vue')
             },
         ],
@@ -177,7 +177,7 @@ export default [
             {
                 path: '/task/plan',
                 name: 'task-plan',
-                meta: {title: '计划任务执行'},
+                meta: {title: '计划任务执行', isAuth: true},
                 component: () => import('~src/views/task/plan/index.vue')
             },
         ],
@@ -199,7 +199,7 @@ export default [
             {
                 path: '/expense/finReimburse/record',
                 name: 'expense-finReimburse-record',
-                meta: {title: '财务报销记录'},
+                meta: {title: '财务报销记录', isAuth: true},
                 component: () => import('~src/views/expense/finReimburse/record.vue')
             },
             //支付申请
@@ -212,7 +212,7 @@ export default [
             {
                 path: '/expense/paymentRequest/record',
                 name: 'expense-paymentRequest-record',
-                meta: {title: '支付申请记录'},
+                meta: {title: '支付申请记录', isAuth: true},
                 component: () => import('~src/views/expense/paymentRequest/record.vue')
             },
             //借款申请
@@ -225,7 +225,7 @@ export default [
             {
                 path: '/expense/loanRequest/record',
                 name: 'expense-loanRequest-record',
-                meta: {title: '借款申请记录'},
+                meta: {title: '借款申请记录', isAuth: true},
                 component: () => import('~src/views/expense/loanRequest/record.vue')
             },
             //采购申请
@@ -238,7 +238,7 @@ export default [
             {
                 path: '/expense/purchaseRequest/record',
                 name: 'expense-purchaseRequest-record',
-                meta: {title: '采购申请记录'},
+                meta: {title: '采购申请记录', isAuth: true},
                 component: () => import('~src/views/expense/purchaseRequest/record.vue')
             },
             //用车申请
@@ -251,7 +251,7 @@ export default [
             {
                 path: '/expense/vehicleRequest/record',
                 name: 'expense-vehicleRequest-record',
-                meta: {title: '用车申请记录'},
+                meta: {title: '用车申请记录', isAuth: true},
                 component: () => import('~src/views/expense/vehicleRequest/record.vue')
             },
             //发票管理
@@ -264,7 +264,7 @@ export default [
             {
                 path: '/expense/invoice/billing',
                 name: 'expense-invoice-billing',
-                meta: {title: '开票审批'},
+                meta: {title: '开票审批', isAuth: true},
                 component: () => import('~src/views/expense/invoice/billing.vue')
             },
             //外包支付
@@ -277,7 +277,7 @@ export default [
             {
                 path: '/expense/outsourcing/record',
                 name: 'expense-outsourcing-record',
-                meta: {title: '外包支付记录'},
+                meta: {title: '外包支付记录', isAuth: true},
                 component: () => import('~src/views/expense/outsourcing/record.vue')
             },
         ],
@@ -319,13 +319,13 @@ export default [
             {
                 path: '/user/index',
                 name: 'user-index',
-                meta: {title: '个人资料'},
+                meta: {title: '个人资料', isAuth: true},
                 component: () => import('~src/views/user/index.vue')
             },
             {
                 path: '/user/config',
                 name: 'user-config',
-                meta: {title: '主题设置'},
+                meta: {title: '主题设置', isAuth: true},
                 component: () => import('~src/views/user/config.vue')
             },
         ],
@@ -355,19 +355,6 @@ export default [
                 meta: {title: '任务统计'},
                 component: () => import('~src/views/static/plan.vue')
             },
-            {
-                path: '/system/parameter',
-                name: 'system-parameter',
-                meta: {title: '参数配置'},
-                component: () => import('~src/views/system/parameter.vue')
-            },
-            {
-                path: '/system/organization',
-                name: 'system-organization',
-                meta: {title: '组织架构管理'},
-                component: () => import('~src/views/system/organization.vue')
-            },
-
         ],
     },
     {
@@ -426,7 +413,7 @@ export default [
             {
                 path: '/people/archive-info',
                 name: 'people-archive-info',
-                meta: {title: '员工档案信息'},
+                meta: {title: '员工档案信息', isAuth: true},
                 component: () => import('~src/views/people/archive/info.vue')
             },
             {
@@ -438,7 +425,7 @@ export default [
             {
                 path: '/people/contract-info',
                 name: 'people-contract-info',
-                meta: {title: '员工合同信息'},
+                meta: {title: '员工合同信息', isAuth: true},
                 component: () => import('~src/views/people/contract/info.vue')
             },
             {
@@ -459,9 +446,6 @@ export default [
                 meta: {title: '离职管理'},
                 component: () => import('~src/views/people/dimission.vue')
             },
-
-
-
         ],
     },
     // {

src/router/modules/token.js

@@ -1,57 +0,0 @@
-//内置路由需要验证的
-export default [
-    'home',
-    'home-index',
-    'home-admin',
-    'home-task',
-    'home-task-details',
-    'home-budget',
-    'home-budget-form',
-    'home-budget-chart',
-    'project-index',
-    'project-list-info',
-    'project-cost',
-    'project-cost-form',
-    'project-cost-data',
-    'project-contract',
-    'project-contract-form',
-    'project-contract-update',
-    'program-annual',
-    'program-annual-form',
-    'program-annual-view',
-    'program-project',
-    'program-project-form',
-    'program-section',
-    'program-section-form',
-    'logs-index',
-    'user-index',
-    'user-config',
-    'system-user',
-    'system-menu',
-    'system-parameter',
-    'system-parameter-pricetype',
-    'system-parameter-tasktype',
-    'system-parameter-price',
-    'system-parameter-reimbursement',
-    'system-parameter-cost',
-    'system-parameter-approve',
-    'system-parameter-other',
-    'system-organization',
-    'risk-warning',
-    'static-project',
-    'static-plan',
-    'static-actual',
-    'people',
-    'people-company-rule',
-    'people-archive',
-    'people-archive-info',
-    'people-contract',
-   ' people-contract-info',
-    'people-salary',
-    'people-entry',
-    'people-dimission',
-    'attendance',
-    'attendance-business-trip',
-    'attendance-business-trip-info',
-    'attendance-statistic',
-]

src/store/modules/user.js

@@ -4,7 +4,6 @@ import config from '~src/config/index';
 import {useAppStore} from "~src/store";
 import {getRoutes} from '~api/menu';
 import colorData from '~src/config/color';
-import tokenData from "~src/router/modules/token";
 import {setStoreValue} from "~src/utils/storage";
 import {userLogin, refreshToken, logout} from '~api/user';
 import {userConfigInfo, userConfigSave} from "~api/other";
@@ -79,11 +78,10 @@ export const setRouterData = async () => {
     //数据转换
     let routesObj = {}, routesArr = []
     await ArrToOneObj(resData, 'code', routesObj, routesArr)
-    const routes = [...tokenData, ...routesArr] //合并
     //数据缓存
     store.setMenus(resData)
     setStoreValue('route', routesObj)
-    setStoreValue('routes', routes)
+    setStoreValue('routes', routesArr)
     return Promise.resolve(true);
 }
 

src/views/system/menu.vue

@@ -12,7 +12,7 @@
             </div>
         </template>
         <template #extra>
-            <el-button type="primary" @click="addMenu" size="large">
+            <el-button type="primary" @click="addMenu" size="large" v-auth-btn="['system_menu_add_btn']">
                 <HcIcon name="add"/>
                 <span>新增</span>
             </el-button>
@@ -40,7 +40,7 @@
         </HcTable>
 
         <!--菜单新增编辑-->
-        <HcDialog bgColor="#ffffff" isToBody widths="60rem" :title="formModel.id?'编辑菜单':'修改菜单'"
+        <HcDialog bgColor="#ffffff" isToBody widths="60rem" :title="isCopy?'复制菜单数据':formModel.id?'编辑菜单':'修改菜单'"
                   :show="menuDataModal" @save="menuDataModalSave" @close="menuDataModalClose"
         >
             <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
@@ -101,9 +101,9 @@ onActivated(() => {
 //菜单数据
 const searchForm = ref({name: '', parentId: ''})
 const tableColumn = [
-    {key: 'name', name: '菜单名称', minWidth: 200},
-    {key: 'code', name: '菜单编号', width: 180},
-    {key: 'path', name: '路由地址', minWidth: 200},
+    {key: 'name', name: '菜单名称', minWidth: 260},
+    {key: 'code', name: '菜单编号', width: 240},
+    {key: 'path', name: '路由地址', minWidth: 220},
     {key: 'category', name: '菜单类型', width: 90, align: 'center'},
     {key: 'sort', name: '排序', width: 80, align: 'center' },
     {key: 'remark', name: '菜单备注', minWidth: 200},
@@ -156,7 +156,6 @@ const formRules = {
     code: {required: true, trigger: 'blur', message: "请输入菜单编号"}
 }
 const topMenuoptions = {
-    expandTrigger: 'hover',
     checkStrictly: true,
     emitPath: false,
     value: 'id',
@@ -173,6 +172,7 @@ const addMenu = () => {
         parentId: 0,
         sort: 1
     }
+    isCopy.value = false
     menuDataModal.value = true
 }
 
@@ -182,6 +182,7 @@ const eidtMenu = (row) => {
         ...row,
         children: null
     }
+    isCopy.value = false
     menuDataModal.value = true
 }
 
@@ -195,16 +196,19 @@ const addChildren = (row) => {
         parentId: row.id,
         sort: 1
     }
+    isCopy.value = false
     menuDataModal.value = true
 }
 
 //复制菜单
+const isCopy = ref(false)
 const copyChildren = (row) => {
     formModel.value = {
         ...row,
         children: null,
         id: ''
     }
+    isCopy.value = true
     menuDataModal.value = true
 }
 
@@ -230,6 +234,7 @@ const menuDataModalSave = async () => {
 //弹窗关闭
 const menuDataModalClose = () => {
     menuDataModal.value = false
+    isCopy.value = false
     formModel.value = {}
 }
 </script>