fix(frontend): 修复mysql添加proxy重复校验未标红提示问题 #8206

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

@@ -3654,5 +3654,6 @@
   "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
   "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索": "全站搜索，支持多对象，Shift + Enter 换行，Enter键开启搜索",
   "全站搜索，支持多对象，Enter开启搜索": "全站搜索，支持多对象，Enter开启搜索",
+  "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue

@@ -23,6 +23,8 @@
       v-model="localDomain"
       :placeholder="t('请输入集群域名或从表头批量选择')"
       :rules="rules"
+      @blur="handleEditBlur"
+      @clear="handleEditClear"
       @submit="handleEditSubmit" />
     <div v-show="!isShowEdit">
       <div
@@ -121,7 +123,9 @@
   }
 
   interface Exposes {
-    getValue: () => Array<number>;
+    getValue: () => {
+      cluster_ids: number[];
+    };
   }
 
   interface IClusterData {
@@ -333,16 +337,28 @@
     });
   };
 
+  const handleEditBlur = () => {
+    editRef.value.getValue().then(() => {
+      isShowEdit.value = false;
+      nextTick(() => {
+        initRelateClusterPopover();
+      });
+    });
+  };
+
+  const handleEditClear = () => {
+    clusterIdMemo[instanceKey] = {};
+    realateCheckedMap.value = {};
+    selectRelateClusterList.value = [];
+  };
+
   // 提交编辑
   const handleEditSubmit = (value: string) => {
     if (!value) {
+      handleEditClear();
       return;
     }
-
-    isShowEdit.value = false;
-    nextTick(() => {
-      initRelateClusterPopover();
-    });
+    handleEditBlur();
   };
 
   // 显示管理集群列表
@@ -380,6 +396,8 @@
       };
       // 用户输入未完成验证
       if (editRef.value) {
+        // 先切回编辑态才能正常校验
+        handleShowEdit();
         return editRef.value.getValue().then(() => result);
       }
       // 用户输入错误

dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue

@@ -212,7 +212,6 @@
         bk_biz_id: currentBizId,
       }).then((data) => {
         window.changeConfirm = false;
-
         router.push({
           name: 'MySQLProxyAdd',
           params: {

dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/RenderProxy.vue

@@ -43,7 +43,14 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<Array<string>>;
+    getValue: () => Promise<{
+      new_proxy: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+      };
+    }>;
   }
 
   const props = defineProps<Props>();

dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/components/RenderData/Row.vue

@@ -85,7 +85,15 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<any>;
+    getValue: () => Promise<{
+      cluster_ids: number[];
+      new_proxy: {
+        bk_biz_id: number;
+        bk_host_id: number;
+        bk_cloud_id: number;
+        ip: string;
+      };
+    }>;
   }
 
   const props = defineProps<Props>();
@@ -128,7 +136,7 @@
     emits('remove');
   };
 
-  const getRowData = () => [clusterRef.value.getValue(), proxyRef.value.getValue()];
+  const getRowData = () => [clusterRef.value!.getValue(), proxyRef.value!.getValue()];
 
   const handleClone = () => {
     Promise.allSettled(getRowData()).then((rowData) => {

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/Index.vue

@@ -52,7 +52,18 @@
   import RenderDataRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue';
 
   interface Exposes {
-    getValue(): Promise<any>;
+    getValue(): Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: IDataRow['originProxy'];
+        target_proxy: IDataRow['targetProxy'];
+        display_info: {
+          type: string;
+          related_instances: string[];
+          related_clusters: string[];
+        };
+      }[]
+    >;
     reset(): void;
   }
 

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceHost/components/RenderData/Row.vue

@@ -87,6 +87,11 @@
       cluster_ids: number[];
       origin_proxy: IDataRow['originProxy'];
       target_proxy: IDataRow['targetProxy'];
+      display_info: {
+        type: string;
+        related_instances: string[];
+        related_clusters: string[];
+      };
     }>;
   }
 

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/Index.vue

@@ -52,7 +52,17 @@
   import RenderRow, { createRowData, type IDataRow } from './components/RenderData/Row.vue';
 
   interface Exposes {
-    getValue(): Promise<any>;
+    getValue(): Promise<
+      {
+        cluster_ids: number[];
+        origin_proxy: IDataRow['originProxy'];
+        target_proxy: IDataRow['targetProxy'];
+        display_info: {
+          type: string;
+          related_clusters: string[];
+        };
+      }[]
+    >;
     reset(): void;
   }
 

dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/components/ReplaceInstance/components/RenderData/Row.vue

@@ -80,6 +80,10 @@
       cluster_ids: number[];
       origin_proxy: IDataRow['originProxy'];
       target_proxy: IDataRow['targetProxy'];
+      display_info: {
+        type: string;
+        related_clusters: string[];
+      };
     }>;
   }
 

dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue

@@ -45,7 +45,7 @@
       width: 220,
     },
     {
-      label: t('同机关联集群'),
+      label: t('关联集群'),
       field: 'relatedClusters',
       width: 220,
       render: ({ data }: { data: RowData }) => data.relatedClusters.map((item) => <p>{item}</p>),
@@ -64,7 +64,7 @@
     () => props.ticketDetails.details,
     () => {
       tableData.value = props.ticketDetails.details.infos.map(item => ({
-        originProxy: item.origin_proxy.ip,
+        originProxy: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
         relatedClusters: item.display_info.related_clusters as string[],
         targetProxy: item.target_proxy.ip,
       }));