2022-11-18 ant-design/pro-compon
import services from '@/services/demo';
import {
ActionType,
FooterToolbar,
PageContainer,
ProDescriptions,
ProDescriptionsItemProps,
ProTable,
}from '@ant-design/pro-components';
import {Button, Divider, Drawer, message }from 'antd';
import React, {useRef, useState }from 'react';
import CreateFormfrom './components/CreateForm';
import UpdateForm, { FormValueType }from './components/UpdateForm';
const {addUser, queryUserList, deleteUser, modifyUser } =
services.UserController;
/**
* 添加节点
* @param fields
*/
const handleAdd =async (fields: API.UserInfo) => {
const hide =message.loading('正在添加');
try {
await addUser({ ...fields });
hide();
message.success('添加成功');
return true;
}catch (error) {
hide();
message.error('添加失败请重试！');
return false;
}
};
/**
* 更新节点
* @param fields
*/
const handleUpdate =async (fields: FormValueType) => {
const hide =message.loading('正在配置');
try {
await modifyUser(
{
userId: fields.id ||'',
},
{
name: fields.name ||'',
nickName: fields.nickName ||'',
email: fields.email ||'',
},
);
hide();
message.success('配置成功');
return true;
}catch (error) {
hide();
message.error('配置失败请重试！');
return false;
}
};
/**
* 删除节点
* @param selectedRows
*/
const handleRemove =async (selectedRows: API.UserInfo[]) => {
const hide =message.loading('正在删除');
if (!selectedRows)return true;
try {
await deleteUser({
userId: selectedRows.find((row) => row.id)?.id ||'',
});
hide();
message.success('删除成功，即将刷新');
return true;
}catch (error) {
hide();
message.error('删除失败，请重试');
return false;
}
};
const TableList: React.FC = () => {
const [createModalVisible, handleModalVisible] =useState(false);
const [updateModalVisible, handleUpdateModalVisible] =
useState(false);
const [stepFormValues, setStepFormValues] =useState({});
const actionRef =useRef();
const [row, setRow] =useState();
const [selectedRowsState, setSelectedRows] =useState([]);
const columns: ProDescriptionsItemProps[] = [
{
title:'名称',
dataIndex:'name',
tip:'名称是唯一的 key',
formItemProps: {
rules: [
{
required:true,
message:'名称为必填项',
},
],
},
},
{
title:'昵称',
dataIndex:'nickName',
valueType:'text',
},
{
title:'性别',
dataIndex:'gender',
hideInForm:true,
valueEnum: {
0: {text:'男', status:'MALE' },
1: {text:'女', status:'FEMALE' },
},
},
{
title:'操作',
dataIndex:'option',
valueType:'option',
render: (_, record) => (
<>
onClick={() => {
handleUpdateModalVisible(true);
setStepFormValues(record);
}}
>
配置
<Divider type="vertical" />
<a href="">订阅警报
),
},
];
return (
header={{
title:'CRUD 示例',
}}
>
<ProTable
headerTitle="查询表格"
actionRef={actionRef}
rowKey="id"
search={{
labelWidth:120,
}}
toolBarRender={() => [
key="1"
type="primary"
onClick={() =>handleModalVisible(true)}
>
新建
</Button>,
]}
request={async (params, sorter, filter) => {
const { data, success } =await queryUserList({
...params,
// FIXME: remove @ts-ignore
// @ts-ignore
sorter,
filter,
});
return {
data: data?.list || [],
success,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) =>setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length >0 && (
extra={
已选择{' '}
<a style={{fontWeight:600 }}>{selectedRowsState.length}</a>{' '}
项
}
>
onClick={async () => {
await handleRemove(selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}}
>
批量删除
<Button type="primary">批量审批
)}
onCancel={() =>handleModalVisible(false)}
modalVisible={createModalVisible}
>
<ProTable
onSubmit={async (value) => {
const success =await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="id"
type="form"
columns={columns}
/>
{stepFormValues &&Object.keys(stepFormValues).length ? (
onSubmit={async (value) => {
const success =await handleUpdate(value);
if (success) {
handleUpdateModalVisible(false);
setStepFormValues({});
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
onCancel={() => {
handleUpdateModalVisible(false);
setStepFormValues({});
}}
updateModalVisible={updateModalVisible}
values={stepFormValues}
/>
) :null}
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions
column={2}
title={row?.name}
request={async () => ({
data: row || {},
})}
params={{
id:row?.name,
}}
columns={columns}
/>
)}
);
};
export default TableList;
