feat(frontend): 工具箱支持资源池协议变更_mysql添加proxy TencentBlueKing#8076

# Reviewed, transaction id: 26511

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

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

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;
 }

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

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3739,6 +3739,6 @@
   "已选 IP": "已选 IP",
   "业务资源池": "业务资源池",
   "冷/热节点": "冷/热节点",
-  "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
+  "集群域名格式不正确": "集群域名格式不正确",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

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,23 +85,21 @@
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
-  import { filterClusters } from '@services/source/dbbase';
 
   import { useCreateTicket } from '@hooks';
 
   import { TicketTypes } from '@common/const';
 
   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>

dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/components/ClusterColumn/Index.vue → 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>