feat: ✨ 新增家动态权限

src/api/index.ts

@@ -3,8 +3,6 @@ import type { AxiosInstance, AxiosError, AxiosRequestConfig, InternalAxiosReques
 import { ElMessage, ElLoading, ElNotification } from 'element-plus'
 import { ResultEnum, ResultData, ContentType } from './interface/index'
 import { GlobalStore } from '@/stores/index'
-// import { useRouter } from 'vue-router'
-// const router = useRouter()
 import router from '@/router/index'
 
 type LoadingType = {
@@ -63,6 +61,11 @@ class RequestHttp {
 
         // * 在请求结束后，并关闭请求 loading
         loadingInstance.close && loadingInstance.close()
+        // 无权限访问（code == 202）
+        if (data.Code === ResultEnum.ROLE) {
+          // router.replace('/404')
+          return Promise.reject(data)
+        }
         // * 登陆失效（code == 201）
         if (data.Code === ResultEnum.OVERDUE) {
           ElNotification.error({
@@ -73,7 +76,6 @@ class RequestHttp {
           globalStore.SET_User_Tokey('')
           localStorage.clear()
           router.replace('/login')
-          console.log('201')
           return Promise.reject(data)
         }
         // * 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）

src/api/interface/index.ts

@@ -6,6 +6,7 @@ export enum ResultEnum {
   SUCCESS = 200,
   ERROR = 500,
   OVERDUE = 201,
+  ROLE = 202,
   TIMEOUT = 10000,
   TYPE = 'success'
 }

src/layouts/Header/Breadcrumb.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { icons } from '@/utils/common'
 import { ArrowRight } from '@element-plus/icons-vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
 const router = useRouter()
 
-const breadcrumbList = computed(() => {
+const breadcrumbList: any = computed(() => {
   return route.matched
 })
 
-const reg = /\w/g
 const isUnicode = (val: string | undefined) => {
   if (!val) return false
-  return reg.test(val)
+  return !/ue/g.test(val)
 }
 
 const onBreadcrumbClick = (item: any, index: number) => {
@@ -30,7 +30,7 @@ const onBreadcrumbClick = (item: any, index: number) => {
             <el-icon class="breadcrumb-icon" v-if="isUnicode(item.meta.icon as string)">
               <component :is="item.meta.icon"></component>
             </el-icon>
-            <i v-else class="iconfont el-icon breadcrumb-icon">{{ item.meta.icon }}</i>
+            <i v-else class="iconfont el-icon breadcrumb-icon">{{ icons[item.meta.icon] }}</i>
             <span class="breadcrumb-title">{{ item.meta.title }}</span>
           </div>
         </el-breadcrumb-item>
@@ -46,6 +46,11 @@ const onBreadcrumbClick = (item: any, index: number) => {
   padding-right: 50px;
   overflow: hidden;
   mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+  color: #fff;
+  .iconfont {
+    width: 16px;
+    color: #fff;
+  }
   .el-breadcrumb {
     white-space: nowrap;
     .el-breadcrumb__item {
@@ -54,18 +59,14 @@ const onBreadcrumbClick = (item: any, index: number) => {
       float: none;
       .el-breadcrumb__inner {
         display: inline-flex;
+        color: #fff;
         .breadcrumb-icon {
-          // margin-top: 2px;
           margin-right: 6px;
           font-size: 16px;
         }
-        .breadcrumb-title {
-          // margin-top: 3px;
-        }
       }
       :deep(.el-breadcrumb__separator) {
         position: relative;
-        // top: -1px;
       }
     }
   }

src/layouts/Header/index.vue

@@ -9,14 +9,42 @@ const router = useRouter()
 const logOut = () => {
   localStorage.clear()
   globalStore.SET_User_Tokey('')
+  globalStore.SET_User_Info({})
+  globalStore.SET_Flat_Menu([])
   router.replace('/login')
 }
+
+// let time =
+
+// let date = new Date()
+// const getDate = ()=>{
+//   let h = date.getHours()
+//   let m = date.getMinutes()
+//   let s = date.getSeconds()
+
+//   h = getzire(h)
+//   m = getzire(m)
+//   s = getzire(s)
+
+//   return `${h}:${m}:${s} ${ h > 12 ? 'pm' : 'am'}`
+// }
+
+// const getzire = (num:number)=>{
+//   if (num < 10){
+//     return '0' + num
+//   }
+//   return num
+// }
+
+// setInterval(() => {
+//   console.log(1)
+// }, 1000)
 </script>
 
 <template>
   <div class="header">
     <el-row>
-      <el-col :span="18" class="d-flex">
+      <el-col :xl="16" :sm="15" class="d-flex">
         <el-button
           class="isCollapse"
           type="primary"
@@ -26,7 +54,7 @@ const logOut = () => {
         ></el-button>
         <Breadcrumb></Breadcrumb>
       </el-col>
-      <el-col :span="2" class="notice">
+      <el-col :xl="2" :sm="2" class="notice">
         <el-dropdown>
           <!-- <el-icon :size="25"><Bell /></el-icon> -->
           <el-button type="primary" circle>
@@ -39,13 +67,18 @@ const logOut = () => {
           </template>
         </el-dropdown>
       </el-col>
-      <el-col :span="4">
+      <el-col :xl="1" :sm="1" class="notice">
+        <el-avatar>
+          <img src="@/assets/images/avatar.jpg" />
+        </el-avatar>
+      </el-col>
+      <el-col :xl="2" :lg="3" :sm="3" class="notice">
         <el-dropdown>
           <div class="avatar">
-            <el-avatar>
-              <img src="@/assets/images/avatar.jpg" />
-            </el-avatar>
-            <span style="padding-left: 16px">{{ globalStore.GET_User_Info.T_name }}</span>
+            <span>{{ globalStore.GET_User_Info.T_name }}</span>
+            <el-icon class="el-icon">
+              <arrow-down />
+            </el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
@@ -54,6 +87,7 @@ const logOut = () => {
           </template>
         </el-dropdown>
       </el-col>
+      <!-- <el-col :xl="2" :sm="3" class="notice">08:20 pm</el-col> -->
     </el-row>
   </div>
 </template>
@@ -61,6 +95,8 @@ const logOut = () => {
 <style scoped lang="scss">
 .header {
   width: 100%;
+  color: #fff;
+  // background-color: rgba(18, 21, 39, 0.86);
   .notice {
     cursor: pointer;
     display: flex;
@@ -79,6 +115,10 @@ const logOut = () => {
     cursor: pointer;
     display: flex;
     align-items: center;
+    span,
+    .el-icon {
+      color: #fff;
+    }
   }
 }
 </style>

src/layouts/Menu/SubMenu.vue

@@ -1,35 +1,38 @@
 <script setup lang="ts" name="SubMenu">
 import { useRouter } from 'vue-router'
+import { icons } from '@/utils/common'
 const router = useRouter()
+
 defineProps<{ menuList: Menu.MenuOptions[] }>()
 const handleClickMenu = (route: Menu.MenuOptions) => {
   router.push(route.path)
 }
+// console.log(prop.menuList)
 
-const reg = /\w/g
 const isUnicode = (val: string | undefined) => {
   if (!val) return false
-  return reg.test(val)
+
+  return !/ue/g.test(val)
 }
 </script>
 
 <template>
   <template v-for="subItem in menuList" :key="subItem.path">
-    <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
+    <el-sub-menu v-if="subItem.Children && subItem.Children.length > 0" :index="subItem.path">
       <template #title>
         <el-icon v-if="isUnicode(subItem.meta.icon)">
           <component :is="subItem.meta.icon"></component>
         </el-icon>
-        <i v-else class="iconfont el-icon">{{ subItem.meta.icon }}</i>
+        <i v-else class="iconfont el-icon">{{ icons[subItem.meta.icon] }}</i>
         <span>{{ subItem.meta.title }}</span>
       </template>
-      <SubMenu :menuList="subItem.children" />
+      <SubMenu :menuList="subItem.Children" />
     </el-sub-menu>
     <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
       <el-icon v-if="isUnicode(subItem.meta.icon)">
         <component :is="subItem.meta.icon"></component>
       </el-icon>
-      <i v-else class="iconfont el-icon">{{ subItem.meta.icon }}</i>
+      <i v-else class="iconfont el-icon">{{ icons[subItem.meta.icon] }}</i>
       <template #title>
         <span>{{ subItem.meta.title }}</span>
       </template>

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import NProgress from 'nprogress'
 import { staticRouter, errorRouter } from './modules/staticRouter'
 import { GlobalStore } from '@/stores/index'
+import { initDynamicRouter } from './modules/asyncRouter'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -11,16 +12,17 @@ const router = createRouter({
 
 const ROUTER_WHITE_LIST = ['/login', '/404']
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   NProgress.start() // 开始加载
   const store = GlobalStore()
   let title = to.meta.title
   title && (document.title = title as string)
-  // console.log(to, from)
-
-  // console.log(store.GET_User_tokey)
 
   if (store.GET_User_tokey && to.path !== '/login') {
+    if (!store.GET_Flat_Menu.length) {
+      await initDynamicRouter()
+      return next({ ...to, replace: true })
+    }
     next()
   } else if (ROUTER_WHITE_LIST.includes(to.path)) {
     if (store.GET_User_tokey) {

src/router/modules/asyncRouter.ts

@@ -1,14 +1,27 @@
 // 动态路由
 import { GlobalStore } from '@/stores/index'
-import router from '@/routers/index'
-import { staticRouter } from './staticRouter'
+import router from '@/router/index'
+import { notFoundRouter } from './staticRouter'
+import { ElNotification } from 'element-plus'
 // 加载views下面所有的.vue文件
 const modules = import.meta.glob('@/views/**/*.vue')
 
-export const asyncRouter = () => {
-  console.log(modules)
+console.log(modules)
 
-  return []
+export const asyncAddRouter = () => {
+  const globalStore = GlobalStore()
+  globalStore.GET_Flat_Menu.forEach((item: any) => {
+    item.children && delete item.children
+    if (item.component && typeof item.component == 'string') {
+      // item.component = modules['/src/views' + item.component + '.vue']
+      console.log(item)
+    }
+    if (item.meta.isFull) {
+      router.addRoute(item)
+    } else {
+      router.addRoute('Index', item)
+    }
+  })
 }
 
 /**
@@ -17,9 +30,33 @@ export const asyncRouter = () => {
 export const initDynamicRouter = async () => {
   const globalStore = GlobalStore()
   try {
+    // 判断是否已经加载过路由了
     // 1.获取菜单列表 && 用户信息
     await globalStore.SET_UserInfo()
     await globalStore.SET_Menu_User_List()
+
     // 2.判断当前用户有没有菜单权限
-  } catch (error) {}
+    if (!globalStore.GET_Menu_List.length) {
+      ElNotification({
+        title: '无权限访问',
+        message: '当前账号无任何菜单权限，请联系系统管理员！',
+        type: 'warning',
+        duration: 3000
+      })
+      globalStore.SET_User_Tokey('')
+      globalStore.SET_User_Info({})
+      router.replace('/login')
+      return Promise.reject('No permission')
+    }
+    // 3.添加动态路由
+    asyncAddRouter()
+
+    // 4.最后添加 notFoundRouter
+    router.addRoute(notFoundRouter)
+  } catch (error) {
+    // 💢 当按钮 || 菜单请求出错时，重定向到登陆页
+    globalStore.SET_User_Tokey('')
+    router.replace('/login')
+    return Promise.reject(error)
+  }
 }

src/router/modules/staticRouter.ts

@@ -8,38 +8,38 @@ export const staticRouter: RouteRecordRaw[] = [
     path: '/index',
     name: 'Index',
     component: () => import('@/views/Index.vue'),
-    redirect: '/home',
+    // redirect: '/home',
     meta: {
       title: '起始页'
     },
     children: [
-      {
-        path: '/home',
-        name: 'Home',
-        component: () => import('@/views/home/index.vue'),
-        meta: {
-          title: '首页',
-          icon: 'HomeFilled'
-        }
-      },
-      {
-        path: '/roles',
-        name: 'Roles',
-        component: () => import('@/views/account/roles/Roles.vue'),
-        meta: {
-          title: '角色管理',
-          icon: '\ue648'
-        }
-      },
-      {
-        path: '/users',
-        name: 'Users',
-        component: () => import('@/views/account/users/Users.vue'),
-        meta: {
-          title: '账户管理',
-          icon: '\ue6a1'
-        }
-      }
+      // {
+      //   path: '/home',
+      //   name: 'Home',
+      //   component: () => import('@/views/home/index.vue'),
+      //   meta: {
+      //     title: '首页',
+      //     icon: 'HomeFilled'
+      //   }
+      // }
+      // {
+      //   path: '/roles',
+      //   name: 'Roles',
+      //   component: () => import('@/views/account/roles/Roles.vue'),
+      //   meta: {
+      //     title: '角色管理',
+      //     icon: '\ue648'
+      //   }
+      // },
+      // {
+      //   path: '/users',
+      //   name: 'Users',
+      //   component: () => import('@/views/account/users/Users.vue'),
+      //   meta: {
+      //     title: '账户管理',
+      //     icon: '\ue6a1'
+      //   }
+      // }
       // {
       //   path: '/salary',
       //   name: 'Salary',
@@ -141,10 +141,14 @@ export const errorRouter = [
     meta: {
       title: '404页面'
     }
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    name: 'notFound',
-    redirect: { name: '404' }
   }
 ]
+
+/**
+ * notFoundRouter(找不到路由)
+ */
+export const notFoundRouter = {
+  path: '/:pathMatch(.*)*',
+  name: 'notFound',
+  redirect: { name: '404' }
+}

src/stores/index.ts

@@ -4,7 +4,7 @@ import { Menu_User_List } from '@/api/role/index'
 import { User_Info } from '@/api/user/index'
 import { isEmptyObject } from '@/utils/common'
 import { User_Dept_List, User_Post_List } from '@/api/user/index'
-import { getAllBreadcrumbList, hanlderMenuList } from '@/utils/common'
+import { flatMenuListGet, AddRouterMeta } from '@/utils/common'
 
 export const GlobalStore = defineStore({
   id: 'GlobalState',
@@ -16,9 +16,10 @@ export const GlobalStore = defineStore({
     UserDeptList: [],
     UserPostList: [],
     User_tokey: localStorage.getItem('User_tokey') || '',
-    MenuList: [],
     path: '',
-    allBreadcrumbList: null
+    MenuList: [],
+    allBreadcrumbList: [],
+    flatMenu: []
   }),
   getters: {
     GET_User_tokey: state => state.User_tokey,
@@ -26,7 +27,8 @@ export const GlobalStore = defineStore({
     GET_isCollapse: state => state.isCollapse,
     GET_Breadcrumb: state => state.breadcrumb,
     GET_User_Info: state => state.userInfo,
-    GET_Menu_List: state => state.MenuList
+    GET_Menu_List: state => state.MenuList,
+    GET_Flat_Menu: state => state.flatMenu
   },
   actions: {
     SET_User_Tokey(payload: string) {
@@ -43,12 +45,15 @@ export const GlobalStore = defineStore({
       })
       this.breadcrumb = map
     },
-    // SET_User_Info(payload: any) {
-    //   this.userInfo = payload
-    // },
+    SET_User_Info(payload: any) {
+      this.userInfo = payload
+    },
     SET_Path(payload: string) {
       this.path = payload
     },
+    SET_Flat_Menu(payload: any) {
+      this.flatMenu = payload
+    },
     async SET_User_Dept_List() {
       const res: any = await User_Dept_List()
       this.UserDeptList = res.Data
@@ -59,20 +64,19 @@ export const GlobalStore = defineStore({
     },
     async SET_UserInfo() {
       // 如果以及有用户数据，则不请求
-      if (!isEmptyObject(this.GET_User_Info)) return
+      if (isEmptyObject(this.GET_User_Info)) return
       const res: any = await User_Info({ User_tokey: this.GET_User_tokey })
       if (res.Code === 200) {
-        this.userInfo = res.Data
+        this.SET_User_Info(res.Data)
         localStorage.setItem('User_info', JSON.stringify(res.Data))
       }
     },
     async SET_Menu_User_List() {
       const res: any = await Menu_User_List({ User_tokey: this.GET_User_tokey })
       if (res.Code === 200) {
-        this.MenuList = res.Data.Data
-        hanlderMenuList(res.Data.Data)
-        this.allBreadcrumbList = getAllBreadcrumbList(res.Data.Data)
-        // console.log(this.allBreadcrumbList)
+        this.MenuList = res.Data.Data // 保存所有菜单
+        this.allBreadcrumbList = AddRouterMeta(res.Data.Data) // 扩展菜单属性
+        this.SET_Flat_Menu(flatMenuListGet(this.allBreadcrumbList)) // 接收扁平化菜单
       }
     }
   }

src/stores/interface/index.ts

@@ -11,6 +11,7 @@ export interface GlobalState {
   MenuList: Menu.MenuOptions[]
   path: string
   allBreadcrumbList: any
+  flatMenu: any
 }
 
 // export interface MenuType {

src/styles/element.scss

@@ -12,6 +12,10 @@
   width: 100%;
 }
 
+.el-header {
+  background-color: rgba(18, 21, 39, 0.86);
+}
+
 .el-form-item__content {
   :deep(.el-date-editor.el-input) {
     width: 100% !important;

src/typings/global.d.ts

@@ -6,10 +6,10 @@ declare namespace Menu {
     component?: string | (() => Promise<any>)
     redirect?: string
     meta: MetaProps
-    children?: MenuOptions[]
+    Children?: MenuOptions[]
   }
   interface MetaProps {
-    icon?: string
+    icon: string
     unicode?: string
     title: string
     activeMenu?: string

src/utils/common.ts

@@ -38,19 +38,71 @@ export const getAllBreadcrumbList = (menuList: any, result: { [key: string]: any
   return result
 }
 
-// {
-//     path: '/home',
-//     name: 'Home',
-//     meta: {
-//       icon: 'HomeFilled',
-//       title: '首页',
-//       isKeepAlive: true
-//     }
-//   },
+const path = {
+  account: ['/roles', '/users'],
+  salary: ['/salaryCount', '/salaryMy', '/salary'],
+  workAttendance: ['/leave', '/myLeave', '/myOvertime', '/overtime', '/recordsFinance', '/records']
+}
 
-export const hanlderMenuList = (menuList: any) => {
-  // console.log(menuList)
+const permissionPath = (permission: string): string => {
+  if (path.account.includes(permission)) {
+    return '/account'
+  } else if (path.salary.includes(permission)) {
+    return '/salary'
+  } else if (path.workAttendance.includes(permission)) {
+    return '/workAttendance'
+  }
+  return ''
 }
+
+const get_name = (name: string): string => {
+  if (/\//.test(name)) {
+    return name.split('/')[1]
+  }
+  return name
+}
+
+const functionucFirst = (str: string) => str[0].toUpperCase() + str.slice(1)
+
+/**
+ * 将扁平化的数组转换成带有meta component字段的新数组
+ * @param menuList []
+ */
+export const AddRouterMeta = (menuList: any) => {
+  let reg = /^[a-zA-Z]+$/
+  menuList.forEach((menu: any) => {
+    if (menu?.Children) {
+      AddRouterMeta(menu?.Children)
+    }
+    menu.path = menu.T_permission
+    menu.name = get_name(menu.T_permission)
+    menu.meta = {
+      icon: reg.test(menu.T_icon) ? menu.T_icon : menu.T_icon.slice(1),
+      title: menu.T_name,
+      isKeepAlive: true
+    }
+    menu.component = permissionPath(menu.T_permission) + '/' + functionucFirst(menu.name)
+  })
+  return menuList
+}
+
+/**
+ * tree to flat
+ * @param menuList []
+ */
+export const flatMenuListGet = (menuList: any) => {
+  const result = []
+  for (let menu of menuList) {
+    if (menu.Children) {
+      let res: any = flatMenuListGet(menu.Children)
+      result.push(...res)
+    } else {
+      result.push({ ...menu })
+    }
+  }
+  return result
+}
+
 /**
  * 分钟转小时
  * @param time
@@ -123,3 +175,26 @@ export function upLoadQiniu(params: any) {
   }
   observable.subscribe(observer)
 }
+
+interface iconsType {
+  [propName: string]: string | number
+}
+
+export const icons: iconsType = {
+  ue7d1: '\ue7d1',
+  ue63e: '\ue63e',
+  ue603: '\ue603',
+  ue636: '\ue636',
+  ue661: '\ue661',
+  ue648: '\ue648',
+  ue6a1: '\ue6a1',
+  ue645: '\ue645',
+  ue619: '\ue619',
+  ue627: '\ue627',
+  ue64c: '\ue64c',
+  ue6aa: '\ue6aa',
+  ue690: '\ue690',
+  ue663: '\ue663',
+  ue7cd: '\ue7cd',
+  ue831: '\ue831'
+}

src/views/Index.vue

@@ -1,174 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import SubMenu from '@/layouts/Menu/SubMenu.vue'
 import Main from '@/layouts/Main/index.vue'
 import Header from '@/layouts/Header/index.vue'
 import { GlobalStore } from '@/stores/index'
 import { useRoute } from 'vue-router'
-import { initDynamicRouter } from '@/router/modules/asyncRouter'
 
 const globalStore = GlobalStore()
 
-const routerList = [
-  {
-    path: '/home',
-    name: 'Home',
-    meta: {
-      icon: 'HomeFilled',
-      title: '首页',
-      isKeepAlive: true
-    }
-  },
-  {
-    path: 'account',
-    name: 'Account',
-    meta: {
-      icon: 'Memo',
-      title: '账户管理',
-      isKeepAlive: true
-    },
-    children: [
-      {
-        path: '/users',
-        name: 'Users',
-        meta: {
-          icon: '\ue6a1',
-          title: '账户管理',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/roles',
-        name: 'Roles',
-        meta: {
-          icon: '\ue648',
-          title: '角色管理',
-          isKeepAlive: true
-        }
-      }
-    ]
-  },
-  // {
-  //   path: '',
-  //   name: '仓库管理',
-  //   iocn: '',
-  //   meta: {
-  //     icon: 'HomeFilled',
-  //     title: '仓库管理',
-  //     isKeepAlive: true
-  //   }
-  // },
-  {
-    path: 'salary',
-    name: '薪资管理',
-    meta: {
-      icon: '\ue663',
-      title: '薪资管理',
-      isKeepAlive: true
-    },
-    children: [
-      {
-        path: '/salary',
-        name: '薪资管理',
-        meta: {
-          icon: '\ue7cd',
-          title: '薪资管理',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/salaryCount',
-        name: '薪资统计',
-        meta: {
-          icon: '\ue831',
-          title: '薪资统计',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/salaryMy',
-        name: '我的薪资',
-        meta: {
-          icon: '\ue7d1',
-          title: '我的薪资',
-          isKeepAlive: true
-        }
-      }
-    ]
-  },
-  {
-    path: 'mangage',
-    name: '考勤管理',
-    meta: {
-      icon: '\ue619',
-      title: '考勤管理',
-      isKeepAlive: true
-    },
-    children: [
-      {
-        path: '/records',
-        name: '统筹管理',
-        meta: {
-          icon: 'DocumentCopy',
-          title: '统筹管理',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/recordsFinance',
-        name: '统筹管理(财务)',
-        meta: {
-          icon: 'Notebook',
-          title: '统筹管理(财务)',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/overtime',
-        name: '加班审批',
-        meta: {
-          icon: '\ue690',
-          title: '加班审批',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/leave',
-        name: '请假审批',
-        meta: {
-          icon: '\ue627',
-          title: '请假审批',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/myOvertime',
-        name: '我的加班',
-        meta: {
-          icon: '\ue64c',
-          title: '我的加班',
-          isKeepAlive: true
-        }
-      },
-      {
-        path: '/myLeave',
-        name: '我的请假',
-        meta: {
-          icon: '\ue6aa',
-          title: '我的请假',
-          isKeepAlive: true
-        }
-      }
-    ]
-  }
-]
+const routerList = computed(() => globalStore.allBreadcrumbList)
 
 onMounted(() => {
   globalStore.SET_User_Dept_List()
-  initDynamicRouter()
-  // if (!isEmptyObject(globalStore.GET_User_Info)) {
-  //   getUserInfo()
-  // }
 })
 
 const route = useRoute()
@@ -187,7 +30,7 @@ const defaultActive = ref<string>(route.path)
             :unique-opened="true"
             active-text-color="#ffd04b"
             text-color="#fff"
-            background-color="#091215"
+            background-color="rgba(18, 21, 39, 0.86)"
           >
             <SubMenu :menu-list="routerList"></SubMenu>
           </el-menu>
@@ -215,7 +58,7 @@ const defaultActive = ref<string>(route.path)
   .el-aside {
     width: auto;
     overflow: inherit;
-    background-color: #091215;
+    background-color: rgba(18, 21, 39, 0.86);
     border-right: 1px solid var(--el-border-color);
     transition: all 0.3s ease;
     .menu {

src/views/account/users/components/DrawerFrom.vue

@@ -82,6 +82,7 @@ const changeDept = async (val: number) => {
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
+  checkPass.value = ''
 }
 
 const callbackDrawer = (done: Fn) => {