菜单动态展示

2025-08-23 20:44:58 +08:00 · 2024-06-03 09:34:48 +08:00 · 2024-06-03 09:34:48 +08:00 · 62b15bacb0
parent 3524a8bfb3
commit 62b15bacb0
9 changed files with 168 additions and 114 deletions
--- a/src/components/SliderVerify/index.vue
+++ b/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
-      // img.src = require(`./images/bg${bgRandom}.jpg`)
-      const bgRandom = random(4, 0)
-      const img = new Image()
-      img.crossOrigin = 'Anonymous'
-      img.src = props.imgUrl
-          ? props.imgUrl
-          : `/medical/src/assets/imgs/SliderVerify/SliderVerify-${bgRandom}.jpg`
-      img.onerror = () => {
-        Toast({
-          message: '图片加载失败',
-          position: 'top',
-        })
-        img.src =
-            '/medical/src/assets/imgs/SliderVerify/SliderVerify-error.png'
-      }
+            // const img = state.$refs.bgImgRef
+            // img.src = require(`./images/bg${bgRandom}.jpg`)
+            const bgRandom = random(4, 0)
+            const img = new Image()
+            img.crossOrigin = 'Anonymous'
+            img.src = props.imgUrl
+                    ? props.imgUrl
+                    : getAssetsFile(`imgs/SliderVerify/SliderVerify-${bgRandom}.jpg`)
+            img.onerror = () => {
+                Toast({
+                    message: '图片加载失败',
+                    position: 'top',
+                })
+                img.src = getAssetsFile('imgs/SliderVerify/SliderVerify-error.png')
+            }

      /**
       * 默认width
--- a/src/router/routes.ts
+++ b/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: [
          {
--- a/src/stores/user-info-store.ts
+++ b/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: () => {
-    return {
-      userInfo: {
-        account: '',
-        name: '',
-        /**
-         * 公司： 后台管理
-         * 医院高级管理员： 首页、权限管理、患者管理、远程管理、日志管理
-         * 医院中级管理员： 首页、患者管理、远程管理
-         * 医院普通用户： 首页、患者管理
-         */
-        hospitalName: '',
-        hospitalId: '',
-        menuPathList: {
-          paths: [],
-          menus: []
-        },
-        roleName: ''
-      } as any,
-      showHomeMsg: false
-    }
-  },
-  actions: {
-    getlogin() {
-      const onlineUser = Session.get("onlineUser");
-      return this.userInfo.account ? this.userInfo : onlineUser
-    },
-    setlogin(key: string, e: any) {
-      this.userInfo[key] = e
-      Session.set("onlineUser", this.userInfo);
-    },
-    logout() {
-      Session.clear();
-      router.removeRoute("root");
-      router.addRoute({
-        name: "root",
-        path: "/",
-        redirect: "/login"
-      })
-    },
-    getMenuPathList(): Promise<any> {
-      return new Promise(resolve => {
-        if (this.userInfo.menuPathList.paths.length == 0) {
-          getUserMenu().then((res: any) => {
-            if (res && res.code == 0) {
-              const paths: any = [];
-              const menus: any = [];
-              res.data.forEach((item: any) => {
-                handleMenuPath(item, paths, menus);
-              });
-              this.userInfo.menuPathList = {paths, menus};
-              resolve(this.userInfo.menuPathList);
-            }
-          })
-        } else {
-          resolve(this.userInfo.menuPathList)
+    state: () => {
+        return {
+            userInfo: {
+                account: '',
+                name: '',
+                /**
+                 * 公司： 后台管理
+                 * 医院高级管理员： 首页、权限管理、患者管理、远程管理、日志管理
+                 * 医院中级管理员： 首页、患者管理、远程管理
+                 * 医院普通用户： 首页、患者管理
+                 */
+                hospitalName: '',
+                hospitalId: '',
+                menuPathList: {
+                    paths: [],
+                    menus: []
+                },
+                roleName: ''
+            } as any,
+            showHomeMsg: false
+        }
+    },
+    actions: {
+        getlogin() {
+            const onlineUser = Session.get("onlineUser");
+            return this.userInfo.account && this.userInfo.account != null ? this.userInfo : onlineUser
+        },
+        setlogin(key: string, e: any) {
+            this.userInfo[key] = e
+            Session.set("onlineUser", this.userInfo);
+        },
+        logout() {
+            Session.clear();
+            Local.clear();
+            router.removeRoute("root");
+            router.addRoute({
+                name: "root",
+                path: "/",
+                redirect: "/login"
+            })
+        },
+        getMenuPathList(): Promise<any> {
+            return new Promise(resolve => {
+                if (this.userInfo.menuPathList.paths.length == 0) {
+                    getUserMenu().then((res: any) => {
+                        if (res && res.code == 0) {
+                            const paths: any = [];
+                            const menus: any = [];
+                            res.data.forEach((item: any) => {
+                                handleMenuPath(item, paths, menus);
+                            });
+                            this.userInfo.menuPathList = {paths, menus};
+                            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);
-  if (menus) {
-    menus.push(menu);
-  }
-  if (menu.children && menu.children.length > 0) {
-    menu.children.forEach((child: any) => {
-      handleMenuPath(child, paths);
-    })
-  }
+    paths.push(menu.path);
+    if (menus) {
+        menus.push(menu);
+    }
+    if (menu.children && menu.children.length > 0) {
+        menu.children.forEach((child: any) => {
+            handleMenuPath(child, paths);
+        })
+    }
 }
--- a/src/utils/other.ts
+++ b/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
 }
--- a/src/views/login/login.vue
+++ b/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: '',
--- a/src/views/logs-manage/index.vue
+++ b/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 = [
-  {name: '消息管理', path: '/logs-manage/message-manage'},
-  {name: '日志管理', path: '/logs-manage/logs-manage'},
-  {name: "词典管理", path: '/logs-manage/dict-manage'}
-]
-
-const pageTabsRef = ref()
+const router = useRouter()
+const route = useRoute()
+const menuData = 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>
--- a/src/views/patients-manage/index.vue
+++ b/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 = [
-    { name: '患者管理', path: '/patients-manage/patients-manage' },
-    { name: '手术信息', path: '/patients-manage/surgery-info' }
-]
-
+const menuData = ref([])
 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)
 }
--- a/src/views/permissions-manage/index.vue
+++ b/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 = [
-    { name: '医生管理', path: '/permissions-manage/doctor-manage' },
-    { name: '角色管理', path: '/permissions-manage/role-manage' },
-    { name: '菜单管理', path: '/permissions-manage/menu-manage' }
-]
+const router = useRouter()
+const route = useRoute()
+const menuData = ref([])

 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%;
--- a/src/views/remote-manage/index.vue
+++ b/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>