update:role list support page

src/pages/system/role/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Space, Table, Button, Input, Select, Divider, Tag, Card, Badge, Form } from 'antd';
+import { Space, Table, Button, Input, Select, Divider, Tag, Card, Badge, Form, DatePicker } from 'antd';
 import type { TableColumnsType } from 'antd';
+import type { TableProps } from 'antd/es/table';
 import { t } from '@/utils/i18n';
 import { PlusOutlined, ExclamationCircleFilled, SearchOutlined, UndoOutlined } from '@ant-design/icons';
 import { antdUtils } from '@/utils/antd';
@@ -10,23 +11,36 @@ import roleService from '@/request/service/role';
 import { RoleVO } from '@/models';
 import RoleEditor from './role-editor';
 
+const { RangePicker } = DatePicker;
+
 export default () => {
 
     const [editorVisable, seEditorVisable] = useState<boolean>(false);
     const [editRole, setEditRole] = useState<RoleVO>();
     const [dataSource, setDataSource] = useState<RoleVO[]>([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState({
+        pageNo: 1,
+        pageSize: 10
+    });
     const [searchFrom] = Form.useForm();
 
     const { runAsync: getRoleList } = useRequest(roleService.getRoleList, { manual: true });
     const { runAsync: deleteRole } = useRequest(roleService.deleteRole, { manual: true });
 
     const loadRoles = async () => {
-        const [error, { code, msg, data }] = await getRoleList(searchFrom.getFieldsValue());
+        const params = {...page, ...searchFrom.getFieldsValue()}
+        const createTime = searchFrom.getFieldValue("createTime");
+        if(createTime) {
+            params["createTime"] = `[${createTime[0].format('YYYY-MM-DD 00:00:00')},${createTime[1].format('YYYY-MM-DD 23:59:59')}]`;
+        }
+        const [error, { code, msg, data }] = await getRoleList(params);
         if (error || code !== 0) {
             antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' });
             return
         }
         setDataSource(data.list);
+        setTotal(data.total);
     };
 
     const onReset = () => {
@@ -159,14 +173,20 @@ export default () => {
         },
     ];
 
+    const onChange: TableProps<RoleVO>['onChange'] = (pagination, filters, sorter, extra) => {
+        setPage({
+            pageNo: pagination.current??1,
+            pageSize: pagination.pageSize??10
+        });
+    };
 
     useEffect(() => {
         loadRoles();
-    }, []);
+    }, [page]);
 
     return (
         <>
-            <div style={{ width: 1600 }}>
+            <div style={{ minWidth: 1600 }}>
                 <Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{ paddingTop: 4, paddingBottom: 4 }}>
                     <div className='flex justify-between content-center'>
                         <div className='flex justify-normal items-center'>
@@ -184,6 +204,9 @@ export default () => {
                                         <Select.Option value="1">关闭</Select.Option>
                                     </Select>
                                 </Form.Item>
+                                <Form.Item className='ml-2 w-[380px]' name="createTime" label="创建时间">
+                                    <RangePicker className='w-[260px]'/>
+                                </Form.Item>
                             </Form>
                             <Space.Compact className="ml-5">
                                 <Button type='primary' size='large' icon={<SearchOutlined />} onClick={loadRoles}> 搜索 </Button>
@@ -198,13 +221,22 @@ export default () => {
                         </div>
                     </div>
                 </Card>
-                <Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
+                <Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'
+                    style={{height: '100%'}}
+                    bodyStyle={{height: '100%'}}>
                     <Table rowKey="id"
                         scroll={{ x: true }}
+                        style={{height: '100%'}}
                         columns={columns}
                         dataSource={dataSource}
                         className='bg-transparent'
-                        pagination={{ position: ['bottomRight'] }} />
+                        onChange={onChange}
+                        pagination={{ 
+                            current: page.pageNo,
+                            pageSize: page.pageSize,
+                            total,
+                            position: ['bottomRight'] 
+                        }} />
                 </Card>
             </div>
             <RoleEditor