refact: 提取 tree 工具.

orion-ops-ui/src/assets/style/global.less

@@ -135,10 +135,10 @@ body {
   cursor: pointer;
   border: 1px solid transparent;
   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
-}
 
-.click-icon-wrapper:hover {
+  &:hover {
     background: var(--color-fill-3);
+  }
 }
 
 // -- element

orion-ops-ui/src/components/app/navbar/index.vue

@@ -115,6 +115,19 @@
           </a-button>
         </a-tooltip>
       </li>
+      <!-- 刷新页面 -->
+      <li>
+        <a-tooltip content="刷新页面">
+          <a-button class="nav-btn"
+                    type="outline"
+                    shape="circle"
+                    @click="reloadCurrent">
+            <template #icon>
+              <icon-refresh />
+            </template>
+          </a-button>
+        </a-tooltip>
+      </li>
       <!-- 偏好设置 -->
       <li>
         <a-popover :popup-visible="tippedPreference" position="br">
@@ -184,24 +197,30 @@
 
 <script lang="ts" setup>
   import { computed, inject, ref } from 'vue';
-  import { useDark, useFullscreen, useToggle } from '@vueuse/core';
-  import { useAppStore, useTipsStore, useUserStore } from '@/store';
-  import { LOCALE_OPTIONS } from '@/locale';
   import useLocale from '@/hooks/locale';
   import useUser from '@/hooks/user';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useDark, useFullscreen, useToggle } from '@vueuse/core';
+  import { useAppStore, useTabBarStore, useTipsStore, useUserStore } from '@/store';
+  import { LOCALE_OPTIONS } from '@/locale';
   import { triggerMouseEvent } from '@/utils';
-  import Menu from '@/components/system/menu/tree/index.vue';
-  import MessageBox from '@/components/system/message-box/index.vue';
   import { openAppSettingKey, toggleDrawerMenuKey } from '@/types/symbol';
   import { preferenceTipsKey } from './const';
+  import { REDIRECT_ROUTE_NAME, routerToTag } from '@/router/constants';
+  import Menu from '@/components/system/menu/tree/index.vue';
   import UpdatePasswordModal from '@/components/user/role/update-password-modal.vue';
+  import MessageBox from '@/components/system/message-box/index.vue';
 
   const tipsStore = useTipsStore();
   const appStore = useAppStore();
   const userStore = useUserStore();
+  const tabBarStore = useTabBarStore();
+  const route = useRoute();
+  const router = useRouter();
   const { logout } = useUser();
   const { changeLocale, currentLocale } = useLocale();
   const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
+
   // 主题
   const darkTheme = useDark({
     selector: 'body',
@@ -254,6 +273,23 @@
     triggerMouseEvent(localeRef);
   };
 
+  // 刷新页面
+  const reloadCurrent = async () => {
+    if (appStore.tabBar) {
+      // 重新加载 tab
+      const itemData = routerToTag(route);
+      tabBarStore.deleteCache(itemData);
+      await router.push({
+        name: REDIRECT_ROUTE_NAME,
+        params: { path: route.fullPath },
+      });
+      tabBarStore.addCache(itemData.name);
+    } else {
+      // 刷新页面
+      router.go(0);
+    }
+  };
+
   // 退出登录
   const handleLogout = async () => {
     await logout();

orion-ops-ui/src/components/app/tab-bar/index.vue

@@ -44,9 +44,7 @@
     }
   );
 
-  /**
+  // 监听路由变化
-   * 监听路由变化
-   */
   listenerRouteChange((route: RouteLocationNormalized) => {
     if (
       !route.meta.noAffix &&

orion-ops-ui/src/components/app/tab-bar/tab-item.vue

@@ -112,7 +112,8 @@
   const tagClose = (tag: TagProps, idx: number) => {
     tabBarStore.deleteTab(idx, tag);
     if (props.itemData.fullPath === route.fullPath) {
-      const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
+      // 获取队列的前一个 tab
+      const latest = tagList.value[idx - 1];
       router.push({ name: latest.name });
     }
   };

orion-ops-ui/src/components/system/menu/grant/menu-grant-table.vue

@@ -54,6 +54,7 @@
   import type { MenuQueryResponse } from '@/api/system/menu';
   import { useCacheStore } from '@/store';
   import { ref, watch } from 'vue';
+  import { findNode, flatNodeKeys, flatNodes } from '@/utils/tree';
 
   const cacheStore = useCacheStore();
 
@@ -75,39 +76,35 @@
     return checkedKeys.value;
   };
 
+  // 通过规则 选择/取消选择
+  const checkOrUncheckByRule = (rule: undefined | ((s: string) => boolean), check: boolean) => {
+    unTriggerChange.value = true;
+    const nodes: Array<MenuQueryResponse> = [];
+    flatNodes(menuData.value, nodes);
+    if (rule) {
+      const ruleNodes = nodes.filter(s => s.permission)
+        .filter(s => rule(s?.permission))
+        .map(s => s.id)
+        .filter(Boolean);
+      if (check) {
         // 选择
-  const checked = (rule: undefined | ((s: string) => boolean)) => {
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...ruleNodes])];
-    unTriggerChange.value = true;
-    const nodes: Array<MenuQueryResponse> = [];
-    flatNodes(menuData.value, nodes);
-    if (rule) {
-      const checkedNodes = nodes.filter(s => s.permission)
-        .filter(s => rule(s?.permission))
-        .map(s => s.id)
-        .filter(Boolean);
-      checkedKeys.value = [...new Set([...checkedKeys.value, ...checkedNodes])];
       } else {
-      checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
-    }
-  };
-
         // 取消选择
-  const unchecked = (rule: undefined | ((s: string) => boolean)) => {
+        checkedKeys.value = [...checkedKeys.value].filter(s => !ruleNodes.includes(s));
-    unTriggerChange.value = true;
+      }
-    const nodes: Array<MenuQueryResponse> = [];
-    flatNodes(menuData.value, nodes);
-    if (rule) {
-      const uncheckedNodes = nodes.filter(s => s.permission)
-        .filter(s => rule(s?.permission))
-        .map(s => s.id)
-        .filter(Boolean);
-      checkedKeys.value = [...checkedKeys.value].filter(s => !uncheckedNodes.includes(s));
     } else {
+      if (check) {
+        // 选择
+        checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
+      } else {
+        // 取消选择
         checkedKeys.value = [];
       }
+    }
   };
 
-  defineExpose({ init, getValue, checked, unchecked });
+  defineExpose({ init, getValue, checkOrUncheckByRule });
 
   // 监听级联变化
   watch(checkedKeys, (after: Array<number>, before: Array<number>) => {
@@ -119,7 +116,7 @@
     const beforeLength = before.length;
     if (afterLength > beforeLength) {
       // 选择 一定是最后一个
-      checkMenu(after[afterLength - 1]);
+      checkOrUncheckMenu(after[afterLength - 1], true);
     } else if (afterLength < beforeLength) {
       // 取消
       let uncheckedId = null;
@@ -132,74 +129,28 @@
       if (uncheckedId == null) {
         uncheckedId = before[beforeLength - 1];
       }
-      uncheckMenu(uncheckedId);
+      checkOrUncheckMenu(uncheckedId, false);
     }
   });
 
-  // fixme 提成公共方法
+  // 级联选择/取消选择菜单
-  // 寻找当前节点
+  const checkOrUncheckMenu = (id: number, check: boolean) => {
-  const findNode = (id: number, arr: Array<MenuQueryResponse>): MenuQueryResponse | undefined => {
-    for (let node of arr) {
-      if (node.id === id) {
-        return node;
-      }
-    }
-    // 寻找子级
-    for (let node of arr) {
-      if (node?.children?.length) {
-        const inChildNode = findNode(id, node.children);
-        if (inChildNode) {
-          return inChildNode;
-        }
-      }
-    }
-    return undefined;
-  };
-
-  // 获取所有子节点id
-  const flatChildrenId = (nodes: MenuQueryResponse[] | undefined, result: number[]) => {
-    if (!nodes || !nodes.length) {
-      return;
-    }
-    for (let node of nodes) {
-      result.push(node.id);
-      if (node.children) {
-        flatChildrenId(node.children, result);
-      }
-    }
-  };
-
-  // 展开节点
-  const flatNodes = (nodes: Array<MenuQueryResponse>, result: Array<MenuQueryResponse>) => {
-    if (!nodes || !nodes.length) {
-      return;
-    }
-    nodes.forEach(s => {
-      result.push(s);
-      flatNodes(s.children, result);
-    });
-  };
-
-  // 级联选择菜单
-  const checkMenu = (id: number) => {
     unTriggerChange.value = true;
     // 查询当前节点
-    const node = findNode(id, menuData.value);
+    const node = findNode(id, menuData.value, 'id');
+    if (!node) {
+      return;
+    }
     const childrenId: number[] = [];
     // 获取所在子节点id
-    flatChildrenId(node?.children, childrenId);
+    flatNodeKeys(node.children, childrenId, 'id');
+    if (check) {
+      // 选中
       checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
-  };
+    } else {
-
+      // 取消选择
-  // 级联取消选择菜单
-  const uncheckMenu = (id: number) => {
-    unTriggerChange.value = true;
-    // 查询当前节点
-    const node = findNode(id, menuData.value);
-    const childrenId: number[] = [];
-    // 获取所在子节点id
-    flatChildrenId(node?.children, childrenId);
       checkedKeys.value = checkedKeys.value.filter(s => !childrenId.includes(s));
+    }
   };
 
 </script>

orion-ops-ui/src/components/system/menu/selector/menu-selector-tree.vue

@@ -1,148 +0,0 @@
-<template>
-  <div>
-    <!-- 按钮组 -->
-    <a-button-group class="mb4">
-      <!-- 全选 -->
-      <a-button type="text" size="mini" @click="toggleChecked">
-        {{ checkedKeys?.length === allCheckedKeys?.length ? '反选' : '全选' }}
-      </a-button>
-      <!-- 展开 -->
-      <a-button type="text" size="mini" @click="toggleExpanded">
-        {{ expandedKeys?.length ? '折叠' : '展开' }}
-      </a-button>
-    </a-button-group>
-    <!-- 菜单树 -->
-    <a-tree
-      checked-strategy="child"
-      :checkable="true"
-      :animation="false"
-      :only-check-leaf="true"
-      v-model:checked-keys="checkedKeys"
-      v-model:expanded-keys="expandedKeys"
-      :data="treeData" />
-  </div>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'menu-selector-tree'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { ref } from 'vue';
-  import { useCacheStore } from '@/store';
-
-  const treeData = ref<Array<TreeNodeData>>([]);
-
-  const allCheckedKeys = ref<Array<number>>([]);
-  const allExpandedKeys = ref<Array<number>>([]);
-
-  const checkedKeys = ref<Array<number>>([]);
-  const expandedKeys = ref<Array<number>>([]);
-
-  // 修改选中状态
-  const toggleChecked = () => {
-    checkedKeys.value = checkedKeys.value.length === allCheckedKeys.value.length ? [] : allCheckedKeys.value;
-  };
-
-  // 修改折叠状态
-  const toggleExpanded = () => {
-    expandedKeys.value = expandedKeys?.value.length ? [] : allExpandedKeys.value;
-  };
-
-  // 循环选中的 key
-  const eachAllCheckKeys = (arr: Array<any>) => {
-    arr.forEach((item) => {
-      allCheckedKeys.value.push(item.key);
-      if (item.children && item.children.length) {
-        eachAllCheckKeys(item.children);
-      }
-    });
-  };
-
-  // 循环展开的 key
-  const eachAllExpandKeys = (arr: Array<any>) => {
-    arr.forEach((item) => {
-      if (item.children && item.children.length) {
-        allExpandedKeys.value.push(item.key);
-        eachAllExpandKeys(item.children);
-      }
-    });
-  };
-
-  // 渲染数据
-  const init = (keys: Array<number>) => {
-    // 初始化数据
-    allCheckedKeys.value = [];
-    allExpandedKeys.value = [];
-    checkedKeys.value = keys;
-    expandedKeys.value = [];
-
-    // 渲染菜单
-    const cacheStore = useCacheStore();
-    let render = (arr: any[]): TreeNodeData[] => {
-      return arr.map((s) => {
-        // 当前节点
-        const node = {
-          key: s.id,
-          title: s.name,
-          children: undefined as unknown
-        } as TreeNodeData;
-        // 子节点
-        if (s.children && s.children.length) {
-          node.children = render(s.children);
-        }
-        return node;
-      }).filter(Boolean);
-    };
-
-    // 加载菜单
-    treeData.value = render([...cacheStore.menus]);
-    // 加载所有选中的key
-    eachAllCheckKeys(treeData.value);
-    // 加载所有展开的key
-    eachAllExpandKeys(treeData.value);
-  };
-  init([]);
-
-  // 获取值
-  const getValue = () => {
-    if (!checkedKeys.value.length) {
-      return [];
-    }
-    // 查询子节点上级父节点
-    const mixed: number[] = [];
-    const findParent = (arr: Array<TreeNodeData>, key: number) => {
-      for (let node of arr) {
-        // 是子节点 并且相同
-        if (node.key === key) {
-          mixed.push(key);
-          return true;
-        }
-        if (node.children?.length) {
-          const isFind = findParent(node.children, key);
-          if (isFind) {
-            mixed.push(node.key as number);
-            return true;
-          }
-        }
-      }
-      return false;
-    };
-
-    // 设置所有节点
-    for (let key of checkedKeys.value) {
-      findParent(treeData.value, key);
-    }
-    return new Set(mixed);
-  };
-
-  defineExpose({ init, getValue });
-
-</script>
-
-<style lang="less" scoped>
-
-</style>;

orion-ops-ui/src/utils/index.ts

@@ -179,6 +179,13 @@ export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
     }, 0);
 };
 
+/**
+ * 休眠
+ */
+export const sleep = (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+
 /**
  * 获取当前页面的缩放值
  */

orion-ops-ui/src/utils/tree.ts

@@ -0,0 +1,116 @@
+import type { NodeData } from '@/types/global';
+
+// 寻找当前节点
+export const findNode = <T extends NodeData>(key: any,
+                                             nodes: Array<T>,
+                                             keyName = 'key'): T => {
+  if (!nodes || !nodes.length) {
+    return undefined as unknown as T;
+  }
+  for (let node of nodes) {
+    if (node[keyName] === key) {
+      return node;
+    }
+  }
+  // 寻找子级
+  for (let node of nodes) {
+    if (node.children?.length) {
+      const childrenNode = findNode(key, node.children, keyName);
+      if (childrenNode) {
+        return childrenNode as T;
+      }
+    }
+  }
+  return undefined as unknown as T;
+};
+
+// 寻找父节点
+export const findParentNode = <T extends NodeData>(key: any,
+                                                   nodes: Array<T>,
+                                                   keyName = 'key',
+                                                   parent = (undefined as unknown as T)): T => {
+  if (!nodes || !nodes.length) {
+    return undefined as unknown as T;
+  }
+  for (let node of nodes) {
+    if (node[keyName] === key) {
+      if (parent) {
+        return parent;
+      } else {
+        // 根节点
+        return {
+          root: true
+        } as unknown as T;
+      }
+    }
+  }
+  // 寻找子级
+  for (let node of nodes) {
+    if (node.children?.length) {
+      const parentNode = findParentNode(key, node.children, keyName, node);
+      if (parentNode) {
+        return parentNode as T;
+      }
+    }
+  }
+  return undefined as unknown as T;
+};
+
+// 级联寻找父节点
+export const findParentNodes = <T extends NodeData>(key: any,
+                                                    nodes: Array<T>,
+                                                    result: Array<T>,
+                                                    keyName = 'key',
+                                                    parent = ([] as T[])) => {
+  if (!nodes || !nodes.length) {
+    return;
+  }
+  for (let node of nodes) {
+    if (node[keyName] === key) {
+      result.push(...parent);
+      return;
+    }
+  }
+  // 寻找子级
+  for (let node of nodes) {
+    if (node.children?.length) {
+      const currentParent = [...parent, node];
+      findParentNodes(key, node.children, result, keyName, currentParent);
+    }
+  }
+};
+
+// 检查是否包含子节点 单层
+export const hasChildren = <T extends NodeData>(key: string,
+                                                nodes: Array<T>,
+                                                keyName = 'key'): boolean => {
+  if (!nodes || !nodes.length) {
+    return false;
+  }
+  return !!nodes.find(s => s[keyName] === key);
+};
+
+// 获取所有节点 key
+export const flatNodeKeys = <T extends NodeData, R>(nodes: Array<T>,
+                                                    result: Array<R>,
+                                                    keyName = 'key') => {
+  if (!nodes || !nodes.length) {
+    return;
+  }
+  for (let node of nodes) {
+    result.push(node[keyName]);
+    flatNodeKeys(node.children, result, keyName);
+  }
+};
+
+// 获取所有节点
+export const flatNodes = <T extends NodeData>(nodes: Array<T>,
+                                              result: Array<T>) => {
+  if (!nodes || !nodes.length) {
+    return;
+  }
+  nodes.forEach(s => {
+    result.push(s);
+    flatNodes(s.children, result);
+  });
+};

orion-ops-ui/src/views/dashboard/workplace/components/categories-percent.vue

@@ -10,7 +10,7 @@
       <template #title>
         {{ $t('workplace.categoriesPercent') }}
       </template>
-      <Chart height="310px" :option="chartOption" />
+      <chart height="310px" :option="chartOption" />
     </a-card>
   </a-spin>
 </template>

orion-ops-ui/src/views/dashboard/workplace/components/content-chart.vue

@@ -11,7 +11,7 @@
       <template #extra>
         <a-link>{{ $t('workplace.viewMore') }}</a-link>
       </template>
-      <Chart height="289px" :option="chartOption" />
+      <chart height="289px" :option="chartOption" />
     </a-card>
   </a-spin>
 </template>

orion-ops-ui/src/views/system/menu/components/menu-table.vue

@@ -190,6 +190,7 @@
   import { Message } from '@arco-design/web-vue';
   import { useCacheStore, useDictStore } from '@/store';
   import usePermission from '@/hooks/permission';
+  import { findParentNode } from '@/utils/tree';
 
   const { toOptions, getDictValue, toggleDictValue } = useDictStore();
   const cacheStore = useCacheStore();
@@ -215,36 +216,22 @@
       setFetchLoading(true);
       // 调用删除接口
       await deleteMenu(id);
-
-      // 获取父菜单
-      const findParentMenu = (arr: any, id: number): any => {
-        if (!arr || !arr.length) {
-          return null;
-        }
-        // 当前级
-        for (let e of arr) {
-          if (e.id === id) {
-            return arr;
-          }
-        }
-        // 子级
-        for (let e of arr) {
-          if (e.children && e.children.length) {
-            if (findParentMenu(e.children, id)) {
-              return e.children;
-            }
-          }
-        }
-        return null;
-      };
-
       // 获取父级容器
-      const parent = findParentMenu(tableRenderData.value, id) as unknown as MenuQueryResponse[];
+      const parent = findParentNode(id, tableRenderData.value, 'id');
       if (parent) {
+        // 页面删除 不重新调用接口
+        let children;
+        if (parent.root) {
+          children = tableRenderData.value;
+        } else {
+          children = parent.children;
+        }
+        if (children) {
           // 删除
-        for (let i = 0; i < parent.length; i++) {
+          for (let i = 0; i < children.length; i++) {
-          if (parent[i].id === id) {
+            if (children[i].id === id) {
-            parent.splice(i, 1);
+              children.splice(i, 1);
+            }
           }
         }
       }

orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue

@@ -23,7 +23,7 @@
       <div class="usn mb8">
         <a-space>
           <template v-for="opt of quickGrantMenuOperator" :key="opt.name">
-            <a-button size="mini" type="text" @click="() => { table.checked(opt.rule) }">
+            <a-button size="mini" type="text" @click="() => { table.checkOrUncheckByRule(opt.rule, true) }">
               {{ '全选' + opt.name }}
             </a-button>
           </template>
@@ -32,7 +32,7 @@
       <div class="usn mb8">
         <a-space>
           <template v-for="opt of quickGrantMenuOperator" :key="opt.name">
-            <a-button size="mini" type="text" @click="() => { table.unchecked(opt.rule) }">
+            <a-button size="mini" type="text" @click="() => { table.checkOrUncheckByRule(opt.rule, false) }">
               {{ '反选' + opt.name }}
             </a-button>
           </template>

orion-ops-ui/src/views/user/role/types/const.ts

@@ -12,7 +12,7 @@ const addType = ['add', 'create'];
 const updateType = ['update', 'modify'];
 const deleteType = ['delete', 'remove'];
 const standardRead = [...queryType];
-const standardWrite = [...addType, ...updateType, ...deleteType];
+const standardWrite = [...addType, ...updateType];
 
 // 快速分配菜单操作
 export const quickGrantMenuOperator = [