1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| import { useCallback, useMemo, useRef } from 'react';
| import { PlusOutlined } from '@ant-design/icons';
| import { ProTable } from '@ant-design/pro-components';
| import type { ActionType } from '@ant-design/pro-components';
| import { App as AntdApp, Button } from 'antd';
| import { createXxxColumns } from './columns';
| import { deleteXxx, getXxxList } from './server';
| import type { XxxListParams, XxxQuery, XxxRecord } from './types';
| import './Xxx.scss';
|
| const Xxx = () => {
| const actionRef = useRef<ActionType>();
| const { message, modal } = AntdApp.useApp();
|
| const handleDelete = useCallback(
| (record: XxxRecord) => {
| modal.confirm({
| title: '删除记录',
| content: `确定删除「${record.name}」吗？删除后不可恢复。`,
| okText: '删除',
| cancelText: '取消',
| okButtonProps: { danger: true },
| onOk: () =>
| deleteXxx(record.key)
| .then(() => {
| message.success('已删除');
| actionRef.current?.reload();
| })
| .catch(() => {
| // 错误已由 request 统一提示
| }),
| });
| },
| [message, modal],
| );
|
| const columns = useMemo(
| () => createXxxColumns({ onDelete: handleDelete }),
| [handleDelete],
| );
|
| const fetchList = useCallback(
| (params: XxxListParams) =>
| getXxxList(params).then((result) => ({
| data: result.data,
| total: result.total,
| success: result.success,
| })),
| [],
| );
|
| return (
| <div className="xxx-page">
| <ProTable<XxxRecord, XxxQuery>
| rowKey="key"
| actionRef={actionRef}
| columns={columns}
| search={{ labelWidth: 'auto', defaultCollapsed: false }}
| scroll={{ x: 900 }}
| options={false}
| pagination={{
| defaultPageSize: 10,
| showSizeChanger: true,
| hideOnSinglePage: false,
| showTotal: (total) => `共 ${total} 条`,
| }}
| toolBarRender={() => [
| <Button
| key="create"
| type="primary"
| icon={<PlusOutlined />}
| onClick={() => message.info('TODO: 打开新增表单')}
| >
| 新增
| </Button>,
| ]}
| request={fetchList}
| />
| </div>
| );
| };
|
| export default Xxx;
|
|
