update:function of template dict-detial pagination

src/pages/custom/template/dict/dict-detail.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Space, Table, Button, Image, Divider, Card, Input } from 'antd';
-import type { InputRef } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Space, Table, Button, Divider, Card } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/es/table';
+import { useSetState } from 'ahooks';
 import { t } from '@/utils/i18n';
-import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
+import { PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import { antdUtils } from '@/utils/antd';
 import { useRequest } from '@/hooks/use-request';
-import { DataDictVO, DataDictDetailVO } from '@/models';
+import { DataDictVO, DataDictDetailVO, DataDictDetaiPageReqVO } from '@/models';
 import DictDetailEditor from './dict-detail-editor';
 import templateDictDetailService from '@/request/service/template-dict-detail';
 
@@ -14,10 +14,16 @@ export interface DictDetailRef {
     updateDictData: (dictData: DataDictVO) => void;
 }
 
+const defaultPage = {
+    pageNo: 1,
+    pageSize: 10
+};
+
 export default forwardRef((props, ref) => {
 
     const [dict, setDict] = useState<DataDictVO>();
-    const [dictDetail, setDictDetail] = useState<DataDictDetailVO[]>();
+    const [dataSource, setDataSource] = useState<DataDictDetailVO[]>();
+    const [searchState, setSearchState] = useSetState<DataDictDetaiPageReqVO>(defaultPage);
     const [total, setTotal] = useState(0);
 
     const [detailEditorVisable, seEdtailEditorVisable] = useState<boolean>(false);
@@ -29,14 +35,14 @@ export default forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({
         updateDictData: (dictData: DataDictVO) => {
             setDict(dictData);
+            setSearchState({...defaultPage, dictId: dictData.id});
         },
     }));
 
     const load = async () => {
-        //TODO: setup pagenation
-        const [error, { data }] = await getPageApi({ dictId: dict?.id });
+        const [error, { data }] = await getPageApi(searchState);
         if (!error) {
-            setDictDetail(data.list);
+            setDataSource(data.list);
             setTotal(data.total);
         }
     }
@@ -45,7 +51,7 @@ export default forwardRef((props, ref) => {
         if (dict) {
             load();
         }
-    }, [dict]);
+    }, [searchState]);
 
     const showDeleteConfirm = (item: DataDictDetailVO) => {
         antdUtils.modal?.confirm({
@@ -117,6 +123,15 @@ export default forwardRef((props, ref) => {
         },
     ];
 
+    const onChange: TableProps<DataDictDetailVO>['onChange'] = (pagination, filters, sorter, extra) => {
+        const state: DataDictDetaiPageReqVO = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            dictId: dict?.id
+        }
+        setSearchState(state);
+    };
+
     return (
         <>
             <div>
@@ -126,7 +141,7 @@ export default forwardRef((props, ref) => {
                 }}>
                     <div className="py-[8px] flex justify-between w-full">
                         <div className='py-[5px]'>
-                           {dict? <span className='text-center text-lg font-semibold'>所属字典: {dict?.name}</span> : null}
+                            {dict ? <span className='text-center text-lg font-semibold'>所属字典: {dict?.name}</span> : null}
                         </div>
                         <Button className="ml-5" type='primary' size='middle'
                             icon={<PlusOutlined />}
@@ -136,8 +151,14 @@ export default forwardRef((props, ref) => {
                             }}
                             disabled={!dict}> 新增 </Button>
                     </div>
-                    <Table rowKey="id" scroll={{ x: true }} columns={columns} dataSource={dictDetail} className='bg-transparent'
-                        pagination={{ position: ['bottomRight'] }}
+                    <Table rowKey="id" scroll={{ x: true }} columns={columns} dataSource={dataSource} className='bg-transparent'
+                        onChange={onChange}
+                        pagination={{
+                            current: searchState.pageNo,
+                            pageSize: searchState.pageSize,
+                            total,
+                            position: ['bottomRight']
+                        }}
                     />
                 </Card>
             </div>