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);
}}
>
配置
),
},
];
return (
header={{
title:'CRUD 示例',
}}
>
headerTitle="查询表格" actionRef={actionRef} rowKey="id" search={{ labelWidth:120, }} toolBarRender={() => [ key="1" type="primary" onClick={() =>handleModalVisible(true)} > 新建 , ]} 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={ 已选择{' '} {selectedRowsState.length}{' '} 项 } > onClick={async () => { await handleRemove(selectedRowsState); setSelectedRows([]); actionRef.current?.reloadAndRest?.(); }} > 批量删除 )} onCancel={() =>handleModalVisible(false)} modalVisible={createModalVisible} > 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 && ( column={2} title={row?.name} request={async () => ({ data: row || {}, })} params={{ id:row?.name, }} columns={columns} /> )} ); }; export default TableList;