chore: 抽离公共Table组件

packages/app/src/components/index.tsx

@@ -15,3 +15,4 @@ export {default as TableTools} from './table-tools';
 export {default as SearchProvider} from './search-provider';
 export {default as Footer} from './footer';
 export {default as Auth} from './authentication';
+export {default as Table} from './table';

packages/app/src/components/table/index.tsx

@@ -0,0 +1,53 @@
+import {Table as OriTable} from 'antd';
+import {ColumnsType} from 'antd/es/table';
+import {createPageContext, createSearchContext, usePage, useTableSearch} from '@hooks';
+import {PAGE_SIZE_LIST} from '@utils';
+import {FC} from 'react';
+
+type Props<T> = {
+  testId?: string,
+  columns: ColumnsType<T>,
+  data: T[],
+  pageContext: ReturnType<typeof createPageContext>,
+  searchContext: ReturnType<typeof createSearchContext>,
+  count: number,
+  rowKey?: string,
+  'data-testid': string,
+  scrollX?: number,
+};
+
+const Table: FC<Props<any>> = function<T extends Record<string, any>>(props: Props<T>) {
+  const {
+    columns,
+    data,
+    pageContext,
+    searchContext,
+    count,
+    rowKey,
+    scrollX,
+  } = props;
+  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
+  const [isSearching] = useTableSearch(searchContext);
+
+  return (
+    <OriTable
+      data-testid={props['data-testid']}
+      columns={columns}
+      dataSource={data}
+      pagination={{
+        pageSize,
+        pageSizeOptions: PAGE_SIZE_LIST,
+        total: count,
+        showSizeChanger: true,
+        onChange: onPageChange,
+        current: page,
+      }}
+      rowKey={rowKey ?? 'id'}
+      loading={isSearching}
+      scroll={{x: scrollX}}
+      bordered
+    />
+  );
+};
+
+export default Table;

packages/app/src/pages/container-scrap/table/index.tsx

@@ -1,11 +1,10 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import {useList} from './hooks';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
-import {PAGE_SIZE_LIST} from '@utils';
+import {pageContext, searchContext} from '../context';
 import {ScrapContainerLogData} from '@models';
 import {ColumnsType} from 'antd/es/table';
+import {Table} from '@components';
 
 const columns: ColumnsType<ScrapContainerLogData> = [
   {title: '操作人', dataIndex: 'operationName', key: 'operationName'},
@@ -15,26 +14,17 @@ const columns: ColumnsType<ScrapContainerLogData> = [
 ];
 
 const TableList: FC = function() {
-  const [{data, count, isFetching}] = useList();
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
+  const [{data, count}] = useList();
 
   return (
     <Card className='table-wrapper'>
       <Table
         data-testid='container_scrap_table'
         columns={columns}
-        dataSource={data}
-        pagination={{
-          pageSize,
-          pageSizeOptions: PAGE_SIZE_LIST,
-          total: count,
-          showSizeChanger: true,
-          onChange: onPageChange,
-          current: page,
-        }}
-        rowKey='id'
-        loading={isFetching}
-        bordered
+        data={data}
+        pageContext={pageContext}
+        searchContext={searchContext}
+        count={count}
       />
     </Card>
   );

packages/app/src/pages/container/table/index.tsx

@@ -1,17 +1,14 @@
-import {TableTools} from '@components';
-import {Card, Table} from 'antd';
+import {Table, TableTools} from '@components';
+import {Card} from 'antd';
 import {FC} from 'react';
 import {useHandle, useList} from './hooks';
-import {PAGE_SIZE_LIST} from '@utils';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
+import {pageContext, searchContext} from '../context';
 import PutModal from './put-modal';
 import ScrapModal from './scrap-modal';
 import ScrapLogModal from './scrap-log-modal';
 
 const TableList: FC = function() {
-  const [{data, isFetching, count}, {refetch}] = useList();
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
+  const [{data, count}, {refetch}] = useList();
   const [
     {columns, putVisible, editId, scrapVisible, scrapId, logId, logVisible},
     {onPutClose, onAdd, onScrapClose, onLogClose},
@@ -25,18 +22,10 @@ const TableList: FC = function() {
         <Table
           data-testid='container_table'
           columns={columns}
-          dataSource={data}
-          pagination={{
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-            onChange: onPageChange,
-            current: page,
-          }}
-          rowKey='id'
-          loading={isFetching}
-          bordered
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
 

packages/app/src/pages/department/table/index.tsx

@@ -1,22 +1,19 @@
 import {FC} from 'react';
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {useHandle, useList} from './hooks';
 import Modal from './modal';
-import {PAGE_SIZE_LIST} from '@utils';
-import {TableTools} from '@components';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
+import {Table, TableTools} from '@components';
+import {pageContext, searchContext} from '../context';
 
 const TableList: FC = function() {
   const [
-    {count, data, isFetching},
+    {count, data},
     {refetch},
   ] = useList();
   const [
     {modalVisible, columns, editState},
     {onAdd, setFalse},
   ] = useHandle(refetch);
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>
@@ -26,20 +23,13 @@ const TableList: FC = function() {
         <Table
           data-testid='department_table'
           columns={columns}
-          dataSource={data}
-          pagination={{
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-            onChange: onPageChange,
-            current: page,
-          }}
-          rowKey='id'
-          loading={isFetching}
-          bordered
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
+
       <Modal visible={modalVisible} onClose={setFalse} onFetch={refetch} id={editState} />
     </>
   );

packages/app/src/pages/goods/table/index.tsx

@@ -1,16 +1,13 @@
-import {PAGE_SIZE_LIST} from '@utils';
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import GoodsModal from './modal';
 import {useHandle, useList} from './hooks';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
-import {TableTools} from '@components';
+import {pageContext, searchContext} from '../context';
+import {Table, TableTools} from '@components';
 
 const TableList: FC = function() {
-  const [{data, isFetching, count}, {refetch}] = useList();
+  const [{data, count}, {refetch}] = useList();
   const [{visible, editId, columns}, {onAdd, onClose}] = useHandle(refetch);
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>
@@ -19,20 +16,12 @@ const TableList: FC = function() {
 
         <Table
           data-testid='goods_table'
-          scroll={{x: 2600}}
-          loading={isFetching}
-          dataSource={data}
           columns={columns}
-          rowKey='id'
-          pagination={{
-            current: page,
-            pageSize,
-            onChange: onPageChange,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-          }}
-          bordered
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
+          scrollX={2600}
         />
       </Card>
 

packages/app/src/pages/menu-id/table/index.tsx

@@ -1,42 +1,26 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import MenuModal from './modal';
 import {useHandle, useList} from './hooks';
-import {PAGE_SIZE_LIST} from '@utils';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
-import {TableTools} from '@components';
+import {pageContext, searchContext} from '../context';
+import {Table, TableTools} from '@components';
 
 const TableList: FC = function() {
-  const [{isFetching, data, count}, {refetch}] = useList();
+  const [{data, count}, {refetch}] = useList();
   const [{columns, visible, editId}, {onModalClose, onAdd}] = useHandle(data, refetch);
-  // const onClose = useContextSection(context, ([{onClose}]) => onClose);
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>
       <Card className='table-wrapper'>
-        <TableTools onClick={onAdd} testId='child_menu_add_btn'>
-          {
-          /* <Button type='default' onClick={onClose!} data-testid='child_menu_back'>返回</Button> */
-          }
-        </TableTools>
+        <TableTools onClick={onAdd} testId='child_menu_add_btn' />
 
         <Table
           data-testid='child_menu_table'
-          bordered
           columns={columns}
-          dataSource={data}
-          loading={isFetching}
-          rowKey='id'
-          pagination={{
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-            onChange: onPageChange,
-            current: page,
-          }}
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
       <MenuModal visible={visible} onClose={onModalClose} id={editId} onFetch={refetch} />

packages/app/src/pages/menu/table/index.tsx

@@ -1,20 +1,17 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import MenuModal from './modal';
 import {useHandle, useList} from './hooks';
-import {PAGE_SIZE_LIST} from '@utils';
 import ChildMenuModal from '../child-menu';
-import {TableTools} from '@components';
-import {pageContext} from '../context';
-import {usePage} from '@hooks';
+import {Table, TableTools} from '@components';
+import {pageContext, searchContext} from '../context';
 
 const TableList: FC = function() {
-  const [{isFetching, data, count}, {refetch}] = useList();
+  const [{data, count}, {refetch}] = useList();
   const [
     {columns, visible, editId, pid, childVisible},
     {onModalClose, onAdd, closeChildModal},
   ] = useHandle(refetch);
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>
@@ -23,21 +20,14 @@ const TableList: FC = function() {
 
         <Table
           data-testid='menu_table'
-          bordered
           columns={columns}
-          dataSource={data}
-          loading={isFetching}
-          rowKey='id'
-          pagination={{
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-            onChange: onPageChange,
-            current: page,
-          }}
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
+
       <MenuModal visible={visible} onClose={onModalClose} id={editId} onFetch={refetch} />
       <ChildMenuModal visible={childVisible} id={pid} onClose={closeChildModal} />
     </>

packages/app/src/pages/pda-menu/table/index.tsx

@@ -1,19 +1,16 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import MenuModal from './modal';
 import {useHandle, useList} from './hooks';
-import {PAGE_SIZE_LIST} from '@utils';
-import {TableTools} from '@components';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
+import {Table, TableTools} from '@components';
+import {pageContext, searchContext} from '../context';
 
 const TableList: FC = function() {
-  const [{isFetching, data, count}, {refetch}] = useList();
+  const [{data, count}, {refetch}] = useList();
   const [
     {columns, visible, editId},
     {onModalClose, onAdd},
   ] = useHandle(refetch);
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
 
   return (
     <>
@@ -22,21 +19,14 @@ const TableList: FC = function() {
 
         <Table
           data-testid='menu_table'
-          bordered
           columns={columns}
-          dataSource={data}
-          loading={isFetching}
-          rowKey='id'
-          pagination={{
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-            onChange: onPageChange,
-            current: page,
-          }}
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
+
       <MenuModal visible={visible} onClose={onModalClose} id={editId} onFetch={refetch} />
     </>
   );

packages/app/src/pages/role/table/index.tsx

@@ -1,17 +1,14 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import {useHandle, useList} from './hooks';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
-import {PAGE_SIZE_LIST} from '@utils';
+import {pageContext, searchContext} from '../context';
 import RoleModal from './modal';
 import TreeModal from './tree-modal';
-import {TableTools} from '@components';
+import {Table, TableTools} from '@components';
 import PdaMenuModal from './pda-modal';
 
 const TableList: FC = function() {
-  const [{data, isFetching, count}, refetch] = useList();
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
+  const [{data, count}, refetch] = useList();
   const [
     {columns, visible, editId, roleVisible, roleId, pdaId, pdaVisible},
     {onAdd, onClose, onRoleClose, onPdaClose},
@@ -25,19 +22,13 @@ const TableList: FC = function() {
         <Table
           data-testid='role_table'
           columns={columns}
-          dataSource={data}
-          rowKey='id'
-          pagination={{
-            current: page,
-            pageSize,
-            onChange: onPageChange,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-          }}
-          loading={isFetching}
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
+
       <RoleModal visible={visible} onClose={onClose} onFetch={refetch} id={editId} />
       <TreeModal visible={roleVisible} onClose={onRoleClose} onFetch={refetch} id={roleId} />
       <PdaMenuModal visible={pdaVisible} onClose={onPdaClose} onFetch={refetch} id={pdaId} />

packages/app/src/pages/storage/table/index.tsx

@@ -1,15 +1,12 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import StorageModal from './modal';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
+import {pageContext, searchContext} from '../context';
 import {useHandle, useList} from './hooks';
-import {PAGE_SIZE_LIST} from '@utils';
-import {TableTools} from '@components';
+import {Table, TableTools} from '@components';
 
 const TableList: FC = function() {
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
-  const [{data, isFetching, count}, {refetch}] = useList();
+  const [{data, count}, {refetch}] = useList();
   const [{columns, visible, editId}, {onAdd, onClose}] = useHandle(refetch);
 
   return (
@@ -19,19 +16,11 @@ const TableList: FC = function() {
 
         <Table
           data-testid='storage_table'
-          bordered
           columns={columns}
-          pagination={{
-            current: page,
-            showSizeChanger: true,
-            pageSize,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            onChange: onPageChange,
-            total: count,
-          }}
-          loading={isFetching}
-          dataSource={data}
-          rowKey='id'
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
         />
       </Card>
 

packages/app/src/pages/user/table/index.tsx

@@ -1,15 +1,12 @@
-import {Card, Table} from 'antd';
+import {Card} from 'antd';
 import {FC} from 'react';
 import {useHandle, useList} from './hooks';
-import {usePage} from '@hooks';
-import {pageContext} from '../context';
-import {PAGE_SIZE_LIST} from '@utils';
+import {pageContext, searchContext} from '../context';
 import UserModal from './modal';
-import {TableTools} from '@components';
+import {Table, TableTools} from '@components';
 
 const TableList: FC = function() {
-  const [{data, isFetching, count}, {refetch}] = useList();
-  const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
+  const [{data, count}, {refetch}] = useList();
   const [{columns, visible, editId}, {onAdd, onClose}] = useHandle(refetch);
 
   return (
@@ -19,20 +16,12 @@ const TableList: FC = function() {
 
         <Table
           data-testid='user_table'
-          bordered
-          scroll={{x: 2050}}
           columns={columns}
-          dataSource={data}
-          pagination={{
-            current: page,
-            pageSize,
-            onChange: onPageChange,
-            pageSizeOptions: PAGE_SIZE_LIST,
-            total: count,
-            showSizeChanger: true,
-          }}
-          loading={isFetching}
-          rowKey='id'
+          data={data}
+          pageContext={pageContext}
+          searchContext={searchContext}
+          count={count}
+          scrollX={2050}
         />
       </Card>