refactor: 重构主机分组页面.

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">
-    host-group-view-role-gra <br>
+  <div class="simple-card grant-container">
+    <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"
-                v-model="key"
-                :items="tabItems" />
-    <!-- 右侧内容 -->
-    <div class="view-main">
-      <!-- 分组配置 -->
-      <template v-if="key === tabItemKeys.SETTING">
-        <host-group-view-setting />
+    <a-tab-pane :key="1">
+      <host-group-view-setting />
+      <template #title>
+        <icon-unordered-list />
+        分组配置
       </template>
-      <!-- 角色分配 -->
-      <template v-if="key === tabItemKeys.ROLE_GRANT">
-        <host-group-view-role-grant />
+    </a-tab-pane>
+    <!-- 角色分配 -->
+    <a-tab-pane :key="2">
+      <host-group-view-role-grant />
+      <template #title>
+        <icon-safe />
+        角色授权
       </template>
-      <!-- 用户分配 -->
-      <template v-if="key === tabItemKeys.USER_GRANT">
-        <host-group-view-user-grant />
+    </a-tab-pane>
+    <!-- 用户分配 -->
+    <a-tab-pane :key="3">
+      <host-group-view-user-grant />
+      <template #title>
+        <icon-user />
+        用户授权
       </template>
-    </div>
-  </div>
+    </a-tab-pane>
+  </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">
-    <host-group-view />
+  <div v-if="render" class="view-container">
+    <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 { computed, ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useAppStore, useCacheStore, useDictStore } from '@/store';
-  import HostGroupView from './components/host-group-view.vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useCacheStore } from '@/store';
   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 {
-    position: relative;
+  .view-container {
+    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-';