可用版本
This commit is contained in:
戚辰先生
parent
5cc0deb917
commit
445766b458
@ -1,331 +1,331 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import { Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect } from 'antd';
|
import {Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect} from 'antd';
|
||||||
import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined } from '@ant-design/icons';
|
import {PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined} from '@ant-design/icons';
|
||||||
import type { UserResponse, Role } from './types';
|
import type {UserResponse, Role} from './types';
|
||||||
import type { DepartmentDTO } from '../Department/types';
|
import type {DepartmentDTO} from '../Department/types';
|
||||||
import { getUsers, createUser, updateUser, deleteUser, resetPassword } from './service';
|
import {getUsers, createUser, updateUser, deleteUser, resetPassword} from './service';
|
||||||
import { useTableData } from '@/hooks/useTableData';
|
import {useTableData} from '@/hooks/useTableData';
|
||||||
import type { FixedType, AlignType } from 'rc-table/lib/interface';
|
import type {FixedType, AlignType} from 'rc-table/lib/interface';
|
||||||
|
|
||||||
const UserPage: React.FC = () => {
|
const UserPage: React.FC = () => {
|
||||||
const {
|
const {
|
||||||
list: users,
|
list: users,
|
||||||
pagination,
|
pagination,
|
||||||
loading,
|
loading,
|
||||||
loadData: fetchUsers,
|
loadData: fetchUsers,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
handleCreate,
|
handleCreate,
|
||||||
handleUpdate,
|
handleUpdate,
|
||||||
handleDelete
|
handleDelete
|
||||||
} = useTableData({
|
} = useTableData({
|
||||||
service: {
|
service: {
|
||||||
list: getUsers,
|
list: getUsers,
|
||||||
create: createUser,
|
create: createUser,
|
||||||
update: updateUser,
|
update: updateUser,
|
||||||
delete: deleteUser
|
delete: deleteUser
|
||||||
},
|
},
|
||||||
defaultParams: {
|
defaultParams: {
|
||||||
sortField: 'createTime',
|
sortField: 'createTime',
|
||||||
sortOrder: 'desc'
|
sortOrder: 'desc'
|
||||||
},
|
},
|
||||||
message: {
|
message: {
|
||||||
createSuccess: '用户创建成功',
|
createSuccess: '用户创建成功',
|
||||||
updateSuccess: '用户更新成功',
|
updateSuccess: '用户更新成功',
|
||||||
deleteSuccess: '用户删除成功',
|
deleteSuccess: '用户删除成功',
|
||||||
loadError: '获取用户列表失败'
|
loadError: '获取用户列表失败'
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
const [departments, setDepartments] = useState<DepartmentDTO[]>([]);
|
|
||||||
const [modalVisible, setModalVisible] = useState(false);
|
|
||||||
const [resetPasswordModalVisible, setResetPasswordModalVisible] = useState(false);
|
|
||||||
const [editingUser, setEditingUser] = useState<UserResponse | null>(null);
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [passwordForm] = Form.useForm();
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
|
||||||
setEditingUser(null);
|
|
||||||
form.resetFields();
|
|
||||||
form.setFieldsValue({
|
|
||||||
enabled: true
|
|
||||||
});
|
});
|
||||||
setModalVisible(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = (record: UserResponse) => {
|
const [departments, setDepartments] = useState<DepartmentDTO[]>([]);
|
||||||
setEditingUser(record);
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
form.setFieldsValue({
|
const [resetPasswordModalVisible, setResetPasswordModalVisible] = useState(false);
|
||||||
...record
|
const [editingUser, setEditingUser] = useState<UserResponse | null>(null);
|
||||||
});
|
const [form] = Form.useForm();
|
||||||
setModalVisible(true);
|
const [passwordForm] = Form.useForm();
|
||||||
};
|
|
||||||
|
|
||||||
const handleResetPassword = (record: UserResponse) => {
|
const handleAdd = () => {
|
||||||
setEditingUser(record);
|
setEditingUser(null);
|
||||||
passwordForm.resetFields();
|
form.resetFields();
|
||||||
setResetPasswordModalVisible(true);
|
form.setFieldsValue({
|
||||||
};
|
enabled: true
|
||||||
|
|
||||||
const handleResetPasswordSubmit = async () => {
|
|
||||||
try {
|
|
||||||
const values = await passwordForm.validateFields();
|
|
||||||
if (editingUser) {
|
|
||||||
await resetPassword(editingUser.id, values.password);
|
|
||||||
message.success('密码重置成功');
|
|
||||||
setResetPasswordModalVisible(false);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error('密码重置失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
try {
|
|
||||||
const values = await form.validateFields();
|
|
||||||
if (editingUser) {
|
|
||||||
await updateUser(editingUser.id, {
|
|
||||||
...values,
|
|
||||||
version: editingUser.version
|
|
||||||
});
|
});
|
||||||
message.success('更新成功');
|
setModalVisible(true);
|
||||||
} else {
|
};
|
||||||
await createUser(values);
|
|
||||||
message.success('创建成功');
|
|
||||||
}
|
|
||||||
setModalVisible(false);
|
|
||||||
fetchUsers();
|
|
||||||
} catch (error) {
|
|
||||||
message.error('操作失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTreeData = (deps: DepartmentDTO[]): any[] => {
|
const handleEdit = (record: UserResponse) => {
|
||||||
return deps.map(dept => ({
|
setEditingUser(record);
|
||||||
title: dept.name,
|
form.setFieldsValue({
|
||||||
value: dept.id,
|
...record
|
||||||
children: dept.children && dept.children.length > 0 ? getTreeData(dept.children) : undefined
|
});
|
||||||
}));
|
setModalVisible(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
// const handleAssignRoles = (record: UserResponse) => {
|
const handleResetPassword = (record: UserResponse) => {
|
||||||
// setSelectedUser(record);
|
setEditingUser(record);
|
||||||
// setRoleModalVisible(true);
|
passwordForm.resetFields();
|
||||||
// };
|
setResetPasswordModalVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
const columns = [
|
const handleResetPasswordSubmit = async () => {
|
||||||
{
|
try {
|
||||||
title: 'ID',
|
const values = await passwordForm.validateFields();
|
||||||
dataIndex: 'id',
|
if (editingUser) {
|
||||||
key: 'id',
|
await resetPassword(editingUser.id, values.password);
|
||||||
width: 80,
|
message.success('密码重置成功');
|
||||||
fixed: 'left' as FixedType
|
setResetPasswordModalVisible(false);
|
||||||
},
|
}
|
||||||
{
|
} catch (error) {
|
||||||
title: '用户名',
|
message.error('密码重置失败');
|
||||||
dataIndex: 'username',
|
}
|
||||||
key: 'username',
|
};
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '昵称',
|
|
||||||
dataIndex: 'nickname',
|
|
||||||
key: 'nickname',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '邮箱',
|
|
||||||
dataIndex: 'email',
|
|
||||||
key: 'email',
|
|
||||||
width: 200,
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '手机号',
|
|
||||||
dataIndex: 'phone',
|
|
||||||
key: 'phone',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '角色',
|
|
||||||
dataIndex: 'roles',
|
|
||||||
key: 'roles',
|
|
||||||
width: 150,
|
|
||||||
ellipsis: true,
|
|
||||||
render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createTime',
|
|
||||||
key: 'createTime',
|
|
||||||
width: 180,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '更新时间',
|
|
||||||
dataIndex: 'updateTime',
|
|
||||||
key: 'updateTime',
|
|
||||||
width: 180,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'enabled',
|
|
||||||
key: 'enabled',
|
|
||||||
width: 80,
|
|
||||||
align: 'center' as AlignType,
|
|
||||||
render: (enabled: boolean) => (
|
|
||||||
<Switch checked={enabled} disabled size="small" />
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
width: 180,
|
|
||||||
fixed: 'right' as FixedType,
|
|
||||||
render: (_: any, record: UserResponse) => (
|
|
||||||
<Space size="small">
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<EditOutlined />}
|
|
||||||
onClick={() => handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
icon={<KeyOutlined />}
|
|
||||||
onClick={() => handleResetPassword(record)}
|
|
||||||
>
|
|
||||||
重置密码
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => handleDelete(record.id)}
|
|
||||||
disabled={record.username === 'admin'}
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
const handleSubmit = async () => {
|
||||||
<div style={{ padding: '24px' }}>
|
try {
|
||||||
<div style={{ marginBottom: 16 }}>
|
const values = await form.validateFields();
|
||||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
if (editingUser) {
|
||||||
新增用户
|
await updateUser(editingUser.id, {
|
||||||
</Button>
|
...values,
|
||||||
</div>
|
version: editingUser.version
|
||||||
|
});
|
||||||
|
message.success('更新成功');
|
||||||
|
} else {
|
||||||
|
await createUser(values);
|
||||||
|
message.success('创建成功');
|
||||||
|
}
|
||||||
|
setModalVisible(false);
|
||||||
|
fetchUsers();
|
||||||
|
} catch (error) {
|
||||||
|
message.error('操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
<Table
|
const getTreeData = (deps: DepartmentDTO[]): any[] => {
|
||||||
loading={loading}
|
return deps.map(dept => ({
|
||||||
columns={columns}
|
title: dept.name,
|
||||||
dataSource={users}
|
value: dept.id,
|
||||||
rowKey="id"
|
children: dept.children && dept.children.length > 0 ? getTreeData(dept.children) : undefined
|
||||||
scroll={{ x: 1500 }}
|
}));
|
||||||
pagination={{
|
};
|
||||||
...pagination,
|
|
||||||
showSizeChanger: true,
|
|
||||||
showQuickJumper: true,
|
|
||||||
showTotal: (total) => `共 ${total} 条记录`,
|
|
||||||
onChange: onPageChange,
|
|
||||||
size: 'small'
|
|
||||||
}}
|
|
||||||
rowSelection={{
|
|
||||||
type: 'checkbox',
|
|
||||||
onChange: (selectedRowKeys, selectedRows) => {
|
|
||||||
console.log('selectedRowKeys:', selectedRowKeys);
|
|
||||||
console.log('selectedRows:', selectedRows);
|
|
||||||
},
|
|
||||||
getCheckboxProps: (record) => ({
|
|
||||||
disabled: record.username === 'admin',
|
|
||||||
}),
|
|
||||||
fixed: true,
|
|
||||||
}}
|
|
||||||
size="middle"
|
|
||||||
bordered
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Modal
|
// const handleAssignRoles = (record: UserResponse) => {
|
||||||
title={editingUser ? '编辑用户' : '新增用户'}
|
// setSelectedUser(record);
|
||||||
open={modalVisible}
|
// setRoleModalVisible(true);
|
||||||
onOk={handleSubmit}
|
// };
|
||||||
onCancel={() => setModalVisible(false)}
|
|
||||||
width={600}
|
|
||||||
destroyOnClose
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
layout="vertical"
|
|
||||||
>
|
|
||||||
<Form.Item
|
|
||||||
name="username"
|
|
||||||
label="用户名"
|
|
||||||
rules={[{ required: true, message: '请输入用户名' }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入用户名" disabled={!!editingUser} />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
{!editingUser && (
|
|
||||||
<Form.Item
|
|
||||||
name="password"
|
|
||||||
label="密码"
|
|
||||||
rules={[
|
|
||||||
{ required: true, message: '请输入密码' },
|
|
||||||
{ min: 6, message: '密码长度不能小于6位' }
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input.Password placeholder="请输入密码" />
|
|
||||||
</Form.Item>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Form.Item
|
const columns = [
|
||||||
name="nickname"
|
{
|
||||||
label="昵称"
|
title: 'ID',
|
||||||
>
|
dataIndex: 'id',
|
||||||
<Input placeholder="请输入昵称" />
|
key: 'id',
|
||||||
</Form.Item>
|
width: 60,
|
||||||
<Form.Item
|
fixed: 'left' as FixedType
|
||||||
name="email"
|
},
|
||||||
label="邮箱"
|
{
|
||||||
rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
|
title: '用户名',
|
||||||
>
|
dataIndex: 'username',
|
||||||
<Input placeholder="请输入邮箱" />
|
key: 'username',
|
||||||
</Form.Item>
|
width: 100,
|
||||||
<Form.Item
|
},
|
||||||
name="phone"
|
{
|
||||||
label="手机号"
|
title: '昵称',
|
||||||
>
|
dataIndex: 'nickname',
|
||||||
<Input placeholder="请输入手机号" />
|
key: 'nickname',
|
||||||
</Form.Item>
|
width: 100,
|
||||||
<Form.Item
|
},
|
||||||
name="deptId"
|
{
|
||||||
label="所属部门"
|
title: '邮箱',
|
||||||
>
|
dataIndex: 'email',
|
||||||
<TreeSelect
|
key: 'email',
|
||||||
treeData={getTreeData(departments)}
|
width: 180,
|
||||||
placeholder="请选择所属部门"
|
ellipsis: true,
|
||||||
allowClear
|
},
|
||||||
treeDefaultExpandAll
|
{
|
||||||
style={{ width: '100%' }}
|
title: '手机号',
|
||||||
|
dataIndex: 'phone',
|
||||||
|
key: 'phone',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '角色',
|
||||||
|
dataIndex: 'roles',
|
||||||
|
key: 'roles',
|
||||||
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
key: 'createTime',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
key: 'updateTime',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'enabled',
|
||||||
|
key: 'enabled',
|
||||||
|
width: 60,
|
||||||
|
align: 'center' as AlignType,
|
||||||
|
render: (enabled: boolean) => (
|
||||||
|
<Switch checked={enabled} disabled size="small"/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 240,
|
||||||
|
fixed: 'right' as FixedType,
|
||||||
|
render: (_: any, record: UserResponse) => (
|
||||||
|
<Space size={0}>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
icon={<EditOutlined/>}
|
||||||
|
onClick={() => handleEdit(record)}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
icon={<KeyOutlined/>}
|
||||||
|
onClick={() => handleResetPassword(record)}
|
||||||
|
>
|
||||||
|
重置密码
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
danger
|
||||||
|
icon={<DeleteOutlined/>}
|
||||||
|
onClick={() => handleDelete(record.id)}
|
||||||
|
disabled={record.username === 'admin'}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{padding: '24px'}}>
|
||||||
|
<div style={{marginBottom: 16}}>
|
||||||
|
<Button type="primary" icon={<PlusOutlined/>} onClick={handleAdd}>
|
||||||
|
新增用户
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
loading={loading}
|
||||||
|
columns={columns}
|
||||||
|
dataSource={users}
|
||||||
|
rowKey="id"
|
||||||
|
scroll={{x: 1500}}
|
||||||
|
pagination={{
|
||||||
|
...pagination,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
showTotal: (total) => `共 ${total} 条记录`,
|
||||||
|
onChange: onPageChange,
|
||||||
|
size: 'small'
|
||||||
|
}}
|
||||||
|
rowSelection={{
|
||||||
|
type: 'checkbox',
|
||||||
|
onChange: (selectedRowKeys, selectedRows) => {
|
||||||
|
console.log('selectedRowKeys:', selectedRowKeys);
|
||||||
|
console.log('selectedRows:', selectedRows);
|
||||||
|
},
|
||||||
|
getCheckboxProps: (record) => ({
|
||||||
|
disabled: record.username === 'admin',
|
||||||
|
}),
|
||||||
|
fixed: true,
|
||||||
|
}}
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="enabled"
|
|
||||||
label="状态"
|
|
||||||
valuePropName="checked"
|
|
||||||
initialValue={true}
|
|
||||||
>
|
|
||||||
<Switch />
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* 注释掉RoleModal相关代码
|
<Modal
|
||||||
|
title={editingUser ? '编辑用户' : '新增用户'}
|
||||||
|
open={modalVisible}
|
||||||
|
onOk={handleSubmit}
|
||||||
|
onCancel={() => setModalVisible(false)}
|
||||||
|
width={600}
|
||||||
|
destroyOnClose
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name="username"
|
||||||
|
label="用户名"
|
||||||
|
rules={[{required: true, message: '请输入用户名'}]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入用户名" disabled={!!editingUser}/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
{!editingUser && (
|
||||||
|
<Form.Item
|
||||||
|
name="password"
|
||||||
|
label="密码"
|
||||||
|
rules={[
|
||||||
|
{required: true, message: '请输入密码'},
|
||||||
|
{min: 6, message: '密码长度不能小于6位'}
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input.Password placeholder="请输入密码"/>
|
||||||
|
</Form.Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="nickname"
|
||||||
|
label="昵称"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入昵称"/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="email"
|
||||||
|
label="邮箱"
|
||||||
|
rules={[{type: 'email', message: '请输入正确的邮箱格式'}]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入邮箱"/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="phone"
|
||||||
|
label="手机号"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入手机号"/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="deptId"
|
||||||
|
label="所属部门"
|
||||||
|
>
|
||||||
|
<TreeSelect
|
||||||
|
treeData={getTreeData(departments)}
|
||||||
|
placeholder="请选择所属部门"
|
||||||
|
allowClear
|
||||||
|
treeDefaultExpandAll
|
||||||
|
style={{width: '100%'}}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="enabled"
|
||||||
|
label="状态"
|
||||||
|
valuePropName="checked"
|
||||||
|
initialValue={true}
|
||||||
|
>
|
||||||
|
<Switch/>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* 注释掉RoleModal相关代码
|
||||||
{selectedUser && (
|
{selectedUser && (
|
||||||
<RoleModal
|
<RoleModal
|
||||||
userId={selectedUser.id}
|
userId={selectedUser.id}
|
||||||
@ -343,49 +343,49 @@ const UserPage: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
title="重置密码"
|
title="重置密码"
|
||||||
open={resetPasswordModalVisible}
|
open={resetPasswordModalVisible}
|
||||||
onOk={handleResetPasswordSubmit}
|
onOk={handleResetPasswordSubmit}
|
||||||
onCancel={() => setResetPasswordModalVisible(false)}
|
onCancel={() => setResetPasswordModalVisible(false)}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<Form
|
<Form
|
||||||
form={passwordForm}
|
form={passwordForm}
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
>
|
>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="password"
|
name="password"
|
||||||
label="新密码"
|
label="新密码"
|
||||||
rules={[
|
rules={[
|
||||||
{ required: true, message: '请输入新密码' },
|
{required: true, message: '请输入新密码'},
|
||||||
{ min: 6, message: '密码长度不能小于6位' }
|
{min: 6, message: '密码长度不能小于6位'}
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Input.Password placeholder="请输入新密码" />
|
<Input.Password placeholder="请输入新密码"/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="confirmPassword"
|
name="confirmPassword"
|
||||||
label="确认密码"
|
label="确认密码"
|
||||||
dependencies={['password']}
|
dependencies={['password']}
|
||||||
rules={[
|
rules={[
|
||||||
{ required: true, message: '请确认新密码' },
|
{required: true, message: '请确认新密码'},
|
||||||
({ getFieldValue }) => ({
|
({getFieldValue}) => ({
|
||||||
validator(_, value) {
|
validator(_, value) {
|
||||||
if (!value || getFieldValue('password') === value) {
|
if (!value || getFieldValue('password') === value) {
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
return Promise.reject(new Error('两次输入的密码不一致'));
|
return Promise.reject(new Error('两次输入的密码不一致'));
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Input.Password placeholder="请确认新密码" />
|
<Input.Password placeholder="请确认新密码"/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default UserPage;
|
export default UserPage;
|
||||||
Loading…
Reference in New Issue
Block a user