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

# Reviewed, transaction id: 22543

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3597,5 +3597,6 @@
     "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源": "确认后，将主机将清空已存在的资源归属设置，并设置为公共资源",
     "确认批量将 {n} 台主机转入业务资源池？": "确认批量将 {n} 台主机转入业务资源池？",
     "确认转入待故障池？": "确认转入待故障池？",
+    "跳转管理页": "跳转管理页",
     "这行勿动！新增翻译请在上一行添加！": ""
   }

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;
+  label: {
+    name: string;
+    id: number;
+  }[];
   net_device_id: string;
   os_bit: string;
   os_type: string;

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/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">
         <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) {
@@ -270,7 +255,7 @@
             data.label && Array.isArray(data.label) && (
               data.label.map(item => (
                 <Tag>
-                  {item}
+                  {item.name}
                 </Tag>
               ))
             )}
@@ -396,20 +381,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 +491,9 @@
   }
 
   const handleShowBatchAssign = () => {
-    if (isSelectedSameBiz.value) isShowBatchAssign.value = true;
+    if (isSelectedSameBiz.value) {
+      isShowBatchAssign.value = true;
+    }
     handleBatchOperationShow(false);
   }
 
@@ -520,6 +502,14 @@
     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;
   }
@@ -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/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">
@@ -111,12 +111,12 @@
   };
 
   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: {},
     });

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

@@ -132,7 +132,9 @@
 
   watch(
     () => props.bizId,
-    () => (formData.for_biz = props.bizId),
+    () => {
+      formData.for_biz = props.bizId;
+    },
     {
       immediate: true,
     },

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

@@ -34,11 +34,6 @@
           <DbIcon type="more" />
         </div>
         <template #content>
-          <div
-            class="item"
-            @click="handleRemoveAll">
-            {{ t('清除所有') }}
-          </div>
           <div
             class="item"
             @click="handleCopyAll">
@@ -133,12 +128,13 @@
 
   useRequest(fetchDbTypeList, {
     onSuccess(data) {
-      const cloneData = data;
-      cloneData.unshift({
-        id: 'PUBLIC',
-        name: t('通用'),
-      });
-      dbTypeList.value = cloneData;
+      dbTypeList.value = [
+        {
+          id: 'PUBLIC',
+          name: t('通用'),
+        },
+        ...data,
+      ];
     },
   });
 
@@ -166,17 +162,11 @@
     isShowHostActionPop.value = false;
   };
 
-  // 清空所有主机
-  const handleRemoveAll = () => {
-    hostList.value = [];
-    isShowHostActionPop.value = false;
-  };
-
   // 复制所有主机 IP
   const handleCopyAll = () => {
     const ipList = hostList.value.map((item) => item.ip);
     isShowHostActionPop.value = false;
-    if (ipList.length < 1) {
+    if (!ipList.length) {
       messageWarn(t('暂无可复制 IP'));
       return;
     }
@@ -191,12 +181,12 @@
 
   // 删除单个主机
   const handleRemove = (hostItem: DbResourceModel) => {
-    const hostListResult = hostList.value.reduce((result, item) => {
+    const hostListResult = hostList.value.reduce<DbResourceModel[]>((result, item) => {
       if (item.bk_host_id !== hostItem.bk_host_id) {
         result.push(item);
       }
       return result;
-    }, [] as DbResourceModel[]);
+    }, []);
 
     hostList.value = hostListResult;
   };

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

@@ -13,7 +13,7 @@
 <template>
   <ReviewDataDialog
     :is-show="isShow"
-    :loading="loading"
+    :loading="isUpdating"
     :selected="selectedIpList"
     :tip="t('确认后，主机将标记为业务专属')"
     :title="t('确认批量将 {n} 台主机转入业务资源池？', { n: props.selected.length })"
@@ -51,7 +51,7 @@
 
   const selectedIpList = computed(() => props.selected.map((item) => item.ip));
 
-  const { loading, run: runUpdate } = useRequest(updateResource, {
+  const { loading: isUpdating, run: runUpdate } = useRequest(updateResource, {
     manual: true,
     onSuccess: () => {
       emits('refresh');

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

@@ -13,7 +13,7 @@
 <template>
   <ReviewDataDialog
     :is-show="isShow"
-    :loading="loading"
+    :loading="isUpdating"
     :selected="selectedIpList"
     :tip="t('确认后，将主机将清空已存在的资源归属设置，并设置为公共资源')"
     :title="t('确认将 {n} 台主机转为公共资源?', { n: props.selected.length })"
@@ -52,7 +52,7 @@
 
   const selectedIpList = computed(() => props.selected.map((item) => item.ip));
 
-  const { loading, run: runUpdate } = useRequest(updateResource, {
+  const { loading: isUpdating, run: runUpdate } = useRequest(updateResource, {
     manual: true,
     onSuccess: () => {
       emits('refresh');

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

@@ -1,7 +1,7 @@
 <template>
   <ReviewDataDialog
     :is-show="isShow"
-    :loading="loading"
+    :loading="isRemoving"
     :selected="selectedIpList"
     :tip="t('确认后，主机将标记为故障，等待处理')"
     :title="t('确认批量将 {n} 台主机转入故障池?', { n: props.selected.length })"
@@ -40,7 +40,7 @@
 
   const selectedIpList = computed(() => props.selected.map((item) => item.ip));
 
-  const { loading, run: runDelete } = useRequest(removeResource, {
+  const { loading: isRemoving, run: runDelete } = useRequest(removeResource, {
     manual: true,
     onSuccess: () => {
       emits('refresh');