beggin/nestjs-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 用户管理重构优化

Browse Source
This commit is contained in:
21 Guns
2024-10-26 16:47:07 +08:00
parent b064c4cb87
commit 0283e018de
19 changed files with 1390 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
admin/src/pages/user/form.tsx
View File

@@ -1,94 +1,94 @@
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Select, Message } from '@arco-design/web-react';
import React, {useEffect, useState} from 'react';
import {Modal, Form, Input, Select, Message} from '@arco-design/web-react';
import UploadFile from '@/components/Upload';
import { createUser, updateUser } from '@/api/user';
import {createUser, updateUser} from '@/api/user';
import {genderDict, statusDict} from "@/enum/dict";
interface Props {
record: { [key: string]: any } | null,
visible: boolean,
handleConfirm: () => void,
handleCancel: () => void
record: { [key: string]: any } | null,
visible: boolean,
handleConfirm: () => void,
handleCancel: () => void
}
function FormComponent(props: Props) {
const { visible, record, handleConfirm, handleCancel } = props;
const [confirmLoading, setConfirmLoading] = useState(false);
const {visible, record, handleConfirm, handleCancel} = props;
const [confirmLoading, setConfirmLoading] = useState(false);
const onOk = async () => {
try {
setConfirmLoading(true);
const values = await form.validate();
const data = {
...values,
avatarId: values.avatar?.[0]?.response ?? null
};
if (record?.id) {
await updateUser(data);
} else {
await createUser(data);
}
Message.success(`${record?.id ? '更新' : '新增'}成功！`);
handleConfirm();
} catch (e) {
console.log(e);
} finally {
setConfirmLoading(false);
}
};
const onOk = async () => {
try {
setConfirmLoading(true);
const values = await form.validate();
const data = {
...values,
avatarId: values.avatar?.[0]?.response ?? null
};
if (record?.id) {
await updateUser(data);
} else {
await createUser(data);
}
Message.success(`${record?.id ? '更新' : '新增'}成功！`);
handleConfirm();
} catch (e) {
console.log(e);
} finally {
setConfirmLoading(false);
}
};
const [form] = Form.useForm();
const [form] = Form.useForm();
useEffect(() => {
record && form.setFieldsValue({
...record,
avatar: record.avatar ? [{
uid: record.avatar.id,
response: record.avatar.id,
url: record.avatar.path
}] : undefined
});
}, [record]);
useEffect(() => {
record && form.setFieldsValue({
...record,
avatar: record.avatar ? [{
uid: record.avatar.id,
response: record.avatar.id,
url: record.avatar.path
}] : undefined
});
}, [record]);
useEffect(() => {
!visible && form.resetFields()
}, [visible]);
useEffect(() => {
!visible && form.resetFields()
}, [visible]);
return (
<Modal
title={<span>{`${record?.id ? '更新' : '新增'}用户信息`}</span>}
visible={visible}
onOk={onOk}
onCancel={handleCancel}
confirmLoading={confirmLoading}
>
<Form form={form}>
<Form.Item hidden={true} field="id" rules={[{ required: false }]}>
<Input />
</Form.Item>
<Form.Item triggerPropName="fileList" label="用户头像"
field="avatar">
<UploadFile limit={1} dir="/user" />
</Form.Item>
<Form.Item label="用户昵称" field="name" rules={[{ required: true }]}>
<Input placeholder="请输入用户昵称" />
</Form.Item>
<Form.Item disabled={record?.id} label="用户账号" field="account" rules={[{ required: true }]}>
<Input placeholder="请输入用户账号" />
</Form.Item>
{!record?.id && <Form.Item label="用户密码" field="password" rules={[{ required: true }]}>
<Input type="password" placeholder="请输入用户密码" />
return (
<Modal
title={<span>{`${record?.id ? '更新' : '新增'}数据`}</span>}
visible={visible}
onOk={onOk}
onCancel={handleCancel}
confirmLoading={confirmLoading}
>
<Form form={form}>
<Form.Item hidden={true} field="id" rules={[{required: false}]}>
<Input/>
</Form.Item>
<Form.Item triggerPropName="fileList" label="用户头像"
field="avatar">
<UploadFile limit={1} dir="/user"/>
</Form.Item>
<Form.Item label="用户昵称" field="name" rules={[{required: true}]}>
<Input placeholder="请输入用户昵称"/>
</Form.Item>
<Form.Item disabled={record?.id} label="用户账号" field="account" rules={[{required: true}]}>
<Input placeholder="请输入用户账号"/>
</Form.Item>
{!record?.id && <Form.Item label="用户密码" field="password" rules={[{required: true}]}>
<Input type="password" placeholder="请输入用户密码"/>
</Form.Item>}
<Form.Item label="用户状态" field="status" rules={[{ required: true }]}>
<Select placeholder="请选择" options={[{ label: '启用', value: 1 }, { label: '禁用', value: 0 }]} />
</Form.Item>
<Form.Item label="用户性别" field="gender" rules={[{ required: true }]}>
<Select placeholder="请选择"
options={[{ label: '女', value: 0 }, { label: '男', value: 1 }, { label: '未知', value: 2 }]} />
</Form.Item>
</Form>
</Modal>
);
<Form.Item label="用户状态" field="status" rules={[{required: true}]} initialValue={1}>
<Select placeholder="请选择" options={statusDict}/>
</Form.Item>
<Form.Item label="用户性别" field="gender" rules={[{required: true}]}>
<Select placeholder="请选择"
options={genderDict}/>
</Form.Item>
</Form>
</Modal>
);
}
export default FormComponent;