feat: 设置主机分组内元素.

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 checked = (rule: undefined | ((s: string) => boolean)) => {
+  // 通过规则 选择/取消选择
+  const checkOrUncheckByRule = (rule: undefined | ((s: string) => boolean), check: boolean) => {
     unTriggerChange.value = true;
     const nodes: Array<MenuQueryResponse> = [];
     flatNodes(menuData.value, nodes);
     if (rule) {
-      const checkedNodes = nodes.filter(s => s.permission)
+      const ruleNodes = nodes.filter(s => s.permission)
         .filter(s => rule(s?.permission))
         .map(s => s.id)
         .filter(Boolean);
-      checkedKeys.value = [...new Set([...checkedKeys.value, ...checkedNodes])];
+      if (check) {
+        // 选择
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...ruleNodes])];
+      } else {
+        // 取消选择
+        checkedKeys.value = [...checkedKeys.value].filter(s => !ruleNodes.includes(s));
+      }
     } else {
-      checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
+      if (check) {
+        // 选择
+        checkedKeys.value = nodes.map(s => s.id).filter(Boolean);
+      } else {
+        // 取消选择
+        checkedKeys.value = [];
+      }
     }
   };
 
-  // 取消选择
-  const unchecked = (rule: undefined | ((s: string) => boolean)) => {
-    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 {
-      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 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) => {
+  // 级联选择/取消选择菜单
+  const checkOrUncheckMenu = (id: number, check: boolean) => {
     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);
-    checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
-  };
-
-  // 级联取消选择菜单
-  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));
+    flatNodeKeys(node.children, childrenId, 'id');
+    if (check) {
+      // 选中
+      checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
+    } else {
+      // 取消选择
+      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>;