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

# Reviewed, transaction id: 25022
TencentBlueKing · Nov 27, 2024 · 433349a · 433349a
1 parent 4c222a4
commit 433349a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 58 deletions.
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-field/ClusterWithRelateCluster.vue b/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
@@ -335,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();
   };
 
   // 显示管理集群列表
@@ -382,6 +396,8 @@
       };
       // 用户输入未完成验证
       if (editRef.value) {
+        // 先切回编辑态才能正常校验
+        handleShowEdit();
         return editRef.value.getValue().then(() => result);
       }
       // 用户输入错误

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-add/pages/page1/Index.vue
@@ -202,25 +202,7 @@
   const handleSubmit = async () => {
     try {
       isSubmitting.value = true;
-      const rows = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
-      // 新ip一致，聚合clusterid
-      const clusterIdsSet: Record<string, Set<number>> = {};
-      rows.forEach(
-        (item: {
-          cluster_ids: number[];
-          new_proxy: {
-            ip: string;
-          };
-        }) => {
-          const key = item.new_proxy.ip;
-          clusterIdsSet[key] = clusterIdsSet[key] || new Set();
-          item.cluster_ids.forEach((id) => clusterIdsSet[key].add(id));
-        },
-      );
-      const infos = rows.map((item) => ({
-        ...item,
-        cluster_ids: Array.from(clusterIdsSet[item.new_proxy.ip]),
-      }));
+      const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
         ticket_type: 'MYSQL_PROXY_ADD',
         remark: remark.value,
@@ -230,7 +212,6 @@
         bk_biz_id: currentBizId,
       }).then((data) => {
         window.changeConfirm = false;
-
         router.push({
           name: 'MySQLProxyAdd',
           params: {

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/proxy-replace/pages/page1/Index.vue
@@ -114,38 +114,7 @@
   const handleSubmit = async () => {
     try {
       isSubmitting.value = true;
-      const rows = await tableRef.value!.getValue();
-      // 原ip和新ip一致，聚合clusterid
-      const clusterIdsSet: Record<string, Set<number>> = {};
-      rows.forEach(
-        (item: {
-          cluster_ids: number[];
-          origin_proxy: {
-            ip: string;
-          };
-          target_proxy: {
-            ip: string;
-          };
-        }) => {
-          const key = `${item.origin_proxy.ip}#${item.target_proxy.ip}`;
-          clusterIdsSet[key] = clusterIdsSet[key] || new Set();
-          item.cluster_ids.forEach((id) => clusterIdsSet[key].add(id));
-        },
-      );
-      const infos = rows.map(
-        (item: {
-          cluster_ids: number[];
-          origin_proxy: {
-            ip: string;
-          };
-          target_proxy: {
-            ip: string;
-          };
-        }) => ({
-          ...item,
-          cluster_ids: Array.from(clusterIdsSet[`${item.origin_proxy.ip}#${item.target_proxy.ip}`]),
-        }),
-      );
+      const infos = await tableRef.value!.getValue();
       await createTicket({
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         ticket_type: TicketTypes.MYSQL_PROXY_SWITCH,

diff --git a/...ckets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue b/...ckets/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>),