Browse Source

fix: 修正菜单联动问题

xyh 2 năm trước cách đây
mục cha
commit
745f8239e4
3 tập tin đã thay đổi với 30 bổ sung13 xóa
  1. 4 1
      src/pages/home/Home.vue
  2. 21 8
      src/pages/home/menu/hooks.tsx
  3. 5 4
      src/utils/format-menu/index.tsx

+ 4 - 1
src/pages/home/Home.vue

@@ -21,7 +21,10 @@ const {suspense} = useQuery({
   queryKey: [getMenuByUserId.name],
   async queryFn({signal}) {
     const data = await getMenuByUserId(signal);
-    return data;
+
+    if (data.msg === '200') return data.data;
+
+    return [];
   },
   suspense: true,
 });

+ 21 - 8
src/pages/home/menu/hooks.tsx

@@ -3,14 +3,27 @@ import {useTabStore, storeToRefs} from '@stores';
 import {find} from 'lodash-es';
 import {useRoute, useRouter} from 'vue-router';
 import {formatMenu} from '@utils';
+import {useQueryClient} from '@tanstack/vue-query';
+import {MenuListData} from '@models';
+import {getMenuByUserId} from '@apis';
 
 export function useMenu() {
-  // TODO:改为正式数据
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueryData<MenuListData[]>([getMenuByUserId.name]);
+
   const basicMenu = [
-    {title: '首页', koTitle: '첫 페이지', id: '-1', img: 'HomeMenuIcon', pid: '0', url: '/main'},
-    {title: '基础资料', koTitle: '기초자료', id: '1', img: 'BookMenuIcon', pid: '0', url: '.'},
-    {title: '菜单管理', koTitle: '메뉴 관리', id: '2', img: '', pid: '1', url: '/menu'},
-    {title: '角色管理', koTitle: '메뉴 관리', id: '3', img: '', pid: '1', url: '/role'},
+    {
+      name: '首页',
+      koreanName: '첫 페이지',
+      id: '-1',
+      img: 'HomeMenuIcon',
+      pid: '0',
+      url: '/main',
+      orderBy: '',
+      modifyTime: '',
+      modifyUser: '',
+    },
+    ...(data ?? []),
   ];
 
   const menuOptions = formatMenu(basicMenu);
@@ -22,7 +35,7 @@ export function useMenu() {
 
   function onExpandedUpdate(keys: string[] | string) {
     expandKeys.length = 0;
-    expandKeys.push(...keys);
+    expandKeys.push(...(Array.isArray(keys) ? keys : [keys]));
   }
 
   function onUpdate(
@@ -42,11 +55,11 @@ export function useMenu() {
     // 页面初始页面不一定是首页需要判断是否需要增加tab
     const idx = basicMenu.findIndex(val => val.url === route.path);
     if (idx < 0) return;
-    const {title, pid, url, id, koTitle} = basicMenu[idx];
+    const {name, pid, url, id, koreanName} = basicMenu[idx];
 
     tabStore.dispatch({
       type: 'ADD',
-      payload: {label: title, key: id, url, pid, koLabel: koTitle},
+      payload: {label: name, key: id, url, pid, koLabel: koreanName},
     });
   });
 

+ 5 - 4
src/utils/format-menu/index.tsx

@@ -1,3 +1,4 @@
+import {MenuListData} from '@models';
 import {renderMenuIcon} from '@utils';
 import {VNodeChild} from 'vue';
 
@@ -11,14 +12,14 @@ export type MenuList = {
   children?: MenuList[],
 };
 
-export function formatMenu(menus: Record<string, string>[]) {
+export function formatMenu(menus: MenuListData[]) {
   const result: MenuList[] = [];
   const tempArea = new Map<string, MenuList[]>();
 
-  menus.forEach(function({title, id, img, pid, url, koTitle}) {
+  menus.forEach(function({name, id, img, pid, url, koreanName}) {
     const temp: MenuList = {
-      label: title,
-      koLabel: koTitle,
+      label: name,
+      koLabel: koreanName,
       key: id,
       pid,
       url,