头部菜单的逻辑设计

components.d.ts

@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     TForm: typeof import('tdesign-vue-next')['Form']
     TFormItem: typeof import('tdesign-vue-next')['FormItem']
     THeader: typeof import('tdesign-vue-next')['Header']
+    THeadMenu: typeof import('tdesign-vue-next')['HeadMenu']
     TIcon: typeof import('tdesign-vue-next')['Icon']
     TInput: typeof import('tdesign-vue-next')['Input']
     TInputNumber: typeof import('tdesign-vue-next')['InputNumber']

src/layout/index.vue

@@ -17,7 +17,21 @@
     <t-layout class="right-content">
       <t-header class="layout-header">
         <div class="h-full header-wrap flex items-center justify-between">
-          <div class="app-name">质控平台</div>
+          <div class="flex-1">
+            <t-head-menu
+              :value="userStore.curPageModule"
+              theme="light"
+              @change="moduleChange"
+            >
+              <t-menu-item
+                :value="item.name"
+                v-for="item in userStore.headerMenus"
+                :key="item.name"
+              >
+                {{ item.meta?.title }}
+              </t-menu-item>
+            </t-head-menu>
+          </div>
           <div class="header-right flex items-center">
             <t-dropdown
               :options="colorOptions"
@@ -54,6 +68,8 @@ import { Color } from 'tvision-color';
 import { generateColorMap, insertThemeStylesheet } from '@/config/color';
 
 const appStore = useAppStore();
+const userStore = useUserStore();
+const moduleChange = () => {};
 const colorOptions = ref([
   { content: '默认主题', value: '#0052d9' },
   { content: '天蓝主题', value: '#2fa4e7' },

src/layout/left-menu.vue

@@ -15,7 +15,7 @@
           <img src="../assets/logo.svg" />
         </div>
       </template>
-      <children-menu v-model="userStore.menus" />
+      <children-menu v-model="userStore.moduleMenus" />
       <template #operations>
         <div
           class="flex justify-center items-center cursor-pointer h-full"

src/mock/index.js

@@ -2,49 +2,46 @@ import Mock from 'mockjs';
 
 const menusList = [
   // {
-  //   id: 1,
-  //   title: '一级菜单1',
+  //   id: 4,
+  //   title: '用户管理',
   //   parentId: -1,
-  //   url: '/menu1',
+  //   url: '/userManage',
   //   sort: 1,
   //   icon: null,
-  //   name: 'Menu1',
+  //   name: 'UserManage',
   // },
   // {
-  //   id: 2,
-  //   title: '二级菜单1-1',
-  //   parentId: 1,
-  //   url: '/menu1/menu1-1',
+  //   id: 5,
+  //   title: '考试管理',
+  //   parentId: -1,
+  //   url: '/examManage',
   //   sort: 2,
   //   icon: null,
-  //   name: 'Menu1-1',
-  // },
-  // {
-  //   id: 3,
-  //   title: '二级菜单1-2',
-  //   parentId: 1,
-  //   url: '/menu1/menu1-2',
-  //   sort: 3,
-  //   icon: null,
-  //   name: 'Menu1-2',
+  //   name: 'ExamManage',
   // },
   {
-    id: 4,
-    title: '用户管理',
+    id: 1,
+    title: '服务单元管理',
     parentId: -1,
-    url: '/userManage',
+    url: '/serviceUnitManage',
     sort: 1,
-    icon: null,
-    name: 'UserManage',
+    name: 'ServiceUnitManage',
   },
   {
-    id: 5,
-    title: '考试管理',
-    parentId: -1,
-    url: '/examManage',
-    sort: 2,
-    icon: null,
-    name: 'ExamManage',
+    id: 2,
+    title: '派单管理',
+    parentId: 1,
+    url: '/serviceUnitManage/dispatch',
+    sort: 1,
+    name: 'Dispatch',
+  },
+  {
+    id: 3,
+    title: '派单管理',
+    parentId: 2,
+    url: '/serviceUnitManage/dispatch/dispatchManage',
+    sort: 1,
+    name: 'DispatchManage',
   },
 ];
 

src/router/asyncRoutes.js

@@ -1,50 +1,10 @@
 import userManage from './modules/userManage';
 import examManage from './modules/examManage';
+//以上两页面作为demo
+import serviceUnitManage from './modules/serviceUnitManage';
 
 export default [
-  ...userManage,
-  ...examManage,
-  // {
-  //   name: 'Menu1',
-  //   path: '/menu1',
-  //   component: () => import('@/views/menu1/index.vue'),
-  //   meta: {
-  //     title: '一级菜单1',
-  //     sort: 1,
-  //     icon: 'home',
-  //   },
-  //   redirect: '/menu1/menu1-1',
-  //   children: [
-  //     {
-  //       name: 'Menu1-1',
-  //       path: '/menu1/menu1-1',
-  //       component: () => import('@/views/menu1/menu1-1/index.vue'),
-  //       meta: {
-  //         title: '二级菜单1-1',
-  //         sort: 1,
-  //         icon: null,
-  //       },
-  //     },
-  //     {
-  //       name: 'Menu1-2',
-  //       path: '/menu1/menu1-2',
-  //       component: () => import('@/views/menu1/menu1-2/index.vue'),
-  //       meta: {
-  //         title: '二级菜单1-2',
-  //         sort: 2,
-  //         icon: null,
-  //       },
-  //     },
-  //   ],
-  // },
-  // {
-  //   name: 'Menu2',
-  //   path: '/menu2',
-  //   component: () => import('@/views/menu2/index.vue'),
-  //   meta: {
-  //     title: '一级菜单2',
-  //     sort: 2,
-  //     icon: 'home',
-  //   },
-  // },
+  // ...userManage,
+  // ...examManage,
+  serviceUnitManage,
 ];

src/router/modules/serviceUnitManage.js

@@ -0,0 +1,37 @@
+export default {
+  name: 'ServiceUnitManage',
+  path: '/serviceUnitManage',
+  redirect: '/serviceUnitManage/dispatch',
+  component: () => import('@/layout/empty.vue'),
+  meta: {
+    title: '服务单元管理',
+    sort: 1,
+    icon: 'bulletpoint',
+  },
+  children: [
+    {
+      name: 'Dispatch',
+      path: '/serviceUnitManage/dispatch',
+      redirect: '/serviceUnitManage/dispatch/dispatchManage',
+      component: () => import('@/layout/empty.vue'),
+      meta: {
+        title: '派单管理',
+        sort: 1,
+        icon: 'bulletpoint',
+      },
+      children: [
+        {
+          name: 'DispatchManage',
+          path: '/serviceUnitManage/dispatch/dispatchManage',
+          component: () =>
+            import('@/views/serviceUnitManage/dispatch/index.vue'),
+          meta: {
+            title: '服务单元管理',
+            sort: 1,
+            icon: 'bulletpoint',
+          },
+        },
+      ],
+    },
+  ],
+};

src/router/routes.js

@@ -4,7 +4,7 @@ const routes = [
     name: 'Layout',
     path: '/',
     component: () => import('@/layout/index.vue'),
-    redirect: '/userManage',
+    redirect: '/serviceUnitManage',
     children: [],
     meta: {
       title: '',

src/store/modules/user.js

@@ -71,6 +71,9 @@ const useUserStore = defineStore('user', {
     routers: undefined,
     user: undefined,
     menus: [],
+    curPageModule: '',
+    headerMenus: [],
+    moduleMenus: [],
   }),
 
   actions: {
@@ -95,13 +98,31 @@ const useUserStore = defineStore('user', {
     resetUserInfo() {
       this.$reset();
     },
-
+    setCurPageModule(name) {
+      this.curPageModule = name;
+    },
+    setModuleMenusByName(name) {
+      let item = this.menus.find((item) => item.name === name);
+      this.moduleMenus = item.children;
+    },
+    setHeaderMenus(menus) {
+      let newMenus = cloneDeep(menus);
+      this.headerMenus = newMenus.map((item) => {
+        delete item.children;
+        return item;
+      });
+    },
     setMenu(data) {
       const menus = filterAsyncRouter(getTreeList(data));
       this.menus = menus;
       const routers = flatAsyncRoutes(cloneDeep(menus));
       this.routers = routers;
       routers.map((item) => router.addRoute('Layout', item));
+      if (menus.length) {
+        this.setHeaderMenus(menus);
+        this.setCurPageModule(menus[0].name);
+        this.setModuleMenusByName(menus[0].name);
+      }
     },
 
     requestUserMenu() {
@@ -141,7 +162,6 @@ const useUserStore = defineStore('user', {
 
     async logout() {
       await userApi.logout();
-      local.remove('tags');
       this.clearToken();
       this.resetUserInfo();
     },

src/utils/tool.js

@@ -37,10 +37,10 @@ const typeColor = (type = 'default') => {
 export const local = {
   set(table, settings) {
     const _set = JSON.stringify(settings);
-    return localStorage.setItem(table, _set);
+    return localStorage.setItem('sop_'+table, _set);
   },
   get(table) {
-    let data = localStorage.getItem(table);
+    let data = localStorage.getItem('sop_'+table);
     try {
       data = JSON.parse(data);
     } catch (err) {
@@ -49,7 +49,7 @@ export const local = {
     return data;
   },
   remove(table) {
-    return localStorage.removeItem(table);
+    return localStorage.removeItem('sop_'+table);
   },
   clear() {
     return localStorage.clear();
@@ -62,10 +62,10 @@ export const local = {
 export const session = {
   set(table, settings) {
     const _set = JSON.stringify(settings);
-    return sessionStorage.setItem(table, _set);
+    return sessionStorage.setItem('sop_'+table, _set);
   },
   get(table) {
-    let data = sessionStorage.getItem(table);
+    let data = sessionStorage.getItem('sop_'+table);
     try {
       data = JSON.parse(data);
     } catch (err) {
@@ -74,7 +74,7 @@ export const session = {
     return data;
   },
   remove(table) {
-    return sessionStorage.removeItem(table);
+    return sessionStorage.removeItem('sop_'+table);
   },
   clear() {
     return sessionStorage.clear();

src/views/serviceUnitManage/dispatch/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="dispatch-manage">派单管理</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>