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 { 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: async () => {
|
await deleteXxx(record.key);
|
message.success('已删除');
|
actionRef.current?.reload();
|
},
|
});
|
},
|
[message, modal],
|
);
|
|
const columns = useMemo(
|
() => createXxxColumns({ onDelete: handleDelete }),
|
[handleDelete],
|
);
|
|
return (
|
<div className="xxx-page">
|
<div className="page-header">
|
<div>
|
<h1 className="page-header__title">页面标题</h1>
|
<p className="page-header__desc">页面说明。</p>
|
</div>
|
</div>
|
|
<ProTable<XxxRecord, XxxQuery>
|
rowKey="key"
|
actionRef={actionRef}
|
columns={columns}
|
cardProps={{ className: 'xxx-table-card' }}
|
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={(params) => getXxxList(params)}
|
/>
|
</div>
|
);
|
};
|
|
export default Xxx;
|
