From 6d778423b8678b5e233a975f402505738601d729 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Thu, 28 Nov 2024 15:07:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E6=9D=83=E9=99=90=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E9=A1=B5=E6=9F=A5=E8=AF=A2=E6=9D=A1=E4=BB=B6=E6=89=8B?=
 =?UTF-8?q?=E8=BE=93=E6=97=A0=E6=B3=95=E6=9F=A5=E8=AF=A2=20#8207?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/services/source/dbbase.ts |   2 +-
 .../components/options/Index.vue              |  22 +++-
 .../options/components/item/Domain.vue        | 112 +++++++++++++++--
 .../components/options/components/item/Ip.vue |  13 +-
 .../options/components/item/UserSelect.vue    | 114 ++++++++++++------
 5 files changed, 212 insertions(+), 51 deletions(-)

diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index eb46a561ad..55d60f791a 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -27,7 +27,7 @@ export function verifyDuplicatedClusterName(params: { cluster_type: string; name
 }
 
 /**
- * 根据过滤条件查询集群详细信息
+ * 根据过滤条件查询集群详细信息，返回的字段和集群列表接口相同
  */
 export function filterClusters<
   T extends {
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
index 19add5dc9d..6b8d2026d9 100644
--- a/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
@@ -17,20 +17,25 @@
       ref="formRef"
       form-type="vertical"
       :model="formData">
-      <IpItem v-model="formData.ips" />
+      <IpItem
+        v-model="formData.ips"
+        @change="getUserList" />
       <DomainItem
         ref="domainItemRef"
         v-model="formData.immute_domains"
         v-model:cluster-type="formData.cluster_type"
         v-model:is-master="formData.is_master"
-        :account-type="accountType" />
+        :account-type="accountType"
+        @change="getUserList" />
       <BkFormItem
         :label="t('账号')"
         property="users"
         required>
         <UserSelect
+          ref="userSelectRef"
           v-model="formData.users"
-          :form-data="formData" />
+          :form-data="formData"
+          :validate-func="userSelectValidateFunc" />
       </BkFormItem>
       <BkFormItem
         :label="t('访问 DB')"
@@ -110,6 +115,7 @@
 
   const formRef = ref<InstanceType<typeof Form>>();
   const domainItemRef = ref<InstanceType<typeof DomainItem>>();
+  const userSelectRef = ref<InstanceType<typeof UserSelect>>();
 
   const formData = reactive(getDefaultFormData());
 
@@ -134,6 +140,16 @@
       formRef.value!.clearValidate();
     });
   };
+
+  const userSelectValidateFunc = () =>
+    formRef
+      .value!.validate(['ips', 'immute_domains'])
+      .then(() => true)
+      .catch(() => false);
+
+  const getUserList = () => {
+    userSelectRef.value!.getUserList();
+  };
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
index 913229906e..839e69d669 100644
--- a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
@@ -45,6 +45,7 @@
   import TendbhaModel from '@services/model/mysql/tendbha';
   import TendbsingleModel from '@services/model/mysql/tendbsingle';
   import SpiderModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
   import { getTendbhaList, getTendbhaSalveList } from '@services/source/tendbha';
 
   import { AccountTypes, ClusterTypes } from '@common/const';
@@ -62,13 +63,16 @@
     accountType: AccountTypes;
   }
 
+  interface Emits {
+    (e: 'change'): void;
+  }
+
   interface Expose {
     reset: () => void;
   }
 
   const props = defineProps<Props>();
-
-  const { t } = useI18n();
+  const emits = defineEmits<Emits>();
 
   const modelValue = defineModel<string>({
     required: true,
@@ -80,6 +84,8 @@
     required: true,
   });
 
+  const { t } = useI18n();
+
   const getDefaultSelectedClusters = () =>
     accoutMap[props.accountType as keyof typeof accoutMap].clusterSelectorTypes.reduce(
       (prevMap, type) => Object.assign({}, prevMap, { [type]: [] }),
@@ -147,15 +153,107 @@
     const clusterList = Object.values(selected).find((clusterList) => clusterList.length > 0);
     clusterType.value = (clusterList?.[0].cluster_type || ClusterTypes.TENDBSINGLE) as ClusterTypes;
     isMaster.value = !selectedClusters.value?.tendbhaSlave?.length;
+
+    emits('change');
+  };
+
+  const getDomainDiffInfo = (
+    oldDomains: string[],
+    newDomains: string[],
+  ): {
+    added?: string[];
+    deleted?: string[];
+    unchanged?: string[];
+  } => {
+    // 使用 Set 提高性能
+    const oldSet = new Set(oldDomains);
+    const newSet = new Set(newDomains);
+
+    // 初始化结果数组
+    const result: { domain: string; status: 'added' | 'deleted' | 'unchanged' }[] = [];
+
+    // 遍历新域名集合，检查每个域名的状态
+    for (const domain of newSet) {
+      if (oldSet.has(domain)) {
+        result.push({ domain, status: 'unchanged' });
+      } else {
+        result.push({ domain, status: 'added' });
+      }
+    }
+
+    // 遍历旧域名集合，检查每个域名的状态
+    for (const domain of oldSet) {
+      if (!newSet.has(domain)) {
+        result.push({ domain, status: 'deleted' });
+      }
+    }
+
+    // 按状态分类结果
+    const classifiedResult = result.reduce<Record<string, string[]>>((acc, item) => {
+      if (!acc[item.status]) {
+        acc[item.status] = [];
+      }
+      acc[item.status].push(item.domain);
+      return acc;
+    }, {});
+
+    // 输出分类结果
+    return classifiedResult;
   };
 
   const handleDomainChange = (value: string) => {
+    // 减少或增加，需要与选择器联动
     const newDomainList = value.split(batchSplitRegex).filter((item) => item);
-    const domainSet = new Set(newDomainList);
-    Object.keys(selectedClusters.value).forEach((key) => {
-      const clusterList = selectedClusters.value[key];
-      selectedClusters.value[key] = clusterList.filter((clusterItem) => domainSet.has(clusterItem.master_domain));
-    });
+    const newValidDomainList = newDomainList.filter((item) => domainRegex.test(item));
+    const selectDomainList = Object.values(selectedClusters.value).flatMap((item) => item);
+
+    const diffResult = getDomainDiffInfo(
+      selectDomainList.map((item) => item.master_domain),
+      newValidDomainList,
+    );
+
+    const addList = diffResult.added || [];
+    const deleteList = diffResult.deleted || [];
+    const deleteSet = new Set(deleteList);
+
+    if (addList.length) {
+      filterClusters({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: addList.join(','),
+      }).then((clusterResultList) => {
+        // 删除时，删去已选集群
+        deleteSelectedCluster(deleteSet);
+
+        // 新增时，查询集群信息，同步已选集群
+        const selected = selectedClusters.value;
+        clusterResultList.forEach((clusterItem) => {
+          selected[clusterItem.cluster_type] = selected[clusterItem.cluster_type].concat(clusterItem);
+        });
+        selectedClusters.value = selected;
+
+        const clusterList = Object.values(selected).find((clusterList) => clusterList.length > 0);
+        clusterType.value = (clusterList?.[0].cluster_type || ClusterTypes.TENDBSINGLE) as ClusterTypes;
+        isMaster.value = !selectedClusters.value?.tendbhaSlave?.length;
+
+        nextTick(() => {
+          emits('change');
+        });
+      });
+    } else {
+      // 删除时，删去已选集群
+      deleteSelectedCluster(deleteSet);
+
+      emits('change');
+    }
+  };
+
+  const deleteSelectedCluster = (deleteSet: Set<string>) => {
+    if (deleteSet.size) {
+      Object.keys(selectedClusters.value).forEach((key) => {
+        const clusterList = selectedClusters.value[key];
+        selectedClusters.value[key] = clusterList.filter((clusterItem) => !deleteSet.has(clusterItem.master_domain));
+      });
+    }
   };
 
   defineExpose<Expose>({
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
index 314ead08d2..8192d47bde 100644
--- a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
@@ -8,6 +8,7 @@
       v-model="modelValue"
       icon-type="batch-host-select"
       :max-count="50"
+      @change="handleChange"
       @icon-click="() => (hostSelectorShow = true)" />
   </BkFormItem>
   <IpSelector
@@ -54,12 +55,17 @@
 
   import BatchInput from './components/BatchInput.vue';
 
-  const { t } = useI18n();
+  interface Emits {
+    (e: 'change'): void;
+  }
 
+  const emits = defineEmits<Emits>();
   const modelValue = defineModel<string>({
     required: true,
   });
 
+  const { t } = useI18n();
+
   const bizId = window.PROJECT_CONFIG.BIZ_ID;
 
   const rules = [
@@ -89,6 +95,10 @@
 
   const disableHostSubmitMethod = (hostList: HostInfo[]) => (hostList.length <= 50 ? false : t('至多n台', { n: 50 }));
 
+  const handleChange = () => {
+    emits('change');
+  };
+
   const handleChangeIP = (data: HostInfo[]) => {
     selectedHosts.value = data;
     modelValue.value = data.map((item) => item.ip).join(' | ');
@@ -100,6 +110,7 @@
       const ipList = data.flatMap((item) => item.ips).map((ip) => ip);
       const prevIpList = modelValue.value ? modelValue.value.split(' | ') : [];
       modelValue.value = [...prevIpList, ...ipList].map((item) => item).join(' | ');
+      emits('change');
     });
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
index c264f010e2..9ebcc2a182 100644
--- a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
@@ -12,34 +12,51 @@
 -->
 
 <template>
-  <BkSelect
-    v-model="modelValue"
-    allow-create
-    class="permission-user-select"
-    collapse-tags
-    filterable
-    multiple
-    multiple-mode="tag"
-    :placeholder="t('请选择或直接输入账号，Enter完成输入')">
-    <BkOption
-      v-for="item in userOptionList"
-      :id="item.value"
-      :key="item.value"
-      :name="item.label" />
-    <template #tag="{ selected }">
-      <BkTag
-        v-for="item in selected"
+  <div class="permission-retrieve-user-select">
+    <BkSelect
+      v-model="modelValue"
+      allow-create
+      class="permission-user-select"
+      collapse-tags
+      filterable
+      :loading="loading"
+      multiple
+      multiple-mode="tag"
+      :placeholder="t('请选择或直接输入账号，Enter完成输入')">
+      <BkOption
+        v-for="item in userOptionList"
+        :id="item.value"
         :key="item.value"
-        closable
-        :theme="userOptionList.findIndex((userOptionItem) => userOptionItem.value === item.value) > -1 ? '' : 'warning'"
-        @close="(event: Event) => handleUserClose(item.value)">
-        {{ item.value }}
-      </BkTag>
-    </template>
-  </BkSelect>
+        :name="item.label" />
+      <template #tag="{ selected }">
+        <BkTag
+          v-for="item in selected"
+          :key="item.value"
+          closable
+          :theme="
+            userOptionList.findIndex((userOptionItem) => userOptionItem.value === item.value) > -1 ? '' : 'warning'
+          "
+          @close="(event: Event) => handleUserClose(item.value)">
+          {{ item.value }}
+        </BkTag>
+      </template>
+    </BkSelect>
+    <span
+      v-bk-tooltips.top="t('刷新获取最新账号')"
+      class="ml-8">
+      <BkButton
+        :disabled="loading"
+        text
+        theme="primary"
+        @click="handleRetrieve">
+        <DbIcon type="refresh" />
+      </BkButton>
+    </span>
+  </div>
 </template>
 
 <script setup lang="tsx">
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -58,6 +75,11 @@
       account_type: AccountTypes;
       is_master: boolean;
     };
+    validateFunc: () => Promise<boolean>;
+  }
+
+  interface Expose {
+    getUserList: () => void;
   }
 
   const props = defineProps<Props>();
@@ -75,18 +97,20 @@
     })),
   );
 
-  const { data: userList, run: runGetUserList } = useRequest(
-    accoutMap[props.formData.account_type as keyof typeof accoutMap].ruleApi,
-    {
-      manual: true,
-    },
-  );
+  const {
+    data: userList,
+    run: runGetUserList,
+    loading,
+  } = useRequest(accoutMap[props.formData.account_type as keyof typeof accoutMap].ruleApi, {
+    manual: true,
+  });
+
+  const runGetUserListDebounce = _.debounce(runGetUserList);
 
-  watch(
-    () => [props.formData.ips, props.formData.immute_domains],
-    () => {
-      if (props.formData.ips && props.formData.immute_domains) {
-        runGetUserList({
+  const handleRetrieve = () => {
+    props.validateFunc().then((result) => {
+      if (result) {
+        runGetUserListDebounce({
           ips: props.formData.ips.replace(batchSplitRegex, ','),
           immute_domains: props.formData.immute_domains.replace(batchSplitRegex, ','),
           cluster_type: props.formData.cluster_type,
@@ -95,8 +119,8 @@
           offset: 0,
         });
       }
-    },
-  );
+    });
+  };
 
   const handleUserClose = (value: string) => {
     const index = modelValue.value.findIndex((userItem) => userItem === value);
@@ -104,12 +128,24 @@
       modelValue.value.splice(index, 1);
     }
   };
+
+  defineExpose<Expose>({
+    getUserList() {
+      handleRetrieve();
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-  .permission-user-select {
-    :deep(.bk-select-tag-wrapper) {
+  .permission-retrieve-user-select {
+    display: flex;
+
+    .permission-user-select {
       flex: 1;
+
+      :deep(.bk-select-tag-wrapper) {
+        flex: 1;
+      }
     }
   }
 </style>