first commit
This commit is contained in:
@@ -0,0 +1,214 @@
|
||||
import { QueryRoleOption } from '@/services/services/role';
|
||||
import { GetUserInfo, UpdatedUserInfo } from '@/services/services/user';
|
||||
import { FormatDate } from '@/util/time';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Button, Col, Form, FormInstance, Input, InputNumber, message, Row, Select, SelectProps, Spin, Tag } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
interface ModifyUserProps {
|
||||
userId: number;
|
||||
setFormRef: (form: FormInstance) => void;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const ModifyUser: React.FC<ModifyUserProps> = ({ userId, setFormRef, open }) => {
|
||||
const [form] = Form.useForm();
|
||||
type TagRender = SelectProps['tagRender'];
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [spinTip, setSpinTip] = useState<string>("加载中...");
|
||||
const [roleNames, setRoleNames] = useState<SelectProps['options']>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setFormRef(form);
|
||||
}, [form, setFormRef]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
|
||||
QueryRoleOption().then((res: string[]) => {
|
||||
let temRoleNames = res.filter(item => item != "Super Admin").map((item) => {
|
||||
return {
|
||||
value: item
|
||||
}
|
||||
});
|
||||
setRoleNames(temRoleNames);
|
||||
}).catch((error: any) => {
|
||||
messageApi.error(error.message);
|
||||
setLoading(false);
|
||||
})
|
||||
|
||||
GetUserInfo(userId).then((res) => {
|
||||
let tempRes = {
|
||||
...res,
|
||||
createdDate: FormatDate(res.createdDate)
|
||||
}
|
||||
form.setFieldsValue(tempRes);
|
||||
}).catch((error) => {
|
||||
messageApi.error(error.message);
|
||||
}).finally(() => { setLoading(false); });
|
||||
}, [userId, open, form, setFormRef]);
|
||||
|
||||
|
||||
|
||||
async function onFinish(values: any): Promise<void> {
|
||||
setLoading(true);
|
||||
setSpinTip("修改中...");
|
||||
try {
|
||||
await UpdatedUserInfo(values);
|
||||
messageApi.success("用户修改成功");
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const tagRender: TagRender = (props) => {
|
||||
const { label, value, closable, onClose } = props;
|
||||
const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
};
|
||||
return (
|
||||
<Tag
|
||||
color="cyan"
|
||||
onMouseDown={onPreventMouseDown}
|
||||
closable={closable}
|
||||
onClose={onClose}
|
||||
style={{ marginInlineEnd: 4 }}
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Spin spinning={loading} tip={spinTip}>
|
||||
<Form
|
||||
name="basic"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
style={{ width: 800 }}
|
||||
onFinish={onFinish}
|
||||
autoComplete="off"
|
||||
form={form}
|
||||
initialValues={{
|
||||
allDeviceCount: 1,
|
||||
agentPercent: 0.5,
|
||||
freeCount: 5
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户ID"
|
||||
name="id"
|
||||
>
|
||||
<Input disabled={true} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户名称"
|
||||
name="userName"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户昵称"
|
||||
name="nickName"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="邮箱"
|
||||
name="email"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="电话号码"
|
||||
name="phoneNumber"
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="角色名称"
|
||||
name="roleNames"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
tagRender={tagRender}
|
||||
style={{ width: '260px' }}
|
||||
options={roleNames}
|
||||
allowClear
|
||||
placeholder="请选择角色分组"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="可激活设备"
|
||||
name="allDeviceCount"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<InputNumber min={0} step="1" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="代理分成"
|
||||
name="agentPercent"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<InputNumber min={0.1} max={0.7} step="0.01" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="免费换绑次数"
|
||||
name="freeCount"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<InputNumber min={1} max={10} step="1" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="注册时间"
|
||||
name="createdDate"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input disabled={true} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 4, span: 3 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交修改
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
{messageHolder}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModifyUser;
|
||||
Reference in New Issue
Block a user