refactor: 重构主机分组页面.

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

@@ -0,0 +1,4 @@
+### 查询已授权的主机分组
+GET {{baseUrl}}/asset/authorized-data/host-group
+Authorization: {{token}}
+

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

@@ -41,3 +41,23 @@ Authorization: {{token}}
 DELETE {{baseUrl}}/asset/host-group/delete?id=1
 Authorization: {{token}}
 
+
+### 获取已授权的分组
+GET {{baseUrl}}/asset/host-group/get-authorized-group?userId=1
+Authorization: {{token}}
+
+
+### 主机分组授权
+PUT {{baseUrl}}/asset/host-group/grant
+Content-Type: application/json
+Authorization: {{token}}
+
+{
+  "userId": 10,
+  "groupIdList": [
+    3,
+    5
+  ]
+}
+
+###

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

@@ -103,14 +103,11 @@ public class HostGroupController {
         return HttpWrapper.ok();
     }
 
-    // TODO 日志 host-group:grant
-    // TODO 菜单 asset:host-group:grant
-
     @IgnoreLog(IgnoreLogMode.RET)
     @GetMapping("/get-authorized-group")
     @Operation(summary = "获取已授权的分组")
     @PreAuthorize("@ss.hasPermission('asset:host-group:grant')")
-    public List<Long> getAuthorizedHostGroup(@RequestParam HostGroupGrantQueryRequest request) {
+    public List<Long> getAuthorizedHostGroup(HostGroupGrantQueryRequest request) {
         return hostGroupService.getAuthorizedHostGroup(request);
     }
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostGroupGrantQueryRequest.java

@@ -9,7 +9,7 @@ import lombok.NoArgsConstructor;
 import java.io.Serializable;
 
 /**
- * 主机分组 查询请求对象
+ * 主机分组授权 查询请求对象
  *
  * @author Jiahang Li
  * @version 1.0.0
@@ -19,7 +19,7 @@ import java.io.Serializable;
 @Builder
 @NoArgsConstructor
 @AllArgsConstructor
-@Schema(name = "HostGroupQueryRequest", description = "主机分组 查询请求对象")
+@Schema(name = "HostGroupQueryRequest", description = "主机分组授权 查询请求对象")
 public class HostGroupGrantQueryRequest implements Serializable {
 
     @Schema(description = "用户id")

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostGroupServiceImpl.java

@@ -19,10 +19,7 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
-import java.util.ArrayList;
+import java.util.*;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
 
 /**
  * 主机分组服务 实现类
@@ -155,7 +152,7 @@ public class HostGroupServiceImpl implements HostGroupService {
             // 构建已授权的分组
             List<DataGroupDTO> relNodes = new ArrayList<>();
             TreeUtils.getAllNodes(dataGroup, authorizedGroupIdList, relNodes);
-            dataGroup = relNodes;
+            dataGroup = new ArrayList<>(new HashSet<>(relNodes));
         }
         // 查询分组引用
         Map<Long, Set<Long>> groupRel = dataGroupRelApi.getGroupRelList(DataGroupTypeEnum.HOST);

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

@@ -78,12 +78,12 @@ public class DataPermissionServiceImpl implements DataPermissionService {
         Long roleId = request.getRoleId();
         String type = request.getType();
         // 删除
+        LambdaQueryWrapper<DataPermissionDO> wrapper = dataPermissionDAO.wrapper()
+                .eq(DataPermissionDO::getUserId, userId)
+                .eq(DataPermissionDO::getRoleId, roleId)
+                .eq(DataPermissionDO::getType, type);
+        dataPermissionDAO.delete(wrapper);
         if (Lists.isEmpty(request.getRelIdList())) {
-            LambdaQueryWrapper<DataPermissionDO> wrapper = dataPermissionDAO.wrapper()
-                    .eq(DataPermissionDO::getUserId, userId)
-                    .eq(DataPermissionDO::getRoleId, roleId)
-                    .eq(DataPermissionDO::getType, type);
-            dataPermissionDAO.delete(wrapper);
             return;
         }
         // 新增

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

@@ -23,9 +23,9 @@
     <select id="getRoleIdByUserIdAndRoleCode" resultType="java.lang.Long">
         SELECT role_id
         FROM system_user_role
-        WHERE user_id = 1
+        WHERE user_id = #{userId}
           AND deleted = 0
-          AND role_id IN (SELECT id FROM system_role WHERE CODE = 'admin' AND deleted = 0) LIMIT 1
+          AND role_id IN (SELECT id FROM system_role WHERE CODE = #{code} AND deleted = 0) LIMIT 1
     </select>
 
 </mapper>

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

@@ -0,0 +1,9 @@
+import type { HostGroupQueryResponse } from '@/api/asset/host-group';
+import axios from 'axios';
+
+/**
+ * 查询已授权的主机分组
+ */
+export function getAuthorizedHostGroup() {
+  return axios.get<Array<HostGroupQueryResponse>>('/asset/authorized-data/host-group');
+}

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

@@ -30,8 +30,10 @@ export interface HostGroupMoveRequest {
  */
 export interface HostGroupQueryResponse {
   key: number;
+  parentId: number;
   title: string;
   children: Array<HostGroupQueryResponse>;
+  hosts: Array<number>;
 }
 
 /**
@@ -42,6 +44,21 @@ export interface HostGroupRelUpdateRequest {
   hostIdList?: Array<string>;
 }
 
+/**
+ * 主机分组授权 查询请求对象
+ */
+export interface HostGroupGrantQueryRequest {
+  userId?: number;
+  roleId?: number;
+}
+
+/**
+ * 主机分组 授权请求对象
+ */
+export interface HostGroupGrantRequest extends HostGroupGrantQueryRequest {
+  groupIdList?: Array<number>;
+}
+
 /**
  * 创建主机分组
  */
@@ -90,3 +107,17 @@ export function getHostGroupRelList(groupId: number) {
 export function updateHostGroupRel(request: HostGroupRelUpdateRequest) {
   return axios.put('/asset/host-group/update-rel', request);
 }
+
+/**
+ * 获取已授权的分组
+ */
+export function getAuthorizedHostGroup(params: HostGroupGrantQueryRequest) {
+  return axios.get<Array<number>>('/asset/host-group/get-authorized-group', { params });
+}
+
+/**
+ * 主机分组授权
+ */
+export function grantHostGroup(request: HostGroupGrantRequest) {
+  return axios.put('/asset/host-group/grant', request);
+}

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

@@ -21,10 +21,10 @@
 <style lang="less" scoped>
   .footer {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    height: 80px;
     text-align: center;
+    height: 64px;
 
     a {
       text-decoration: none;

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

@@ -8,7 +8,8 @@
         <img alt="logo"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
         <!-- 标头 -->
-        <a-typography-title :heading="5" :style="{ margin: 0, fontSize: '18px' }">
+        <a-typography-title :heading="5"
+                            :style="{ margin: 0, fontSize: '18px', height: '1.4em', overflow: 'hidden' }">
           Orion Ops Pro
         </a-typography-title>
         <!-- 收缩菜单 -->

orion-ops-ui/src/layout/default-layout.vue

@@ -4,7 +4,7 @@
     <div v-if="navbar" class="layout-navbar">
       <NavBar />
     </div>
-    <a-layout style="flex-direction: row;">
+    <a-layout>
       <!-- 左侧菜单栏 -->
       <a-layout-sider v-if="renderMenu"
                       v-show="!hideMenu"

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

@@ -1,6 +1,7 @@
 <template>
-  <div v-for="i in 300">
+  <div class="simple-card grant-container">
-    host-group-view-role-gra <br>
+    <div style="height: 200px;background: #00308f">
+    </div>
   </div>
 </template>
 
@@ -15,5 +16,7 @@
 </script>
 
 <style lang="less" scoped>
-
+  .grant-container {
+    padding: 16px;
+  }
 </style>

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

@@ -1,25 +1,34 @@
 <template>
-  <div class="view-container">
+  <a-tabs class="view-container"
+          :default-active-key="1"
+          :justify="true"
+          :destroy-on-hide="true"
+          :lazy-load="true">
     <!-- 左侧导航 -->
-    <tab-router class="left-tabs"
+    <a-tab-pane :key="1">
-                v-model="key"
+      <host-group-view-setting />
-                :items="tabItems" />
+      <template #title>
-    <!-- 右侧内容 -->
+        <icon-unordered-list />
-    <div class="view-main">
+        分组配置
-      <!-- 分组配置 -->
-      <template v-if="key === tabItemKeys.SETTING">
-        <host-group-view-setting />
       </template>
-      <!-- 角色分配 -->
+    </a-tab-pane>
-      <template v-if="key === tabItemKeys.ROLE_GRANT">
+    <!-- 角色分配 -->
-        <host-group-view-role-grant />
+    <a-tab-pane :key="2">
+      <host-group-view-role-grant />
+      <template #title>
+        <icon-safe />
+        角色授权
       </template>
-      <!-- 用户分配 -->
+    </a-tab-pane>
-      <template v-if="key === tabItemKeys.USER_GRANT">
+    <!-- 用户分配 -->
-        <host-group-view-user-grant />
+    <a-tab-pane :key="3">
+      <host-group-view-user-grant />
+      <template #title>
+        <icon-user />
+        用户授权
       </template>
-    </div>
+    </a-tab-pane>
-  </div>
+  </a-tabs>
 </template>
 
 <script lang="ts">
@@ -29,39 +38,13 @@
 </script>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import { tabItems, tabItemKeys } from '../types/const';
   import HostGroupViewSetting from './host-group-view-setting.vue';
   import HostGroupViewRoleGrant from './host-group-view-role-grant.vue';
   import HostGroupViewUserGrant from './host-group-view-user-grant.vue';
 
-  const key = ref();
-
-
 </script>
 
 <style lang="less" scoped>
-  @tab-width: 138px;
 
-  .view-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .left-tabs {
-    display: flex;
-    flex-direction: column;
-    width: @tab-width;
-    height: 100%;
-    margin-right: 16px;
-  }
-
-  .view-main {
-    width: calc(100% - @tab-width - 16px);
-    height: 100%;
-    position: relative;
-  }
 
 </style>

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

@@ -1,6 +1,36 @@
 <template>
-  <div class="index-container" v-if="render">
+  <div v-if="render" class="view-container">
-    <host-group-view />
+    <a-tabs v-if="render"
+            class="tabs-container"
+            :default-active-key="1"
+            :destroy-on-hide="true"
+            :justify="true"
+            :lazy-load="true">
+      <!-- 左侧导航 -->
+      <a-tab-pane :key="1" v-permission="['asset:host-group:query']">
+        <host-group-view-setting />
+        <template #title>
+          <icon-unordered-list />
+          分组配置
+        </template>
+      </a-tab-pane>
+      <!-- 角色分配 -->
+      <a-tab-pane :key="2" v-permission="['asset:host-group:grant']">
+        <host-group-view-role-grant />
+        <template #title>
+          <icon-safe />
+          角色授权
+        </template>
+      </a-tab-pane>
+      <!-- 用户分配 -->
+      <a-tab-pane :key="3" v-permission="['asset:host-group:grant']">
+        <host-group-view-user-grant />
+        <template #title>
+          <icon-user />
+          用户授权
+        </template>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
@@ -11,12 +41,13 @@
 </script>
 
 <script lang="ts" setup>
-  import { Message } from '@arco-design/web-vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
-
+  import { useCacheStore } from '@/store';
-  import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useAppStore, useCacheStore, useDictStore } from '@/store';
-  import HostGroupView from './components/host-group-view.vue';
   import { getHostList } from '@/api/asset/host';
+  import { Message } from '@arco-design/web-vue';
+  import HostGroupViewSetting from './components/host-group-view-setting.vue';
+  import HostGroupViewRoleGrant from './components/host-group-view-role-grant.vue';
+  import HostGroupViewUserGrant from './components/host-group-view-user-grant.vue';
 
   const render = ref(false);
   const cacheStore = useCacheStore();
@@ -46,10 +77,23 @@
 </script>
 
 <style lang="less" scoped>
-  .index-container {
+  .view-container {
-    position: relative;
+    display: flex;
     width: 100%;
     height: 100%;
+    position: relative;
     padding: 16px;
   }
+
+  .tabs-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: #FFF;
+  }
+
+  :deep(.arco-tabs-content) {
+    padding-top: 0;
+  }
 </style>

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

@@ -1,28 +1,3 @@
-// 导航 key
-export const tabItemKeys = {
-  SETTING: 1,
-  ROLE_GRANT: 2,
-  USER_GRANT: 3
-};
-
-// 导航路径
-export const tabItems = [{
-  key: tabItemKeys.SETTING,
-  text: '分组配置',
-  icon: 'icon-unordered-list',
-  permission: ['asset:host-group:query']
-}, {
-  key: tabItemKeys.ROLE_GRANT,
-  text: '角色授权',
-  icon: 'icon-safe',
-  permission: []
-}, {
-  key: tabItemKeys.USER_GRANT,
-  text: '用户授权',
-  icon: 'icon-user',
-  permission: []
-}];
-
 // 创建前缀
 export const createGroupGroupPrefix = 'create-';