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

# Reviewed, transaction id: 22487

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

@@ -15,7 +15,6 @@ import dayjs from 'dayjs';
 import { utcDisplayTime } from '@utils';
 
 export default class ResourceTag {
-  count: number; // 绑定IP数量
   create_at: string; // 创建时间
   creator: string; // 创建人
   id: number; // 标签ID
@@ -24,7 +23,6 @@ export default class ResourceTag {
   value: string; // 标签名
 
   constructor(payload = {} as ResourceTag) {
-    this.count = payload.count || 0;
     this.create_at = payload.create_at || '';
     this.creator = payload.creator || '';
     this.id = payload.id || 0;
@@ -44,12 +42,4 @@ export default class ResourceTag {
   get updatedAtDisplay() {
     return utcDisplayTime(this.update_at);
   }
-
-  get isBinded() {
-    return this.count > 0;
-  }
-
-  get tag() {
-    return this.value;
-  }
 }

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

@@ -16,18 +16,21 @@ export function listTag(params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<ListBase<ResourceTagModel[]>>(`${path}`, params);
+  return http.get<ListBase<ResourceTagModel[]>>(`${path}`, params).then((res) => ({
+    ...res,
+    results: res.results.map((item: ResourceTagModel) => new ResourceTagModel(item)),
+  }));
 }
 
 /**
  * 新增资源标签
  */
 export function createTag(params: {
   bk_biz_id: number;
-  tags: Array<{
+  tags: {
     key: string; // 固定为 dbresource
     value: string;
-  }>;
+  }[];
 }) {
   return http.post(`${path}batch_create/`, params);
 }
@@ -51,25 +54,25 @@ export function updateTag(params: { bk_biz_id: number; id: number; value: string
  */
 export function validateTag(params: {
   bk_biz_id: number;
-  tags: Array<{
+  tags: {
     key: string;
     value: string;
-  }>;
+  }[];
 }) {
-  return http.post<Array<{ key: string; value: string }>>(`${path}verify_duplicated/`, params);
+  return http.post<{ key: string; value: string }[]>(`${path}verify_duplicated/`, params);
 }
 
 /**
  * 根据标签id获取关联IP
  */
 export function getTagRelatedResource(params: { bk_biz_id: number; ids: number[]; resource_type?: string }) {
   return http.post<
-    Array<{
+    {
       id: number;
       related_resources: {
         resource_type: string;
         count: number;
       }[];
-    }>
+    }[]
   >(`${path}related_resources/`, params);
 }

dbm-ui/frontend/src/views/resource-manage/pool/business/Index.vue

@@ -67,7 +67,6 @@
       params: {
         page: value,
       },
-      query: {},
     });
   };
 </script>

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

@@ -167,7 +167,7 @@
   import BatchMoveToRecyclePool from './components/batch-move-to-recycle-pool/Index.vue';
   import BatchSetting from './components/batch-setting/Index.vue';
   import BatchUndoImport from './components/batch-undo-import/Index.vue';
-  import HostOperationBtn from './components/HostOperationBtn.vue';
+  import HostOperationTip from './components/HostOperationTip.vue';
   import ImportHost from './components/import-host/Index.vue';
   import ImportHostBtn from './components/ImportHostBtn.vue';
   import RenderTable from './components/RenderTable.vue';
@@ -212,9 +212,9 @@
   const isSelectedSameBiz = ref(false);
   const isBatchOperationShow = ref(false);
 
-  watch(researchTags, (val) => {
-    if (val.length) {
-      searchParams.labels = val.map((item) => item.id).join(',');
+  watch(researchTags, () => {
+    if (researchTags.value.length) {
+      searchParams.labels = researchTags.value.map((item) => item.id).join(',');
     } else {
       delete searchParams.labels;
     }
@@ -336,39 +336,59 @@
       fixed: 'right',
       render: ({ data }: { data: DbResourceModel }) => (
         props.type === ResourcePool.public ? (
-          <HostOperationBtn
+          <HostOperationTip
             data={data}
-            buttonText={t('转入业务资源池')}
             type="public"
             onRefresh={fetchData}
             tip={t('确认后，主机将标记为业务专属')}
             title={t('确认转入业务资源池？')}
-          />
+          >
+            <BkButton
+              text
+              theme="primary">
+              {t('转入业务资源池')}
+            </BkButton>
+          </HostOperationTip>
         ) : (
           <>
-            <HostOperationBtn
+            <HostOperationTip
               data={data}
               title={t('确认转入待回收池？')}
               tip={t('确认后，主机将标记为待回收，等待处理')}
-              buttonText={t('移入待回收池')}
               type='to_recycle'
-              onRefresh={fetchData} />
-            <HostOperationBtn
+              onRefresh={fetchData} >
+              <BkButton
+                text
+                theme="primary">
+                {t('移入待回收池')}
+              </BkButton>
+            </HostOperationTip>
+            <HostOperationTip
               data={data}
-              btnCls='ml-16'
               title={t('确认转入待故障池？')}
               tip={t('确认后，主机将标记为故障，等待处理')}
-              buttonText={t('移入故障池')}
               type='to_fault'
-              onRefresh={fetchData} />
-            <HostOperationBtn
+              onRefresh={fetchData} >
+              <BkButton
+                text
+                class='ml-16'
+                theme="primary">
+                {t('移入故障池')}
+              </BkButton>
+            </HostOperationTip>
+            <HostOperationTip
               data={data}
-              btnCls='ml-16'
               title={t('确认撤销导入？')}
               tip={t('确认后，主机将从资源池移回原有模块')}
-              buttonText={t('撤销导入')}
               type='undo_import'
-              onRefresh={fetchData} />
+              onRefresh={fetchData}>
+              <BkButton
+                text
+                class='ml-16'
+                theme="primary">
+                {t('撤销导入')}
+              </BkButton>
+            </HostOperationTip>
           </>
         )
 
@@ -377,14 +397,7 @@
   ];
 
   watch(
-    () => props.type,
-    () => {
-      fetchData();
-    }
-  );
-
-  watch(
-    () => searchValue.value,
+    searchValue,
     () => {
       fetchData();
     }