静态页面

src/layout/index.vue

@@ -57,15 +57,30 @@
 </template>
 
 <script setup name="Layout">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useAppStore, useUserStore } from '@/store';
+import { useRouter, useRoute } from 'vue-router';
 import LeftMenu from './left-menu.vue';
 import { Color } from 'tvision-color';
 import { generateColorMap, insertThemeStylesheet } from '@/config/color';
+import { moduleMap } from '@/router/asyncRoutes';
 
+const router = useRouter();
+const route = useRoute();
 const appStore = useAppStore();
 const userStore = useUserStore();
-const moduleChange = () => {};
+const moduleChange = (name) => {
+  userStore.setCurPageModule(name);
+  router.push({ name });
+};
+const setModuleByPath = () => {
+  let firstPath = route.path.split('/')[1];
+  let curModuleName = moduleMap[firstPath];
+  userStore.setCurPageModule(curModuleName);
+};
+onMounted(() => {
+  setModuleByPath();
+});
 const colorOptions = ref([
   { content: '默认主题', value: '#0052d9' },
   { content: '天蓝主题', value: '#2fa4e7' },

src/layout/left-menu.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="left-menu">
     <t-menu
+      :key="key"
       theme="dark"
       v-model:expanded="openKeys"
       :default-value="activeKey"
@@ -35,7 +36,7 @@
 
 <script setup name="LeftMenu">
 import { ref, watch, onBeforeMount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useAppStore, useUserStore } from '@/store';
 import childrenMenu from './children-menu.vue';
 
@@ -46,32 +47,43 @@ const activeKey = ref('');
 const openKeys = ref([]);
 const appStore = useAppStore();
 const userStore = useUserStore();
-
-const title = ref('');
+const key = ref(new Date().getTime() + '');
 
 onBeforeMount(() => {
   activeKey.value = route.name;
   setOpenMenu();
 });
+onBeforeRouteUpdate((to) => {
+  activeKey.value = to.name;
+});
+watch(
+  () => userStore.moduleMenus,
+  () => {
+    setOpenMenu();
+    setTimeout(() => {
+      key.value = new Date().getTime() + '';
+    }, 0);
+  }
+);
 const onCollapse = () => {
   appStore.toggleMenu();
 };
-// watch(
-//   () => route,
-//   (v) => {
-//     initMenu();
-//   },
-//   { deep: true }
-// );
 const setOpenMenu = () => {
   openKeys.value = [];
-  if (route.matched.length && route.matched.length > 1) {
-    const last = route.matched[route.matched.length - 1];
-    if (last.meta && Array.isArray(last.meta.breadcrumb))
-      last.meta.breadcrumb.map((item) => {
-        openKeys.value.push(item.name);
-      });
+  //如果初始化的时候左侧全部展开
+  const moduleMenus = userStore.moduleMenus;
+  for (const item of moduleMenus) {
+    openKeys.value.push(item.name);
   }
+
+  //如果只展开当前页面所在的父菜单
+  // if (route.matched.length && route.matched.length > 1) {
+  //   const last = route.matched[route.matched.length - 1];
+  //   if (last.meta && Array.isArray(last.meta.breadcrumb))
+  //     last.meta.breadcrumb.map((item) => {
+  //       openKeys.value.push(item.name);
+  //     });
+  // }
 };
 </script>
 

src/mock/index.js

@@ -4,7 +4,7 @@ const menusList = [
   {
     id: 1,
     title: '服务单元管理',
-    parentId: -1,
+    parentId: 0,
     url: '/service-unit-manage',
     sort: 1,
     name: 'ServiceUnitManage',
@@ -57,6 +57,30 @@ const menusList = [
     sort: 3,
     name: 'RegionalPlanning',
   },
+  {
+    id: 8,
+    title: 'SOP管理',
+    parentId: 0,
+    url: '/sop',
+    sort: 2,
+    name: 'Sop',
+  },
+  {
+    id: 9,
+    title: 'SOP管理',
+    parentId: 8,
+    url: '/sop/sop-manage',
+    sort: 1,
+    name: 'SopManage',
+  },
+  {
+    id: 10,
+    title: '教务处SOP管理',
+    parentId: 9,
+    url: '/sop/sop-manage/office-sop',
+    sort: 1,
+    name: 'OfficeSop',
+  },
 ];
 
 export const menusApi = Mock.mock('/api/getMenus', 'get', () => {

src/router/asyncRoutes.js

@@ -1,3 +1,9 @@
 import serviceUnitManage from './modules/serviceUnitManage';
+import sop from './modules/sop';
 
-export default [serviceUnitManage];
+const asyncRoutes = [serviceUnitManage, sop];
+export const moduleMap = asyncRoutes.reduce((obj, item) => {
+  obj[item.path.slice(1)] = item.name;
+  return obj;
+}, {});
+export default asyncRoutes;

src/router/modules/serviceUnitManage.js

@@ -5,7 +5,7 @@ export default {
   meta: {
     title: '服务单元管理',
     sort: 1,
-    icon: 'bulletpoint',
+    isModule: true,
   },
   children: [
     {

src/router/modules/sop.js

@@ -0,0 +1,34 @@
+export default {
+  name: 'Sop',
+  path: '/sop',
+  redirect: '/sop/sop-manage',
+  meta: {
+    title: 'SOP管理',
+    sort: 2,
+    isModule: true,
+  },
+  children: [
+    {
+      name: 'SopManage',
+      path: '/sop/sop-manage',
+      redirect: '/sop/sop-manage/office-sop',
+      meta: {
+        title: 'SOP管理',
+        sort: 1,
+        icon: '',
+      },
+      children: [
+        {
+          name: 'OfficeSop',
+          path: '/sop/sop-manage/office-sop',
+          component: () =>
+            import('@/views/sop/sop-manage/office-sop/index.vue'),
+          meta: {
+            title: '教务处SOP管理',
+            sort: 1,
+          },
+        },
+      ],
+    },
+  ],
+};

src/store/modules/user.js

@@ -104,8 +104,6 @@ const useUserStore = defineStore('user', {
     },
     setCurPageModule(name) {
       this.curPageModule = name;
-    },
-    setModuleMenusByName(name) {
       let item = this.menus.find((item) => item.name === name);
       this.moduleMenus = item.children;
     },
@@ -125,7 +123,6 @@ const useUserStore = defineStore('user', {
       if (menus.length) {
         this.setHeaderMenus(menus);
         this.setCurPageModule(menus[0].name);
-        this.setModuleMenusByName(menus[0].name);
       }
     },
 

src/style/animation.less

@@ -52,7 +52,7 @@
 /* fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .fade-slide-enter-from {

src/views/service-unit-manage/dispatch/dispatch-manage/add-dispatch-dialog.vue

@@ -29,10 +29,10 @@
       <t-form-item label="客户名称：">
         <t-select v-model="formData.g"></t-select>
       </t-form-item>
-      <t-form-item label="考试开始时间">
+      <t-form-item label="考试开始时间：">
         <t-date-picker v-model="formData.h" />
       </t-form-item>
-      <t-form-item label="考试结束时间">
+      <t-form-item label="考试结束时间：">
         <t-date-picker v-model="formData.i" />
       </t-form-item>
       <t-form-item label="实施产品：">

src/views/service-unit-manage/dispatch/dispatch-manage/delineation-dialog.vue

@@ -10,7 +10,7 @@
   >
     <div class="form-title">派单信息</div>
     <t-form ref="formRef" :model="formData">
-      <t-form-item label="服务单元名称">
+      <t-form-item label="服务单元名称：">
         <t-select v-model="formData.a"></t-select>
       </t-form-item>
     </t-form>

src/views/service-unit-manage/dispatch/dispatch-manage/mult-delineation-dialog.vue

@@ -9,7 +9,7 @@
     :closeOnOverlayClick="false"
   >
     <t-form ref="formRef" :model="formData">
-      <t-form-item label="服务单元名称">
+      <t-form-item label="服务单元名称：">
         <t-select v-model="formData.a"></t-select>
       </t-form-item>
     </t-form>

src/views/service-unit-manage/service-unit/regional-planning/add-region-dialog.vue

@@ -8,10 +8,10 @@
     :closeOnOverlayClick="false"
   >
     <t-form ref="formRef" :model="formData" layout="inline">
-      <t-form-item label="服务单元名称">
+      <t-form-item label="服务单元名称：">
         <t-select v-model="formData.a"> </t-select>
       </t-form-item>
-      <t-form-item label="大区经理">
+      <t-form-item label="大区经理：">
         <t-select v-model="formData.b"> </t-select>
       </t-form-item>
       <t-transfer

src/views/sop/sop-manage/office-sop/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="office-sop">教务处SOP</div>
+</template>
+
+<script setup name="OfficeSop"></script>
+
+<style></style>