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

orion-ops-ui/src/views/asset/host-group/components/host-group-tree.vue

@@ -1,14 +1,22 @@
 <template>
+  <!-- 分组树 -->
   <a-tree
+    v-if="treeData.length"
+    ref="tree"
     class="tree-container"
     :blockNode="true"
     :draggable="true"
-    :data="treeData">
+    :data="treeData"
+    @drop="moveGroup">
+    <!-- 标题 -->
     <template #title="node">
+      <!-- 修改名称输入框 -->
       <template v-if="node.editable">
         <a-input size="mini"
                  ref="renameInput"
                  v-model="currName"
+                 placeholder="名称"
+                 autofocus
                  :max-length="32"
                  :disabled="node.loading"
                  @blur="() => saveNode(node.key)"
@@ -21,30 +29,52 @@
             <icon-check v-else
                         class="pointer"
                         title="保存"
-                        @click="saveNode(node.key)" />
+                        @click="() => saveNode(node.key)" />
           </template>
         </a-input>
       </template>
-
-      <span class="node-title" v-else>
-          {{ node.title }}
-        </span>
+      <!-- 名称 -->
+      <span v-else
+            class="node-title-wrapper"
+            @click="() => emits('selectKey', node.key)">
+        {{ node.title }}
+      </span>
     </template>
     <!-- 操作图标 -->
     <template #drag-icon="{ node }">
       <a-space v-if="!node.editable">
-        <icon-edit class="tree-icon"
-                   title="重命名"
-                   @click="rename(node.title, node.key)" />
-        <icon-delete class="tree-icon"
-                     title="删除"
-                     @click="rename(node.title, node.key)" />
-        <icon-plus class="tree-icon"
-                   title="新增"
-                   @click="rename(node.title, node.key)" />
+        <!-- 重命名 -->
+        <span v-permission="['asset:host-group:update']"
+              class="tree-icon"
+              title="重命名"
+              @click="rename(node.title, node.key)">
+          <icon-edit />
+        </span>
+        <!-- 删除 -->
+        <a-popconfirm content="确认删除这条记录吗?"
+                      position="left"
+                      type="warning"
+                      @ok="deleteNode(node.key)">
+          <span v-permission="['asset:host-group:delete']"
+                class="tree-icon" title="删除">
+            <icon-delete />
+          </span>
+        </a-popconfirm>
+        <!-- 新增 -->
+        <span v-permission="['asset:host-group:create']"
+              class="tree-icon"
+              title="新增"
+              @click="addChildren(node)">
+          <icon-plus />
+        </span>
       </a-space>
     </template>
   </a-tree>
+  <!-- 无数据 -->
+  <div v-else-if="!loading" class="empty-container">
+    <span>暂无数据</span>
+    <span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
+  </div>
 </template>
 
 <script lang="ts">
@@ -55,51 +85,25 @@
 
 <script lang="ts" setup>
   import type { TreeNodeData } from '@arco-design/web-vue';
-  import type { NodeData } from '@/types/global';
-  import { nextTick, ref } from 'vue';
+  import { nextTick, onMounted, ref } from 'vue';
+  import { createGroupGroupPrefix, rootId } from '../types/const';
+  import { findNode, findParentNode, moveNode } from '@/utils/tree';
+  import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
+  import { isString } from '@/utils/is';
 
+  const props = defineProps({
+    loading: Boolean
+  });
+  const emits = defineEmits(['loading', 'selectKey']);
+
+  const tree = ref();
+  const modCount = ref(0);
   const renameInput = ref();
   const currName = ref();
-
-  // 提为工具 utils tree.js
-  function sleep(ms: number) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
-  // 保存节点
-  const saveNode = async (key: string) => {
-    // 寻找节点
-    const node = findNode<TreeNodeData>(key, treeData.value);
-    if (!node) {
-      return;
-    }
-    if (currName.value) {
-      node.loading = true;
-      try {
-        if (key.startsWith('create')) {
-          // 调用创建 api
-          await sleep(340);
-          node.key = 'await id';
-        } else {
-          // 调用重命名 api
-          await sleep(340);
-        }
-        node.title = currName.value;
-      } catch (e) {
-      } finally {
-        node.loading = false;
-      }
-    } else {
-      if (key.startsWith('create')) {
-        // 寻找父节点
-        // 移除子节点
-      }
-    }
-    node.editable = false;
-  };
+  const treeData = ref<Array<TreeNodeData>>([]);
 
   // 重命名
-  const rename = (title: string, key: string) => {
+  const rename = (title: number, key: number) => {
     const node = findNode<TreeNodeData>(key, treeData.value);
     if (!node) {
       return;
@@ -111,132 +115,181 @@
     });
   };
 
-  // 寻找当前节点
-  const findNode = <T extends NodeData>(id: string, arr: Array<T>): T | undefined => {
-    for (let node of arr) {
-      if (node.key === id) {
-        return node;
+  // 删除节点
+  const deleteNode = async (key: number) => {
+    try {
+      emits('loading', true);
+      // 删除
+      await deleteHostGroup(key);
+      // 页面删除
+      const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
+      if (!parentNode) {
+        return;
       }
-    }
-    // 寻找子级
-    for (let node of arr) {
-      if (node?.children?.length) {
-        const inChildNode = findNode(id, node.children);
-        if (inChildNode) {
-          return inChildNode as T;
+      const children = parentNode.root ? treeData.value : parentNode.children;
+      if (children) {
+        // 删除
+        for (let i = 0; i < children.length; i++) {
+          if (children[i].key === key) {
+            children.splice(i, 1);
+            break;
+          }
         }
       }
+    } catch (e) {
+    } finally {
+      emits('loading', false);
     }
-    return undefined;
   };
 
-  function onIconClick(node: any) {
-    const children = node.children || [];
-    children.push({
-      title: 'new tree node',
-      key: node.key + '-' + (children.length + 1)
+  // 新增根节点
+  const addRootNode = () => {
+    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
+    treeData.value.push({
+      title: 'new',
+      key: newKey
     });
-    node.children = children;
+    // 编辑子节点
+    const newNode = findNode<TreeNodeData>(newKey, treeData.value);
+    if (newNode) {
+      newNode.editable = true;
+      currName.value = '';
+      nextTick(() => {
+        renameInput.value?.focus();
+      });
+    }
+  };
 
+  // 新增子节点
+  const addChildren = (parentNode: TreeNodeData) => {
+    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
+    const children = parentNode.children || [];
+    children.push({
+      title: 'new',
+      key: newKey
+    });
+    parentNode.children = children;
     treeData.value = [...treeData.value];
-  }
+    nextTick(() => {
+      // 展开
+      tree.value.expandNode(parentNode.key);
+      // 编辑子节点
+      const newNode = findNode<TreeNodeData>(newKey, treeData.value);
+      if (newNode) {
+        newNode.editable = true;
+        currName.value = '';
+        nextTick(() => {
+          renameInput.value?.focus();
+        });
+      }
+    });
+  };
+
+  // 保存节点
+  const saveNode = async (key: string | number) => {
+    modCount.value++;
+    if (modCount.value !== 1) {
+      return;
+    }
+    // 寻找节点
+    const node = findNode<TreeNodeData>(key, treeData.value);
+    if (!node) {
+      return;
+    }
+    if (currName.value) {
+      node.loading = true;
+      try {
+        // 创建节点
+        if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
+          const parent = findParentNode<TreeNodeData>(key, treeData.value);
+          if (parent.root) {
+            parent.key = rootId;
+          }
+          // 创建
+          const { data } = await createHostGroup({
+            parentId: parent.key as number,
+            name: currName.value
+          });
+          node.key = data;
+        } else {
+          // 重命名节点
+          await updateHostGroupName({
+            id: key as unknown as number,
+            name: currName.value
+          });
+        }
+        node.title = currName.value;
+        node.editable = false;
+      } catch (e) {
+        // 重复 重新聚焦
+        setTimeout(() => {
+          renameInput.value?.focus();
+        }, 100);
+      } finally {
+        node.loading = false;
+      }
+    } else {
+      // 未输入数据 并且为创建则移除节点
+      if (isString(key) && key.startsWith(createGroupGroupPrefix)) {
+        // 寻找父节点
+        const parent = findParentNode(key, treeData.value);
+        if (parent && parent.children) {
+          // 移除子节点
+          for (let i = 0; i < parent.children.length; i++) {
+            if (parent.children[i].key === key) {
+              parent.children.splice(i, 1);
+            }
+          }
+        }
+      }
+      node.editable = false;
+    }
+    modCount.value = 0;
+  };
+
+  // 移动分组
+  const moveGroup = async (
+    {
+      dragNode, dropNode, dropPosition
+    }: {
+      dragNode: TreeNodeData,
+      dropNode: TreeNodeData,
+      dropPosition: number
+    }) => {
+    try {
+      emits('loading', true);
+      // 移动
+      await moveHostGroup({
+        id: dragNode.key as number,
+        targetId: dropNode.key as number,
+        position: dropPosition
+      });
+      // 移动分组
+      moveNode(treeData.value, dragNode, dropNode, dropPosition);
+    } catch (e) {
+    } finally {
+      emits('loading', false);
+    }
+  };
+
+  // 加载数据
+  const fetchTreeData = async () => {
+    try {
+      emits('loading', true);
+      const { data } = await getHostGroupTree();
+      treeData.value = data;
+    } catch {
+    } finally {
+      emits('loading', false);
+    }
+  };
+
+  defineExpose({ addRootNode, fetchTreeData });
+
+  onMounted(() => {
+    fetchTreeData();
+  });
 
-  const treeData = ref(
-    [
-      {
-        title: 'Trunk',
-        key: '0-0',
-        children: [
-          {
-            title: 'Leaf',
-            key: '0-0-1',
-          },
-          {
-            title: 'Branch',
-            key: '0-0-2',
-            children: [
-              {
-                title: 'Leaf',
-                key: '0-0-2-1'
-              }
-            ]
-          },
-        ],
-      },
-      {
-        title: 'Trunk',
-        key: '0-1',
-        children: [
-          {
-            title: 'Branch',
-            key: '0-1-1',
-            children: [
-              {
-                title: 'Leaf',
-                key: '0-1-1-11',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-1-12',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-1-13',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-1-41',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-1-51',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-1-61',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-17-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-81-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-19-1-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-10-1-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-1-111-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-21-1-1',
-              },
-              {
-                title: 'Leaf',
-                key: '0-31-1-1',
-              },
-              {
-                title: 'Leaf',
-                key: '40-1-1-2',
-              },
-            ]
-          },
-          {
-            title: 'Leaf',
-            key: '0-1-2',
-          },
-        ],
-      },
-    ]
-  );
 </script>
 
 <style lang="less" scoped>
@@ -246,6 +299,15 @@
     user-select: none;
   }
 
+  .empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    padding-top: 25px;
+    color: var(--color-text-3);
+  }
+
   :deep(.arco-tree-node-selected) {
     .arco-tree-node-title {
       &:hover {
@@ -268,25 +330,17 @@
     }
   }
 
-  .node-title {
-
-  }
-
-  .node-handler {
-
-  }
-
   :deep(.arco-tree-node-selected) {
     background-color: var(--color-fill-2);
   }
 
+  .node-title-wrapper {
+    width: 100%;
+  }
+
   .tree-icon {
     font-size: 12px;
     color: rgb(var(--primary-6));
   }
 
-  .drag-icon {
-    padding-left: -8px;
-  }
-
 </style>

orion-ops-ui/src/views/asset/host-group/components/host-group-view-setting.vue

@@ -1,22 +1,41 @@
 <template>
   <!-- 左侧菜单 -->
-  <div class="simple-card tree-card">
+  <a-spin class="simple-card tree-card"
+          :loading="treeLoading">
     <!-- 主机分组头部 -->
     <div class="tree-card-header">
       <!-- 标题 -->
       <div class="tree-card-title">
         主机菜单
       </div>
+      <!-- 操作 -->
+      <div class="tree-card-handler">
+        <div v-permission="['asset:host-group:create']"
+             class="click-icon-wrapper handler-icon-wrapper"
+             title="根节点添加"
+             @click="addRootNode">
+          <icon-plus />
+        </div>
+        <div class="click-icon-wrapper handler-icon-wrapper"
+             title="刷新"
+             @click="refreshTree">
+          <icon-refresh />
+        </div>
+      </div>
     </div>
     <!-- 主机分组树 -->
     <div class="tree-card-main">
-      <host-group-tree ref="tree" />
+      <host-group-tree ref="tree"
+                       :loading="treeLoading"
+                       @loading="setTreeLoading"
+                       @select-key="selectGroup" />
     </div>
-  </div>
+  </a-spin>
   <!-- 身体部分 -->
-  <div class="simple-card view-body">
-    右侧数据
-  </div>
+  <a-spin class="simple-card view-body"
+          :loading="dataLoading">
+    <host-transfer ref="transfer" />
+  </a-spin>
 </template>
 
 <script lang="ts">
@@ -26,13 +45,36 @@
 </script>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
   import HostGroupTree from './host-group-tree.vue';
+  import HostTransfer from './host-transfer.vue';
+
+  const { loading: treeLoading, setLoading: setTreeLoading } = useLoading();
+  const { loading: dataLoading, setLoading: setDataLoading } = useLoading();
+
+  const tree = ref();
+  const transfer = ref();
+
+  // 添加根节点
+  const addRootNode = () => {
+    tree.value.addRootNode();
+  };
+
+  // 刷新树
+  const refreshTree = () => {
+    tree.value.fetchTreeData();
+  };
+
+  // 选中分组
+  const selectGroup = (key: number) => {
+    console.log(key);
+  };
 
 </script>
 
 <style lang="less" scoped>
   @tree-width: 26%;
-  @tree-width: 50%;
 
   .tree-card {
     margin-right: 16px;
@@ -44,11 +86,12 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0 16px;
+      padding: 0 8px 0 16px;
       position: relative;
       width: 100%;
       height: 44px;
       border-bottom: 1px var(--color-border-2) solid;
+      user-select: none;
     }
 
     &-title {
@@ -60,6 +103,17 @@
       text-overflow: ellipsis;
     }
 
+    &-handler {
+      display: flex;
+
+      .handler-icon-wrapper {
+        margin-left: 8px;
+        color: rgb(var(--primary-6));
+        padding: 4px;
+        font-size: 16px;
+      }
+    }
+
     &-main {
       padding: 8px 8px 8px 16px;
       position: relative;

orion-ops-ui/src/views/asset/host-group/components/host-transfer.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="transfer-container">
+    <!-- 头部 -->
+    <div class="transfer-header">
+      <!-- 提示 -->
+      <a-alert class="alert-wrapper">123123</a-alert>
+      <!-- 保存按钮 -->
+      <a-button class="save-button"
+                type="primary"
+                @click="save">
+        保存
+        <template #icon>
+          <icon-check />
+        </template>
+      </a-button>
+    </div>
+    <!-- 传输框 -->
+    <a-transfer v-model="value"
+                :data="data"
+                :source-input-search-props="{ placeholder:'请输入主机名称/编码/IP' }"
+                :target-input-search-props="{ placeholder:'请输入主机名称/编码/IP' }"
+                show-search
+                one-way>
+      <!-- 主机列表 -->
+      <template #source-title="{ countTotal, countSelected, checked, indeterminate, onSelectAllChange}">
+        <!-- 左侧标题 -->
+        <div class="source-title-container">
+          <a-checkbox style="margin-right: 8px;"
+                      :model-value="checked"
+                      :indeterminate="indeterminate"
+                      @change="onSelectAllChange" />
+          <span>
+            主机列表 {{ countSelected }} / {{ countTotal }}
+          </span>
+        </div>
+      </template>
+      <!-- 右侧标题 -->
+      <template #target-title="{ countTotal, countSelected, onClear }">
+        <div class="target-title-container">
+          <span>已选择 <span class="span-blue">{{ countTotal }}</span> 个</span>
+          <span class="pointer"
+                @click="onClear"
+                title="清空">
+            <icon-delete />
+          </span>
+        </div>
+      </template>
+    </a-transfer>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-transfer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TransferItem } from '@arco-design/web-vue/es/transfer/interface';
+  import { onMounted, ref } from 'vue';
+  import { useCacheStore } from '@/store';
+
+  const data = ref<Array<TransferItem>>([]);
+  const value = ref([]);
+
+  // 保存
+  const save = () => {
+    console.log(value.value);
+  };
+
+  // 加载主机
+  onMounted(() => {
+    const cacheStore = useCacheStore();
+    data.value = Array(200).fill(undefined).map((_, index) => ({
+      value: `option${index + 1}`,
+      label: `Option ${index + 1}`,
+      disabled: false
+    }));
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .transfer-container {
+    width: 100%;
+    height: 100%;
+
+    .transfer-header {
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+
+      .alert-wrapper {
+        height: 32px;
+      }
+
+      .save-button {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  :deep(.arco-transfer) {
+    height: calc(100% - 44px);
+
+    .arco-transfer-view {
+      width: 100%;
+      height: 100%;
+      user-select: none;
+    }
+
+    .arco-transfer-view-target {
+
+      .arco-transfer-list-item-content {
+        margin-left: 4px;
+      }
+
+      .arco-transfer-list-item-remove-btn {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .source-title-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .target-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    svg {
+      font-size: 16px;
+    }
+  }
+
+</style>

orion-ops-ui/src/views/asset/host-group/index.vue

@@ -51,7 +51,6 @@
     // 加载用户列表
 
     // 加载主机列表
-
     render.value = true;
   });
 

orion-ops-ui/src/views/asset/host-group/types/const.ts

@@ -10,7 +10,7 @@ export const tabItems = [{
   key: tabItemKeys.SETTING,
   text: '分组配置',
   icon: 'icon-unordered-list',
-  permission: []
+  permission: ['asset:host-group:query']
 }, {
   key: tabItemKeys.ROLE_GRANT,
   text: '角色授权',
@@ -22,3 +22,9 @@ export const tabItems = [{
   icon: 'icon-user',
   permission: []
 }];
+
+// 创建前缀
+export const createGroupGroupPrefix = 'create-';
+
+// 根id
+export const rootId = 0;

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,23 @@
       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) {
-        // 删除
-        for (let i = 0; i < parent.length; i++) {
-          if (parent[i].id === id) {
-            parent.splice(i, 1);
+        // 页面删除 不重新调用接口
+        let children;
+        if (parent.root) {
+          children = tableRenderData.value;
+        } else {
+          children = parent.children;
+        }
+        if (children) {
+          // 删除
+          for (let i = 0; i < children.length; i++) {
+            if (children[i].id === id) {
+              children.splice(i, 1);
+              break;
+            }
           }
         }
       }

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 = [