fix(frontend): 集群选择器勾选顺序问题修复 TencentBlueKing#7850

# Reviewed, transaction id: 23391
jinquantianxia · Nov 11, 2024 · 385eaa2 · 385eaa2
1 parent d54f137
commit 385eaa2
Show file tree

Hide file tree

Showing 12 changed files with 483 additions and 580 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -52,7 +52,7 @@
             :selected-map="selectedMap"
             :show-title="activePanelObj.showPreviewResultTitle"
             :tab-list="tabList"
-            @delete-item="handleSelecteRow" />
+            @delete="handleDeleteItem" />
         </div>
       </template>
       <template #main>
@@ -95,7 +95,7 @@
             :get-resource-list="activePanelObj.getResourceList"
             :multiple="activePanelObj.multiple"
             :search-select-list="activePanelObj.searchSelectList"
-            :selected="selectedArr"
+            :selected="selectedMap[activeTab].list"
             @change="handleSelectTable" />
         </div>
       </template>
@@ -203,6 +203,13 @@
 
   export type TabConfig = Omit<TabItem, 'tableContent' | 'resultContent'>;
 
+  export interface SelectMapValueType<T> {
+    [key: string]: {
+      map: Record<string, T>;
+      list: T[];
+    };
+  }
+
   interface Props {
     selected: Record<string, T[]>;
     clusterTypes: string[];
@@ -377,7 +384,7 @@
   const activeTab = ref(ClusterTypes.TENDBCLUSTER as string);
   const showTabTips = ref(false);
   const isSelectedAll = ref(false);
-  const selectedMap = ref<Record<string, Record<string, T>>>({});
+  const selectedMap = ref<SelectMapValueType<T>>({});
 
   const activePanelObj = shallowRef(tabListMap[ClusterTypes.TENDBCLUSTER]);
 
@@ -413,20 +420,14 @@
     props.clusterTypes ? props.clusterTypes.map((type) => clusterTabListMap.value[type]) : [],
   );
 
-  const selectedArr = computed(() =>
-    activeTab.value && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value).length > 0
-      ? { [activeTab.value]: Object.values(selectedMap.value[activeTab.value]) }
-      : {},
-  );
-
   // 显示切换 tab tips
   // const showSwitchTabTips = computed(() => showTabTips.value && tabList.value.length > 1);
   // 选中结果是否为空
   const isEmpty = computed(() => _.every(Object.values(selectedMap.value), (item) => Object.keys(item).length < 1));
 
   const selectedClusterList = computed(() =>
     Object.values(selectedMap.value).reduce<string[]>((prevList, selectedItem) => {
-      const clusterList = Object.values(selectedItem).map((clusterItem) => clusterItem.master_domain);
+      const clusterList = selectedItem.list.map((clusterItem) => clusterItem.master_domain);
       prevList.push(...clusterList);
       return prevList;
     }, []),
@@ -473,35 +474,45 @@
     },
   );
 
-  watch(isShow, (show) => {
-    if (show && tabList.value) {
+  watch(isShow, () => {
+    if (isShow.value && tabList.value) {
       selectedMap.value = tabList.value
         .map((item) => item.id)
-        .reduce(
-          (result, tabKey) => {
-            if (!props.selected[tabKey]) {
-              return result;
-            }
-            const tabSelectMap = props.selected[tabKey].reduce(
+        .reduce((result, tabKey) => {
+          if (!props.selected[tabKey]) {
+            return result;
+          }
+          const tabSelectMap = {
+            map: props.selected[tabKey].reduce(
               (selectResult, selectItem) => ({
                 ...selectResult,
                 [selectItem.id]: selectItem,
               }),
               {} as Record<string, T>,
-            );
-            return {
-              ...result,
-              [tabKey]: tabSelectMap,
-            };
-          },
-          {} as Record<string, Record<string, T>>,
-        );
+            ),
+            list: props.selected[tabKey],
+          };
+          return {
+            ...result,
+            [tabKey]: tabSelectMap,
+          };
+        }, {} as SelectMapValueType<T>);
       showTabTips.value = true;
-
-      console.log('watch = ', selectedMap.value, tabList.value);
     }
   });
 
+  const initSelectedMap = () => {
+    selectedMap.value = Object.keys(selectedMap.value).reduce<SelectMapValueType<T>>((results, id) => {
+      Object.assign(results, {
+        [id]: {
+          map: {},
+          list: [],
+        },
+      });
+      return results;
+    }, {});
+  };
+
   /**
    * 切换 tab
    */
@@ -515,12 +526,7 @@
       activePanelObj.value = currentTab;
     }
     if (props.onlyOneType) {
-      selectedMap.value = Object.keys(selectedMap.value).reduce<Record<string, Record<string, any>>>((results, id) => {
-        Object.assign(results, {
-          [id]: {},
-        });
-        return results;
-      }, {});
+      initSelectedMap();
     }
   };
 
@@ -540,7 +546,7 @@
    * 清空选中项
    */
   const handleClearSelected = () => {
-    selectedMap.value = {};
+    initSelectedMap();
     isSelectedAll.value = false;
   };
 
@@ -549,7 +555,7 @@
    */
   const handleCopyCluster = () => {
     const copyValues = Object.values(selectedMap.value).reduce((result, selectItem) => {
-      result.push(...Object.values(selectItem).map((item) => item.master_domain));
+      result.push(...selectItem.list.map((item) => item.master_domain));
       return result;
     }, [] as string[]);
 
@@ -565,7 +571,7 @@
     const result = Object.keys(selectedMap.value).reduce(
       (result, tabKey) => ({
         ...result,
-        [tabKey]: Object.values(selectedMap.value[tabKey]),
+        [tabKey]: selectedMap.value[tabKey].list,
       }),
       {},
     );
@@ -580,39 +586,25 @@
   /**
    * 选择当行数据
    */
-  const handleSelecteRow = (data: T, value: boolean) => {
-    const selectedMapMemo = { ...selectedMap.value };
-    if (!selectedMapMemo[activeTab.value]) {
-      selectedMapMemo[activeTab.value] = {};
-    }
-    if (value) {
-      selectedMapMemo[activeTab.value][data.id] = data;
-    } else {
-      delete selectedMapMemo[activeTab.value][data.id];
-    }
-    selectedMap.value = selectedMapMemo;
+  const handleDeleteItem = (data: T, tabKey: string) => {
+    delete selectedMap.value[tabKey].map[data.id];
+    selectedMap.value[tabKey].list = selectedMap.value[tabKey].list.filter((item) => item.id !== data.id);
   };
 
-  const handleSelectTable = (selected: Record<string, Record<string, T>>) => {
-    if (!activePanelObj.value.multiple) {
-      selectedMap.value = selected;
-      return;
-    }
+  const handleSelectTable = (selected: T[]) => {
     // 如果只允许选一种集群类型, 则清空非当前集群类型的选中列表
-    // 如果是勾选的取消全选，则忽略
-    if (props.onlyOneType && Object.keys(Object.values(selected)[0]).length > 0) {
+    if (props.onlyOneType && selected.length > 0) {
       // 只会有一个key
-      const [currentKey] = Object.keys(selected);
       Object.keys(selectedMap.value).forEach((key) => {
-        if (key !== currentKey) {
-          selectedMap.value[key] = {};
-        } else {
-          selectedMap.value[key] = selected[key];
+        if (key !== activeTab.value) {
+          selectedMap.value[key] = {
+            map: {},
+            list: [],
+          };
         }
       });
-      return;
     }
-    Object.assign(selectedMap.value, selected);
+    selectedMap.value[activeTab.value].list = selected;
   };
 </script>
 

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/common/result-preview/Index.vue
@@ -23,12 +23,12 @@
       v-for="(tabSelected, tabKey) in selectedMap"
       :key="tabKey">
       <CollapseMini
-        v-if="Object.keys(tabSelected).length > 0"
+        v-if="tabSelected.list.length > 0"
         collapse
-        :count="Object.keys(tabSelected).length"
-        :title="getTabInfo(tabKey)">
+        :count="tabSelected.list.length"
+        :title="getTabInfo(tabKey as string)">
         <div
-          v-for="clusterItem in tabSelected"
+          v-for="clusterItem in tabSelected.list"
           :key="clusterItem.id"
           class="result-item">
           <span
@@ -38,7 +38,7 @@
           </span>
           <i
             class="db-icon-close result-remove"
-            @click="handleDeleteItem(clusterItem, false)" />
+            @click="handleDeleteItem(clusterItem, tabKey as string)" />
         </div>
       </CollapseMini>
     </template>
@@ -47,19 +47,21 @@
 <script setup lang="tsx" generic="T extends Record<string, any>">
   import _ from 'lodash';
 
+  import type { SelectMapValueType } from '../../../Index.vue';
+
   import CollapseMini from './CollapseMini.vue';
 
   type Selected = Record<string, T[]>;
 
   interface Props {
     tabList: { name: string; id: string }[];
-    selectedMap: Record<string, Record<string, ValueOf<Selected>[0]>>;
+    selectedMap: SelectMapValueType<T>;
     showTitle?: boolean;
     displayKey?: string;
   }
 
   interface Emits {
-    (e: 'delete-item', value: T, status: boolean): void;
+    (e: 'delete', value: T, tabKey: string): void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -70,13 +72,13 @@
   const emits = defineEmits<Emits>();
 
   // 选中结果是否为空
-  const isEmpty = computed(() => _.every(Object.values(props.selectedMap), (item) => Object.keys(item).length < 1));
+  const isEmpty = computed(() => _.every(Object.values(props.selectedMap), (item) => item.list.length === 0));
 
   // 获取 tab 信息
   const getTabInfo = (key: string) => (props.showTitle ? props.tabList.find((tab) => tab.id === key)?.name : '');
 
-  const handleDeleteItem = (data: ValueOf<Selected>[0], value: boolean) => {
-    emits('delete-item', data, value);
+  const handleDeleteItem = (data: ValueOf<Selected>[0], tabKey: string) => {
+    emits('delete', data, tabKey);
   };
 </script>