fix(frontend): 大数据节点列表筛选后勾选提示异常问题修复 TencentBlueKing#6963

# Reviewed, transaction id: 18794
yyhenryyy · Sep 19, 2024 · 7eaf1f6 · 7eaf1f6
1 parent 5810b60
commit 7eaf1f6
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 43 deletions.
diff --git a/dbm-ui/frontend/src/components/db-textarea/DbTextarea.vue b/dbm-ui/frontend/src/components/db-textarea/DbTextarea.vue
@@ -61,18 +61,18 @@
   import { encodeMult } from '@utils';
 
   interface Props {
-    displayHeight?: number | string
-    maxHeight?: number,
-    teleportToBody?: boolean,
-    rowHeight?: number,
+    displayHeight?: number | string;
+    maxHeight?: number;
+    teleportToBody?: boolean;
+    rowHeight?: number;
   }
 
   interface Emits {
-    (e: 'focus', value: FocusEvent): void
-    (e: 'blur', value: FocusEvent): void
-    (e: 'change', value: string): void
-    (e: 'input', value: string): void
-    (e: 'clear'): void
+    (e: 'focus', value: FocusEvent): void;
+    (e: 'blur', value: FocusEvent): void;
+    (e: 'change', value: string): void;
+    (e: 'input', value: string): void;
+    (e: 'clear'): void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -104,14 +104,20 @@
   const rows = ref(1);
   // const height = computed(() => rows.value * rowHeight);
   // bk textarea style
-  const style = computed(() => Object.assign({ maxHeight: `${props.maxHeight}px`, '--row-height': `${props.rowHeight}px` }, attrs.style || {}));
+  const style = computed(() =>
+    Object.assign({ maxHeight: `${props.maxHeight}px`, '--row-height': `${props.rowHeight}px` }, attrs.style || {}),
+  );
   const renderValues = computed(() => modelValue.value.split('\n').join(', '));
   const placeholder = computed(() => {
-    if (renderValues.value) return '';
+    if (renderValues.value) {
+      return '';
+    }
 
     return (attrs.placeholder || t('请输入')) as string;
   });
-  const displayHeightValue = computed(() => (typeof props.displayHeight === 'string' ? props.displayHeight : `${props.displayHeight}px`));
+  const displayHeightValue = computed(() =>
+    typeof props.displayHeight === 'string' ? props.displayHeight : `${props.displayHeight}px`,
+  );
 
   // 初始化 rows
   if (typeof props.displayHeight === 'number') {
@@ -125,11 +131,7 @@
   const handleEdit = () => {
     // 为了解决第一次用 getBoundingClientRect 获取信息不准确问题
     if (dbTextareaRef.value) {
-      const {
-        x,
-        y,
-        width,
-      } = dbTextareaRef.value.getBoundingClientRect();
+      const { x, y, width } = dbTextareaRef.value.getBoundingClientRect();
       inputPosition.x = x;
       inputPosition.y = y;
       inputPosition.width = width;
@@ -147,7 +149,8 @@
 
     if (textareaRef.value?.$el) {
       const el = textareaRef.value.$el as HTMLDivElement;
-      const minHeight = typeof props.displayHeight === 'number' ? Math.max(props.displayHeight, props.rowHeight) : props.rowHeight;
+      const minHeight =
+        typeof props.displayHeight === 'number' ? Math.max(props.displayHeight, props.rowHeight) : props.rowHeight;
       const height = Math.max(rows.value * props.rowHeight + textareaPadding, minHeight);
       el.style.height = `${height}px`;
     }
@@ -214,11 +217,12 @@
     textareaRef.value?.focus?.();
   };
 
-  const handlePaste = (value: string, event: ClipboardEvent) => {
+  const handlePaste = (value: string, event: any) => {
+    const cursorPosition = event.target.selectionStart;
     event.preventDefault();
     let paste = (event.clipboardData || window.clipboardData).getData('text');
-    paste = encodeMult(paste);
-    modelValue.value = paste.replace(/^\s+|\s+$/g, '');
+    paste = encodeMult(paste).replace(/^\s+|\s+$/g, '');
+    modelValue.value = modelValue.value.slice(0, cursorPosition) + paste + modelValue.value.slice(cursorPosition);
   };
 
   defineExpose({

diff --git a/.../src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue b/.../src/views/db-manage/elastic-search/list/components/detail/components/node-list/Index.vue
@@ -233,7 +233,7 @@
       let clientNodeNum = 0;
       let hotNodeNum = 0;
       let coldNodeNum = 0;
-      tableData.value.forEach((nodeItem) => {
+      totalTableData.forEach((nodeItem) => {
         if (nodeItem.isClient) {
           clientNodeNum = clientNodeNum + 1;
         } else if (nodeItem.isHot) {
@@ -284,6 +284,8 @@
     }
   });
 
+  let totalTableData: EsNodeModel[] = [];
+
   const isAnomalies = ref(false);
   const isShowReplace = ref(false);
   const isShowExpandsion = ref(false);
@@ -339,7 +341,7 @@
     let hotNodeNum = 0;
     let coldNodeNumTotal = 0;
     let coldNodeNum = 0;
-    tableData.value.forEach((nodeItem) => {
+    totalTableData.forEach((nodeItem) => {
       if (nodeItem.isHot) {
         hotNodeNumTotal = hotNodeNumTotal + 1;
       } else if (nodeItem.isCold) {
@@ -563,6 +565,9 @@
     }).then((data) => {
       tableData.value = data.results;
       isAnomalies.value = false;
+      if (searchValue.value.length === 0) {
+        totalTableData = _.cloneDeep(tableData.value);
+      }
     })
       .catch(() => {
         tableData.value = [];

diff --git a/...i/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue b/...i/frontend/src/views/db-manage/hdfs/list/components/detail/components/node-list/Index.vue
@@ -224,7 +224,7 @@
     } else {
       // 其它类型的节点数不能全部被缩容，至少保留一个
       let dataNodeNum = 0;
-      tableData.value.forEach((nodeItem) => {
+      totalTableData.forEach((nodeItem) => {
         if (nodeItem.isDataNode) {
           dataNodeNum = dataNodeNum + 1;
         }
@@ -262,6 +262,8 @@
     }
   });
 
+  let totalTableData: HdfsNodeModel[] = [];
+
   const isLoading = ref(false);
   const isAnomalies = ref(false);
   const isShowReplace = ref(false);
@@ -304,7 +306,7 @@
 
     // 其它类型的节点数不能全部被缩容，至少保留一个
     let dataNodeNum = 0;
-    tableData.value.forEach((nodeItem) => {
+    totalTableData.forEach((nodeItem) => {
       if (checkedNodeMap.value[nodeItem.bk_host_id]) {
         return;
       }
@@ -551,6 +553,9 @@
     }).then((data) => {
       tableData.value = data.results;
       isAnomalies.value = false;
+      if (searchValue.value.length === 0) {
+        totalTableData = _.cloneDeep(tableData.value);
+      }
     })
       .catch(() => {
         tableData.value = [];

diff --git a/.../frontend/src/views/db-manage/kafka/list/components/detail/components/node-list/Index.vue b/.../frontend/src/views/db-manage/kafka/list/components/detail/components/node-list/Index.vue
@@ -232,7 +232,7 @@
     } else {
       // 其它类型的节点数不能全部被缩容，至少保留一个
       let brokerNum = 0;
-      tableData.value.forEach((nodeItem) => {
+      totalTableData.forEach((nodeItem) => {
         if (nodeItem.isBroker) {
           brokerNum = brokerNum + 1;
         }
@@ -271,6 +271,8 @@
     }
   });
 
+  let totalTableData: KafkaNodeModel[] = [];
+
   const isAnomalies = ref(false);
   const isShowReplace = ref(false);
   const isShowExpandsion = ref(false);
@@ -310,7 +312,7 @@
       return options;
     }
     let brokerNum = 0;
-    tableData.value.forEach((nodeItem) => {
+    totalTableData.forEach((nodeItem) => {
       if (checkedNodeMap.value[nodeItem.bk_host_id]) {
         return;
       }
@@ -514,6 +516,9 @@
     }).then((data) => {
       tableData.value = data.results;
       isAnomalies.value = false;
+      if (searchValue.value.length === 0) {
+        totalTableData = _.cloneDeep(tableData.value);
+      }
     })
       .catch(() => {
         tableData.value = [];

diff --git a/...frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue b/...frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue
@@ -230,7 +230,7 @@
       // 其它类型的节点数不能全部被缩容，至少保留一个
       let bookkeeperNodeNum = 0;
       let brokerNodeNum = 0;
-      tableData.value.forEach((nodeItem) => {
+      totalTableData.forEach((nodeItem) => {
         if (nodeItem.isBookkeeper) {
           bookkeeperNodeNum = bookkeeperNodeNum + 1;
         } else if (nodeItem.isBroker) {
@@ -266,7 +266,7 @@
     validateSearchValues,
     handleSearchValueChange,
   } = useLinkQueryColumnSerach({
-    searchType: ClusterTypes.PULSAE,
+    searchType: ClusterTypes.PULSAR,
     attrs: ['bk_cloud_id'],
     fetchDataFn: () => fetchNodeList(),
     defaultSearchItem: {
@@ -275,6 +275,8 @@
     }
   });
 
+  let totalTableData: PulsarNodeModel[] = [];
+
   const isAnomalies = ref(false);
   const isShowReplace = ref(false);
   const isShowExpandsion = ref(false);
@@ -320,7 +322,7 @@
     // 其它类型的节点数不能全部被缩容，至少保留一个
     let bookkeeperNodeNum = 0;
     let brokerNodeNum = 0;
-    tableData.value.forEach((nodeItem) => {
+    totalTableData.forEach((nodeItem) => {
       if (checkedNodeMap.value[nodeItem.bk_host_id]) {
         return;
       }
@@ -529,6 +531,9 @@
     }).then((data) => {
       tableData.value = data.results;
       isAnomalies.value = false;
+      if (searchValue.value.length === 0) {
+        totalTableData = _.cloneDeep(tableData.value);
+      }
     })
       .catch(() => {
         tableData.value = [];

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-oprations/DeleteKeys.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-oprations/DeleteKeys.vue
@@ -494,8 +494,8 @@
 
     .delete-confirm {
       padding: 0 36px;
-      text-align: left;
       font-size: 14px;
+      text-align: left;
 
       .delete-confirm-item {
         padding-bottom: 4px;

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
@@ -45,55 +45,59 @@
           </BkButton>
           <template #content>
             <BkDropdownMenu>
-              <BkDropdownItem v-db-console="'redis.clusterManage.extractKey'">
+              <BkDropdownItem
+                v-db-console="'redis.clusterManage.extractKey'"
+                @click="handleShowExtract(selected)">
                 <BkButton
                   v-bk-tooltips="{
                     disabled: !hasDisabledRow,
                     content: t('禁用的集群不支持提取 Key'),
                     placement: 'right',
                   }"
                   :disabled="hasDisabledRow"
-                  text
-                  @click="handleShowExtract(selected)">
+                  text>
                   {{ t('提取Key') }}
                 </BkButton>
               </BkDropdownItem>
-              <BkDropdownItem v-db-console="'redis.clusterManage.deleteKey'">
+              <BkDropdownItem
+                v-db-console="'redis.clusterManage.deleteKey'"
+                @click="handlShowDeleteKeys(selected)">
                 <BkButton
                   v-bk-tooltips="{
                     disabled: !hasDisabledRow,
                     content: t('禁用的集群不支持删除 Key'),
                     placement: 'right',
                   }"
                   :disabled="hasDisabledRow"
-                  text
-                  @click="handlShowDeleteKeys(selected)">
+                  text>
                   {{ t('删除Key') }}
                 </BkButton>
               </BkDropdownItem>
-              <BkDropdownItem v-db-console="'redis.clusterManage.backup'">
+              <BkDropdownItem
+                v-db-console="'redis.clusterManage.backup'"
+                @click="handleShowBackup(selected)">
                 <BkButton
                   v-bk-tooltips="{
                     disabled: !hasDisabledRow,
                     content: t('禁用的集群不支持备份'),
                     placement: 'right',
                   }"
                   :disabled="hasDisabledRow"
-                  text
-                  @click="handleShowBackup(selected)">
+                  text>
                   {{ t('备份') }}
                 </BkButton>
               </BkDropdownItem>
-              <BkDropdownItem v-db-console="'redis.clusterManage.dbClear'">
+              <BkDropdownItem
+                v-db-console="'redis.clusterManage.dbClear'"
+                @click="handleShowPurge(selected)">
                 <BkButton
                   v-bk-tooltips="{
                     disabled: !hasDisabledRow,
                     content: t('禁用的集群不支持清档'),
                     placement: 'right',
                   }"
                   :disabled="hasDisabledRow"
-                  text
-                  @click="handleShowPurge(selected)">
+                  text>
                   {{ t('清档') }}
                 </BkButton>
               </BkDropdownItem>