From 2f28bf0c1391edba70e4f3475ade5fce3edb39b1 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Thu, 12 Dec 2024 18:32:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Fmysql=E6=B7=BB=E5=8A=A0proxy=20#8076?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-table/Column.vue  |   3 -
 .../components/editable-table/edit/Input.vue  |   8 +-
 .../components/resource-host-owner/Index.vue  |   4 +-
 .../resource-host-selector/Index.vue          |  10 +-
 .../db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue |  49 ++++--
 .../components/RenderCluster.vue              | 157 +++++++-----------
 .../MYSQL_ADD_SLAVE/components/RenderHost.vue |  81 ++++++---
 7 files changed, 161 insertions(+), 151 deletions(-)

diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index cde685b4a5..013024d774 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -487,10 +487,7 @@
 
   .bk-editable-table-field-cell {
     position: relative;
-    display: flex;
     height: 100%;
-    min-height: 40px;
-    align-items: center;
   }
 
   .bk-editable-table-column-error {
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
index 2af3ccac51..7cf5986115 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -54,11 +54,9 @@
   });
 
   const handleBlur = async () => {
-    const result = await columnContext?.validate('blur');
-    if (result) {
-      columnContext?.blur();
-      emits('blur');
-    }
+    columnContext?.validate('blur');
+    columnContext?.blur();
+    emits('blur');
   };
 
   const handleFocus = () => {
diff --git a/dbm-ui/frontend/src/components/resource-host-owner/Index.vue b/dbm-ui/frontend/src/components/resource-host-owner/Index.vue
index 2aa7905f2e..cef6b883fb 100644
--- a/dbm-ui/frontend/src/components/resource-host-owner/Index.vue
+++ b/dbm-ui/frontend/src/components/resource-host-owner/Index.vue
@@ -28,8 +28,8 @@
 
   const { t } = useI18n();
 
-  const isForBiz = computed(() => props.data.for_biz.bk_biz_id);
-  const isForDb = computed(() => props.data.resource_type && props.data.resource_type !== 'PUBLIC');
+  const isForBiz = computed(() => props.data?.for_biz.bk_biz_id);
+  const isForDb = computed(() => props.data?.resource_type && props.data.resource_type !== 'PUBLIC');
 </script>
 <style lang="less">
   .resource-host-owner {
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
index d6cf5fcc31..d68d2f494a 100644
--- a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
@@ -51,14 +51,14 @@
               <HostAgentStatus :data="data.agent_status" />
             </template>
           </BkTableColumn>
-          <BkTableColumn
+          <!-- <BkTableColumn
             field="bk_cpu"
             :label="t('资源归属')"
             :min-width="300">
             <template #default="{ data }">
               <ResourceHostOwner :data="data" />
             </template>
-          </BkTableColumn>
+          </BkTableColumn> -->
           <BkTableColumn
             field="rack_id"
             :label="t('机架')"
@@ -157,8 +157,8 @@
 
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
-  import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
 
+  // import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
   import PanelTab from './components/PanelTab.vue';
   import useSearchSelectData from './hooks/use-search-select-data';
 
@@ -176,7 +176,7 @@
     (e: 'change', value: IValue[]): void;
   }
 
-  interface IValue {
+  export interface IValue {
     bk_biz_id: number;
     bk_cloud_id: number;
     bk_host_id: number;
@@ -251,6 +251,8 @@
       bk_host_id: item.bk_host_id,
       ip: item.ip,
     }));
+    console.log(modelValue.value, 'modelValue.value');
+
     emits('change', modelValue.value);
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
index ded93163d0..f07649bf9c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue
@@ -28,7 +28,9 @@
         <RenderCluster
           v-model="item.cluster"
           @batch-edit="handleBatchEdit" />
-        <RenderHost v-model="item.slaveIp" />
+        <RenderHost
+          v-model="item.slave"
+          :model="item" />
         <EditableTableColumn
           fixed="right"
           :label="t('操作')"
@@ -108,26 +110,45 @@
       cluster: {
         id?: number;
         domain?: string;
-        cloudId?: number;
+        relatedClusters?: {
+          id: number;
+          domain: string;
+        }[];
+      };
+      slave: {
+        bk_biz_id: number;
+        bk_cloud_id: number;
+        bk_host_id: number;
+        ip: string;
       };
-      slaveIp: string;
     }>,
   ) => ({
     cluster: {
       id: data.cluster?.id ?? 0,
       domain: data.cluster?.domain ?? '',
-      cloudId: data.cluster?.cloudId ?? 0,
+      relatedClusters: data.cluster?.relatedClusters ?? [],
+    },
+    slave: {
+      bk_biz_id: data.slave?.bk_biz_id ?? window.PROJECT_CONFIG.BIZ_ID,
+      bk_cloud_id: data.slave?.bk_cloud_id ?? 0,
+      bk_host_id: data.slave?.bk_host_id ?? 0,
+      ip: data.slave?.ip ?? '',
     },
-    slaveIp: data.slaveIp ?? '',
   });
 
+  export type DataRow = ReturnType<typeof createData>;
+
   const dataModel = reactive([createData()]);
   const backupSource = ref<'local' | 'remote'>('local');
 
   const rules = {
     'cluster.domain': [
       {
-        validator: (value: string) => dataModel.some((item) => item.cluster.domain === value),
+        validator: (value: string) =>
+          dataModel.filter(
+            (item) =>
+              item.cluster.domain === value || item.cluster.relatedClusters.some((item) => item.domain === value),
+          ).length < 2,
         message: t('目标集群重复'),
         trigger: 'blur',
       },
@@ -138,7 +159,7 @@
     backup_source: 'local' | 'remote';
     infos: {
       cluster_ids: number[];
-      new_proxy: {
+      new_slave: {
         bk_biz_id: number;
         bk_cloud_id: number;
         bk_host_id: number;
@@ -155,19 +176,14 @@
     createTicketRun({
       backup_source: backupSource.value,
       infos: dataModel.map((item) => ({
-        cluster_ids: [item.cluster.id],
-        new_proxy: {
-          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-          bk_cloud_id: item.cluster.cloudId,
-          bk_host_id: 0,
-          ip: item.slaveIp,
-        },
+        cluster_ids: [item.cluster.id, ...item.cluster.relatedClusters.map((item) => item.id)],
+        new_slave: item.slave,
       })),
     });
   };
 
   const handleAppend = (index: number) => {
-    dataModel.splice(index, 0, createData());
+    dataModel.splice(index + 1, 0, createData());
   };
 
   const handleRemove = (index: number) => {
@@ -175,7 +191,7 @@
   };
 
   const handleClone = (index: number) => {
-    dataModel.splice(index, 0, createData(dataModel[index]));
+    dataModel.splice(index + 1, 0, createData(dataModel[index]));
   };
 
   const handleReset = () => {
@@ -188,7 +204,6 @@
         cluster: {
           id: item.id,
           domain: item.master_domain,
-          cloudId: item.bk_cloud_id,
         },
       }),
     );
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
index 76d9edd82b..2c5354f059 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
@@ -17,7 +17,7 @@
     field="cluster.domain"
     fixed="left"
     :label="t('目标集群')"
-    :loading="loading || relatedClusterLoading"
+    :loading="loading"
     :min-width="300"
     required>
     <template #headAppend>
@@ -28,22 +28,24 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <EditableTableInput
-      ref="editRef"
-      v-model="modelValue.domain"
-      :placeholder="t('请输入集群域名或从表头批量选择')"
-      @blur="handleInputForzen" />
-    <!-- <div
-      v-show="!isEdit"
+    <div
+      v-show="showRelatedCluster"
       class="render-cluster-domain"
       @click="handleInputActive">
       <p>{{ modelValue.domain }}</p>
       <p
-        v-for="item in relatedClusters"
+        v-for="item in modelValue.relatedClusters"
         :key="item.id">
-        {{ item.master_domain }}
+        {{ item.domain }}
       </p>
-    </div> -->
+    </div>
+    <EditableTableInput
+      v-show="!showRelatedCluster"
+      ref="editRef"
+      v-model="modelValue.domain"
+      :placeholder="t('请输入集群域名或从表头批量选择')"
+      @blur="handleInputForzen"
+      @change="handleInputChange" />
   </EditableTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
@@ -53,7 +55,6 @@
 </template>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
   import { filterClusters } from '@services/source/dbbase';
@@ -74,7 +75,10 @@
   const modelValue = defineModel<{
     id?: number;
     domain?: string;
-    cloudId?: number;
+    relatedClusters?: {
+      id: number;
+      domain: string;
+    }[];
   }>({
     required: true,
     default: () => ({}),
@@ -83,14 +87,11 @@
   const { t } = useI18n();
 
   const editRef = ref<InstanceType<typeof EditableTableInput>>();
-  // const isEdit = ref(true);
-  // const loading = ref(false);
+  const loading = ref(false);
+  const isEdit = ref(true);
   const showSelector = ref(false);
-  // const localClusterId = ref(0);
-  const relatedClusters = ref<TendbhaModel[]>([]);
   const selected = shallowRef<{ [key: string]: TendbhaModel[] }>({ [ClusterTypes.TENDBHA]: [] });
-  // 记录最近一次正确输入
-  // const clusterMemo = ref('');
+  const showRelatedCluster = computed(() => !isEdit.value && modelValue.value.relatedClusters?.length);
 
   const rules = [
     {
@@ -98,89 +99,59 @@
       message: t('集群域名格式不正确'),
       trigger: 'change',
     },
-    // {
-    //   validator: (value: string) => {
-    //     if (clusterMemo.value === value) {
-    //       return true;
-    //     }
-    //     return !clusterSet.has(value);
-    //   },
-    //   message: t('目标集群重复'),
-    //   trigger: 'blur',
-    // },
-    // {
-    //   validator: async (value: string) => {
-    //     if (!value) {
-    //       return true;
-    //     }
-    //     loading.value = true;
-    //     const data = await filterClusters({
-    //       bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-    //       exact_domain: value,
-    //     });
-    //     loading.value = false;
-    //     const clusterInfo = data.find((cur) => cur.master_domain === modelValue.value);
-    //     localClusterId.value = clusterInfo?.id ?? 0;
-    //     if (clusterInfo?.master_domain) {
-    //       clusterSet.add(clusterInfo.master_domain);
-    //       clusterMemo.value = clusterInfo.master_domain;
-    //     }
-    //     return Boolean(localClusterId.value);
-    //   },
-    //   message: t('目标集群不存在'),
-    //   trigger: 'blur',
-    // },
-  ];
-
-  const { run: fetchCluster, loading } = useRequest(filterClusters, {
-    manual: true,
-    onSuccess(data) {
-      const [clusterInfo] = data;
-      modelValue.value = {
-        id: clusterInfo.id,
-        domain: clusterInfo.master_domain,
-        cloudId: clusterInfo.bk_cloud_id,
-      };
-    },
-  });
-
-  const { run: fetchRelatedCluster, loading: relatedClusterLoading } = useRequest(findRelatedClustersByClusterIds, {
-    manual: true,
-    onSuccess(data) {
-      relatedClusters.value = data[0]?.related_clusters || [];
-      // relatedClusters.value.forEach((cur) => {
-      //   clusterSet.add(cur.master_domain);
-      // });
-      // isEdit.value = false;
+    {
+      validator: async (value: string) => {
+        loading.value = true;
+        const [cluster] = await filterClusters({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          exact_domain: value,
+        });
+
+        if (cluster?.id) {
+          const [relatedClusters] = await findRelatedClustersByClusterIds({
+            cluster_ids: [cluster.id],
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          });
+          modelValue.value = {
+            id: cluster.id,
+            domain: cluster.master_domain,
+            relatedClusters: relatedClusters.related_clusters.map((item) => ({
+              id: item.id,
+              domain: item.master_domain,
+            })),
+          };
+        }
+
+        loading.value = false;
+        isEdit.value = false;
+        return !!cluster?.id;
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
     },
-  });
-
-  watch(modelValue, () => {
-    if (modelValue.value.domain && modelValue.value.id) {
-      fetchRelatedCluster({
-        cluster_ids: [modelValue.value.id],
-        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      });
-    }
-  });
+  ];
 
   const handleShowSelector = () => {
     showSelector.value = true;
   };
 
+  const handleInputChange = (value: string) => {
+    if (!value) {
+      modelValue.value.id = 0;
+      modelValue.value.relatedClusters = [];
+    }
+  };
+
   const handleInputForzen = () => {
-    fetchCluster({
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      exact_domain: modelValue.value.domain,
-    });
+    isEdit.value = false;
   };
 
-  // const handleInputActive = () => {
-  //   isEdit.value = true;
-  //   nextTick(() => {
-  //     editRef.value!.focus();
-  //   });
-  // };
+  const handleInputActive = () => {
+    isEdit.value = true;
+    nextTick(() => {
+      editRef.value!.focus();
+    });
+  };
 
   const handleSelectorChange = (selected: { [key: string]: TendbhaModel[] }) => {
     emits('batch-edit', selected[ClusterTypes.TENDBHA]);
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue
index 4d215a6511..22cd9299e5 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue
@@ -14,52 +14,60 @@
 <template>
   <EditableTableColumn
     :append-rules="rules"
-    field="newSlaveIp"
+    field="slave.ip"
     :label="t('新主从主机')"
     :loading="loading"
     :min-width="300"
     required>
     <EditableTableInput
-      v-model="modelValue"
-      :placeholder="t('请输入单个IP')" />
-    <!-- <template #suffix>
+      v-model="modelValue.ip"
+      :disabled="!model.cluster.id"
+      :placeholder="t('请输入单个IP')">
+      <template #suffix>
         <DbIcon
           class="select-icon"
+          :class="{
+            'select-icon-hide': !model.cluster.id,
+          }"
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </EditableTableInput> -->
+    </EditableTableInput>
   </EditableTableColumn>
-  <!-- <ResourceHostSelector
+  <ResourceHostSelector
+    v-model="selected"
     v-model:is-show="showSelector"
-    :multiple="false" /> -->
+    :multiple="false"
+    @change="handleSelectorChange" />
 </template>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
 
-  import TendbhaModel from '@services/model/mysql/tendbha';
   import { checkHost } from '@services/source/ipchooser';
 
   import { ipv4 } from '@common/regex';
 
   import { Column as EditableTableColumn, Input as EditableTableInput } from '@components/editable-table/Index.vue';
-  // import ResourceHostSelector from '@components/resource-host-selector/Index.vue';
+  import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
-  interface Emits {
-    (e: 'change', list: TendbhaModel[]): void;
+  import type { DataRow } from '../Index.vue';
+
+  interface Props {
+    model: DataRow;
   }
 
-  defineEmits<Emits>();
+  defineProps<Props>();
 
-  const modelValue = defineModel<string>({
+  const modelValue = defineModel<IValue>({
     required: true,
-    default: '',
+    default: () => ({}),
   });
 
   const { t } = useI18n();
 
   const loading = ref(false);
-  // const showSelector = ref(false);
+  const showSelector = ref(false);
+  const selected = ref<IValue[]>([]);
 
   const rules = [
     {
@@ -68,32 +76,47 @@
       trigger: 'change',
     },
     {
-      validator: async (value: string) =>
-        await checkHost({
+      validator: async (value: string) => {
+        const [host] = await checkHost({
           ip_list: [value],
-        }).then((data) => data[0]?.ip === value),
+        });
+        if (host) {
+          modelValue.value = {
+            bk_biz_id: host.biz?.id || window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: host.cloud_id,
+            bk_host_id: host.host_id,
+            ip: host.ip,
+          };
+        }
+        return !!host.ip;
+      },
       message: t('主机不存在'),
       trigger: 'blur',
     },
   ];
 
-  // const handleShowSelector = () => {
-  //   showSelector.value = true;
-  // };
+  watch(modelValue, () => {
+    if (modelValue.value.ip) {
+      selected.value = [modelValue.value];
+    }
+  });
 
-  // const handleInputForzen = () => {};
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
 
-  // const handleInputActive = () => {};
+  const handleSelectorChange = (hostInfo: IValue[]) => {
+    console.log(hostInfo, 'hostInfo');
 
-  // const handleSelectorChange = (selected: { [key: string]: TendbhaModel[] }) => {
-  //   emits('change', selected[ClusterTypes.TENDBHA]);
-  // };
+    [modelValue.value] = hostInfo;
+    selected.value = hostInfo;
+  };
 </script>
 
 <style lang="less" scoped>
   :deep(.bk-editable-input) {
     .select-icon {
-      display: none;
+      display: flex;
       margin-right: 5px;
       font-size: 18px;
       color: #979ba5;
@@ -101,6 +124,10 @@
       cursor: pointer;
     }
 
+    .select-icon-hide {
+      display: none;
+    }
+
     &:hover {
       .select-icon {
         display: flex;