feat: 移动主机分组.

orion-ops-framework/orion-ops-framework-common/src/main/java/com/orion/ops/framework/common/constant/FieldConst.java

@@ -31,4 +31,12 @@ public interface FieldConst {
 
     String REL_ID = "relId";
 
+    String BEFORE = "before";
+
+    String AFTER = "after";
+
+    String SOURCE = "source";
+
+    String TARGET = "target";
+
 }

orion-ops-framework/orion-ops-framework-common/src/main/java/com/orion/ops/framework/common/enums/MovePosition.java

@@ -0,0 +1,42 @@
+package com.orion.ops.framework.common.enums;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+/**
+ * 移动位置
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023/11/13 17:26
+ */
+@Getter
+@AllArgsConstructor
+public enum MovePosition {
+
+    // 拖拽到目标元素上
+    TOP(-1),
+
+    // 拖拽到目标元素中
+    IN(0),
+
+    // 拖拽到目标元素下
+    BOTTOM(1),
+
+    ;
+
+    private final Integer position;
+
+    public static MovePosition of(Integer position) {
+        if (position == null) {
+            return null;
+        }
+        for (MovePosition value : values()) {
+            if (value.position.equals(position)) {
+                return value;
+            }
+        }
+        return null;
+    }
+
+}

orion-ops-framework/orion-ops-spring-boot-starter-biz-operator-log/src/main/java/com/orion/ops/framework/biz/operator/log/core/constant/OperatorLogKeys.java

@@ -19,4 +19,6 @@ public interface OperatorLogKeys extends FieldConst {
 
     String KEY_NAME = "keyName";
 
+    String POSITION_NAME = "positionName";
+
 }

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/HostGroupController.http

@@ -0,0 +1,43 @@
+### 创建主机分组
+POST {{baseUrl}}/asset/host-group/create
+Content-Type: application/json
+Authorization: {{token}}
+
+{
+  "parentId": -1,
+  "name": ""
+}
+
+
+### 查询主机分组
+GET {{baseUrl}}/asset/host-group/tree
+Authorization: {{token}}
+
+
+### 修改名称
+PUT {{baseUrl}}/asset/host-group/rename
+Content-Type: application/json
+Authorization: {{token}}
+
+{
+  "id": "",
+  "name": ""
+}
+
+
+### 移动位置
+PUT {{baseUrl}}/asset/host-group/move
+Content-Type: application/json
+Authorization: {{token}}
+
+{
+  "id": "",
+  "targetId": "",
+  "position": ""
+}
+
+
+### 删除主机分组
+DELETE {{baseUrl}}/asset/host-group/delete?id=1
+Authorization: {{token}}
+

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/HostGroupController.java

@@ -4,12 +4,15 @@ import com.orion.ops.framework.biz.operator.log.core.annotation.OperatorLog;
 import com.orion.ops.framework.log.core.annotation.IgnoreLog;
 import com.orion.ops.framework.log.core.enums.IgnoreLogMode;
 import com.orion.ops.framework.web.core.annotation.RestWrapper;
-import com.orion.ops.module.asset.define.operator.HostOperatorType;
+import com.orion.ops.module.asset.convert.HostGroupConvert;
+import com.orion.ops.module.asset.define.operator.HostGroupOperatorType;
+import com.orion.ops.module.asset.entity.vo.HostGroupTreeVO;
 import com.orion.ops.module.asset.service.HostService;
 import com.orion.ops.module.infra.api.DataGroupApi;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupCreateDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
-import com.orion.ops.module.infra.entity.dto.data.DataGroupUpdateDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupMoveDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupRenameDTO;
 import com.orion.ops.module.infra.enums.DataGroupTypeEnum;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
@@ -43,13 +46,7 @@ public class HostGroupController {
     @Resource
     private DataGroupApi dataGroupApi;
 
-    // TODO 配置权限
+    @OperatorLog(HostGroupOperatorType.CREATE)
-    // TODO 配置操作日志类型
-    // TODO 拖拽
-    // TODO http
-    // TODO 聚合查询关联
-
-    @OperatorLog(HostOperatorType.CREATE)
     @PostMapping("/create")
     @Operation(summary = "创建主机分组")
     @PreAuthorize("@ss.hasPermission('asset:host-group:create')")
@@ -59,21 +56,30 @@ public class HostGroupController {
 
     @IgnoreLog(IgnoreLogMode.RET)
     @GetMapping("/tree")
-    @Operation(summary = "创建主机分组")
+    @Operation(summary = "查询主机分组")
     @PreAuthorize("@ss.hasPermission('asset:host-group:query')")
-    public List<DataGroupDTO> queryHostGroup() {
+    public List<HostGroupTreeVO> queryHostGroup() {
-        return dataGroupApi.getDataGroupTree(DataGroupTypeEnum.HOST);
+        List<DataGroupDTO> rows = dataGroupApi.getDataGroupTree(DataGroupTypeEnum.HOST);
+        return HostGroupConvert.MAPPER.toList(rows);
     }
 
-    @OperatorLog(HostOperatorType.UPDATE)
+    @OperatorLog(HostGroupOperatorType.RENAME)
     @PutMapping("/rename")
     @Operation(summary = "修改名称")
     @PreAuthorize("@ss.hasPermission('asset:host-group:update')")
-    public Integer updateHostGroupName(@Validated @RequestBody DataGroupUpdateDTO request) {
+    public Integer updateHostGroupName(@Validated @RequestBody DataGroupRenameDTO request) {
         return dataGroupApi.renameDataGroup(request);
     }
 
-    @OperatorLog(HostOperatorType.DELETE)
+    @OperatorLog(HostGroupOperatorType.MOVE)
+    @PutMapping("/move")
+    @Operation(summary = "移动位置")
+    @PreAuthorize("@ss.hasPermission('asset:host-group:update')")
+    public Integer moveHostGroup(@Validated @RequestBody DataGroupMoveDTO request) {
+        return dataGroupApi.moveDataGroup(request);
+    }
+
+    @OperatorLog(HostGroupOperatorType.DELETE)
     @DeleteMapping("/delete")
     @Operation(summary = "删除主机分组")
     @PreAuthorize("@ss.hasPermission('asset:host-group:delete')")
@@ -81,5 +87,11 @@ public class HostGroupController {
         return dataGroupApi.deleteDataGroupById(id);
     }
 
+
+    // TODO 关联操作配置权限
+    // TODO 关联操作配置操作日志类型
+    // TODO 关联 增 删 查
+    // TODO 聚合查询关联
+
 }
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/convert/HostGroupConvert.java

@@ -0,0 +1,24 @@
+package com.orion.ops.module.asset.convert;
+
+import com.orion.ops.module.asset.entity.vo.HostGroupTreeVO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
+import org.mapstruct.Mapper;
+import org.mapstruct.factory.Mappers;
+
+import java.util.List;
+
+/**
+ * 主机配置 内部对象转换器
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-9-11 14:16
+ */
+@Mapper
+public interface HostGroupConvert {
+
+    HostGroupConvert MAPPER = Mappers.getMapper(HostGroupConvert.class);
+
+    List<HostGroupTreeVO> toList(List<DataGroupDTO> list);
+
+}

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/define/operator/HostGroupOperatorType.java

@@ -0,0 +1,38 @@
+package com.orion.ops.module.asset.define.operator;
+
+import com.orion.ops.framework.biz.operator.log.core.annotation.Module;
+import com.orion.ops.framework.biz.operator.log.core.factory.InitializingOperatorTypes;
+import com.orion.ops.framework.biz.operator.log.core.model.OperatorType;
+
+import static com.orion.ops.framework.biz.operator.log.core.enums.OperatorRiskLevel.H;
+import static com.orion.ops.framework.biz.operator.log.core.enums.OperatorRiskLevel.L;
+
+/**
+ * 主机分组 操作日志类型
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023/10/10 17:30
+ */
+@Module("asset:host-group")
+public class HostGroupOperatorType extends InitializingOperatorTypes {
+
+    public static final String CREATE = "host-group:create";
+
+    public static final String RENAME = "host-group:rename";
+
+    public static final String MOVE = "host-group:move";
+
+    public static final String DELETE = "host-group:delete";
+
+    @Override
+    public OperatorType[] types() {
+        return new OperatorType[]{
+                new OperatorType(L, CREATE, "创建主机分组 <sb>${name}</sb>"),
+                new OperatorType(L, RENAME, "重命名主机分组 <sb>${before}</sb> -> <sb>${name}</sb>"),
+                new OperatorType(L, MOVE, "移动主机分组 <sb>${source}</sb> 到 <sb>${target}(${position})</sb>"),
+                new OperatorType(H, DELETE, "删除主机分组 <sb>${name}</sb>"),
+        };
+    }
+
+}

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/HostGroupTreeVO.java

@@ -0,0 +1,45 @@
+package com.orion.ops.module.asset.entity.vo;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * 主机秘钥 视图响应对象
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-9-20 11:55
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Schema(name = "HostGroupTreeVO", description = "主机秘钥 视图响应对象")
+public class HostGroupTreeVO implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    @JsonProperty("key")
+    @Schema(description = "id")
+    private Long id;
+
+    @Schema(description = "父id")
+    private Long parentId;
+
+    @JsonProperty("title")
+    @Schema(description = "组名称")
+    private String name;
+
+    @Schema(description = "排序")
+    private Integer sort;
+
+    @Schema(description = "子节点")
+    private List<HostGroupTreeVO> children;
+
+}

orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/api/DataGroupApi.java

@@ -2,7 +2,8 @@ package com.orion.ops.module.infra.api;
 
 import com.orion.ops.module.infra.entity.dto.data.DataGroupCreateDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
-import com.orion.ops.module.infra.entity.dto.data.DataGroupUpdateDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupMoveDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupRenameDTO;
 import com.orion.ops.module.infra.enums.DataGroupTypeEnum;
 
 import java.util.List;
@@ -31,9 +32,15 @@ public interface DataGroupApi {
      * @param dto dto
      * @return effect
      */
-    Integer renameDataGroup(DataGroupUpdateDTO dto);
+    Integer renameDataGroup(DataGroupRenameDTO dto);
 
-    // FIXME drag
+    /**
+     * 移动分组
+     *
+     * @param dto dto
+     * @return effect
+     */
+    Integer moveDataGroup(DataGroupMoveDTO dto);
 
     /**
      * 通过缓存查询数据分组

orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/entity/dto/data/DataGroupMoveDTO.java

@@ -0,0 +1,38 @@
+package com.orion.ops.module.infra.entity.dto.data;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.validation.constraints.NotNull;
+import java.io.Serializable;
+
+/**
+ * 数据分组 移动请求业务对象
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-11-7 18:44
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Schema(name = "DataGroupMoveDTO", description = "数据分组 移动请求业务对象")
+public class DataGroupMoveDTO implements Serializable {
+
+    @NotNull
+    @Schema(description = "id")
+    private Long id;
+
+    @NotNull
+    @Schema(description = "目标id")
+    private Long targetId;
+
+    @NotNull
+    @Schema(description = "移动位置")
+    private Integer position;
+
+}

orion-ops-module-infra/orion-ops-module-infra-provider/src/main/java/com/orion/ops/module/infra/entity/dto/data/DataGroupRenameDTO.java

@@ -6,12 +6,13 @@ import lombok.Builder;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import javax.validation.constraints.NotBlank;
 import javax.validation.constraints.NotNull;
 import javax.validation.constraints.Size;
 import java.io.Serializable;
 
 /**
- * 数据分组 更新请求业务对象
+ * 数据分组 重命名请求业务对象
  *
  * @author Jiahang Li
  * @version 1.0.0
@@ -21,21 +22,16 @@ import java.io.Serializable;
 @Builder
 @NoArgsConstructor
 @AllArgsConstructor
-@Schema(name = "DataGroupUpdateDTO", description = "数据分组 更新请求业务对象")
+@Schema(name = "DataGroupRenameDTO", description = "数据分组 重命名请求业务对象")
-public class DataGroupUpdateDTO implements Serializable {
+public class DataGroupRenameDTO implements Serializable {
 
     @NotNull
     @Schema(description = "id")
     private Long id;
 
-    @Schema(description = "父id")
+    @NotBlank
-    private Long parentId;
-
     @Size(max = 32)
     @Schema(description = "组名称")
     private String name;
 
-    @Schema(description = "排序")
-    private Integer sort;
-
 }

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/api/impl/DataGroupApiImpl.java

@@ -6,9 +6,11 @@ import com.orion.ops.module.infra.convert.DataGroupProviderConvert;
 import com.orion.ops.module.infra.entity.dto.DataGroupCacheDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupCreateDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
-import com.orion.ops.module.infra.entity.dto.data.DataGroupUpdateDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupMoveDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupRenameDTO;
 import com.orion.ops.module.infra.entity.request.data.DataGroupCreateRequest;
-import com.orion.ops.module.infra.entity.request.data.DataGroupUpdateRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupMoveRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupRenameRequest;
 import com.orion.ops.module.infra.enums.DataGroupTypeEnum;
 import com.orion.ops.module.infra.service.DataGroupService;
 import lombok.extern.slf4j.Slf4j;
@@ -40,12 +42,19 @@ public class DataGroupApiImpl implements DataGroupApi {
     }
 
     @Override
-    public Integer renameDataGroup(DataGroupUpdateDTO dto) {
+    public Integer renameDataGroup(DataGroupRenameDTO dto) {
         Valid.valid(dto);
-        DataGroupUpdateRequest request = DataGroupProviderConvert.MAPPER.toRequest(dto);
+        DataGroupRenameRequest request = DataGroupProviderConvert.MAPPER.toRequest(dto);
         return dataGroupService.renameDataGroup(request);
     }
 
+    @Override
+    public Integer moveDataGroup(DataGroupMoveDTO dto) {
+        Valid.valid(dto);
+        DataGroupMoveRequest request = DataGroupProviderConvert.MAPPER.toRequest(dto);
+        return dataGroupService.moveDataGroup(request);
+    }
+
     @Override
     public List<DataGroupDTO> getDataGroupList(DataGroupTypeEnum type) {
         List<DataGroupCacheDTO> rows = dataGroupService.getDataGroupListByCache(type.name());

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/convert/DataGroupConvert.java

@@ -3,7 +3,7 @@ package com.orion.ops.module.infra.convert;
 import com.orion.ops.module.infra.entity.domain.DataGroupDO;
 import com.orion.ops.module.infra.entity.dto.DataGroupCacheDTO;
 import com.orion.ops.module.infra.entity.request.data.DataGroupCreateRequest;
-import com.orion.ops.module.infra.entity.request.data.DataGroupUpdateRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupRenameRequest;
 import org.mapstruct.Mapper;
 import org.mapstruct.factory.Mappers;
 
@@ -21,7 +21,7 @@ public interface DataGroupConvert {
 
     DataGroupDO to(DataGroupCreateRequest request);
 
-    DataGroupDO to(DataGroupUpdateRequest request);
+    DataGroupDO to(DataGroupRenameRequest request);
 
     DataGroupCacheDTO toCache(DataGroupDO domain);
 

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/convert/DataGroupProviderConvert.java

@@ -4,9 +4,11 @@ import com.orion.ops.module.infra.entity.domain.DataGroupDO;
 import com.orion.ops.module.infra.entity.dto.DataGroupCacheDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupCreateDTO;
 import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
-import com.orion.ops.module.infra.entity.dto.data.DataGroupUpdateDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupMoveDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupRenameDTO;
 import com.orion.ops.module.infra.entity.request.data.DataGroupCreateRequest;
-import com.orion.ops.module.infra.entity.request.data.DataGroupUpdateRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupMoveRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupRenameRequest;
 import org.mapstruct.Mapper;
 import org.mapstruct.factory.Mappers;
 
@@ -28,11 +30,13 @@ public interface DataGroupProviderConvert {
 
     DataGroupDTO to(DataGroupDO domain);
 
-    DataGroupDO to(DataGroupUpdateDTO update);
+    DataGroupDO to(DataGroupRenameDTO update);
 
     DataGroupCreateRequest toRequest(DataGroupCreateDTO request);
 
-    DataGroupUpdateRequest toRequest(DataGroupUpdateDTO request);
+    DataGroupRenameRequest toRequest(DataGroupRenameDTO request);
+
+    DataGroupMoveRequest toRequest(DataGroupMoveDTO request);
 
     List<DataGroupDTO> toList(List<DataGroupCacheDTO> list);
 

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/dao/DataGroupDAO.java

@@ -27,6 +27,20 @@ public interface DataGroupDAO extends IMapper<DataGroupDO> {
      */
     Integer selectMaxSort(@Param("parentId") Long parentId, @Param("type") String type);
 
+    /**
+     * 修改排序
+     *
+     * @param parentId  parentId
+     * @param condition 条件
+     * @param referSort 对比值
+     * @param addition  自增步长
+     * @return effect
+     */
+    Integer updateSort(@Param("parentId") Long parentId,
+                       @Param("condition") String condition,
+                       @Param("referSort") Integer referSort,
+                       @Param("addition") Integer addition);
+
     /**
      * 通过 parentId 查询
      *

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/data/DataGroupMoveRequest.java

@@ -0,0 +1,38 @@
+package com.orion.ops.module.infra.entity.request.data;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.validation.constraints.NotNull;
+import java.io.Serializable;
+
+/**
+ * 数据分组 移动请求对象
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-11-7 18:44
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Schema(name = "DataGroupMoveRequest", description = "数据分组 移动请求对象")
+public class DataGroupMoveRequest implements Serializable {
+
+    @NotNull
+    @Schema(description = "id")
+    private Long id;
+
+    @NotNull
+    @Schema(description = "目标id")
+    private Long targetId;
+
+    @NotNull
+    @Schema(description = "移动位置")
+    private Integer position;
+
+}

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/entity/request/data/DataGroupRenameRequest.java

@@ -22,20 +22,14 @@ import java.io.Serializable;
 @NoArgsConstructor
 @AllArgsConstructor
 @Schema(name = "DataGroupUpdateRequest", description = "数据分组 更新请求对象")
-public class DataGroupUpdateRequest implements Serializable {
+public class DataGroupRenameRequest implements Serializable {
 
     @NotNull
     @Schema(description = "id")
     private Long id;
 
-    @Schema(description = "父id")
-    private Long parentId;
-
     @Size(max = 32)
     @Schema(description = "组名称")
     private String name;
 
-    @Schema(description = "排序")
-    private Integer sort;
-
 }

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/DataGroupService.java

@@ -2,7 +2,8 @@ package com.orion.ops.module.infra.service;
 
 import com.orion.ops.module.infra.entity.dto.DataGroupCacheDTO;
 import com.orion.ops.module.infra.entity.request.data.DataGroupCreateRequest;
-import com.orion.ops.module.infra.entity.request.data.DataGroupUpdateRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupMoveRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupRenameRequest;
 
 import java.util.List;
 
@@ -29,9 +30,15 @@ public interface DataGroupService {
      * @param request request
      * @return effect
      */
-    Integer renameDataGroup(DataGroupUpdateRequest request);
+    Integer renameDataGroup(DataGroupRenameRequest request);
 
-    // FIXME drag
+    /**
+     * 移动分组
+     *
+     * @param request request
+     * @return effect
+     */
+    Integer moveDataGroup(DataGroupMoveRequest request);
 
     /**
      * 通过缓存查询数据分组 - 列表

orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/DataGroupServiceImpl.java

@@ -3,8 +3,10 @@ package com.orion.ops.module.infra.service.impl;
 import com.alibaba.fastjson.JSON;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.orion.lang.utils.collect.Lists;
+import com.orion.ops.framework.biz.operator.log.core.uitls.OperatorLogs;
 import com.orion.ops.framework.common.constant.Const;
 import com.orion.ops.framework.common.constant.ErrorMessage;
+import com.orion.ops.framework.common.enums.MovePosition;
 import com.orion.ops.framework.common.utils.Valid;
 import com.orion.ops.framework.redis.core.utils.RedisStrings;
 import com.orion.ops.module.infra.convert.DataGroupConvert;
@@ -13,7 +15,8 @@ import com.orion.ops.module.infra.define.cache.DataGroupCacheKeyDefine;
 import com.orion.ops.module.infra.entity.domain.DataGroupDO;
 import com.orion.ops.module.infra.entity.dto.DataGroupCacheDTO;
 import com.orion.ops.module.infra.entity.request.data.DataGroupCreateRequest;
-import com.orion.ops.module.infra.entity.request.data.DataGroupUpdateRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupMoveRequest;
+import com.orion.ops.module.infra.entity.request.data.DataGroupRenameRequest;
 import com.orion.ops.module.infra.service.DataGroupRelService;
 import com.orion.ops.module.infra.service.DataGroupService;
 import lombok.extern.slf4j.Slf4j;
@@ -63,7 +66,7 @@ public class DataGroupServiceImpl implements DataGroupService {
     }
 
     @Override
-    public Integer renameDataGroup(DataGroupUpdateRequest request) {
+    public Integer renameDataGroup(DataGroupRenameRequest request) {
         Long id = Valid.notNull(request.getId(), ErrorMessage.ID_MISSING);
         String name = Valid.notBlank(request.getName());
         // 查询
@@ -77,6 +80,8 @@ public class DataGroupServiceImpl implements DataGroupService {
                 .build();
         // 查询数据是否冲突
         this.checkDataGroupPresent(updateRecord);
+        // 添加日志参数
+        OperatorLogs.add(OperatorLogs.BEFORE, record.getName());
         // 更新
         int effect = dataGroupDAO.updateById(updateRecord);
         // 删除缓存
@@ -85,12 +90,71 @@ public class DataGroupServiceImpl implements DataGroupService {
         return effect;
     }
 
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public Integer moveDataGroup(DataGroupMoveRequest request) {
+        Long id = request.getId();
+        Long targetId = request.getTargetId();
+        MovePosition position = Valid.valid(MovePosition::of, request.getPosition());
+        // 查询节点是否存在
+        DataGroupDO moveRecord = dataGroupDAO.selectById(id);
+        DataGroupDO targetRecord = dataGroupDAO.selectById(targetId);
+        Valid.notNull(moveRecord, ErrorMessage.GROUP_ABSENT);
+        Valid.notNull(targetRecord, ErrorMessage.GROUP_ABSENT);
+        // 更新
+        String type = moveRecord.getType();
+        Long targetParentId = targetRecord.getParentId();
+        int effect = 0;
+        // 修改排序
+        if (MovePosition.TOP.equals(position)) {
+            // 移动到元素上 将大于等于 targetRecord 的排序都加 10
+            dataGroupDAO.updateSort(targetParentId, ">=",
+                    targetRecord.getSort(), Const.DEFAULT_SORT);
+            // 修改 parentId sort
+            DataGroupDO update = DataGroupDO.builder()
+                    .id(id)
+                    .parentId(targetParentId)
+                    .sort(targetRecord.getSort())
+                    .build();
+            effect = dataGroupDAO.updateById(update);
+        } else if (MovePosition.IN.equals(position)) {
+            // 移动到元素中 获取最大排序
+            Integer newSort = dataGroupDAO.selectMaxSort(targetId, type) + Const.DEFAULT_SORT;
+            // 修改 parentId sort
+            DataGroupDO update = DataGroupDO.builder()
+                    .id(id)
+                    .parentId(targetId)
+                    .sort(newSort)
+                    .build();
+            effect = dataGroupDAO.updateById(update);
+        } else if (MovePosition.BOTTOM.equals(position)) {
+            // 移动到元素下 将大于 targetRecord 的排序都加 10
+            dataGroupDAO.updateSort(targetParentId, ">",
+                    targetRecord.getSort(), Const.DEFAULT_SORT);
+            // 修改 parentId sort
+            DataGroupDO update = DataGroupDO.builder()
+                    .id(id)
+                    .parentId(targetParentId)
+                    .sort(targetRecord.getSort() + 1)
+                    .build();
+            effect = dataGroupDAO.updateById(update);
+        }
+        // 删除缓存
+        RedisStrings.delete(DataGroupCacheKeyDefine.DATA_GROUP_LIST.format(type),
+                DataGroupCacheKeyDefine.DATA_GROUP_TREE.format(type));
+        // 添加日志参数
+        OperatorLogs.add(OperatorLogs.SOURCE, moveRecord.getName());
+        OperatorLogs.add(OperatorLogs.TARGET, targetRecord.getName());
+        OperatorLogs.add(OperatorLogs.POSITION_NAME, position.name());
+        return effect;
+    }
+
     @Override
     public List<DataGroupCacheDTO> getDataGroupListByCache(String type) {
         // 查询缓存
         String key = DataGroupCacheKeyDefine.DATA_GROUP_LIST.format(type);
         List<DataGroupCacheDTO> list = RedisStrings.getJsonArray(key, DataGroupCacheKeyDefine.DATA_GROUP_LIST);
-        if (list.isEmpty()) {
+        if (Lists.isEmpty(list)) {
             // 查询数据库
             list = dataGroupDAO.of()
                     .createWrapper()
@@ -116,7 +180,7 @@ public class DataGroupServiceImpl implements DataGroupService {
         // 查询缓存
         String key = DataGroupCacheKeyDefine.DATA_GROUP_TREE.format(type);
         List<DataGroupCacheDTO> treeData = RedisStrings.getJsonArray(key, DataGroupCacheKeyDefine.DATA_GROUP_TREE);
-        if (treeData.isEmpty()) {
+        if (Lists.isEmpty(treeData)) {
             // 查询列表缓存
             List<DataGroupCacheDTO> rows = this.getDataGroupListByCache(type);
             // 添加默认值 防止穿透
@@ -127,7 +191,7 @@ public class DataGroupServiceImpl implements DataGroupService {
             } else {
                 // 构建树
                 DataGroupCacheDTO rootNode = DataGroupCacheDTO.builder()
-                        .parentId(Const.ROOT_PARENT_ID)
+                        .id(Const.ROOT_PARENT_ID)
                         .sort(Const.DEFAULT_SORT)
                         .build();
                 this.buildGroupTree(rootNode, rows);
@@ -151,7 +215,7 @@ public class DataGroupServiceImpl implements DataGroupService {
                                 List<DataGroupCacheDTO> nodes) {
         // 获取子节点
         List<DataGroupCacheDTO> childrenNodes = nodes.stream()
-                .filter(s -> parentNode.getParentId().equals(s.getParentId()))
+                .filter(s -> parentNode.getId().equals(s.getParentId()))
                 .sorted(Comparator.comparing(DataGroupCacheDTO::getSort))
                 .collect(Collectors.toList());
         if (childrenNodes.isEmpty()) {
@@ -183,6 +247,8 @@ public class DataGroupServiceImpl implements DataGroupService {
         // 删除缓存
         RedisStrings.delete(DataGroupCacheKeyDefine.DATA_GROUP_LIST.format(type),
                 DataGroupCacheKeyDefine.DATA_GROUP_TREE.format(type));
+        // 添加日志参数
+        OperatorLogs.add(OperatorLogs.NAME, record.getName());
         return effect;
     }
 

orion-ops-module-infra/orion-ops-module-infra-service/src/main/resources/mapper/DataGroupMapper.xml

@@ -21,6 +21,13 @@
         id, parent_id, name, type, sort, create_time, update_time, creator, updater, deleted
     </sql>
 
+    <update id="updateSort">
+        UPDATE data_group
+        SET sort = sort + #{addition}
+        WHERE parent_id = #{parentId}
+        AND sort ${condition} #{referSort}
+    </update>
+
     <select id="selectMaxSort" resultType="java.lang.Integer">
         SELECT IFNULL(MAX(sort), 0)
         FROM data_group

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

@@ -9,10 +9,20 @@ export interface HostGroupCreateRequest {
 }
 
 /**
- * 主机分组更新请求
+ * 主机分组重命名请求
  */
-export interface HostGroupUpdateRequest extends HostGroupCreateRequest {
+export interface HostGroupRenameRequest {
   id?: number;
+  name?: string;
+}
+
+/**
+ * 主机分组移动请求
+ */
+export interface HostGroupMoveRequest {
+  id?: number;
+  targetId?: number;
+  position?: number;
 }
 
 /**
@@ -31,10 +41,8 @@ export interface HostGroupQueryRequest {
  * 主机分组查询响应
  */
 export interface HostGroupQueryResponse {
-  id: number;
+  key: number;
-  parentId: number;
+  title: string;
-  name: string;
-  sort: number;
   children: Array<HostGroupQueryResponse>;
 }
 
@@ -42,14 +50,21 @@ export interface HostGroupQueryResponse {
  * 创建主机分组
  */
 export function createHostGroup(request: HostGroupCreateRequest) {
-  return axios.post('/asset/host-group/create', request);
+  return axios.post<number>('/asset/host-group/create', request);
 }
 
 /**
- * 更新主机分组
+ * 更新主机分组名称
  */
-export function updateHostGroup(request: HostGroupUpdateRequest) {
+export function updateHostGroupName(request: HostGroupRenameRequest) {
-  return axios.put('/asset/host-group/update', request);
+  return axios.put('/asset/host-group/rename', request);
+}
+
+/**
+ * 移动主机分组
+ */
+export function moveHostGroup(request: HostGroupMoveRequest) {
+  return axios.put('/asset/host-group/move', request);
 }
 
 /**

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

@@ -114,3 +114,40 @@ export const flatNodes = <T extends NodeData>(nodes: Array<T>,
     flatNodes(s.children, result);
   });
 };
+
+// 移动节点
+export const moveNode = (nodes: Array<NodeData>,
+                         dragNode: NodeData,
+                         dropNode: NodeData,
+                         dropPosition: number) => {
+  // dropPosition === -1 将 dragNode 拖拽到 dropNode 上
+  // dropPosition === 0  将 dragNode 拖拽到 dropNode 中
+  // dropPosition === 1  将 dragNode 拖拽到 dropNode 下
+  const loop = (data: NodeData, key: number, callback: any) => {
+    data.some((item: NodeData, index: any, arr: NodeData[]) => {
+      if (item.key === key) {
+        callback(item, index, arr);
+        return true;
+      }
+      if (item.children) {
+        return loop(item.children, key, callback);
+      }
+      return false;
+    });
+  };
+
+  loop(nodes, dragNode.key as number, (_: NodeData, index: number, arr: NodeData[]) => {
+    arr.splice(index, 1);
+  });
+
+  if (dropPosition === 0) {
+    loop(nodes, dropNode.key as number, (item: NodeData) => {
+      item.children = item.children || [];
+      item.children?.push(dragNode);
+    });
+  } else {
+    loop(nodes, dropNode.key as number, (_: NodeData, index: number, arr: NodeData[]) => {
+      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
+    });
+  }
+};

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>
+      <span v-else
-          {{ node.title }}
+            class="node-title-wrapper"
-        </span>
+            @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="重命名"
+        <span v-permission="['asset:host-group:update']"
-                   @click="rename(node.title, node.key)" />
+              class="tree-icon"
-        <icon-delete class="tree-icon"
+              title="重命名"
-                     title="删除"
+              @click="rename(node.title, node.key)">
-                     @click="rename(node.title, node.key)" />
+          <icon-edit />
-        <icon-plus class="tree-icon"
+        </span>
-                   title="新增"
+        <!-- 删除 -->
-                   @click="rename(node.title, node.key)" />
+        <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, onMounted, ref } from 'vue';
-  import { nextTick, 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();
-
+  const treeData = ref<Array<TreeNodeData>>([]);
-  // 提为工具 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 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 => {
+  const deleteNode = async (key: number) => {
-    for (let node of arr) {
+    try {
-      if (node.key === id) {
+      emits('loading', true);
-        return node;
+      // 删除
+      await deleteHostGroup(key);
+      // 页面删除
+      const parentNode = findParentNode<TreeNodeData>(key, treeData.value);
+      if (!parentNode) {
+        return;
       }
-    }
+      const children = parentNode.root ? treeData.value : parentNode.children;
-    // 寻找子级
+      if (children) {
-    for (let node of arr) {
+        // 删除
-      if (node?.children?.length) {
+        for (let i = 0; i < children.length; i++) {
-        const inChildNode = findNode(id, node.children);
+          if (children[i].key === key) {
-        if (inChildNode) {
+            children.splice(i, 1);
-          return inChildNode as T;
+            break;
+          }
         }
       }
+    } catch (e) {
+    } finally {
+      emits('loading', false);
     }
-    return undefined;
   };
 
-  function onIconClick(node: any) {
+  // 新增根节点
-    const children = node.children || [];
+  const addRootNode = () => {
-    children.push({
+    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
-      title: 'new tree node',
+    treeData.value.push({
-      key: node.key + '-' + (children.length + 1)
+      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,18 +1,36 @@
 <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">
     右侧数据
@@ -26,8 +44,30 @@
 </script>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
   import HostGroupTree from './host-group-tree.vue';
 
+  const { loading: treeLoading, setLoading: setTreeLoading } = useLoading();
+  const { loading: dataLoading, setLoading: setDataLoading } = useLoading();
+
+  const tree = ref();
+
+  // 添加根节点
+  const addRootNode = () => {
+    tree.value.addRootNode();
+  };
+
+  // 刷新树
+  const refreshTree = () => {
+    tree.value.fetchTreeData();
+  };
+
+  // 选中分组
+  const selectGroup = (key: number) => {
+    console.log(key);
+  };
+
 </script>
 
 <style lang="less" scoped>
@@ -44,11 +84,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 +101,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/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/system/menu/components/menu-table.vue

@@ -231,6 +231,7 @@
           for (let i = 0; i < children.length; i++) {
             if (children[i].id === id) {
               children.splice(i, 1);
+              break;
             }
           }
         }