fix(frontend): 权限查询页查询条件手输无法查询 #8207

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 {

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">

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>({

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>