fix🐛: 菜单 bug

abulo · Jul 1, 2024 · ad2ed14 · ad2ed14
1 parent f3583d5
commit ad2ed14
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 deletions.
diff --git a/admin/src/layouts/LayoutClassic/index.vue b/admin/src/layouts/LayoutClassic/index.vue
@@ -53,7 +53,7 @@ const globalStore = useGlobalStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.meta.id) as string);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : String(route.meta.id)) as string);
 </script>
 
 <style scoped lang="scss">

diff --git a/admin/src/layouts/LayoutColumns/index.vue b/admin/src/layouts/LayoutColumns/index.vue
@@ -48,7 +48,7 @@
 
 <script setup lang="ts" name="layoutColumns">
 import { ref, computed, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 import { useAuthStore } from "@/stores/modules/auth";
 import { useGlobalStore } from "@/stores/modules/global";
 import Main from "@/layouts/components/Main/index.vue";
@@ -65,27 +65,28 @@ const globalStore = useGlobalStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.meta.id) as string);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : String(route.meta.id)) as string);
 
 const subMenuList = ref<Menu.MenuOptions[]>([]);
 const splitActive = ref();
 
+const flatMenuList = computed(() => authStore.flatMenuListGet);
 const getRouteItem = () => {
   const name = route.name;
-  let routeItem: RouteLocationNormalizedLoadedGeneric = null;
+  let routeItemId: number = 0;
   for (const item of route.matched) {
     if (item.name == name) {
-      routeItem = item;
+      routeItemId = Number(item.meta.id);
       break;
     }
   }
-  return routeItem as Menu.MenuOptions;
+  return flatMenuList.value.find(item => item.meta.id === routeItemId);
 };
 
 const getActiveHeaderMenu = () => {
-  const routeItem = getRouteItem();
+  const routeItem = getRouteItem() as Menu.MenuOptions;
   const menuItem = findRootMenuByPath(authStore.authMenuList, routeItem);
-  return menuItem?.meta?.id || "";
+  return String(menuItem?.meta?.id) || "";
 };
 
 watch(
@@ -94,7 +95,7 @@ watch(
     // 当前菜单没有数据直接 return
     if (!menuList.value.length) return;
     splitActive.value = getActiveHeaderMenu();
-    const routeItem = getRouteItem();
+    const routeItem = getRouteItem() as Menu.MenuOptions;
     const menuItem = getShowMenuItem(findRootMenuByPath(authStore.authMenuList, routeItem) as Menu.MenuOptions);
     if (menuItem?.children?.length) return (subMenuList.value = menuItem.children);
     subMenuList.value = [];
@@ -108,7 +109,7 @@ watch(
 // change SubMenu
 const changeSubMenu = (item: Menu.MenuOptions) => {
   let actionRouteItem = findRootMenuByPath(menuList.value, item);
-  splitActive.value = actionRouteItem?.meta?.id || "";
+  splitActive.value = String(actionRouteItem?.meta?.id) || "";
   if (item?.children?.length) return (subMenuList.value = item.children);
   subMenuList.value = [];
   router.push(item.path);

diff --git a/admin/src/layouts/LayoutMixed/index.vue b/admin/src/layouts/LayoutMixed/index.vue
@@ -41,7 +41,7 @@
 
 <script setup lang="ts" name="layoutVertical">
 import { ref, computed, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 import { useAuthStore } from "@/stores/modules/auth";
 import { useGlobalStore } from "@/stores/modules/global";
 import Main from "@/layouts/components/Main/index.vue";
@@ -61,32 +61,33 @@ const asideBoxWidth = computed(() => {
   return isCollapse.value ? 65 : 210;
 });
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.meta.id) as string);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : String(route.meta.id)) as string);
 const subMenuList = ref<Menu.MenuOptions[]>([]);
 const activeHeaderMenu = ref("");
+const flatMenuList = computed(() => authStore.flatMenuListGet);
 const getRouteItem = () => {
   const name = route.name;
-  let routeItem: RouteLocationNormalizedLoadedGeneric = null;
+  let routeItemId: number = 0;
   for (const item of route.matched) {
     if (item.name == name) {
-      routeItem = item;
+      routeItemId = Number(item.meta.id);
       break;
     }
   }
-  return routeItem as Menu.MenuOptions;
+  return flatMenuList.value.find(item => item.meta.id === routeItemId);
 };
 const getActiveHeaderMenu = () => {
-  const routeItem = getRouteItem();
+  const routeItem = getRouteItem() as Menu.MenuOptions;
   const menuItem = findRootMenuByPath(authStore.authMenuList, routeItem);
-  return menuItem?.meta?.id || "";
+  return String(menuItem?.meta?.id) || "";
 };
 watch(
   () => [menuList, route],
   () => {
     // 当前菜单没有数据直接 return
     if (!menuList.value.length) return;
     activeHeaderMenu.value = getActiveHeaderMenu();
-    const routeItem = getRouteItem();
+    const routeItem = getRouteItem() as Menu.MenuOptions;
     const menuItem = getShowMenuItem(findRootMenuByPath(authStore.authMenuList, routeItem) as Menu.MenuOptions);
     if (menuItem?.children?.length) return (subMenuList.value = menuItem.children);
     subMenuList.value = [];

diff --git a/admin/src/layouts/LayoutTransverse/index.vue b/admin/src/layouts/LayoutTransverse/index.vue
@@ -48,7 +48,7 @@ const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.meta.id) as string);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : String(route.meta.id)) as string);
 
 const handleClickMenu = (subItem: Menu.MenuOptions) => {
   if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");

diff --git a/admin/src/layouts/LayoutVertical/index.vue b/admin/src/layouts/LayoutVertical/index.vue
@@ -47,7 +47,7 @@ const globalStore = useGlobalStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.meta.id) as string);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : String(route.meta.id)) as string);
 </script>
 
 <style scoped lang="scss">