perf(frontend): mongodb工具箱重构 TencentBlueKing#8498

3octaves · Jan 17, 2025 · 64ecbeb · 64ecbeb
1 parent 0b86d80
commit 64ecbeb
Show file tree

Hide file tree

Showing 27 changed files with 518 additions and 547 deletions.
diff --git a/...olumn/edit-db-table-name-column/Index.vue → ...eld/column/db-table-name-column/Index.vue b/...olumn/edit-db-table-name-column/Index.vue → ...eld/column/db-table-name-column/Index.vue
@@ -1,6 +1,5 @@
 <template>
   <EditableTableColumn
-    ref="editableTableColumn"
     :field="field"
     :label="label"
     :min-width="200"

diff --git a/...x-field/column/edit-spec-column/Index.vue → ...field/column/spec-select-column/Index.vue b/...x-field/column/edit-spec-column/Index.vue → ...field/column/spec-select-column/Index.vue
@@ -1,6 +1,6 @@
 <template>
   <EditableTableColumn
-    class="edit-spec-column"
+    class="spec-select-column"
     :field="field"
     :label="label"
     required
@@ -16,21 +16,21 @@
         :content="labelTip"
         placement="top"
         theme="dark">
-        <span class="edit-spec-column-label-tip">{{ label }}</span>
+        <span class="spec-select-column-label-tip">{{ label }}</span>
       </BkPopover>
       <span v-else>{{ label }}</span>
     </template>
     <EditSelect v-model="modelValue">
       <SpecPanel
         v-for="(item, index) in specList"
         :key="index"
-        v-model="item.specData">
+        :data="item.specData">
         <template #hover>
           <BkOption
             :key="index"
             :label="item.label"
             :value="item.value">
-            <div class="edit-spec-column-spec-item">
+            <div class="spec-select-column-spec-item">
               <span class="text-overflow">
                 {{ item.label }}
                 <BkTag
@@ -52,6 +52,7 @@
 </template>
 
 <script setup lang="ts">
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
@@ -60,7 +61,7 @@
 
   import { Column as EditableTableColumn, Select as EditSelect } from '@components/editable-table/Index.vue';
 
-  import SpecPanel, { type SpecInfo } from './components/SpecPanel.vue';
+  import SpecPanel from './components/SpecPanel.vue';
 
   interface Props {
     label: string;
@@ -88,7 +89,7 @@
     {
       value: number;
       label: string;
-      specData: SpecInfo;
+      specData: ComponentProps<typeof SpecPanel>['data'];
     }[]
   >([]);
 
@@ -156,11 +157,11 @@
 </script>
 
 <style lang="less" scoped>
-  .edit-spec-column-label-tip {
+  .spec-select-column-label-tip {
     border-bottom: 1px dashed #979ba5;
   }
 
-  .edit-spec-column-spec-item {
+  .spec-select-column-spec-item {
     display: flex;
     width: 100%;
     flex: 1;

diff --git a/...edit-spec-column/components/SpecPanel.vue → ...ec-select-column/components/SpecPanel.vue b/...edit-spec-column/components/SpecPanel.vue → ...ec-select-column/components/SpecPanel.vue
@@ -20,30 +20,26 @@
     width="420">
     <slot name="hover" />
     <template #content>
-      <div class="mongo-spec-panel">
-        <div class="mongo-spec-panel-title">{{ modelValue.name }} {{ t('规格') }}</div>
-        <div class="mongo-spec-panel-item">
+      <div class="spec-column-panel">
+        <div class="spec-column-panel-title">{{ data.name }} {{ t('规格') }}</div>
+        <div class="spec-column-panel-item">
           <div class="item-title">CPU：</div>
           <div class="item-content">
             {{
-              modelValue.cpu.min === modelValue.cpu.max
-                ? t('n核', { n: modelValue.cpu.min })
-                : t('((n-m))台', { n: modelValue.cpu.min, m: modelValue.cpu.max })
+              data.cpu.min === data.cpu.max
+                ? t('n核', { n: data.cpu.min })
+                : t('((n-m))台', { n: data.cpu.min, m: data.cpu.max })
             }}
           </div>
         </div>
-        <div class="mongo-spec-panel-item">
+        <div class="spec-column-panel-item">
           <div class="item-title">{{ t('内存') }}：</div>
           <div class="item-content">
-            {{
-              modelValue.mem.min === modelValue.mem.max
-                ? modelValue.mem.min
-                : `(${modelValue.mem.min}~${modelValue.mem.max})`
-            }}
+            {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }}
             G
           </div>
         </div>
-        <div class="mongo-spec-panel-item">
+        <div class="spec-column-panel-item">
           <div class="item-title">{{ t('磁盘') }}：</div>
           <div class="item-content">
             <div class="mount-point-table">
@@ -59,7 +55,7 @@
                 </div>
               </div>
               <div
-                v-for="(storageSpecItem, storageSpecIndex) in modelValue.storage_spec"
+                v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
                 :key="storageSpecIndex"
                 class="table-row">
                 <div class="row-one">
@@ -82,33 +78,33 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  export interface SpecInfo {
-    name: string;
-    cpu: {
-      max: number;
-      min: number;
-    };
-    id: number;
-    mem: {
-      max: number;
-      min: number;
+  interface Props {
+    data: {
+      name: string;
+      cpu: {
+        max: number;
+        min: number;
+      };
+      id: number;
+      mem: {
+        max: number;
+        min: number;
+      };
+      count: number;
+      storage_spec: {
+        mount_point: string;
+        size: number;
+        type: string;
+      }[];
     };
-    count: number;
-    storage_spec: {
-      mount_point: string;
-      size: number;
-      type: string;
-    }[];
   }
 
-  const modelValue = defineModel<SpecInfo>({
-    required: true,
-  });
+  defineProps<Props>();
 
   const { t } = useI18n();
 </script>
 <style lang="less" scoped>
-  .mongo-spec-panel {
+  .spec-column-panel {
     display: flex;
     width: 420px;
     height: 220px;
@@ -121,7 +117,7 @@
     box-sizing: border-box;
     flex-direction: column;
 
-    .mongo-spec-panel-title {
+    .spec-column-panel-title {
       height: 20px;
       margin-bottom: 12px;
       font-size: 12px;
@@ -130,7 +126,7 @@
       color: #63656e;
     }
 
-    .mongo-spec-panel-item {
+    .spec-column-panel-item {
       display: flex;
       width: 100%;
       height: 32px;

diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/Create.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/Create.vue
@@ -26,12 +26,12 @@
         <EditableTable
           ref="editableTable"
           class="mt16 mb16"
-          :model="tableData"
+          :model="formData.tableData"
           :rules="rules">
           <EditableTableRow
-            v-for="(item, index) in tableData"
+            v-for="(item, index) in formData.tableData"
             :key="index">
-            <EditClusterColumn
+            <ClusterColumn
               v-model="item.cluster"
               :cluster-types="[ClusterTypes.MONGO_SHARED_CLUSTER]"
               field="cluster.master_domain"
@@ -47,7 +47,7 @@
             </EditableTableColumn>
             <EditSpecColumn
               v-model="item.spec_id"
-              :current-spec-ids="item.cluster.mongos?.length ? [item.cluster.mongos[0].spec_config.id] : []"
+              :current-spec-ids="item.cluster.mongos.length ? [item.cluster.mongos[0].spec_config.id] : []"
               field="spec_id"
               :label="t('扩容规格')"
               :params="{
@@ -69,7 +69,7 @@
             </EditableTableColumn>
             <OperationColumn
               :create-row-method="createRowData"
-              :table-data="tableData" />
+              :table-data="formData.tableData" />
           </EditableTableRow>
         </EditableTable>
         <TicketRemark v-model="formData.remark" />
@@ -115,29 +115,38 @@
     Row as EditableTableRow,
   } from '@components/editable-table/Index.vue';
 
-  import EditSpecColumn from '@views/db-manage/common/toolbox-field/column/edit-spec-column/Index.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import EditSpecColumn from '@views/db-manage/common/toolbox-field/column/spec-select-column/Index.vue';
   import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
+  import ClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/cluster-column/Index.vue';
 
   export interface IDataRow {
     cluster: {
-      id?: number;
-      master_domain?: string;
-      mongos?: MongodbModel['mongos'];
-      bk_cloud_id?: number;
+      id: number;
+      master_domain: string;
+      mongos: MongodbModel['mongos'];
+      bk_cloud_id: number;
     };
-    spec_id?: number;
-    target_num?: number;
+    spec_id: number;
+    target_num: number;
   }
 
-  const createRowData = (values?: Partial<IDataRow>) => ({
-    cluster: values?.cluster ? values.cluster : ({} as IDataRow['cluster']),
-    spec_id: values?.spec_id,
-    target_num: values?.target_num,
+  const createRowData = (values = {} as Partial<IDataRow>) => ({
+    cluster: Object.assign(
+      {
+        id: 0,
+        master_domain: '',
+        mongos: [] as MongodbModel['mongos'],
+        bk_cloud_id: 0,
+      },
+      values.cluster,
+    ),
+    spec_id: values.spec_id || 0,
+    target_num: values.target_num || 0,
   });
 
   const createDefaultFormData = () => ({
+    tableData: [createRowData()],
     remark: '',
   });
 
@@ -148,16 +157,16 @@
       const { details, remark } = ticketDetail;
       const { infos, clusters } = details;
 
-      tableData.value = infos.map((infoItem) =>
-        createRowData({
-          cluster: {
-            master_domain: clusters[infoItem.cluster_id].immute_domain,
-          },
-          spec_id: infoItem.resource_spec.mongos.spec_id,
-          target_num: infoItem.resource_spec.mongos.count,
-        }),
-      );
       Object.assign(formData, {
+        tableData: infos.map((infoItem) =>
+          createRowData({
+            cluster: {
+              master_domain: clusters[infoItem.cluster_id].immute_domain,
+            } as IDataRow['cluster'],
+            spec_id: infoItem.resource_spec.mongos.spec_id,
+            target_num: infoItem.resource_spec.mongos.count,
+          }),
+        ),
         remark,
       });
     },
@@ -183,7 +192,7 @@
       {
         validator: (value: string) => {
           if (value) {
-            const nonEmptyIdList = tableData.value.filter((row) => row.cluster.master_domain === value);
+            const nonEmptyIdList = formData.tableData.filter((row) => row.cluster.master_domain === value);
             return nonEmptyIdList.length === 1;
           }
           return true;
@@ -212,19 +221,17 @@
     },
   } as unknown as Record<ClusterTypes, TabItem>;
 
-  const tableData = ref<IDataRow[]>([createRowData()]);
-
   const formData = reactive(createDefaultFormData());
 
   const selected = computed(() => {
-    const selectedClusterList = tableData.value.reduce<
+    const selectedClusterList = formData.tableData.reduce<
       {
         id: number;
         master_domain: string;
       }[]
     >((prevList, tableRow) => {
       const { id, master_domain: masterDomain } = tableRow.cluster;
-      if (id && masterDomain) {
+      if (id) {
         return prevList.concat({
           id,
           master_domain: masterDomain,
@@ -250,13 +257,13 @@
     if (validateResult) {
       createTicketRun({
         details: {
-          infos: tableData.value.map((tableItem) => ({
-            cluster_id: tableItem.cluster.id!,
+          infos: formData.tableData.map((tableItem) => ({
+            cluster_id: tableItem.cluster.id,
             role: 'mongos',
             resource_spec: {
               mongos: {
-                spec_id: tableItem.spec_id!,
-                count: tableItem.target_num!,
+                spec_id: tableItem.spec_id,
+                count: tableItem.target_num,
               },
             },
           })),
@@ -284,14 +291,13 @@
       }
     });
 
-    tableData.value = [...(tableData.value[0].cluster.master_domain ? tableData.value : []), ...newList];
+    formData.tableData = [...(formData.tableData[0].cluster.master_domain ? formData.tableData : []), ...newList];
     window.changeConfirm = true;
   };
 
   // 重置
   const handleReset = () => {
     Object.assign(formData, createDefaultFormData());
-    tableData.value = [createRowData()];
     window.changeConfirm = false;
   };
 </script>