拆分表格工具栏组件

packages/app/src/components/filter-button-group/index.tsx

@@ -6,16 +6,23 @@ type Props = {
   disableAlign?: boolean;
   onSearch: () => void;
   onExport?: () => void;
+  searchTestId?: string;
 };
 
 const colStyle: CSSProperties = {textAlign: 'right'};
 
-const FiterButtonGroup: FC<Props> = function({onSearch, onExport, offset, disableAlign}) {
+const FiterButtonGroup: FC<Props> = function({
+  onSearch,
+  onExport,
+  offset,
+  disableAlign,
+  searchTestId,
+}) {
   return (
     <>
       <Col span={6} style={!disableAlign ? colStyle : void 0} offset={offset}>
         <Space>
-          <Button type='primary' onClick={onSearch} data-testid='search_btn'>查询</Button>
+          <Button type='primary' onClick={onSearch} data-testid={searchTestId ?? 'search_btn'}>查询</Button>
           {onExport && <Button type='default' onClick={onExport}>导出</Button>}
         </Space>
       </Col>

packages/app/src/components/index.tsx

@@ -12,3 +12,4 @@ export {default as Loading} from './loading';
 export {default as ErrorBoundary} from './error-boundary';
 export {default as Jurisdiction} from './jurisdiction';
 export {default as PageProvider} from './page-provider';
+export {default as TableTools} from './table-tools';

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

@@ -0,0 +1,18 @@
+import {ChildrenFC} from '@utils';
+import {Button} from 'antd';
+
+type Props = {
+  onClick: () => void;
+  testId?: string;
+};
+
+const TableTools: ChildrenFC<Props> = function({children, onClick, testId}) {
+  return (
+    <section className='table-tool'>
+      <Button type='primary' onClick={onClick} data-testid={testId ?? 'add_btn'}>新增</Button>
+      {children}
+    </section>
+  );
+};
+
+export default TableTools;

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

@@ -1,8 +1,9 @@
 import {FC} from 'react';
-import {Button, Card, Table} from 'antd';
+import {Card, Table} from 'antd';
 import {useHandle, useList} from './hooks';
 import Modal from './modal';
 import {PAGE_SIZE_LIST} from '@utils';
+import {TableTools} from '@components';
 
 const TableList: FC = function() {
   const [
@@ -17,9 +18,8 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Button type='primary' onClick={onAdd} data-testid='add_btn'>新增</Button>
-        </section>
+        <TableTools onClick={onAdd} />
+
         <Table
           data-testid='department_table'
           columns={columns}

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

@@ -1,10 +1,11 @@
 import {PAGE_SIZE_LIST} from '@utils';
-import {Card, Button, Table} from 'antd';
+import {Card, Table} 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';
 
 const TableList: FC = function() {
   const [{data, isFetching, count}, {refetch}] = useList();
@@ -14,9 +15,7 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Button type='primary' onClick={onAdd} data-testid='add_btn'>新增</Button>
-        </section>
+        <TableTools onClick={onAdd} />
 
         <Table
           data-testid='goods_table'

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

@@ -10,8 +10,8 @@ const Filter: FC = function() {
   return (
     <Card>
       <Row>
-        <FilterField name='menuName' label='菜单名称' value={value} onChange={onChange} />
-        <FilterButtonGroup onSearch={onSearch} offset={12} />
+        <FilterField name='childMenuName' label='菜单名称' value={value} onChange={onChange} />
+        <FilterButtonGroup onSearch={onSearch} offset={12} searchTestId='child_menu_search_btn' />
       </Row>
     </Card>
   );

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

@@ -35,7 +35,7 @@ const ChildMenu: FC<Props> = function({id, onClose}) {
     <PIdProvider id={id}>
       <MenuProvider onClose={onClose}>
         <PageProvider context={pageContext}>
-          <section className='content-main'>
+          <section className='content-main' data-testid='child_menu'>
             <Filter />
             <TableList />
           </section>

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

@@ -1,10 +1,11 @@
-import {Card, Button, Table, Space} from 'antd';
+import {Card, Button, Table} from 'antd';
 import {FC} from 'react';
 import MenuModal from './modal';
 import {useHandle, useList} from './hooks';
 import {PAGE_SIZE_LIST} from '@utils';
 import {useContextSection} from '@hooks';
 import {context} from '../context';
+import {TableTools} from '@components';
 
 const TableList: FC = function() {
   const [{isFetching, data, page, pageSize, count}, {refetch, onPageChange}] = useList();
@@ -14,14 +15,12 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Space>
-            <Button type='primary' onClick={onAdd}>新增</Button>
-            <Button type='default' onClick={onClose!}>返回</Button>
-          </Space>
-        </section>
+        <TableTools onClick={onAdd} testId='child_menu_add_btn'>
+          <Button type='default' onClick={onClose!} data-testid='child_menu_back'>返回</Button>
+        </TableTools>
 
         <Table
+          data-testid='child_menu_table'
           bordered
           columns={columns}
           dataSource={data}

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

@@ -35,6 +35,7 @@ const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       style={style}
       onSubmit={onSubmit}
       onClose={onClose}
+      testId='child_menu_modal'
     >
       <Space direction='vertical'>
         <ModalField

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

@@ -1,9 +1,10 @@
-import {Card, Button, Table, Space} from 'antd';
+import {Card, Table} 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';
 
 const TableList: FC = function() {
   const [{isFetching, data, page, pageSize, count}, {refetch, onPageChange}] = useList();
@@ -15,13 +16,10 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Space>
-            <Button type='primary' onClick={onAdd}>新增</Button>
-          </Space>
-        </section>
+        <TableTools onClick={onAdd} />
 
         <Table
+          data-testid='menu_table'
           bordered
           columns={columns}
           dataSource={data}

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

@@ -35,6 +35,7 @@ const MenuModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       style={style}
       onSubmit={onSubmit}
       onClose={onClose}
+      testId='menu_modal'
     >
       <Space direction='vertical'>
         <ModalField

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

@@ -1,4 +1,4 @@
-import {Card, Space, Button, Table} from 'antd';
+import {Card, Table} from 'antd';
 import {FC} from 'react';
 import {useHandle, useList} from './hooks';
 import {usePage} from '@hooks';
@@ -6,6 +6,7 @@ import {pageContext} from '../context';
 import {PAGE_SIZE_LIST} from '@utils';
 import RoleModal from './modal';
 import TreeModal from './tree-modal';
+import {TableTools} from '@components';
 
 const TableList: FC = function() {
   const [{data, isFetching, count}, refetch] = useList();
@@ -18,11 +19,7 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Space>
-            <Button type='primary' onClick={onAdd} data-testid='add_btn'>新增</Button>
-          </Space>
-        </section>
+        <TableTools onClick={onAdd} />
 
         <Table
           data-testid='role_table'

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

@@ -1,10 +1,11 @@
-import {Card, Space, Button, Table} from 'antd';
+import {Card, Table} from 'antd';
 import {FC} from 'react';
 import StorageModal from './modal';
 import {usePage} from '@hooks';
 import {pageContext} from '../context';
 import {useHandle, useList} from './hooks';
 import {PAGE_SIZE_LIST} from '@utils';
+import {TableTools} from '@components';
 
 const TableList: FC = function() {
   const [{page, pageSize}, {onPageChange}] = usePage(pageContext);
@@ -14,11 +15,7 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Space>
-            <Button type='primary' onClick={onAdd} data-testid='add_btn'>新增</Button>
-          </Space>
-        </section>
+        <TableTools onClick={onAdd} />
 
         <Table
           data-testid='storage_table'

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

@@ -1,10 +1,11 @@
-import {Card, Space, Button, Table} from 'antd';
+import {Card, Table} 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 UserModal from './modal';
+import {TableTools} from '@components';
 
 const TableList: FC = function() {
   const [{data, isFetching, count}, {refetch}] = useList();
@@ -14,11 +15,7 @@ const TableList: FC = function() {
   return (
     <>
       <Card className='table-wrapper'>
-        <section className='table-tool'>
-          <Space>
-            <Button type='primary' onClick={onAdd} data-testid='add_btn'>新增</Button>
-          </Space>
-        </section>
+        <TableTools onClick={onAdd} />
 
         <Table
           data-testid='user_table'

packages/app/src/utils/types.ts

@@ -2,4 +2,4 @@ import {FC, ReactNode} from 'react';
 
 /** 有子组件的FC */
 // eslint-disable-next-line @typescript-eslint/ban-types
-export type ChildrenFC<T = {}> = FC<{children: ReactNode} & T>;
+export type ChildrenFC<T = {}> = FC<{children?: ReactNode} & T>;