|
|
|
@ -1,270 +0,0 @@ |
|
|
|
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 CreateForm from './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<unknown> = () => { |
|
|
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false); |
|
|
|
const [updateModalVisible, handleUpdateModalVisible] = |
|
|
|
useState<boolean>(false); |
|
|
|
const [stepFormValues, setStepFormValues] = useState({}); |
|
|
|
const actionRef = useRef<ActionType>(); |
|
|
|
const [row, setRow] = useState<API.UserInfo>(); |
|
|
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]); |
|
|
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [ |
|
|
|
{ |
|
|
|
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) => ( |
|
|
|
<> |
|
|
|
<a |
|
|
|
onClick={() => { |
|
|
|
handleUpdateModalVisible(true); |
|
|
|
setStepFormValues(record); |
|
|
|
}} |
|
|
|
> |
|
|
|
配置 |
|
|
|
</a> |
|
|
|
<Divider type="vertical" /> |
|
|
|
<a href="">订阅警报</a> |
|
|
|
</> |
|
|
|
), |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
return ( |
|
|
|
<PageContainer |
|
|
|
header={{ |
|
|
|
title: 'CRUD 示例', |
|
|
|
}} |
|
|
|
> |
|
|
|
<ProTable<API.UserInfo> |
|
|
|
headerTitle="查询表格" |
|
|
|
actionRef={actionRef} |
|
|
|
rowKey="id" |
|
|
|
search={{ |
|
|
|
labelWidth: 120, |
|
|
|
}} |
|
|
|
toolBarRender={() => [ |
|
|
|
<Button |
|
|
|
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 && ( |
|
|
|
<FooterToolbar |
|
|
|
extra={ |
|
|
|
<div> |
|
|
|
已选择{' '} |
|
|
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '} |
|
|
|
项 |
|
|
|
</div> |
|
|
|
} |
|
|
|
> |
|
|
|
<Button |
|
|
|
onClick={async () => { |
|
|
|
await handleRemove(selectedRowsState); |
|
|
|
setSelectedRows([]); |
|
|
|
actionRef.current?.reloadAndRest?.(); |
|
|
|
}} |
|
|
|
> |
|
|
|
批量删除 |
|
|
|
</Button> |
|
|
|
<Button type="primary">批量审批</Button> |
|
|
|
</FooterToolbar> |
|
|
|
)} |
|
|
|
<CreateForm |
|
|
|
onCancel={() => handleModalVisible(false)} |
|
|
|
modalVisible={createModalVisible} |
|
|
|
> |
|
|
|
<ProTable<API.UserInfo, API.UserInfo> |
|
|
|
onSubmit={async (value) => { |
|
|
|
const success = await handleAdd(value); |
|
|
|
if (success) { |
|
|
|
handleModalVisible(false); |
|
|
|
if (actionRef.current) { |
|
|
|
actionRef.current.reload(); |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
rowKey="id" |
|
|
|
type="form" |
|
|
|
columns={columns} |
|
|
|
/> |
|
|
|
</CreateForm> |
|
|
|
{stepFormValues && Object.keys(stepFormValues).length ? ( |
|
|
|
<UpdateForm |
|
|
|
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} |
|
|
|
|
|
|
|
<Drawer |
|
|
|
width={600} |
|
|
|
open={!!row} |
|
|
|
onClose={() => { |
|
|
|
setRow(undefined); |
|
|
|
}} |
|
|
|
closable={false} |
|
|
|
> |
|
|
|
{row?.name && ( |
|
|
|
<ProDescriptions<API.UserInfo> |
|
|
|
column={2} |
|
|
|
title={row?.name} |
|
|
|
request={async () => ({ |
|
|
|
data: row || {}, |
|
|
|
})} |
|
|
|
params={{ |
|
|
|
id: row?.name, |
|
|
|
}} |
|
|
|
columns={columns} |
|
|
|
/> |
|
|
|
)} |
|
|
|
</Drawer> |
|
|
|
</PageContainer> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default TableList; |
