菜单动态展示

src/components/SliderVerify/index.vue

@@ -71,6 +71,7 @@ import {
   toRefs,
 } from 'vue'
 import {Popup, Loading, Toast} from 'vant'
+import {getAssetsFile} from "@/utils/other";
 
 const l = 42 // 滑块边长
 const r = 9 // 滑块圆半径
@@ -313,22 +314,21 @@ export default defineComponent({
         return Math.floor(Math.random() * (min - max) + max)
       }
 
-      // const img = state.$refs.bgImgRef
+            // const img = state.$refs.bgImgRef
-      // img.src = require(`./images/bg${bgRandom}.jpg`)
+            // img.src = require(`./images/bg${bgRandom}.jpg`)
-      const bgRandom = random(4, 0)
+            const bgRandom = random(4, 0)
-      const img = new Image()
+            const img = new Image()
-      img.crossOrigin = 'Anonymous'
+            img.crossOrigin = 'Anonymous'
-      img.src = props.imgUrl
+            img.src = props.imgUrl
-          ? props.imgUrl
+                    ? props.imgUrl
-          : `/medical/src/assets/imgs/SliderVerify/SliderVerify-${bgRandom}.jpg`
+                    : getAssetsFile(`imgs/SliderVerify/SliderVerify-${bgRandom}.jpg`)
-      img.onerror = () => {
+            img.onerror = () => {
-        Toast({
+                Toast({
-          message: '图片加载失败',
+                    message: '图片加载失败',
-          position: 'top',
+                    position: 'top',
-        })
+                })
-        img.src =
+                img.src = getAssetsFile('imgs/SliderVerify/SliderVerify-error.png')
-            '/medical/src/assets/imgs/SliderVerify/SliderVerify-error.png'
+            }
-      }
 
       /**
        * 默认width

src/router/routes.ts

@@ -21,7 +21,6 @@ export const constantRoute = [
       {
         path: '/permissions-manage',
         name: '权限管理',
-        redirect: '/permissions-manage/doctor-manage',
         component: () => import('@/views/permissions-manage/index.vue'),
         children: [
           {
@@ -44,7 +43,6 @@ export const constantRoute = [
       {
         path: '/patients-manage',
         name: '患者管理',
-        redirect: '/patients-manage/patients-manage',
         component: () => import('@/views/patients-manage/index.vue'),
         children: [
           {
@@ -62,7 +60,6 @@ export const constantRoute = [
       {
         path: '/remote-manage',
         name: '远程管理',
-        redirect: '/remote-manage/remote-manage',
         component: () => import('@/views/remote-manage/index.vue'),
         children: [
           {
@@ -113,7 +110,6 @@ export const constantRoute = [
       {
         path: '/logs-manage',
         name: '系统管理',
-        redirect: '/logs-manage/message-manage',
         component: () => import('@/views/logs-manage/index.vue'),
         children: [
           {

src/stores/user-info-store.ts

@@ -1,79 +1,91 @@
 import {defineStore} from 'pinia'
 import {getUserMenu} from "@/api/menu";
-import {Session} from "@/utils/storage";
+import {Local, Session} from "@/utils/storage";
 import router from "@/router";
 
 export const useUserStore = defineStore('login', {
-  state: () => {
+    state: () => {
-    return {
+        return {
-      userInfo: {
+            userInfo: {
-        account: '',
+                account: '',
-        name: '',
+                name: '',
-        /**
+                /**
-         * 公司： 后台管理
+                 * 公司： 后台管理
-         * 医院高级管理员： 首页、权限管理、患者管理、远程管理、日志管理
+                 * 医院高级管理员： 首页、权限管理、患者管理、远程管理、日志管理
-         * 医院中级管理员： 首页、患者管理、远程管理
+                 * 医院中级管理员： 首页、患者管理、远程管理
-         * 医院普通用户： 首页、患者管理
+                 * 医院普通用户： 首页、患者管理
-         */
+                 */
-        hospitalName: '',
+                hospitalName: '',
-        hospitalId: '',
+                hospitalId: '',
-        menuPathList: {
+                menuPathList: {
-          paths: [],
+                    paths: [],
-          menus: []
+                    menus: []
-        },
+                },
-        roleName: ''
+                roleName: ''
-      } as any,
+            } as any,
-      showHomeMsg: false
+            showHomeMsg: false
-    }
+        }
-  },
+    },
-  actions: {
+    actions: {
-    getlogin() {
+        getlogin() {
-      const onlineUser = Session.get("onlineUser");
+            const onlineUser = Session.get("onlineUser");
-      return this.userInfo.account ? this.userInfo : onlineUser
+            return this.userInfo.account && this.userInfo.account != null ? this.userInfo : onlineUser
-    },
+        },
-    setlogin(key: string, e: any) {
+        setlogin(key: string, e: any) {
-      this.userInfo[key] = e
+            this.userInfo[key] = e
-      Session.set("onlineUser", this.userInfo);
+            Session.set("onlineUser", this.userInfo);
-    },
+        },
-    logout() {
+        logout() {
-      Session.clear();
+            Session.clear();
-      router.removeRoute("root");
+            Local.clear();
-      router.addRoute({
+            router.removeRoute("root");
-        name: "root",
+            router.addRoute({
-        path: "/",
+                name: "root",
-        redirect: "/login"
+                path: "/",
-      })
+                redirect: "/login"
-    },
+            })
-    getMenuPathList(): Promise<any> {
+        },
-      return new Promise(resolve => {
+        getMenuPathList(): Promise<any> {
-        if (this.userInfo.menuPathList.paths.length == 0) {
+            return new Promise(resolve => {
-          getUserMenu().then((res: any) => {
+                if (this.userInfo.menuPathList.paths.length == 0) {
-            if (res && res.code == 0) {
+                    getUserMenu().then((res: any) => {
-              const paths: any = [];
+                        if (res && res.code == 0) {
-              const menus: any = [];
+                            const paths: any = [];
-              res.data.forEach((item: any) => {
+                            const menus: any = [];
-                handleMenuPath(item, paths, menus);
+                            res.data.forEach((item: any) => {
-              });
+                                handleMenuPath(item, paths, menus);
-              this.userInfo.menuPathList = {paths, menus};
+                            });
-              resolve(this.userInfo.menuPathList);
+                            this.userInfo.menuPathList = {paths, menus};
-            }
+                            resolve(this.userInfo.menuPathList);
-          })
+                        }
-        } else {
+                    })
-          resolve(this.userInfo.menuPathList)
+                } else {
+                    resolve(this.userInfo.menuPathList)
+                }
+            })
+        },
+        getMenuChild(path: string) {
+            return new Promise(resolve => {
+                this.getMenuPathList().then((res: any) => {
+                    res.menus.forEach((menu: any) => {
+                        if (menu.path == path) {
+                            resolve(menu.children)
+                        }
+                    });
+                })
+            })
         }
-      })
     }
-  },
 })
 
 function handleMenuPath(menu: any, paths: any, menus?: any) {
-  paths.push(menu.path);
+    paths.push(menu.path);
-  if (menus) {
+    if (menus) {
-    menus.push(menu);
+        menus.push(menu);
-  }
+    }
-  if (menu.children && menu.children.length > 0) {
+    if (menu.children && menu.children.length > 0) {
-    menu.children.forEach((child: any) => {
+        menu.children.forEach((child: any) => {
-      handleMenuPath(child, paths);
+            handleMenuPath(child, paths);
-    })
+        })
-  }
+    }
 }

src/utils/other.ts

@@ -68,4 +68,10 @@ function rgbToHex(r: number, g: number, b: number) {
 function componentToHex(c: number) {
 	const hex = c.toString(16);
 	return hex.length == 1 ? "0" + hex : hex;
+}
+
+
+// 获取assets静态资源
+export const getAssetsFile = (url: string) => {
+	return new URL(`../assets/${url}`, import.meta.url).href
 }

src/views/login/login.vue

@@ -2,11 +2,11 @@
   <div class="login-page">
     <div class="left-content move_4"></div>
     <div class="right-content">
-      <div class="select-hospital-box">
+<!--      <div class="select-hospital-box">
         <el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
           <el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
         </el-select>
-      </div>
+      </div>-->
 
       <img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
       <div v-if="!isShowRegister" class="login-block move_2">
@@ -211,9 +211,9 @@ const currentHospital = ref("")
 const isShowRegister = ref(false)
 const passwordLogin = ref(true)
 const loginParams = ref({
-  account: 'admin',
+  account: '',
   name: '',
-  password: '123456',
+  password: '',
   phone: '',
   phoneArea: phoneAreas[0],
   code: '',

src/views/logs-manage/index.vue

@@ -17,21 +17,27 @@
 </template>
 
 <script lang='ts' setup>
-import {onMounted, reactive, ref, toRefs, watch} from 'vue'
+import {onMounted, ref} from 'vue'
 import type {MenuItem} from '@/utils/public-interface'
 import CommonMenu from '@/components/common-menu.vue'
-import PageTabs from '@/components/page-tabs.vue'
+import {useUserStore} from "@/stores/user-info-store";
+import {useRoute, useRouter} from "vue-router";
 
-const menuData = [
+const router = useRouter()
-  {name: '消息管理', path: '/logs-manage/message-manage'},
+const route = useRoute()
-  {name: '日志管理', path: '/logs-manage/logs-manage'},
+const menuData = ref([])
-  {name: "词典管理", path: '/logs-manage/dict-manage'}
-]
-
-const pageTabsRef = ref()
 const selectMenu = (e: MenuItem) => {
-  // pageTabsRef.value.setTab(e)
+    // pageTabsRef.value.setTab(e)
 }
+
+onMounted(async () => {
+    const paths = route.path.split("/")
+    const e: any = await useUserStore().getMenuChild("/" + paths[1])
+    menuData.value = e
+    if (e && e.length > 0) {
+        router.push(e[0].path)
+    }
+})
 </script>
 
 <style lang='scss' scoped>

src/views/patients-manage/index.vue

@@ -17,17 +17,27 @@
 </template>
 
 <script lang='ts' setup>
-import {ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import type {MenuItem} from '@/utils/public-interface'
 import CommonMenu from '@/components/common-menu.vue'
 import PageTabs from '@/components/page-tabs.vue'
+import {useRoute, useRouter} from "vue-router";
+import {useUserStore} from "@/stores/user-info-store";
 
-const menuData = [
+const menuData = ref([])
-    { name: '患者管理', path: '/patients-manage/patients-manage' },
-    { name: '手术信息', path: '/patients-manage/surgery-info' }
-]
-
 const pageTabsRef = ref()
+const router = useRouter()
+const route = useRoute()
+
+onMounted(async () => {
+    const paths = route.path.split("/")
+    const e: any = await useUserStore().getMenuChild("/" + paths[1])
+    menuData.value = e
+    if (e && e.length > 0) {
+        router.push(e[0].path)
+    }
+})
+
 const selectMenu = (e: MenuItem) => {
     pageTabsRef.value.setTab(e)
 }

src/views/permissions-manage/index.vue

@@ -17,21 +17,31 @@
 </template>
 
 <script lang='ts' setup>
-import {ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import type {MenuItem} from '@/utils/public-interface'
 import CommonMenu from '@/components/common-menu.vue'
 import PageTabs from '@/components/page-tabs.vue'
+import {useRoute, useRouter} from "vue-router";
+import {useUserStore} from "@/stores/user-info-store";
 
-const menuData = [
+const router = useRouter()
-    { name: '医生管理', path: '/permissions-manage/doctor-manage' },
+const route = useRoute()
-    { name: '角色管理', path: '/permissions-manage/role-manage' },
+const menuData = ref([])
-    { name: '菜单管理', path: '/permissions-manage/menu-manage' }
-]
 
 const pageTabsRef = ref()
 const selectMenu = (e: MenuItem) => {
     pageTabsRef.value.setTab(e)
 }
+
+onMounted(async () => {
+    const paths = route.path.split("/")
+    const e: any = await useUserStore().getMenuChild("/" + paths[1])
+    menuData.value = e
+    if (e && e.length > 0) {
+        router.push(e[0].path)
+    }
+})
+
 </script>
 
 <style lang='scss' scoped>
@@ -61,6 +71,7 @@ const selectMenu = (e: MenuItem) => {
             width: 100%;
             height: calc(100% - 50px);
             padding: 10px;
+
             .background-block {
                 width: 100%;
                 height: 100%;

src/views/remote-manage/index.vue

@@ -4,6 +4,19 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import {useRoute, useRouter} from "vue-router";
+import {useUserStore} from "@/stores/user-info-store";
+
+const router = useRouter()
+const route = useRoute()
+
+onMounted(async () => {
+    const paths = route.path.split("/")
+    const e: any = await useUserStore().getMenuChild("/" + paths[1])
+    if (e && e.length > 0) {
+        router.push(e[0].path)
+    }
+})
 
 </script>