review: 重构代码.

orion-ops-ui/src/api/asset/host.ts

@@ -95,10 +95,10 @@ export function getHost(params: HostQueryRequest) {
 }
 
 /**
- * 查询主机
+ * 查询全部主机
  */
-export function getHostListAll(request: HostQueryRequest) {
-  return axios.post<Array<HostQueryResponse>>('/asset/host/list-all', request);
+export function getHostList() {
+  return axios.get<Array<HostQueryResponse>>('/asset/host/list');
 }
 
 /**

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

@@ -57,13 +57,13 @@
 
   const cacheStore = useCacheStore();
 
-  const isFirst = ref(false);
+  const unTriggerChange = ref(false);
   const menuData = ref<Array<MenuQueryResponse>>([]);
   const checkedKeys = ref<Array<number>>([]);
 
   // 初始化
   const init = (keys: Array<number>) => {
-    isFirst.value = true;
+    unTriggerChange.value = true;
     checkedKeys.value = keys;
     if (!menuData.value.length) {
       menuData.value = [...cacheStore.menus];
@@ -75,12 +75,44 @@
     return checkedKeys.value;
   };
 
-  defineExpose({ init, getValue });
+  // 选择
+  const checked = (rule: undefined | ((s: string) => boolean)) => {
+    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)) => {
+    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 });
 
   // 监听级联变化
   watch(checkedKeys, (after: Array<number>, before: Array<number>) => {
-    if (isFirst.value) {
-      isFirst.value = false;
+    if (unTriggerChange.value) {
+      unTriggerChange.value = false;
       return;
     }
     const afterLength = after.length;
@@ -136,18 +168,31 @@
     }
   };
 
+  // 展开节点
+  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 childrenId: number[] = [];
     // 获取所在子节点id
     flatChildrenId(node?.children, childrenId);
-    checkedKeys.value.push(...childrenId);
+    checkedKeys.value = [...new Set([...checkedKeys.value, ...childrenId])];
   };
 
   // 级联取消选择菜单
   const uncheckMenu = (id: number) => {
+    unTriggerChange.value = true;
     // 查询当前节点
     const node = findNode(id, menuData.value);
     const childrenId: number[] = [];

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

@@ -4,7 +4,7 @@
            title-align="start"
            title="分配菜单"
            width="80%"
-           :top="80"
+           :top="40"
            :body-style="{padding: '16px 16px 0 16px', 'margin-bottom': '16px'}"
            :align-center="false"
            :draggable="true"
@@ -15,11 +15,29 @@
            :on-before-ok="handlerOk"
            @close="handleClose">
     <div class="role-menu-wrapper">
-      <a-alert class="mb8 usn">
+      <a-alert class="usn mb8">
         <span>{{ roleRecord.name }} {{ roleRecord.code }}</span>
         <span class="mx8">-</span>
         <span>菜单分配后需要用户手动刷新页面才会生效</span>
       </a-alert>
+      <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) }">
+              {{ '全选' + opt.name }}
+            </a-button>
+          </template>
+        </a-space>
+      </div>
+      <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) }">
+              {{ '反选' + opt.name }}
+            </a-button>
+          </template>
+        </a-space>
+      </div>
       <!-- 菜单 -->
       <menu-grant-table ref="table" />
     </div>
@@ -42,6 +60,7 @@
   import { useCacheStore } from '@/store';
   import { getMenuList } from '@/api/system/menu';
   import MenuGrantTable from '@/components/system/menu/grant/menu-grant-table.vue';
+  import { quickGrantMenuOperator } from '../types/const';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
@@ -113,7 +132,7 @@
 <style lang="less" scoped>
   .role-menu-wrapper {
     width: 100%;
-    max-height: calc(100vh - 285px);
+    max-height: calc(100vh - 230px);
   }
 
 </style>

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

@@ -6,6 +6,44 @@ export const RoleStatus = {
   ENABLED: 1,
 };
 
+// 快速分配菜单操作
+export const quickGrantMenuOperator = [
+  {
+    name: '',
+    rule: undefined
+  }, {
+    name: '查询',
+    rule: (perm: string) => {
+      return perm.includes('query') || perm.includes('view');
+    }
+  }, {
+    name: '新增',
+    rule: (perm: string) => {
+      return perm.includes('add') || perm.includes('create');
+    }
+  }, {
+    name: '修改',
+    rule: (perm: string) => {
+      return perm.includes('update') || perm.includes('modify');
+    }
+  }, {
+    name: '删除',
+    rule: (perm: string) => {
+      return perm.includes('delete') || perm.includes('remove');
+    }
+  }, {
+    name: '导入',
+    rule: (perm: string) => {
+      return perm.includes('import');
+    }
+  }, {
+    name: '导出',
+    rule: (perm: string) => {
+      return perm.includes('export');
+    }
+  },
+];
+
 // 角色状态 字典项
 export const roleStatusKey = 'systemRoleStatus';