🐞 fix(TableLayout 组件): 修改跨页多选的问题

src/components/TableLayout/index.tsx

@@ -9,6 +9,7 @@ import { createFormActions, FormEffectHooks } from '@formily/antd';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useLinkageUtils } from '@/utils/formEffectUtils';
 import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/systemManage/effect';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
 const { onFormMount$ } = FormEffectHooks
 
 interface Iprops {
@@ -51,6 +52,13 @@ const Table: React.FC<Iprops> = (props: any) => {
     useStateEffects
   } = props;
   const tableRef = useRef<any>({});
+  const [selectRow, selectRowFns] = useRowSelectionTable({
+    extendsSelection: {
+      onChange: () => {
+        fetchRowkeys(selectRowFns.selectedRowKeys)
+      },
+    }
+  });
 
   /** 列表数据 */
   const fetchData = (params?: any) => {
@@ -63,18 +71,12 @@ const Table: React.FC<Iprops> = (props: any) => {
 
   /**多选 */
   const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([]);
-  const rowSelection = {
-    selectedRowKeys: selectedRowKeys,
-    onChange: (rowKeys: any) => {
-      console.log(rowKeys, 98)
-      fetchRowkeys(rowKeys)
-      setSelectedRowKeys(rowKeys);
-    },
-  }
 
   useImperativeHandle(reload, () => ({
     reload: () => {
       tableRef.current.reload();
+      selectRowFns.setSelectRow([])
+      selectRowFns.setSelectedRowKeys([])
     }
   }));
 
@@ -107,7 +109,7 @@ const Table: React.FC<Iprops> = (props: any) => {
           currentRef={tableRef}
           columns={columns}
           tableProps={{ rowKew: 'id' }}
-          rowSelection={selectedRow && rowSelection}
+          rowSelection={selectedRow && selectRow}
           fetchTableData={(params: any) => fetchData(params)}
           controlRender={
             <NiceForm

src/hooks/useRowSelectionTable.ts

@@ -12,7 +12,11 @@ interface useRowSelectionTableCtl {
 
 interface useRowSelectionOptions {
   type?: 'checkbox' | 'radio',
-  customKey?: string
+  customKey?: string,
+
+  // 可通过该参数扩展多选选项
+  // https://ant.design/components/table-cn/#components-table-demo-row-selection
+  extendsSelection?: TableRowSelection<any>
 }
 
 /**
@@ -20,7 +24,7 @@ interface useRowSelectionOptions {
  * @auth xjm
  */
 export const useRowSelectionTable = (options: useRowSelectionOptions = {}): [TableRowSelection<any>, useRowSelectionTableCtl] => {
-  const { type = 'checkbox', customKey = 'id' } = options
+  const { type = 'checkbox', customKey = 'id', extendsSelection = {} } = options
   const [selectRow, setSelectRow] = useState<any[]>([]) // 模态框选择的行数据
   const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(() => [])
 
@@ -59,7 +63,7 @@ export const useRowSelectionTable = (options: useRowSelectionOptions = {}): [Tab
         // 单选情况下
         setSelectedRowKeys([record[customKey]])
         setSelectRow([record])
-        return ;
+        return;
       }
       const findIds = selectedRowKeys.indexOf(record[customKey])
       if (findIds === -1) {
@@ -79,7 +83,9 @@ export const useRowSelectionTable = (options: useRowSelectionOptions = {}): [Tab
         setSelectedRowKeys(removeRowsKeys(changeRows.map(v => v[customKey])))
         setSelectRow(removeRows(changeRows))
       }
-    }
+    },
+
+    ...extendsSelection
   }
 
   return [rowSelection, { selectRow, setSelectRow, selectedRowKeys, setSelectedRowKeys }]

src/pages/marketingManage/marketing/waitAddedMarketing/index.tsx

@@ -263,14 +263,14 @@ const WaitAddedMarketing = () => {
                 icon={<DeleteOutlined />}
                 loading={loading}
                 onClick={() => fetchDeleteBatch()}
-                disabled={rowkeys.length === 0}
+                disabled={rowkeys.length !== 0}
               >
                 批量删除
               </Button>
               <Button
                 loading={loading}
                 onClick={() => fetchSubmitBatch()}
-                disabled={rowkeys.length === 0}
+                disabled={rowkeys.length !== 0}
               >
                 批量提交审核
               </Button>