Pre Merge pull request !218 from Lau/dev

src/views/system/menu/index.vue

@@ -302,6 +302,7 @@ const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_sh
 
 const menuList = ref<MenuVO[]>([]);
 const menuChildrenListMap = ref({});
+const menuExpandMap = ref({});
 const loading = ref(true);
 const showSearch = ref(true);
 const menuOptions = ref<MenuOptionsType[]>([]);
@@ -346,17 +347,41 @@ const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(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 () => {
+const refreshLoadTree = (parentId: string | number) => {
-  loading.value = true;
+  if (menuExpandMap.value[parentId]) {
-  const res = await listMenu(queryParams.value);
+    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) setAllChildren(item.children);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
   });
 };
 /** 修改按钮操作 */