feat(frontend): 添加全局及业务下的资源标签管理功能 TencentBlueKing#7285

# Reviewed, transaction id: 22658

dbm-ui/frontend/src/layout/components/ResourceManage.vue

@@ -45,9 +45,7 @@
         key="resourceTagsManagement"
         v-db-console="'resourceManage.resourceTagsManagement'">
         <template #icon>
-          <DbIcon
-            svg
-            type="tag-3" />
+          <DbIcon type="tag-3" />
         </template>
         <span
           v-overflow-tips.right

dbm-ui/frontend/src/services/model/db-resource/DbResource.ts

@@ -38,7 +38,10 @@ export default class DbResource {
     bk_biz_name: string;
   };
   ip: string;
-  label: string;
+  labels: {
+    name: string;
+    id: number;
+  }[];
   net_device_id: string;
   os_bit: string;
   os_type: string;
@@ -81,7 +84,7 @@ export default class DbResource {
     this.device_class = payload.device_class;
     this.for_biz = payload.for_biz;
     this.ip = payload.ip;
-    this.label = payload.label;
+    this.labels = payload.labels;
     this.net_device_id = payload.net_device_id;
     this.os_bit = payload.os_bit;
     this.os_type = payload.os_type;

dbm-ui/frontend/src/services/source/dbresourceResource.ts

@@ -166,7 +166,7 @@ export function getSpecResourceCount(params: {
  */
 export function updateResource(params: {
   bk_host_ids: number[];
-  labels?: string[];
+  labels?: number[];
   for_biz: number;
   rack_id: string;
   resource_type: string;

dbm-ui/frontend/src/services/source/tag.ts

@@ -69,10 +69,7 @@ export function getTagRelatedResource(params: { bk_biz_id: number; ids: number[]
   return http.post<
     {
       id: number;
-      related_resources: {
-        resource_type: string;
-        count: number;
-      }[];
+      ip_count: number;
     }[]
   >(`${path}related_resources/`, params);
 }

dbm-ui/frontend/src/stores/globalBizs.ts

@@ -29,11 +29,11 @@ export const useGlobalBizs = defineStore('GlobalBizs', {
   }),
   getters: {
     currentBizInfo: (state): BizItem | undefined => state.bizs.find((item) => item.bk_biz_id === state.currentBizId),
-    bizIdMap: (state): Map<number, BizItem> => {
-      const map = new Map<number, BizItem>();
-      state.bizs.forEach((biz) => map.set(biz.bk_biz_id, biz));
-      return map;
-    },
+    bizIdMap: (state): Map<number, BizItem> =>
+      state.bizs.reduce((map, biz) => {
+        map.set(biz.bk_biz_id, biz);
+        return map;
+      }, new Map<number, BizItem>()),
   },
   actions: {
     /**

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue

@@ -13,14 +13,18 @@
 
 <template>
   <div class="resource-pool-list-page">
+    <SearchBox
+      ref="searchBoxRef"
+      class="mb-25"
+      @change="handleSearch" />
     <div class="action-box mb-16">
-      <template v-if="props.type === ResourcePool.public">
+      <template v-if="type === ResourcePool.public">
         <BkButton
           :disabled="selectionHostIdList.length < 1"
           theme="primary"
           @click="handleShowBatchConvertToBusiness">
-          {{ t('转入业务资源池') }}</BkButton
-        >
+          {{ t('转入业务资源池') }}
+        </BkButton>
       </template>
       <template v-else>
         <ImportHostBtn
@@ -77,18 +81,13 @@
           </BkDropdownMenu>
         </template>
       </BkDropdown>
-      <ResourceSearchSelector v-model="searchValue" />
-      <TagResearchSelector v-model="researchTags" />
       <AuthButton
         action-id="resource_operation_view"
         class="quick-search-btn"
         @click="handleGoOperationRecord">
         <DbIcon type="history-2" />
       </AuthButton>
     </div>
-    <TagResearchPanel
-      v-if="researchTags.length"
-      v-model="researchTags" />
     <RenderTable
       ref="tableRef"
       :columns="tableColumn"
@@ -111,32 +110,32 @@
     <BatchCovertToPublic
       v-model:is-show="isShowBatchCovertToPublic"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchMoveToRecyclePool
       v-model:is-show="isShowBatchMoveToRecyclePool"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchMoveToFaultPool
       v-model:is-show="isShowBatchMoveToFaultPool"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchUndoImport
       v-model:is-show="isShowBatchUndoImport"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchConvertToBusiness
       v-model:is-show="isShowBatchConvertToBusiness"
       :biz-id="(currentBizId as number)"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <BatchAssign
       v-model:is-show="isShowBatchAssign"
       :selected="selectionListWholeDataMemo"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
     <UpdateAssign
       v-model:is-show="isShowUpdateAssign"
       :edit-data="(curEditData as DbResourceModel)"
-      @refresh="fetchData" />
+      @refresh="handleRefresh" />
   </div>
 </template>
 <script setup lang="tsx">
@@ -147,7 +146,6 @@
   import { useRouter } from 'vue-router';
 
   import DbResourceModel from '@services/model/db-resource/DbResource';
-  import type ResourceTagModel from '@services/model/db-resource/ResourceTag';
   import { fetchList } from '@services/source/dbresourceResource';
 
   import { useGlobalBizs } from '@stores';
@@ -156,7 +154,7 @@
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
 
-  import { execCopy, getSearchSelectorParams } from '@utils';
+  import { execCopy } from '@utils';
 
   import { ResourcePool } from '../../type';
 
@@ -171,9 +169,7 @@
   import ImportHost from './components/import-host/Index.vue';
   import ImportHostBtn from './components/ImportHostBtn.vue';
   import RenderTable from './components/RenderTable.vue';
-  import ResourceSearchSelector from './components/resource-search-selector/Index.vue';
-  import TagResearchPanel from './components/tag-research/panel/Index.vue';
-  import TagResearchSelector from './components/tag-research/selector/Index.vue';
+  import SearchBox from './components/search-box/Index.vue';
   import UpdateAssign from './components/update-assign/Index.vue';
   import useTableSetting from './hooks/useTableSetting';
 
@@ -196,7 +192,6 @@
 
   const searchBoxRef = ref();
   const tableRef = ref();
-  const searchValue = ref([]);
   const selectionHostIdList = ref<number[]>([]);
   const isShowBatchSetting = ref(false);
   const isShowImportHost = ref(false);
@@ -208,19 +203,9 @@
   const isShowBatchAssign = ref(false);
   const isShowUpdateAssign = ref(false);
   const curEditData = ref<DbResourceModel>();
-  const researchTags = ref<ResourceTagModel[]>([]);
   const isSelectedSameBiz = ref(false);
   const isBatchOperationShow = ref(false);
 
-  watch(researchTags, () => {
-    if (researchTags.value.length) {
-      searchParams.labels = researchTags.value.map((item) => item.id).join(',');
-    } else {
-      delete searchParams.labels;
-    }
-    fetchData();
-  });
-
   const curBizId = computed(() => {
     let bizId = undefined;
     switch (props.type) {
@@ -234,6 +219,11 @@
     return bizId;
   });
 
+  const dataSource = (params: ServiceParameters<typeof fetchList>) => fetchList({
+    for_biz: curBizId.value,
+    ...params,
+  });
+
   const searchParams: Record<string, any> = {};
   let selectionListWholeDataMemo: DbResourceModel[] = [];
   const tableColumn = [
@@ -267,10 +257,10 @@
             theme={(!data.resource_type || data.resource_type === 'PUBLIC') ? 'success' : undefined}>{t('所属DB')} : {data.resource_type_display}
           </Tag>
           {
-            data.label && Array.isArray(data.label) && (
-              data.label.map(item => (
+            data.labels && Array.isArray(data.labels) && (
+              data.labels.map(item => (
                 <Tag>
-                  {item}
+                  {item.name}
                 </Tag>
               ))
             )}
@@ -396,20 +386,15 @@
     },
   ];
 
-  watch(
-    searchValue,
-    () => {
-      fetchData();
-    }
-  );
-
   const fetchData = () => {
-    tableRef.value.fetchData({
-      ...searchParams,
-      ...getSearchSelectorParams(searchValue.value)
-    });
+    tableRef.value.fetchData(searchParams);
+  };
+
+  const handleSearch = (params: Record<string, any>) => {
+    tableRef.value.fetchData(params);
   };
 
+
   // 导入主机
   const handleImportHost = () => {
     isShowImportHost.value = true;
@@ -511,7 +496,9 @@
   }
 
   const handleShowBatchAssign = () => {
-    if (isSelectedSameBiz.value) isShowBatchAssign.value = true;
+    if (isSelectedSameBiz.value) {
+      isShowBatchAssign.value = true;
+    }
     handleBatchOperationShow(false);
   }
 
@@ -520,15 +507,18 @@
     curEditData.value = data;
   }
 
+  const handleRefresh = () => {
+    fetchData();
+    Object.values(selectionHostIdList.value).forEach((hostId) => {
+      tableRef.value.removeSelectByKey(hostId);
+    });
+    selectionHostIdList.value = [];
+  }
+
   const handleBatchOperationShow = (val: boolean) => {
     isBatchOperationShow.value = val;
   }
 
-  const dataSource = async (params: ServiceParameters<typeof fetchList>) => await fetchList({
-    for_biz: curBizId.value,
-    ...params,
-  })
-
   onMounted(() => {
     fetchData();
   });
@@ -541,7 +531,7 @@
 
       .quick-search-btn {
         width: 32px;
-        margin-left: 8px;
+        margin-left: auto;
       }
 
       .search-selector {

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue

@@ -58,15 +58,15 @@
 
   const { run: runRemove } = useRequest(removeResource, {
     manual: true,
-    onSuccess: () => {
+    onSuccess() {
       messageSuccess(t('操作成功'));
       emits('refresh');
     },
   });
 
   const { run: convertToPublic } = useRequest(updateResource, {
     manual: true,
-    onSuccess: () => {
+    onSuccess() {
       messageSuccess(t('操作成功'));
       emits('refresh');
     },

dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/batch-assign/Index.vue

@@ -30,11 +30,11 @@
       <div>
         <span
           v-bk-tooltips="{
-            disabled: hostList.length > 0,
+            disabled: !!hostList.length,
             content: t('请选择主机'),
           }">
           <BkButton
-            :disabled="hostList.length < 1"
+            :disabled="!hostList.length"
             :loading="isUpdating"
             theme="primary"
             @click="handleSubmit">
@@ -58,6 +58,8 @@
   import DbResourceModel from '@services/model/db-resource/DbResource';
   import { updateResource } from '@services/source/dbresourceResource';
 
+  import { messageSuccess } from '@utils';
+
   import FormPanel from './components/FormPanel.vue';
   import ListPanel from './components/ListPanel.vue';
 
@@ -93,9 +95,9 @@
 
   const { loading: isUpdating, run: runUpdate } = useRequest(updateResource, {
     manual: true,
-    onSuccess: () => {
-      emits('refresh');
-      isShow.value = false;
+    onSuccess() {
+      handleCancel();
+      messageSuccess('设置成功');
     },
   });
 
@@ -111,18 +113,19 @@
   };
 
   const handleSubmit = async () => {
-    const data = await formPanelRef.value?.getValue();
+    const data = await formPanelRef.value!.getValue();
     runUpdate({
       bk_host_ids: hostList.value.map((item) => item.bk_host_id),
-      for_biz: data?.for_biz as number,
-      resource_type: data?.resource_type as string,
-      labels: data?.labels,
+      for_biz: data.for_biz as number,
+      resource_type: data.resource_type as string,
+      labels: data.labels,
       rack_id: '',
       storage_device: {},
     });
   };
 
   const handleCancel = () => {
+    emits('refresh');
     isShow.value = false;
   };
 </script>