feat(frontend): mysql和tendbCluster 备份单据优化 #6731

TencentBlueKing · Dec 2, 2024 · 3290685 · 3290685
1 parent acb22bc
commit 3290685
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/...views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/RenderCluster.vue b/...views/db-manage/mysql/db-table-backup/pages/page1/components/RenderData/RenderCluster.vue
@@ -86,6 +86,7 @@
         }).then((data) => {
           if (data.length > 0) {
             localClusterId.value = data[0].id;
+            emits('idChange', localClusterId.value);
             return true;
           }
           return false;

diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/db-table-backup/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/db-table-backup/pages/page1/Index.vue
@@ -30,6 +30,7 @@
           :removeable="tableData.length < 2"
           @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
           @clone="(payload: IDataRow) => handleClone(index, payload)"
+          @id-change="(clusterId: number) => handleChangeCluster(index, clusterId)"
           @remove="handleRemove(index)" />
       </RenderData>
       <TicketRemark v-model="remark" />
@@ -66,6 +67,7 @@
   import { useRouter } from 'vue-router';
 
   import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { getTendbClusterList } from '@services/source/tendbcluster';
   import { createTicket } from '@services/source/ticket';
 
   import { useTicketCloneInfo } from '@hooks';
@@ -163,6 +165,31 @@
     window.changeConfirm = true;
   };
 
+  // 输入集群后查询集群信息并填充到table
+  const handleChangeCluster = async (index: number, clusterId: number) => {
+    if (tableData.value[index].clusterData?.id === clusterId) {
+      return;
+    }
+
+    const resultList = await getTendbClusterList({
+      cluster_ids: [clusterId],
+    });
+    if (resultList.results.length < 1) {
+      return;
+    }
+    const item = resultList.results[0];
+    const domain = item.master_domain;
+    const row = createRowData({
+      clusterData: {
+        id: item.id,
+        domain: item.master_domain,
+      },
+    });
+    tableData.value[index] = row;
+    domainMemo[domain] = true;
+    selectedClusters.value[item.cluster_type].push(item);
+  };
+
   // 追加一个集群
   const handleAppend = (index: number, appendList: Array<IDataRow>) => {
     const dataList = [...tableData.value];

diff --git a/...-manage/tendb-cluster/db-table-backup/pages/page1/components/RenderData/RenderCluster.vue b/...-manage/tendb-cluster/db-table-backup/pages/page1/components/RenderData/RenderCluster.vue
@@ -19,6 +19,7 @@
       multi-input
       :placeholder="t('请输入集群_使用换行分割一次可输入多个')"
       :rules="rules"
+      @focus="handleFocus"
       @multi-input="handleMultiInput" />
   </div>
 </template>
@@ -47,7 +48,7 @@
   }
 
   interface Exposes {
-    getValue: () => Record<string, number>;
+    getValue: (isSubmit?: boolean) => Record<string, number>;
   }
 
   const props = defineProps<Props>();
@@ -60,6 +61,8 @@
 
   const { currentBizId } = useGlobalBizs();
 
+  let isSkipInputFinish = false;
+
   const editRef = ref();
 
   const localClusterId = ref(0);
@@ -72,7 +75,7 @@
         if (value) {
           return true;
         }
-        emits('idChange', 0);
+        // emits('idChange', 0);
         return false;
       },
       message: t('目标集群不能为空'),
@@ -89,6 +92,9 @@
         }).then((data) => {
           if (data.length > 0) {
             localClusterId.value = data[0].id;
+            if (!isSkipInputFinish) {
+              emits('idChange', localClusterId.value);
+            }
             return true;
           }
           return false;
@@ -158,12 +164,17 @@
     emits('inputCreate', list);
   };
 
+  const handleFocus = () => {
+    isSkipInputFinish = false;
+  };
+
   // onBeforeUnmount(() => {
   //   delete clusterIdMemo[instanceKey];
   // });
 
   defineExpose<Exposes>({
-    getValue() {
+    getValue(isSubmit = false) {
+      isSkipInputFinish = isSubmit;
       return editRef.value
         .getValue()
         .then(() => ({

diff --git a/...c/views/db-manage/tendb-cluster/db-table-backup/pages/page1/components/RenderData/Row.vue b/...c/views/db-manage/tendb-cluster/db-table-backup/pages/page1/components/RenderData/Row.vue
@@ -109,6 +109,7 @@
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
     (e: 'clone', value: IDataRow): void;
+    (e: 'idChange', value: number): void;
   }
 
   interface Exposes {
@@ -141,7 +142,7 @@
   );
 
   const handleClusterIdChange = (clusterId: number) => {
-    localClusterId.value = clusterId;
+    emits('idChange', clusterId);
   };
 
   const handleCreate = (list: Array<string>) => {
@@ -170,7 +171,7 @@
   };
 
   const getRowData = () => [
-    clusterRef.value!.getValue(),
+    clusterRef.value!.getValue(true),
     backupLocalRef.value!.getValue(),
     dbPatternsRef.value!.getValue('db_patterns'),
     tablePatternsRef.value!.getValue('table_patterns'),