From 297781da08e8de18705e2f747c064132f3579ca2 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Thu, 14 Nov 2024 11:07:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E6=A0=87?=
 =?UTF-8?q?=E5=87=86=E5=8C=96=20#4654=20#=20Reviewed,=20transaction=20id:?=
 =?UTF-8?q?=2024078?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...queryClusterTypes.ts => dbClusterTypes.ts} |  2 +-
 dbm-ui/frontend/src/common/const/index.ts     |  2 +-
 dbm-ui/frontend/src/services/source/dbbase.ts | 32 +++++++++++++-
 dbm-ui/frontend/src/services/source/mysql.ts  |  7 ---
 .../components/cluster-selector/Index.vue     | 24 +++++-----
 .../components/cluster-select/Index.vue       |  4 +-
 .../components/cluster-select/Table.vue       |  6 +--
 .../cluster-select/hooks/useTableData.ts      | 27 +++++++-----
 .../components/manual-input/Index.vue         | 44 ++++++++++++-------
 .../components/manual-input/Table.vue         |  4 +-
 .../components/preview-result/Index.vue       |  4 +-
 .../components/mysql/Index.vue                | 11 ++---
 .../webconsole/components/ClusterTabs.vue     |  4 +-
 .../partition-manage/components/Operation.vue |  4 +-
 .../components/SelectClusters.vue             |  4 +-
 15 files changed, 108 insertions(+), 71 deletions(-)
 rename dbm-ui/frontend/src/common/const/{queryClusterTypes.ts => dbClusterTypes.ts} (97%)

diff --git a/dbm-ui/frontend/src/common/const/queryClusterTypes.ts b/dbm-ui/frontend/src/common/const/dbClusterTypes.ts
similarity index 97%
rename from dbm-ui/frontend/src/common/const/queryClusterTypes.ts
rename to dbm-ui/frontend/src/common/const/dbClusterTypes.ts
index ea08f507c0..2d1e760df4 100644
--- a/dbm-ui/frontend/src/common/const/queryClusterTypes.ts
+++ b/dbm-ui/frontend/src/common/const/dbClusterTypes.ts
@@ -4,7 +4,7 @@ import { DBTypes } from './dbTypes';
 /**
  * db类型关联集群类型集合映射关系
  */
-export const queryClusterTypes = {
+export const DBClusterTypes = {
   [DBTypes.MYSQL]: [ClusterTypes.TENDBSINGLE, ClusterTypes.TENDBHA],
   [DBTypes.TENDBCLUSTER]: [ClusterTypes.TENDBCLUSTER],
   [DBTypes.REDIS]: [
diff --git a/dbm-ui/frontend/src/common/const/index.ts b/dbm-ui/frontend/src/common/const/index.ts
index e600c24e77..78405019b9 100644
--- a/dbm-ui/frontend/src/common/const/index.ts
+++ b/dbm-ui/frontend/src/common/const/index.ts
@@ -4,6 +4,7 @@ export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';
 export * from './confLevels';
+export * from './dbClusterTypes';
 export * from './dbSysExclude';
 export * from './dbTypeInfos';
 export * from './dbTypes';
@@ -12,7 +13,6 @@ export * from './machineTypes';
 export * from './occupiedInnerHeight';
 export * from './osTypes';
 export * from './pipelineStatus';
-export * from './queryClusterTypes';
 export * from './ticketTypeInfos';
 export * from './ticketTypes';
 export * from './userPersonalSettings';
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index 8170495351..149d2ebc61 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -106,6 +106,28 @@ export function checkInstance<T extends InstanceInfos>(params: { instance_addres
 
 // 查询全集群信息
 export function queryAllTypeCluster(params: {
+  bk_biz_id: number;
+  cluster_types?: string;
+  immute_domain?: string;
+  phase?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return http.get<
+    {
+      bk_cloud_id: number;
+      cluster_type: string;
+      id: number;
+      immute_domain: string;
+      major_version: string;
+      name: string;
+      region: string;
+    }[]
+  >(`${path}/simple_query_cluster/`, params);
+}
+
+// 全集群列表
+export function queryAllTypeClusterList(params: {
   bk_biz_id?: number; // 业务id
   cluster_types?: string; // 集群类型(逗号间隔)
   immute_domain?: string; // 集群域名
@@ -140,5 +162,13 @@ export function queryAllTypeCluster(params: {
         status: string;
       }[]
     >
-  >(`${path}/simple_query_cluster/`, params);
+  >(`${path}/simple_query_cluster_v2/`, params);
+}
+export type ClusterInfo = ServiceReturnType<typeof queryAllTypeClusterList>['results'][number];
+
+/**
+ * 根据用户手动输入的域名列表查询
+ */
+export function checkDomains(params: { domains: string[] }) {
+  return http.post<ClusterInfo[]>(`${path}/check_domains/`, params);
 }
diff --git a/dbm-ui/frontend/src/services/source/mysql.ts b/dbm-ui/frontend/src/services/source/mysql.ts
index edf6079f95..4e9077ac8f 100644
--- a/dbm-ui/frontend/src/services/source/mysql.ts
+++ b/dbm-ui/frontend/src/services/source/mysql.ts
@@ -39,10 +39,3 @@ export function getClusterList(params: {
 }) {
   return http.post<ListBase<TendbhaModel[]>>(`/apis/mysql/query_clusters/`, params);
 }
-
-/**
- * 根据用户手动输入的域名列表查询
- */
-export function checkDomains(params: { domains: Array<string> }) {
-  return http.post<Array<TendbhaModel>>(`/apis/mysql/check_domains/`, params);
-}
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
index c1bde80c03..ea3f761319 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
@@ -68,30 +68,26 @@
     </template>
   </BkDialog>
 </template>
+<script setup lang="ts">
+  import type { ClusterInfo } from '@services/source/dbbase';
 
-<script lang="ts">
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import { ClusterTypes, DBTypes } from '@common/const';
 
-  export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
+  import { t } from '@locales/index';
+
+  import ClusterSelect from './components/cluster-select/Index.vue';
+  import PanelTab from './components/common/PanelTab.vue';
+  import ManualInput from './components/manual-input/Index.vue';
+  import PreviewResult from './components/preview-result/Index.vue';
 
   interface Props {
     dbType: DBTypes;
-    selected: Record<string, ICluster[]>;
+    selected: Record<string, ClusterInfo[]>;
   }
 
   interface Emits {
     (e: 'change', value: Props['selected']): void;
   }
-</script>
-<script setup lang="ts">
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import { t } from '@locales/index';
-
-  import ClusterSelect from './components/cluster-select/Index.vue';
-  import PanelTab from './components/common/PanelTab.vue';
-  import ManualInput from './components/manual-input/Index.vue';
-  import PreviewResult from './components/preview-result/Index.vue';
 
   const props = withDefaults(defineProps<Props>(), {
     selected: () => ({}),
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
index 63f84cba32..a3de0fa1fc 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
@@ -78,10 +78,10 @@
     </div>
   </BkLoading>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { ClusterTypes } from '@common/const';
 
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
index 20ce498832..1c5a632c8b 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
@@ -36,10 +36,10 @@
     </BkLoading>
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { useLinkQueryColumnSerach } from '@hooks';
 
@@ -112,7 +112,7 @@
   } = useLinkQueryColumnSerach({
     searchType: props.activePanelId,
     fetchDataFn: () => fetchResources(),
-    isQueryAttrs: false
+    isQueryAttrs: false,
   });
 
   const checkedMap = shallowRef({} as Record<string, T>);
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
index 668245753a..9344d25a69 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
@@ -12,9 +12,10 @@
  */
 
 import type { ISearchValue } from 'bkui-vue/lib/search-select/utils';
+import _ from 'lodash';
 import { useRequest } from 'vue-request';
 
-import { queryAllTypeCluster } from '@services/source/dbbase';
+import { type ClusterInfo, queryAllTypeClusterList } from '@services/source/dbbase';
 
 import { getSearchSelectorParams } from '@utils';
 
@@ -29,7 +30,7 @@ export function useTableData(
     db_module_id?: number;
   }>,
 ) {
-  const tableData = shallowRef<ServiceReturnType<typeof queryAllTypeCluster>['results']>([]);
+  const tableData = shallowRef<ClusterInfo[]>([]);
   const pagination = reactive({
     count: 0,
     current: 1,
@@ -39,15 +40,21 @@ export function useTableData(
     layout: ['total', 'limit', 'list'],
   });
 
-  const searchParams = computed(() => ({
-    limit: pagination.limit,
-    offset: (pagination.current - 1) * pagination.limit,
-    extra: 1,
-    ...getSearchSelectorParams(searchSelectValue.value),
-    ...params.value,
-  }));
+  const searchParams = computed(() => {
+    const comParams = getSearchSelectorParams(searchSelectValue.value);
+    const cloneParams = _.cloneDeep(comParams);
+    delete cloneParams.domain;
+    return {
+      limit: pagination.limit,
+      offset: (pagination.current - 1) * pagination.limit,
+      extra: 1,
+      immute_domain: comParams.domain,
+      ...cloneParams,
+      ...params.value,
+    };
+  });
 
-  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeCluster, {
+  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeClusterList, {
     manual: true,
     onSuccess(data) {
       tableData.value = data.results;
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
index de2550c5a7..ea5d77a2d5 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
@@ -79,7 +79,8 @@
       <template #main>
         <BkLoading :loading="inputState.isLoading">
           <Table
-            :checked="checkedMap"
+            :active-panel-id="activePanelId"
+            :last-values="lastValues"
             :table-data="tableData"
             @change="handleChange" />
         </BkLoading>
@@ -87,32 +88,29 @@
     </BkResizeLayout>
   </div>
 </template>
-<script setup lang="ts" generic="T extends TendbhaModel">
+<script setup lang="ts" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type TendbhaModel from '@services/model/mysql/tendbha';
-  import { checkDomains } from '@services/source/mysql';
+  import type { ClusterInfo } from '@services/source/dbbase';
+  import { checkDomains } from '@services/source/dbbase';
 
   import { domainRegex } from '@common/regex';
 
   import Table from './Table.vue';
 
   interface Props {
-    checked: Record<string, T>;
-    checkKey?: string;
+    lastValues: Record<string, T[]>;
+    activePanelId: string;
   }
 
   interface Emits {
-    (e: 'change', value: Props['checked']): void;
+    (e: 'change', value: Props['lastValues']): void;
   }
-  const props = withDefaults(defineProps<Props>(), {
-    checkKey: 'master_domain',
-  });
+  const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const inputRef = ref();
-  const checkedMap = computed(() => props.checked);
 
   const inputState = reactive({
     values: '',
@@ -135,7 +133,7 @@
     },
   });
 
-  const handleChange = (checked: Props['checked']) => {
+  const handleChange = (checked: Props['lastValues']) => {
     emits('change', checked);
   };
 
@@ -198,7 +196,7 @@
         const item = lines[i];
         const infos = results[i];
         const remove = lines.splice(i, 1);
-        const isExisted = results.find((existItem) => existItem[props.checkKey as keyof TendbhaModel] === item);
+        const isExisted = results.find((existItem) => existItem.immute_domain === item);
         if (!isExisted) {
           legalLines.push(...remove);
         } else {
@@ -212,12 +210,24 @@
       errorState.domain.selectionEnd = legalLines.join('\n').length;
 
       // 解析完成后选中
-      const checked = { ...props.checked };
+      const lastValues = { ...props.lastValues };
       for (const item of tableData.value) {
-        const domain = item.master_domain;
-        checked[domain] = item as T;
+        const clusterType = props.activePanelId;
+        if (!lastValues[clusterType]) {
+          lastValues[clusterType] = [];
+        }
+        const list = lastValues[clusterType];
+        const isExisted =
+          list.length > 0 &&
+          list.find((i) => `${i.immute_domain}_${i.bk_cloud_id}` === `${item.immute_domain}_${item.bk_cloud_id}`);
+        if (!isExisted) {
+          lastValues[clusterType].push(item);
+        }
       }
-      emits('change', checked);
+      emits('change', {
+        ...props.lastValues,
+        ...lastValues,
+      });
     } catch (_) {
       console.error(_);
     }
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
index 1d54f217ed..37706aec8f 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
@@ -27,10 +27,10 @@
       :settings="tableSettings" />
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import DbStatus from '@components/db-status/index.vue';
 
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
index b2227568a7..47e4d44c11 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
@@ -63,10 +63,10 @@
     </div>
   </div>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts" generic="T extends ClusterInfo">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/source/dbbase';
 
   import { useCopy } from '@hooks';
 
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
index e6faa18023..f5ebb93af9 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
@@ -64,11 +64,12 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
+  import type { ClusterInfo } from '@services/source/dbbase';
   import { createTicket } from '@services/source/ticket';
 
   import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
 
-  import ClusterSelector, { type ICluster } from '../cluster-selector/Index.vue';
+  import ClusterSelector from '../cluster-selector/Index.vue';
   import type { ClusterModel } from '../common/RenderCluster.vue';
 
   import RenderData from './components/render-data/Index.vue';
@@ -82,9 +83,9 @@
 
   const isShowBatchSelector = ref(false);
   const tableData = ref<IDataRow[]>([createRowData()]);
-  const selected = shallowRef<Record<string, ICluster[]>>({
-    [ClusterTypes.TENDBHA]: [] as ICluster[],
-    [ClusterTypes.TENDBSINGLE]: [] as ICluster[],
+  const selected = shallowRef<Record<string, ClusterInfo[]>>({
+    [ClusterTypes.TENDBHA]: [] as ClusterInfo[],
+    [ClusterTypes.TENDBSINGLE]: [] as ClusterInfo[],
   });
 
   const totalNum = computed(() => tableData.value.filter((item) => Boolean(item.clusterType)).length);
@@ -121,7 +122,7 @@
   };
 
   // 从集群选择器选择确认后
-  const handelClusterChange = (data: Record<string, ICluster[]>) => {
+  const handelClusterChange = (data: Record<string, ClusterInfo[]>) => {
     selected.value = data;
     const newList = Object.values(data)
       .flat()
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
index 1dca2bce9f..a085612020 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
@@ -70,7 +70,7 @@
 
   import { queryAllTypeCluster } from '@services/source/dbbase';
 
-  import { DBTypes, queryClusterTypes } from '@common/const';
+  import { DBClusterTypes, DBTypes } from '@common/const';
 
   import { messageWarn } from '@utils';
 
@@ -126,7 +126,7 @@
     defaultParams: [
       {
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        cluster_types: queryClusterTypes[props.dbType].join(','),
+        cluster_types: DBClusterTypes[props.dbType].join(','),
         phase: 'online',
       },
     ],
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
index c898ed8ad9..112a1882be 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
@@ -145,7 +145,7 @@
     verifyPartitionField,
   } from '@services/source/partitionManage';
 
-  import { dbSysExclude } from '@common/const';
+  import { DBClusterTypes, dbSysExclude, DBTypes } from '@common/const';
   import { dbRegex } from '@common/regex';
 
   interface Props {
@@ -316,7 +316,7 @@
         offset: 0,
         limit: -1,
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        cluster_types: 'tendbha,tendbsingle',
+        cluster_types: DBClusterTypes[DBTypes.MYSQL].join(','),
       },
     ],
   });
diff --git a/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue b/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
index c5b5544cb4..f03b7887b2 100644
--- a/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
+++ b/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
@@ -42,7 +42,7 @@
 
   import { queryAllTypeCluster } from '@services/source/dbbase';
 
-  import { DBTypes, queryClusterTypes } from '@common/const';
+  import { DBClusterTypes, DBTypes } from '@common/const';
 
   import useValidtor from '@components/render-table/hooks/useValidtor';
 
@@ -89,7 +89,7 @@
       if (props.bizId) {
         fetchData({
           bk_biz_id: props.bizId,
-          cluster_types: queryClusterTypes[props.dbType as keyof typeof queryClusterTypes].join(','),
+          cluster_types: DBClusterTypes[props.dbType].join(','),
           phase: 'online',
           limit: -1,
         });