diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index 67d3c193ff0a849cd3a4a30b23a91ebc3e5293a6..5b50eb18a8f23c2ebab36da3a36cfd141e3580cc 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -45,6 +45,8 @@ border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="isExpandAll" + lazy + :load="getChildrenList" > @@ -299,6 +301,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { sys_show_hide, sys_normal_disable } = toRefs(proxy?.useDict('sys_show_hide', 'sys_normal_disable')); const menuList = ref([]); +const menuChildrenListMap = ref({}); const loading = ref(true); const showSearch = ref(true); const menuOptions = ref([]); @@ -340,14 +343,32 @@ const data = reactive>({ const menuTableRef = ref(); const { queryParams, form, rules } = toRefs>(data); + +/** 获取子菜单列表 */ +const getChildrenList = async (row: any, treeNode: unknown, resolve: (data: any[]) => void) => { + resolve(menuChildrenListMap.value[row.menuId] || []); +}; + /** 查询菜单列表 */ const getList = async () => { loading.value = true; const res = await listMenu(queryParams.value); - const data = proxy?.handleTree(res.data, 'menuId'); - if (data) { - menuList.value = data; + + const tempMap = {}; + // 存储 父菜单:子菜单列表 + for (const menu of res.data) { + const parentId = menu.parentId; + if (!tempMap[parentId]) { + tempMap[parentId] = []; + } + tempMap[parentId].push(menu); + } + // 设置有没有子菜单 + for (const menu of res.data) { + menu['hasChildren'] = tempMap[menu.menuId]?.length > 0; } + menuChildrenListMap.value = tempMap; + menuList.value = tempMap[0] || []; loading.value = false; }; /** 查询菜单下拉树结构 */ @@ -393,7 +414,14 @@ const handleToggleExpandAll = () => { }; /** 展开/折叠所有 */ const toggleExpandAll = (data: MenuVO[], status: boolean) => { - data.forEach((item: MenuVO) => { + data.forEach(async (item: MenuVO) => { + const menuChildrenList = menuChildrenListMap.value[item.menuId]; + // 从menuChildrenListMap中获取子菜单列表 + if (menuChildrenList && (!item.children || item.children.length === 0)) { + item.children = menuChildrenList || []; + // 等待子菜单列表加载完成 + await nextTick(); + } menuTableRef.value?.toggleRowExpansion(item, status); if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); });