fix(frontend): 快速连续点击重复提单 TencentBlueKing#5714

# Reviewed, transaction id: 12564
hLinx · Jul 19, 2024 · 7efadac · 7efadac
1 parent f717876
commit 7efadac
Show file tree

Hide file tree

Showing 37 changed files with 532 additions and 581 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-export-data/component/Content.vue b/dbm-ui/frontend/src/components/cluster-export-data/component/Content.vue
@@ -218,7 +218,7 @@
           });
         }
 
-        createTicket({
+        return createTicket({
           ignore_duplication: true,
           ticket_type: props.ticketType,
           bk_biz_id: props.data.bk_biz_id,
@@ -246,13 +246,15 @@
 
     .target-dbs {
       .required-mark {
-        color: #ea3636;
         margin: 0 4px;
+        color: #ea3636;
       }
+
       .label-text {
         color: #979ba5;
       }
-      :deep(.bk-form-label:after) {
+
+      :deep(.bk-form-label::after) {
         display: none;
       }
     }

diff --git a/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue
@@ -326,7 +326,7 @@
           headerAlign: 'center',
           contentAlign: 'center',
           footerAlign: 'center',
-          onClosed: () => reject(),
+          onCancel: () => reject(),
           onConfirm: () => {
             const hostData = {};
 

diff --git a/dbm-ui/frontend/src/views/es-manage/common/replace/Index.vue b/dbm-ui/frontend/src/views/es-manage/common/replace/Index.vue
@@ -119,11 +119,7 @@
 </template>
 <script setup lang="ts">
   import { InfoBox } from 'bkui-vue';
-  import {
-    computed,
-    reactive,
-    ref,
-  } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import type EsModel from '@services/model/es/es';
@@ -134,34 +130,36 @@
 
   import { ClusterTypes } from '@common/const';
 
-  import HostReplace, {
-    type TReplaceNode,
-  } from '@components/cluster-common/es-host-replace/Index.vue';
+  import HostReplace, { type TReplaceNode } from '@components/cluster-common/es-host-replace/Index.vue';
 
-  import { messageError  } from '@utils';
+  import { messageError } from '@utils';
 
   interface Props {
-    data: EsModel,
-    nodeList: TReplaceNode['nodeList']
+    data: EsModel;
+    nodeList: TReplaceNode['nodeList'];
   }
 
   interface Emits {
-    (e: 'change'): void,
-    (e: 'removeNode', bkHostId: number): void
+    (e: 'change'): void;
+    (e: 'removeNode', bkHostId: number): void;
   }
 
   interface Exposes {
-    submit: () => Promise<any>,
-    cancel: () => Promise<any>,
+    submit: () => Promise<any>;
+    cancel: () => Promise<any>;
   }
 
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
-  const makeMapByHostId = (hostList: TReplaceNode['hostList']) =>  hostList.reduce((result, item) => ({
-    ...result,
-    [item.host_id]: true,
-  }), {} as Record<number, boolean>);
+  const makeMapByHostId = (hostList: TReplaceNode['hostList']) =>
+    hostList.reduce(
+      (result, item) => ({
+        ...result,
+        [item.host_id]: true,
+      }),
+      {} as Record<number, boolean>,
+    );
 
   const { currentBizId } = useGlobalBizs();
   const { t } = useI18n();
@@ -228,16 +226,10 @@
   });
 
   const isEmpty = computed(() => {
-    const {
-      hot,
-      cold,
-      client,
-      master,
-    } = nodeInfoMap;
-    return hot.nodeList.length < 1
-      && cold.nodeList.length < 1
-      && client.nodeList.length < 1
-      && master.nodeList.length < 1;
+    const { hot, cold, client, master } = nodeInfoMap;
+    return (
+      hot.nodeList.length < 1 && cold.nodeList.length < 1 && client.nodeList.length < 1 && master.nodeList.length < 1
+    );
   });
 
   const disableTipsMap = {
@@ -247,31 +239,35 @@
     master: t('主机已被 Master 节点使用'),
   };
 
-  watch(() => props.nodeList, () => {
-    const hotList: TReplaceNode['nodeList'] = [];
-    const coldList: TReplaceNode['nodeList'] = [];
-    const clientList: TReplaceNode['nodeList'] = [];
-    const masterList: TReplaceNode['nodeList'] = [];
-
-    props.nodeList.forEach((nodeItem) => {
-      if (nodeItem.isHot) {
-        hotList.push(nodeItem);
-      } else if (nodeItem.isCold) {
-        coldList.push(nodeItem);
-      } else if (nodeItem.isClient) {
-        clientList.push(nodeItem);
-      } else if (nodeItem.isMaster) {
-        masterList.push(nodeItem);
-      }
-    });
-
-    nodeInfoMap.hot.nodeList = hotList;
-    nodeInfoMap.cold.nodeList = coldList;
-    nodeInfoMap.client.nodeList = clientList;
-    nodeInfoMap.master.nodeList = masterList;
-  }, {
-    immediate: true,
-  });
+  watch(
+    () => props.nodeList,
+    () => {
+      const hotList: TReplaceNode['nodeList'] = [];
+      const coldList: TReplaceNode['nodeList'] = [];
+      const clientList: TReplaceNode['nodeList'] = [];
+      const masterList: TReplaceNode['nodeList'] = [];
+
+      props.nodeList.forEach((nodeItem) => {
+        if (nodeItem.isHot) {
+          hotList.push(nodeItem);
+        } else if (nodeItem.isCold) {
+          coldList.push(nodeItem);
+        } else if (nodeItem.isClient) {
+          clientList.push(nodeItem);
+        } else if (nodeItem.isMaster) {
+          masterList.push(nodeItem);
+        }
+      });
+
+      nodeInfoMap.hot.nodeList = hotList;
+      nodeInfoMap.cold.nodeList = coldList;
+      nodeInfoMap.client.nodeList = clientList;
+      nodeInfoMap.master.nodeList = masterList;
+    },
+    {
+      immediate: true,
+    },
+  );
 
   // 节点主机互斥
   const nodeDisableHostMethod = (hostData: HostDetails, type: keyof typeof disableTipsMap) => {
@@ -304,90 +300,94 @@
           coldRef.value.getValue(),
           clientRef.value.getValue(),
           masterRef.value.getValue(),
-        ]).then(([hotValue, coldValue, clientValue, masterValue]) => {
-          const isEmptyValue = () => {
-            if (ipSource.value === 'manual_input') {
-              return hotValue.new_nodes.length
-                + coldValue.new_nodes.length
-                + clientValue.new_nodes.length
-                + masterValue.new_nodes.length < 1;
-            }
-
-            return !((hotValue.resource_spec.spec_id > 0 && hotValue.resource_spec.count > 0)
-              || (coldValue.resource_spec.spec_id > 0 && coldValue.resource_spec.count > 0)
-              || (clientValue.resource_spec.spec_id > 0 && clientValue.resource_spec.count > 0)
-              || (masterValue.resource_spec.spec_id > 0 && masterValue.resource_spec.count > 0));
-          };
-
-          if (isEmptyValue()) {
-            messageError(t('替换节点不能为空'));
-            return reject();
-          }
+        ]).then(
+          ([hotValue, coldValue, clientValue, masterValue]) => {
+            const isEmptyValue = () => {
+              if (ipSource.value === 'manual_input') {
+                return (
+                  hotValue.new_nodes.length +
+                    coldValue.new_nodes.length +
+                    clientValue.new_nodes.length +
+                    masterValue.new_nodes.length <
+                  1
+                );
+              }
 
-          const getReplaceNodeNums = () => {
-            if (ipSource.value === 'manual_input') {
-              return Object.values(nodeInfoMap).reduce((result, nodeData) => result + nodeData.hostList.length, 0);
+              return !(
+                (hotValue.resource_spec.spec_id > 0 && hotValue.resource_spec.count > 0) ||
+                (coldValue.resource_spec.spec_id > 0 && coldValue.resource_spec.count > 0) ||
+                (clientValue.resource_spec.spec_id > 0 && clientValue.resource_spec.count > 0) ||
+                (masterValue.resource_spec.spec_id > 0 && masterValue.resource_spec.count > 0)
+              );
+            };
+
+            if (isEmptyValue()) {
+              messageError(t('替换节点不能为空'));
+              return reject();
             }
-            return Object.values(nodeInfoMap).reduce((result, nodeData) => {
-              if (nodeData.resourceSpec.spec_id > 0) {
-                return result + nodeData.nodeList.length;
-              }
-              return result;
-            }, 0);
-          };
-
-          InfoBox({
-            title: t('确认替换n台节点IP', { n: getReplaceNodeNums() }),
-            subTitle: t('替换后原节点 IP 将不在可用，资源将会被释放'),
-            confirmText: t('确认'),
-            cancelText: t('取消'),
-            headerAlign: 'center',
-            contentAlign: 'center',
-            footerAlign: 'center',
-            onClosed: () => reject(),
-            onConfirm: () => {
-              const nodeData = {};
+
+            const getReplaceNodeNums = () => {
               if (ipSource.value === 'manual_input') {
-                Object.assign(nodeData, {
-                  new_nodes: {
-                    hot: hotValue.new_nodes,
-                    cold: coldValue.new_nodes,
-                    client: clientValue.new_nodes,
-                    master: masterValue.new_nodes,
-                  },
-                });
-              } else {
-                Object.assign(nodeData, {
-                  resource_spec: {
-                    hot: hotValue.resource_spec,
-                    cold: coldValue.resource_spec,
-                    client: clientValue.resource_spec,
-                    master: masterValue.resource_spec,
-                  },
-                });
+                return Object.values(nodeInfoMap).reduce((result, nodeData) => result + nodeData.hostList.length, 0);
               }
-              createTicket({
-                ticket_type: 'ES_REPLACE',
-                bk_biz_id: currentBizId,
-                details: {
-                  cluster_id: props.data.id,
-                  ip_source: ipSource.value,
-                  old_nodes: {
-                    hot: hotValue.old_nodes,
-                    cold: coldValue.old_nodes,
-                    client: clientValue.old_nodes,
-                    master: masterValue.old_nodes,
+              return Object.values(nodeInfoMap).reduce((result, nodeData) => {
+                if (nodeData.resourceSpec.spec_id > 0) {
+                  return result + nodeData.nodeList.length;
+                }
+                return result;
+              }, 0);
+            };
+
+            InfoBox({
+              title: t('确认替换n台节点IP', { n: getReplaceNodeNums() }),
+              subTitle: t('替换后原节点 IP 将不在可用，资源将会被释放'),
+              confirmText: t('确认'),
+              cancelText: t('取消'),
+              headerAlign: 'center',
+              contentAlign: 'center',
+              footerAlign: 'center',
+              onCancel: () => reject(),
+              onConfirm: () => {
+                const nodeData = {};
+                if (ipSource.value === 'manual_input') {
+                  Object.assign(nodeData, {
+                    new_nodes: {
+                      hot: hotValue.new_nodes,
+                      cold: coldValue.new_nodes,
+                      client: clientValue.new_nodes,
+                      master: masterValue.new_nodes,
+                    },
+                  });
+                } else {
+                  Object.assign(nodeData, {
+                    resource_spec: {
+                      hot: hotValue.resource_spec,
+                      cold: coldValue.resource_spec,
+                      client: clientValue.resource_spec,
+                      master: masterValue.resource_spec,
+                    },
+                  });
+                }
+                createTicket({
+                  ticket_type: 'ES_REPLACE',
+                  bk_biz_id: currentBizId,
+                  details: {
+                    cluster_id: props.data.id,
+                    ip_source: ipSource.value,
+                    old_nodes: {
+                      hot: hotValue.old_nodes,
+                      cold: coldValue.old_nodes,
+                      client: clientValue.old_nodes,
+                      master: masterValue.old_nodes,
+                    },
+                    ...nodeData,
                   },
-                  ...nodeData,
-                },
-              })
-                .then(() => {
-                  emits('change');
-                  resolve('success');
-                })
-            },
-          });
-        }, () => reject('error'));
+                });
+              },
+            });
+          },
+          () => reject('error'),
+        );
       });
     },
     cancel() {

diff --git a/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue
@@ -305,7 +305,7 @@
           headerAlign: 'center',
           contentAlign: 'center',
           footerAlign: 'center',
-          onClosed: () => reject(),
+          onCancel: () => reject(),
           onConfirm: () => {
             const fomatHost = (nodeList: TNodeInfo['nodeList'] = []) => nodeList.map(hostItem => ({
               ip: hostItem.ip,
@@ -332,7 +332,7 @@
               return results;
             }, {} as Record<string, any>);
 
-            createTicket({
+            return createTicket({
               ticket_type: 'ES_SHRINK',
               bk_biz_id: bizId,
               details: {

diff --git a/...views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue b/...views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -217,7 +217,7 @@
       headerAlign: 'center',
       contentAlign: 'center',
       footerAlign: 'center',
-      onClosed: () => {
+      onCancel: () => {
         isBatchRestartLoading.value = false;
       },
       onConfirm: () => {
@@ -255,7 +255,7 @@
       headerAlign: 'center',
       contentAlign: 'center',
       footerAlign: 'center',
-      onClosed: () => {
+      onCancel: () => {
         isRestartLoading.value = false;
       },
       onConfirm: () => {