feat(frontend): 修复mysql proxy替换问题 TencentBlueKing#7006

# Reviewed, transaction id: 20676

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

@@ -37,9 +37,11 @@
           :true-value="ProxyReplaceTypes.HOST_REPLACE" />
       </div>
     </div>
-    <Component
-      :is="renderComponent"
-      ref="tableRef" />
+    <KeepAlive>
+      <Component
+        :is="renderComponent"
+        ref="tableRef" />
+    </KeepAlive>
     <div class="safe-action">
       <BkCheckbox
         v-model="force"
@@ -71,6 +73,12 @@
   </SmartAction>
 </template>
 
+<script lang="tsx">
+  export enum ProxyReplaceTypes {
+    INSTANCE_REPLACE = 'INSTANCE_REPLACE', // 实例替换
+    HOST_REPLACE = 'HOST_REPLACE', // 整机替换
+  }
+</script>
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
@@ -85,24 +93,19 @@
   import ReplaceHost from './components/ReplaceHost/Index.vue';
   import ReplaceInstance from './components/ReplaceInstance/Index.vue';
 
-  enum ProxyReplaceTypes {
-    INSTANCE_REPLACE = 'INSTANCE_REPLACE', // 实例替换
-    HOST_REPLACE = 'HOST_REPLACE', // 整机替换
-  }
-
-  const ProxyReplaceMap = {
-    [ProxyReplaceTypes.INSTANCE_REPLACE]: ReplaceInstance,
-    [ProxyReplaceTypes.HOST_REPLACE]: ReplaceHost,
-  };
-
   const { t } = useI18n();
   const router = useRouter();
 
   const tableRef = ref();
   const replaceType = ref(ProxyReplaceTypes.INSTANCE_REPLACE);
-  const force = ref(true);
+  const force = ref(false);
   const isSubmitting = ref(false);
 
+  const ProxyReplaceMap = {
+    [ProxyReplaceTypes.INSTANCE_REPLACE]: ReplaceInstance,
+    [ProxyReplaceTypes.HOST_REPLACE]: ReplaceHost,
+  };
+
   const renderComponent = computed(() => ProxyReplaceMap[replaceType.value]);
 
   useTicketCloneInfo({
@@ -149,6 +152,12 @@
   const handleReset = () => {
     tableRef.value.reset();
   };
+
+  watch(replaceType, () => {
+    nextTick(() => {
+      tableRef.value.reset();
+    });
+  });
 </script>
 
 <style lang="less">

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

@@ -33,6 +33,12 @@
       :width="240">
       {{ t('同机关联实例') }}
     </RenderTableHeadColumn>
+    <RenderTableHeadColumn
+      :min-width="200"
+      :required="false"
+      :width="240">
+      {{ t('同机关联集群') }}
+    </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"
       :width="240">

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

@@ -24,6 +24,11 @@
         ref="relatedInstancesRef"
         :list="localRelatedInstances" />
     </td>
+    <td style="padding: 0">
+      <RenderRelatedClusters
+        ref="relatedClustersRef"
+        :list="localRelatedClusters" />
+    </td>
     <td style="padding: 0">
       <RenderTargetProxy
         ref="targetRef"
@@ -54,6 +59,10 @@
       cluster_id: number;
       instance: string;
     }[];
+    relatedClusters: {
+      cluster_id: number;
+      domain: string;
+    }[];
     targetProxy: {
       bk_cloud_id: number | null;
       bk_host_id: number;
@@ -107,6 +116,7 @@
         port: 0,
       } as IDataRow['originProxy']),
     relatedInstances: data.relatedInstances || [],
+    relatedClusters: data.relatedClusters || [],
     targetProxy:
       data.targetProxy ||
       ({
@@ -124,6 +134,7 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderRelatedClusters from '../../../common/RenderRelatedClusters.vue';
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
   import RenderOriginalProxyHost from '../RenderOriginalProxyHost.vue';
   import RenderRelatedInstances from '../RenderRelatedInstances.vue';
@@ -138,6 +149,7 @@
 
   const localIp = ref('');
   const localRelatedInstances = ref<IDataRow['relatedInstances']>([]);
+  const localRelatedClusters = ref<IDataRow['relatedClusters']>([]);
 
   watch(
     () => props.data,
@@ -149,8 +161,12 @@
     },
   );
 
-  const handleOriginProxyInputFinish = (value: IDataRow['relatedInstances']) => {
-    localRelatedInstances.value = value;
+  const handleOriginProxyInputFinish = (
+    relatedInstances: IDataRow['relatedInstances'],
+    relatedClusters: IDataRow['relatedClusters'],
+  ) => {
+    localRelatedInstances.value = relatedInstances;
+    localRelatedClusters.value = relatedClusters;
   };
 
   const handleAppend = () => {

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

@@ -22,7 +22,11 @@
   const proxyHostMemo: { [key: string]: Record<string, boolean> } = {};
 
   interface Emits {
-    (e: 'inputFinish', relatedInstances: IDataRow['relatedInstances']): void;
+    (
+      e: 'inputFinish',
+      relatedInstances: IDataRow['relatedInstances'],
+      relatedClusters: IDataRow['relatedClusters'],
+    ): void;
   }
 
   interface Exposes {
@@ -32,6 +36,7 @@
   }
 </script>
 <script setup lang="ts">
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import { checkInstance } from '@services/source/dbbase';
@@ -77,7 +82,7 @@
           instance_addresses: [value],
         }).then((data) => {
           if (data.length < 1) {
-            emits('inputFinish', []);
+            emits('inputFinish', [], []);
             return false;
           }
           const [currentData] = data;
@@ -93,7 +98,14 @@
             cluster_id: item.cluster_id,
             instance: item.instance_address,
           }));
-          emits('inputFinish', relatedInstances);
+          const relatedClusters = _.sortBy(
+            currentData.related_clusters.map((item) => ({
+              cluster_id: item.id,
+              domain: item.master_domain,
+            })),
+            'cluster_id',
+          );
+          emits('inputFinish', relatedInstances, relatedClusters);
           return true;
         }),
       message: t('目标Proxy主机不存在'),
@@ -115,7 +127,7 @@
         const currentSelectClusterIdList = Object.keys(currentClusterSelectMap);
         for (let i = 0; i < currentSelectClusterIdList.length; i++) {
           if (otherClusterIdMap[currentSelectClusterIdList[i]]) {
-            emits('inputFinish', []);
+            emits('inputFinish', [], []);
             return false;
           }
         }

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

@@ -125,9 +125,9 @@
   import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
 
+  import RenderRelatedClusters from '../../../common/RenderRelatedClusters.vue';
   import RenderTargetProxy from '../../../common/RenderTargetProxy.vue';
   import RenderOriginalProxyInst from '../RenderOriginalProxyInst.vue';
-  import RenderRelatedClusters from '../RenderRelatedClusters.vue';
 
   const props = defineProps<Props>();
 

dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue

@@ -78,8 +78,8 @@
   import MySQLMigrateCluster from './mysql/MigrateCluster.vue';
   import MysqlOpenArea from './mysql/openarea/Index.vue';
   import MysqlParition from './mysql/Partition.vue';
+  import MySQLProxyReplace from './mysql/proxy-replace/Index.vue';
   import MySQLProxyAdd from './mysql/ProxyAdd.vue';
-  import MySQLProxySwitch from './mysql/ProxySwitch.vue';
   import MySQLRename from './mysql/Rename.vue';
   import MySQLRestoreLocalSlave from './mysql/RestoreLocalSlave.vue';
   import MySQLRestoreSlave from './mysql/RestoreSlave.vue';
@@ -295,7 +295,7 @@
     [TicketTypes.INFLUXDB_APPLY]: DetailsInfluxDB,
     [TicketTypes.INFLUXDB_REPLACE]: InfluxdbReplace,
     [TicketTypes.KAFKA_APPLY]: DetailsKafka,
-    [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxySwitch,
+    [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxyReplace,
     [TicketTypes.MYSQL_HA_DB_TABLE_BACKUP]: MySQLTableBackup,
     [TicketTypes.MYSQL_MIGRATE_CLUSTER]: MySQLMigrateCluster,
     [TicketTypes.MYSQL_PROXY_ADD]: MySQLProxyAdd,