fix(frontend): 集群授权访问源选择包含白名单ip TencentBlueKing#7597

# Reviewed, transaction id: 21936

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/SourceIps.vue

@@ -12,21 +12,23 @@
       :is-cloud-area-restrictions="false"
       :panel-list="['staticTopo', 'manualInput', 'dbmWhitelist']"
       service-mode="all"
-      @change="handleChangeIP" />
+      @change="handleChangeIP"
+      @change-whitelist="handleChangeWhitelist" />
   </DbFormItem>
 </template>
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { getWhitelist } from '@services/source/whitelist';
   import type { HostInfo } from '@services/types';
 
   import IpSelector from '@components/ip-selector/IpSelector.vue';
 
   export interface SourceIp {
     ip: string;
-    bk_host_id: number;
-    bk_biz_id: number;
+    bk_host_id?: number;
+    bk_biz_id?: number;
   }
 
   interface Exposes {
@@ -58,6 +60,14 @@
     }));
   };
 
+  const handleChangeWhitelist = (data: ServiceReturnType<typeof getWhitelist>['results']) => {
+    // 避免与 handleChangeIP 同时修改 source_ips 参数
+    nextTick(() => {
+      const formatData = data.flatMap((item) => item.ips).map((ip) => ({ ip }));
+      sourceIps.value.push(...formatData);
+    });
+  };
+
   defineExpose<Exposes>({
     init(data: HostInfo[]) {
       handleChangeIP(data);

dbm-ui/frontend/src/views/db-manage/common/cluster-authorize/components/TargetInstances.vue

@@ -1,5 +1,6 @@
 <template>
   <BkFormItem
+    ref="formRef"
     v-model="targetInstances"
     class="cluster-authorize-bold"
     :label="t('目标集群')"
@@ -75,6 +76,7 @@
   const { t } = useI18n();
   const copy = useCopy();
 
+  const formRef = ref();
   const rules = [
     {
       trigger: 'change',
@@ -246,6 +248,7 @@
   };
 
   const updateTableData = (data: ResourceItem[]) => {
+    formRef.value.clearValidate();
     state.tableProps.data = data;
     state.tableProps.pagination.count = data.length;
     targetInstances.value = data.map(item => item.master_domain);