From 7e91f2524fd617cdcbe6d83d1711414c78456270 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Wed, 11 Dec 2024 17:49:58 +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=20#?=
 =?UTF-8?q?=20Reviewed,=20transaction=20id:=2026511?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-table/Column.vue  |   2 +-
 .../components/editable-table/edit/Input.vue  |  29 +--
 .../src/components/editable-table/types.ts    |   2 +-
 .../useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts |   1 +
 dbm-ui/frontend/src/locales/zh-cn.json        |   2 +-
 .../db-manage/mysql/MYSQL_ADD_SLAVE/Index.vue |  53 +++---
 .../ClusterWithRelateCluster.vue              |  51 ------
 .../Index.vue => RenderCluster.vue}           |  74 ++++++--
 .../MYSQL_ADD_SLAVE/components/RenderHost.vue | 111 ++++++++++++
 .../components/RenderSlaveHost.vue            | 168 ------------------
 10 files changed, 213 insertions(+), 280 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/ClusterWithRelateCluster.vue
 rename dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/{ClusterColumn/Index.vue => RenderCluster.vue} (68%)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderSlaveHost.vue

diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index af6572d9ea..f68de94bd8 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -164,7 +164,7 @@
         required: true,
         validator: defaultValidator.required,
         message: `${label}不能为空`,
-        trigger: 'change',
+        trigger: 'blur',
       });
     }
     if (props.email) {
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 4c8527ec28..2af3ccac51 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -6,7 +6,14 @@
     v-bind="{ ...attrs, ...props }"
     clearable
     @blur="handleBlur"
-    @focus="handleFocus" />
+    @focus="handleFocus">
+    <template #prefix>
+      <slot name="prefix" />
+    </template>
+    <template #suffix>
+      <slot name="suffix" />
+    </template>
+  </BkInput>
 </template>
 <script setup lang="ts">
   import { useAttrs, watch } from 'vue';
@@ -27,15 +34,15 @@
     (e: 'focus'): void;
   }
 
+  interface Exposes {
+    focus: () => void;
+  }
+
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
   const attrs = useAttrs();
 
-  interface Exposes {
-    focus: () => void;
-  }
-
   const columnContext = useColumn();
 
   const modelValue = defineModel<string>();
@@ -44,14 +51,14 @@
 
   watch(modelValue, () => {
     columnContext?.validate('change');
-    console.log('change');
   });
 
-  const handleBlur = () => {
-    columnContext?.blur();
-    columnContext?.validate('blur');
-    emits('blur');
-    console.log('handleBlur');
+  const handleBlur = async () => {
+    const result = await columnContext?.validate('blur');
+    if (result) {
+      columnContext?.blur();
+      emits('blur');
+    }
   };
 
   const handleFocus = () => {
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
index 34b65a81f3..627b8f6f9d 100644
--- a/dbm-ui/frontend/src/components/editable-table/types.ts
+++ b/dbm-ui/frontend/src/components/editable-table/types.ts
@@ -7,5 +7,5 @@ export interface IRule {
   pattern?: RegExp;
   validator?: (value: any) => Promise<boolean | string> | boolean | string;
   message: (() => string) | string;
-  trigger: 'change' | 'blur';
+  trigger: string;
 }
diff --git a/dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts b/dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts
index 8f559dc2d7..d2921f9bd9 100644
--- a/dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts
+++ b/dbm-ui/frontend/src/hooks/useCreateTicket3/mysql/MYSQL_ADD_SLAVE.ts
@@ -2,6 +2,7 @@ import type { TicketTypes } from '@common/const';
 
 export interface TicketCreateDetails {
   [TicketTypes.MYSQL_ADD_SLAVE]: {
+    backup_source: 'local' | 'remote';
     infos: {
       cluster_ids: number[];
       new_proxy: {
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 9ba65ed595..b2fb8e5be1 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3739,6 +3739,6 @@
   "已选 IP": "已选 IP",
   "业务资源池": "业务资源池",
   "冷/热节点": "冷/热节点",
-  "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
+  "集群域名格式不正确": "集群域名格式不正确",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
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 87141d20b5..a8652d6c61 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
@@ -24,19 +24,10 @@
       <EditableTableRow
         v-for="(item, index) in dataModel"
         :key="index">
-        <ClusterColumn
+        <RenderCluster
           v-model="item.clusterDomain"
           @change="handleSelectorChange" />
-        <EditableTableColumn
-          field="newSlaveIp"
-          :label="t('新主从主机')"
-          :min-width="300"
-          required
-          :rules="rules">
-          <EditableTableInput
-            v-model="dataModel[index].newSlaveIp"
-            :placeholder="t('请输入集群域名或从表头批量选择')" />
-        </EditableTableColumn>
+        <RenderHost v-model="item.newSlaveIp" />
         <EditableTableColumn
           fixed="right"
           :label="t('操作')"
@@ -52,6 +43,22 @@
         </EditableTableColumn>
       </EditableTableRow>
     </EditableTable>
+    <BkForm
+      class="mb-20"
+      form-type="vertical">
+      <BkFormItem
+        :label="t('备份源')"
+        required>
+        <BkRadioGroup v-model="backupSource">
+          <BkRadio label="local">
+            {{ t('本地备份') }}
+          </BkRadio>
+          <BkRadio label="remote">
+            {{ t('远程备份') }}
+          </BkRadio>
+        </BkRadioGroup>
+      </BkFormItem>
+    </BkForm>
     <template #action>
       <BkButton
         class="mr-8 w-88"
@@ -78,7 +85,6 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
-  import { filterClusters } from '@services/source/dbbase';
 
   import { useCreateTicket } from '@hooks';
 
@@ -86,15 +92,14 @@
 
   import EditableTable, {
     Column as EditableTableColumn,
-    Input as EditableTableInput,
     Operate as EditableTableOperate,
     Row as EditableTableRow,
   } from '@components/editable-table/Index.vue';
 
   import { random } from '@utils';
 
-  import ClusterColumn from './components/ClusterColumn/Index.vue';
-  // import RenderSlaveHost from './components/RenderSlaveHost.vue';
+  import RenderCluster from './components/RenderCluster.vue';
+  import RenderHost from './components/RenderHost.vue';
 
   interface IDataRow {
     rowKey: string;
@@ -118,21 +123,7 @@
   });
 
   const dataModel = reactive([createData()]);
-
-  const rules = [
-    {
-      validator: async (value: string) => {
-        const data = await filterClusters({
-          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-          exact_domain: value,
-        });
-        console.log(data, 'data');
-        return true;
-      },
-      message: t('目标集群不存在'),
-      trigger: 'blur',
-    },
-  ];
+  const backupSource = ref<'local' | 'remote'>('local');
 
   const { run: createTicketRun, loading: isSubmitting } = useCreateTicket(TicketTypes.MYSQL_ADD_SLAVE);
 
@@ -142,6 +133,7 @@
       return;
     }
     createTicketRun({
+      backup_source: backupSource.value,
       infos: dataModel.map((cur) => ({
         cluster_ids: [cur.clusterId],
         new_proxy: {
@@ -179,5 +171,6 @@
       }),
     );
     dataModel.splice(0, dataModel.length, ...dataList);
+    tableRef.value!.validateByColumnIndex(0);
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/ClusterWithRelateCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/ClusterWithRelateCluster.vue
deleted file mode 100644
index a985cfab2f..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/ClusterWithRelateCluster.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <EditableTableInput
-      v-show="isEdit"
-      v-model="localValue"
-      :placeholder="t('请输入集群域名或从表头批量选择')"
-      :rules="rules" />
-    <div v-show="!isEdit">
-      <p>{{ localValue }}</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useI18n } from 'vue-i18n';
-
-  import { filterClusters } from '@services/source/dbbase';
-
-  import { Input as EditableTableInput } from '@components/editable-table/Index.vue';
-
-  const { t } = useI18n();
-
-  const isEdit = ref(true);
-  const localValue = ref('');
-  const rules = [
-    {
-      validator: (value: string) => !!value,
-      message: t('目标集群不能为空'),
-      trigger: 'blur',
-    },
-    {
-      validator: (value: string) => {
-        const data = filterClusters({
-          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-          exact_domain: value,
-        });
-        console.log(data, 'data');
-        return true;
-      },
-      message: t('目标集群不存在'),
-      trigger: 'blur',
-    },
-  ];
-
-  watch(
-    () => localValue.value,
-    () => {
-      console.log(localValue.value, 'localValue.value');
-    },
-  );
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
similarity index 68%
rename from dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
index 8f6a9f1806..46316a8de2 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderCluster.vue
@@ -17,7 +17,9 @@
     field="clusterDomain"
     fixed="left"
     :label="t('目标集群')"
-    :min-width="300">
+    :loading="loading || relatedClusterLoading"
+    :min-width="300"
+    required>
     <template #headAppend>
       <span
         v-bk-tooltips="t('批量选择')"
@@ -28,7 +30,7 @@
     </template>
     <EditableTableInput
       v-show="isEdit"
-      ref="inputRef"
+      ref="editRef"
       v-model="modelValue"
       :placeholder="t('请输入集群域名或从表头批量选择')"
       @blur="handleInputForzen" />
@@ -50,7 +52,9 @@
     :selected="selected"
     @change="handleSelectorChange" />
 </template>
-
+<script lang="ts">
+  const clusterSet = new Set<string>();
+</script>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
@@ -60,6 +64,7 @@
   import { findRelatedClustersByClusterIds } from '@services/source/mysqlCluster';
 
   import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
   import { Column as EditableTableColumn, Input as EditableTableInput } from '@components/editable-table/Index.vue';
@@ -77,34 +82,63 @@
 
   const { t } = useI18n();
 
-  const inputRef = ref<InstanceType<typeof EditableTableInput>>();
-  const showSelector = ref(false);
-  const selected = shallowRef<{ [key: string]: TendbhaModel[] }>({ [ClusterTypes.TENDBHA]: [] });
+  const editRef = ref<InstanceType<typeof EditableTableInput>>();
   const isEdit = ref(true);
+  const loading = ref(false);
+  const showSelector = ref(false);
   const localClusterId = ref(0);
   const relatedClusters = ref<TendbhaModel[]>([]);
+  const selected = shallowRef<{ [key: string]: TendbhaModel[] }>({ [ClusterTypes.TENDBHA]: [] });
+  // 记录最近一次正确输入
+  const clusterMemo = ref('');
 
   const rules = [
     {
-      validator: async () => {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: async (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: modelValue.value,
+          exact_domain: value,
         });
-        console.log(data, 'data');
-        localClusterId.value = data.find((cur) => cur.master_domain === modelValue.value)?.id ?? 0;
-        return true;
+        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: fetchRelatedCluster } = useRequest(findRelatedClustersByClusterIds, {
+  const { run: fetchRelatedCluster, loading: relatedClusterLoading } = useRequest(findRelatedClustersByClusterIds, {
     manual: true,
     onSuccess(data) {
-      console.log(data, 'fetchRelatedCluster');
-      relatedClusters.value = data[0].related_clusters;
+      relatedClusters.value = data[0]?.related_clusters || [];
+      relatedClusters.value.forEach((cur) => {
+        clusterSet.add(cur.master_domain);
+      });
       isEdit.value = false;
     },
   });
@@ -115,6 +149,8 @@
         cluster_ids: [localClusterId.value],
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
       });
+    } else {
+      relatedClusters.value = [];
     }
   });
 
@@ -131,7 +167,7 @@
   const handleInputActive = () => {
     isEdit.value = true;
     nextTick(() => {
-      inputRef.value!.focus();
+      editRef.value!.focus();
     });
   };
 
@@ -148,10 +184,14 @@
   }
 
   .render-cluster-domain {
-    padding: 6px 10px;
+    display: flex;
+    margin: 6px 10px;
+    flex-direction: column;
 
     p {
-      line-height: 18px;
+      display: flex;
+      height: 22px;
+      align-items: center;
     }
   }
 </style>
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
new file mode 100644
index 0000000000..4d215a6511
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderHost.vue
@@ -0,0 +1,111 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <EditableTableColumn
+    :append-rules="rules"
+    field="newSlaveIp"
+    :label="t('新主从主机')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <EditableTableInput
+      v-model="modelValue"
+      :placeholder="t('请输入单个IP')" />
+    <!-- <template #suffix>
+        <DbIcon
+          class="select-icon"
+          type="host-select"
+          @click="handleShowSelector" />
+      </template>
+    </EditableTableInput> -->
+  </EditableTableColumn>
+  <!-- <ResourceHostSelector
+    v-model:is-show="showSelector"
+    :multiple="false" /> -->
+</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';
+
+  interface Emits {
+    (e: 'change', list: TendbhaModel[]): void;
+  }
+
+  defineEmits<Emits>();
+
+  const modelValue = defineModel<string>({
+    required: true,
+    default: '',
+  });
+
+  const { t } = useI18n();
+
+  const loading = ref(false);
+  // const showSelector = ref(false);
+
+  const rules = [
+    {
+      validator: (value: string) => ipv4.test(value),
+      message: t('IP 格式不符合IPv4标准'),
+      trigger: 'change',
+    },
+    {
+      validator: async (value: string) =>
+        await checkHost({
+          ip_list: [value],
+        }).then((data) => data[0]?.ip === value),
+      message: t('主机不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  // const handleShowSelector = () => {
+  //   showSelector.value = true;
+  // };
+
+  // const handleInputForzen = () => {};
+
+  // const handleInputActive = () => {};
+
+  // const handleSelectorChange = (selected: { [key: string]: TendbhaModel[] }) => {
+  //   emits('change', selected[ClusterTypes.TENDBHA]);
+  // };
+</script>
+
+<style lang="less" scoped>
+  :deep(.bk-editable-input) {
+    .select-icon {
+      display: none;
+      margin-right: 5px;
+      font-size: 18px;
+      color: #979ba5;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    &:hover {
+      .select-icon {
+        display: flex;
+        color: #3a84ff;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderSlaveHost.vue
deleted file mode 100644
index 5a69a783f3..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/RenderSlaveHost.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <TableEditInput
-    ref="inputRef"
-    v-model="localIpText"
-    :disabled="disabled"
-    :placeholder="t('请输入单个 IP')"
-    :rules="rules" />
-</template>
-<script lang="ts">
-  const singleHostSelectMemo: { [key: string]: Record<string, boolean> } = {};
-</script>
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import { getHostTopoInfos } from '@services/source/ipchooser';
-
-  import { useGlobalBizs } from '@stores';
-
-  import { ipv4 } from '@common/regex';
-
-  import TableEditInput from '@components/render-table/columns/input/index.vue';
-
-  import { random } from '@utils';
-
-  import type { IHostData } from './Row.vue';
-
-  type HostTopoInfo = ServiceReturnType<typeof getHostTopoInfos>['hosts_topo_info'][number];
-
-  interface Props {
-    modelValue?: string;
-    domain?: string;
-    disabled: boolean;
-    cloudId: null | number;
-  }
-
-  interface Exposes {
-    getValue: () => Promise<IHostData>;
-  }
-
-  const props = defineProps<Props>();
-
-  const genHostKey = (hostData: HostTopoInfo) => `#${hostData.bk_cloud_id}#${hostData.ip}`;
-
-  const { currentBizId } = useGlobalBizs();
-  const { t } = useI18n();
-
-  const inputRef = ref();
-  const localIpText = ref('');
-
-  let hostMemo = {} as HostTopoInfo;
-  let errorMessage = t('IP不存在');
-  const instanceKey = `slave_host_${random()}`;
-
-  const rules = [
-    {
-      validator: (value: string) => !!value,
-      message: t('不能为空'),
-    },
-    {
-      validator: (value: string) => ipv4.test(_.trim(value)),
-      message: t('IP格式不正确'),
-    },
-    {
-      validator: (value: string) =>
-        getHostTopoInfos({
-          filter_conditions: {
-            bk_host_innerip: [value],
-            mode: 'idle_only',
-          },
-          bk_biz_id: currentBizId,
-        }).then((data) => {
-          const [newHost] = data.hosts_topo_info;
-          if (!newHost) {
-            errorMessage = t('ips不在空闲机中', { ips: value });
-            return false;
-          }
-
-          if (newHost.bk_cloud_id !== props.cloudId) {
-            errorMessage = t('新主机xx跟目标集群xx须在同一个管控区域', {
-              ip: value,
-              cluster: props.domain,
-            });
-            return false;
-          }
-
-          hostMemo = newHost;
-          // IP 有效
-          singleHostSelectMemo[instanceKey] = {};
-          singleHostSelectMemo[instanceKey][genHostKey(newHost)] = true;
-
-          return true;
-        }),
-      message: () => errorMessage,
-    },
-    {
-      validator: () => {
-        const otherHostSelectMemo = { ...singleHostSelectMemo };
-        delete otherHostSelectMemo[instanceKey];
-
-        const otherAllSelectHostMap = Object.values(otherHostSelectMemo).reduce(
-          (result, selectItem) => ({
-            ...result,
-            ...selectItem,
-          }),
-          {} as Record<string, boolean>,
-        );
-        if (otherAllSelectHostMap[genHostKey(hostMemo)]) {
-          return false;
-        }
-
-        return true;
-      },
-      message: t('IP重复'),
-    },
-  ];
-
-  // 同步外部主从机器
-  watch(
-    () => props.modelValue,
-    () => {
-      localIpText.value = props.modelValue ? props.modelValue : '';
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  onBeforeUnmount(() => {
-    delete singleHostSelectMemo[instanceKey];
-  });
-
-  defineExpose<Exposes>({
-    getValue() {
-      const formatHost = (item: HostTopoInfo) => ({
-        bk_biz_id: currentBizId,
-        bk_host_id: item.bk_host_id,
-        bk_cloud_id: item.bk_cloud_id,
-        ip: item.ip,
-      });
-
-      return inputRef.value
-        .getValue()
-        .then(() =>
-          Promise.resolve({
-            new_slave: formatHost(hostMemo),
-          }),
-        )
-        .catch(() => {
-          Promise.reject('');
-        });
-    },
-  });
-</script>