feat(frontend): 全选调整为默认跨页全选 TencentBlueKing#9244

3octaves · Feb 11, 2025 · 615bbdb · 615bbdb
1 parent 2a6a062
commit 615bbdb
Show file tree

Hide file tree

Showing 62 changed files with 845 additions and 2,281 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
@@ -158,9 +158,9 @@
             indeterminate={isIndeterminate.value}
             disabled={mainSelectDisable.value}
             label={true}
-            onChange={handleSelecteAll}
+            onChange={handleWholeSelect}
           />
-          <bk-popover
+          {/* <bk-popover
             placement="bottom-start"
             theme="light db-table-select-menu"
             arrow={ false }
@@ -175,7 +175,7 @@
                 </div>
               ),
             }}>
-          </bk-popover>
+          </bk-popover> */}
         </div>
       ),
       render: ({ data }: { data: ResourceItem }) => {
@@ -331,33 +331,43 @@
     }
   });
 
+  watch(searchValue, () => {
+    selectedList.value = [];
+    emits('change', []);
+  });
+
   // 跨页全选
-  const handleWholeSelect = () => {
-    isLoading.value = true;
-    props.getResourceList({
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      offset: 0,
-      limit: -1,
-      ...getSearchSelectorParams(searchValue.value),
-    }).then((data) => {
-      data.results.forEach((dataItem) => {
-        if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
-          handleSelecteRow(dataItem, true);
-        }
-      });
-    }).finally(() => isLoading.value = false);
+  const handleWholeSelect = (value: boolean) => {
+    if (value) {
+      isLoading.value = true;
+      props.getResourceList({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        offset: 0,
+        limit: -1,
+        ...getSearchSelectorParams(searchValue.value),
+      }).then((data) => {
+        data.results.forEach((dataItem) => {
+          if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
+            handleSelecteRow(dataItem, true);
+          }
+        });
+      }).finally(() => isLoading.value = false);
+    } else {
+      selectedList.value = [];
+      emits('change', []);
+    }
   };
 
   /**
    * 全选当页数据
    */
-  const handleSelecteAll = (value: boolean) => {
-    for (const data of tableData.value) {
-      if (!props.disabledRowConfig.find(item => item.handler(data))) {
-        handleSelecteRow(data, value);
-      }
-    }
-  };
+  // const handleSelecteAll = (value: boolean) => {
+  //   for (const data of tableData.value) {
+  //     if (!props.disabledRowConfig.find(item => item.handler(data))) {
+  //       handleSelecteRow(data, value);
+  //     }
+  //   }
+  // };
 
   /**
    * 选择当行数据

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -162,9 +162,9 @@
             indeterminate={isIndeterminate.value}
             disabled={mainSelectDisable.value}
             label={true}
-            onChange={handleSelecteAll}
+            onChange={handleWholeSelect}
           />
-          <bk-popover
+          {/* <bk-popover
             placement="bottom-start"
             theme="light db-table-select-menu"
             arrow={ false }
@@ -179,7 +179,7 @@
                 </div>
               ),
             }}>
-          </bk-popover>
+          </bk-popover> */}
         </div>
       ),
       render: ({ data }: { data: ResourceItem }) => {
@@ -329,35 +329,45 @@
     }
   });
 
+  watch(searchValue, () => {
+    selectedList.value = [];
+    emits('change', []);
+  });
+
   const getRowClass = (data: ResourceItem) => data.isOffline && 'is-offline';
 
   // 跨页全选
-  const handleWholeSelect = () => {
-    isLoading.value = true;
-    props.getResourceList({
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      offset: 0,
-      limit: -1,
-      ...getSearchSelectorParams(searchValue.value),
-    }).then((data) => {
-      data.results.forEach((dataItem) => {
-        if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
-          handleSelecteRow(dataItem, true);
-        }
-      });
-    }).finally(() => isLoading.value = false);
+  const handleWholeSelect = (value: boolean) => {
+    if (value) {
+      isLoading.value = true;
+      props.getResourceList({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        offset: 0,
+        limit: -1,
+        ...getSearchSelectorParams(searchValue.value),
+      }).then((data) => {
+        data.results.forEach((dataItem) => {
+          if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
+            handleSelecteRow(dataItem, true);
+          }
+        });
+      }).finally(() => isLoading.value = false);
+    } else {
+      selectedList.value = [];
+      emits('change', []);
+    }
   };
 
   /**
    * 全选当页数据
    */
-  const handleSelecteAll = (value: boolean) => {
-    for (const data of tableData.value) {
-      if (!props.disabledRowConfig.find(item => item.handler(data))) {
-        handleSelecteRow(data, value);
-      }
-    }
-  };
+  // const handleSelecteAll = (value: boolean) => {
+  //   for (const data of tableData.value) {
+  //     if (!props.disabledRowConfig.find(item => item.handler(data))) {
+  //       handleSelecteRow(data, value);
+  //     }
+  //   }
+  // };
 
   /**
    * 选择当行数据

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
@@ -157,9 +157,9 @@
             disabled={mainSelectDisable.value}
             label={true}
             onClick={(e: Event) => e.stopPropagation()}
-            onChange={handleSelecteAll}
+            onChange={handleWholeSelect}
           />
-          <bk-popover
+          {/* <bk-popover
             placement="bottom-start"
             theme="light db-table-select-menu"
             arrow={ false }
@@ -174,7 +174,7 @@
                 </div>
               ),
             }}>
-          </bk-popover>
+          </bk-popover> */}
         </div>
       ) : '',
       fixed: 'left',
@@ -343,33 +343,43 @@
     }
   });
 
+  watch(searchValue, () => {
+    selectedList.value = [];
+    emits('change', []);
+  });
+
   // 跨页全选
-  const handleWholeSelect = () => {
-    isLoading.value = true;
-    props.getResourceList({
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      offset: 0,
-      limit: -1,
-      ...getSearchSelectorParams(searchValue.value),
-    }).then((data) => {
-      data.results.forEach((dataItem) => {
-        if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
-          handleSelecteRow(dataItem, true);
-        }
-      });
-    }).finally(() => isLoading.value = false);
+  const handleWholeSelect = (value: boolean) => {
+    if (value) {
+      isLoading.value = true;
+      props.getResourceList({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        offset: 0,
+        limit: -1,
+        ...getSearchSelectorParams(searchValue.value),
+      }).then((data) => {
+        data.results.forEach((dataItem) => {
+          if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
+            handleSelecteRow(dataItem, true);
+          }
+        });
+      }).finally(() => isLoading.value = false);
+    } else {
+      selectedList.value = [];
+      emits('change', []);
+    }
   };
 
   /**
    * 全选当页数据
    */
-  const handleSelecteAll = (value: boolean) => {
-    for (const data of tableData.value) {
-      if (!props.disabledRowConfig.find(item => item.handler(data))) {
-        handleSelecteRow(data, value);
-      }
-    }
-  };
+  // const handleSelecteAll = (value: boolean) => {
+  //   for (const data of tableData.value) {
+  //     if (!props.disabledRowConfig.find(item => item.handler(data))) {
+  //       handleSelecteRow(data, value);
+  //     }
+  //   }
+  // };
 
   /**
    * 选择当行数据

diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
@@ -159,9 +159,9 @@
             disabled={mainSelectDisable.value}
             label={true}
             onClick={(e: Event) => e.stopPropagation()}
-            onChange={handleSelecteAll}
+            onChange={handleWholeSelect}
           />
-          <bk-popover
+          {/* <bk-popover
             placement="bottom-start"
             theme="light db-table-select-menu"
             arrow={ false }
@@ -176,7 +176,7 @@
                 </div>
               ),
             }}>
-          </bk-popover>
+          </bk-popover> */}
         </div>
       ) : '',
       render: ({ data }: { data: ResourceItem }) => {
@@ -344,33 +344,43 @@
     }
   });
 
+  watch(searchValue, () => {
+    selectedList.value = []
+    emits('change', []);
+  });
+
   // 跨页全选
-  const handleWholeSelect = () => {
-    isLoading.value = true;
-    props.getResourceList({
-      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      offset: 0,
-      limit: -1,
-      ...getSearchSelectorParams(searchValue.value),
-    }).then((data) => {
-      data.results.forEach((dataItem) => {
-        if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
-          handleSelecteRow(dataItem, true);
-        }
-      });
-    }).finally(() => isLoading.value = false);
+  const handleWholeSelect = (value: boolean) => {
+    if (value) {
+      isLoading.value = true;
+      props.getResourceList({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        offset: 0,
+        limit: -1,
+        ...getSearchSelectorParams(searchValue.value),
+      }).then((data) => {
+        data.results.forEach((dataItem) => {
+          if (!props.disabledRowConfig.find(item => item.handler(dataItem))) {
+            handleSelecteRow(dataItem, true);
+          }
+        });
+      }).finally(() => isLoading.value = false);
+    } else {
+      selectedList.value = []
+      emits('change', []);
+    }
   };
 
   /**
    * 全选当页数据
    */
-  const handleSelecteAll = (value: boolean) => {
-    for (const data of tableData.value) {
-      if (!props.disabledRowConfig.find(item => item.handler(data))) {
-        handleSelecteRow(data, value);
-      }
-    }
-  };
+  // const handleSelecteAll = (value: boolean) => {
+  //   for (const data of tableData.value) {
+  //     if (!props.disabledRowConfig.find(item => item.handler(data))) {
+  //       handleSelecteRow(data, value);
+  //     }
+  //   }
+  // };
 
   /**
    * 选择当行数据