import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ModalForm, ProForm, ProFormText, ProTable} from '@ant-design/pro-components';
import {Button, Image, message, Popconfirm, Tag} from 'antd';
import {useRef} from 'react';
import {currentUser, deleteUser, searchUsers, updateUserInfoByAdmin} from '@/services/ant-design-pro/api';
import {ProFormSelect} from '@ant-design/pro-form';
import {selectAvatarUrl, selectGender, selectUserRole, selectUserStatus} from '@/constants';
import {PlusOutlined} from "@ant-design/icons";
import {API} from "@/services/ant-design-pro/typings";
export const waitTimePromise = async (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, time);
});
}
export const waitTime = async (time: number = 100) => {
await waitTimePromise(time);
};
const user = await currentUser();
const isAdmin = user && 'admin' === user.userRole
const columns: ProColumns<API.CurrentUser>[] = [
{
title: '序号',
dataIndex: 'id',
valueType: 'indexBorder',
width: 48,
align: 'center',
},
{
title: '用户名',
dataIndex: 'username',
copyable: true,
ellipsis: true,
tip: '用户名称',
align: 'center',
},
{
title: '用户账户',
dataIndex: 'userAccount',
copyable: true,
align: 'center',
},
{
title: '头像',
dataIndex: 'avatarUrl',
render: (_, record) => (
<div>
<Image src={record.avatarUrl} width="80px" height="80px"/>
</div>
),
copyable: true,
align: 'center',
},
{
title: '用户状态',
dataIndex: 'userStatus',
valueType: 'select',
valueEnum: {
0: {text: <Tag color="success">正常</Tag>, status: 'Success'},
1: {text: <Tag color="warning">注销</Tag>, status: 'Default'},
2: {text: <Tag color="error">封号</Tag>, status: 'Error'},
},
align: 'center',
},
{
title: '用户角色',
dataIndex: 'userRole',
valueType: 'select',
valueEnum: {
user: {text: <Tag color="default">普通用户</Tag>},
admin: {text: <Tag color="success">管理员</Tag>},
ban: {text: <Tag color="error">封号</Tag>, status: 'Error'},
},
align: 'center',
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateTime',
align: 'center',
},
{
title: '操作',
align: 'center',
valueType: 'option',
key: 'option',
hideInTable: !isAdmin,
render: (text, record, _, action) => [
<ModalForm<API.CurrentUser>
title="修改用户信息"
trigger={<Button type="link">修改</Button>}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => console.log('run'),
}}
submitTimeout={2000}
onFinish={async (values) => {
await waitTime(1000);
values.id = record.id;
const isModify = await updateUserInfoByAdmin(values);
if (isModify) {
message.success('提交成功');
location.reload();
return true;
}
return false;
}}
>
<ProForm.Group>
<ProFormText
width="md"
name="username"
label="用户名"
placeholder="请输入用户名"
initialValue={record.username}
/>
<ProFormText
width="md"
name="userAccount"
label="用户账户"
placeholder="请输入账户"
initialValue={record.userAccount}
/>
<ProFormText
width="md"
name="userCode"
label="用户编号"
placeholder="请输入编号"
initialValue={record.userCode}
/>
<ProFormSelect
name="userStatus"
fieldProps={{
size: 'large',
}}
label="用户状态"
options={selectUserStatus}
initialValue={record.userStatus}
placeholder={'选择用户状态'}
rules={[
{
required: true,
message: '请选择用户状态',
},
]}
/>
<ProFormSelect
name="avatarUrl"
fieldProps={{
size: 'large',
}}
label="用户头像"
options={selectAvatarUrl}
placeholder={'请选择用户头像 '}
initialValue={record.avatarUrl}
rules={[
{
required: true,
message: '请输入选择用户头像!',
},
]}
/>
<ProFormSelect
name="gender"
fieldProps={{
size: 'large',
}}
label="性别"
options={selectGender}
placeholder="请选择性别"
initialValue={record.gender}
rules={[
{
required: true,
message: '请选择性别',
},
]}
/>
<ProFormSelect
name="userRole"
fieldProps={{
size: 'large',
}}
label="用户角色"
options={selectUserRole}
initialValue={record.userRole}
placeholder={'选择用户角色'}
rules={[
{
required: true,
message: '请选择用户角色',
},
]}
/>
</ProForm.Group>
</ModalForm>,
<a key="view">
<Popconfirm
title="删除用户"
onConfirm={async (e) => {
const id = record.id;
const isDelete = await deleteUser({id: id});
if (isDelete) {
message.success('删除成功');
location.reload();
} else {
message.error('删除失败');
}
}}
onCancel={(e) => {
}}
okText="Yes"
cancelText="No"
>
<Button type="link" danger>
删除
</Button>
</Popconfirm>
</a>,
],
},
]
export default () => {
const actionRef = useRef<ActionType>();
return (
<ProTable<API.CurrentUser>
columns={columns}
actionRef={actionRef}
cardBordered
rowSelection={{
alwaysShowAlert: true
}}
toolBarRender={(action, {selectedRows}) => [
<ModalForm
title="新建表单"
trigger={<Button type="primary"><PlusOutlined/>添加</Button>}
submitter={{
searchConfig: {
submitText: '确认',
resetText: '取消',
},
}}
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
message.success('提交成功');
return true;
}}
>
<ProFormText
width="md"
name="name"
label="签约客户名称"
tooltip="最长为 24 位"
placeholder="请输入名称"
/>
<ProFormText
width="md"
name="company"
label="我方公司名称"
placeholder="请输入名称"
/>
</ModalForm>
]}
request={async (params = {}, sort, filter) => {
await waitTime(2000);
const userList = await searchUsers();
return {data: userList};
}}
editable={{
type: 'multiple',
}}
columnsState={{
persistenceKey: 'pro-table-singe-demos',
persistenceType: 'localStorage',
onChange(value) {
console.log('value: ', value);
},
}}
rowKey="id"
search={{
labelWidth: 'auto',
}}
options={{
setting: {
listsHeight: 400,
},
}}
form={{
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{
pageSize: 5,
onChange: (page) => console.log(page),
}}
dateFormatter="string"
headerTitle="用户列表"
>
</ProTable>
);
}
解决方法：
src/pages/user/login/index.less页面代码第一行
去掉
其他页面同理
去除国际化成功
解决方法：
打开 config/config.ts 文件
将
将 src 目录下的 .umi 文件夹删掉
重新启动项目就可以了
