diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index 5b50eb18a8f23c2ebab36da3a36cfd141e3580cc..f3301fc2e64c3d9d4c70a4139919074ada6ae634 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -302,6 +302,7 @@ const { sys_show_hide, sys_normal_disable } = toRefs(proxy?.useDict('sys_sh const menuList = ref([]); const menuChildrenListMap = ref({}); +const menuExpandMap = ref({}); const loading = ref(true); const showSearch = ref(true); const menuOptions = ref([]); @@ -346,17 +347,41 @@ const { queryParams, form, rules } = toRefs>(data) /** 获取子菜单列表 */ const getChildrenList = async (row: any, treeNode: unknown, resolve: (data: any[]) => void) => { - resolve(menuChildrenListMap.value[row.menuId] || []); + menuExpandMap.value[row.menuId] = { row, treeNode, resolve }; + const children = menuChildrenListMap.value[row.menuId] || []; + // 菜单的子菜单清空后关闭展开 + if (children.length == 0) { + menuTableRef.value?.updateKeyChildren(row.menuId, children); + } + resolve(children); }; -/** 查询菜单列表 */ -const getList = async () => { - loading.value = true; - const res = await listMenu(queryParams.value); +/** 刷新展开的菜单数据 */ +const refreshLoadTree = (parentId: string | number) => { + if (menuExpandMap.value[parentId]) { + const { row, treeNode, resolve } = menuExpandMap.value[parentId]; + if (row) { + getChildrenList(row, treeNode, resolve); + if (row.parentId) { + const grandpaMenu = menuExpandMap.value[row.parentId]; + getChildrenList(grandpaMenu.row, grandpaMenu.treeNode, grandpaMenu.resolve); + } + } + } +}; + +/** 重新加载所有已展开的菜单的数据 */ +const refreshAllExpandMenuData = () => { + for (const menuId in menuExpandMap.value) { + refreshLoadTree(menuId); + } +}; +/** 处理菜单数据 转为菜单id: 子菜单列表 */ +const handleMenuChildrenListMap = (menuList: MenuVO[]) => { const tempMap = {}; // 存储 父菜单:子菜单列表 - for (const menu of res.data) { + for (const menu of menuList) { const parentId = menu.parentId; if (!tempMap[parentId]) { tempMap[parentId] = []; @@ -364,11 +389,22 @@ const getList = async () => { tempMap[parentId].push(menu); } // 设置有没有子菜单 - for (const menu of res.data) { + for (const menu of menuList) { menu['hasChildren'] = tempMap[menu.menuId]?.length > 0; } menuChildrenListMap.value = tempMap; - menuList.value = tempMap[0] || []; +}; + +/** 查询菜单列表 */ +const getList = async () => { + loading.value = true; + const res = await listMenu(queryParams.value); + // 处理菜单数据 转为菜单id: 子菜单列表 + handleMenuChildrenListMap(res.data); + // 只渲染一级菜单 + menuList.value = menuChildrenListMap.value[0] || []; + // 重新加载展开的菜单 + refreshAllExpandMenuData(); loading.value = false; }; /** 查询菜单下拉树结构 */ @@ -408,22 +444,32 @@ const handleAdd = (row?: MenuVO) => { dialog.title = '添加菜单'; }; /** 展开/折叠操作 */ -const handleToggleExpandAll = () => { +const handleToggleExpandAll = async () => { isExpandAll.value = !isExpandAll.value; - toggleExpandAll(menuList.value, isExpandAll.value); + // 设置所有子菜单 + setAllChildren(menuList.value); + nextTick(() => { + toggleExpandAll(menuList.value, isExpandAll.value); + console.log(new Date().getTime()); + }); }; /** 展开/折叠所有 */ const toggleExpandAll = (data: MenuVO[], status: boolean) => { - data.forEach(async (item: MenuVO) => { + data.forEach((item: MenuVO) => { + menuTableRef.value?.toggleRowExpansion(item, status); + if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); + }); +}; + +/** 设置菜单的子菜单 */ +const setAllChildren = (data: MenuVO[]) => { + data.forEach((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); + if (item.children && item.children.length > 0) setAllChildren(item.children); }); }; /** 修改按钮操作 */