Refactor employee management

This commit is contained in:
Frudrax Cheng
2026-05-28 10:05:56 +08:00
parent 8b930ff44d
commit b9bc8f5419
11 changed files with 285 additions and 1051 deletions
+197 -167
View File
@@ -11,7 +11,6 @@ import {
Form,
message,
Pagination,
InputNumber,
} from 'antd';
import {
UserOutlined,
@@ -19,30 +18,49 @@ import {
EditOutlined,
DeleteOutlined,
KeyOutlined,
IdcardOutlined,
} from '@ant-design/icons';
import { usersApi, authApi, employeeSerialApi } from '@/services/api';
import { authApi, employeesApi } from '@/services/api';
import type { User, UserRole, CreateUserRequest, UpdateUserRequest, EmployeeSerial } from '@/types';
const ROLE_LABEL: Record<UserRole, string> = {
admin: '管理员',
technician: '技术员',
employee: '员工(不可登录后台)',
user: '普通用户',
employee: '员工',
};
const ROLE_COLOR: Record<UserRole, string> = {
admin: 'red',
technician: 'blue',
employee: 'green',
user: 'default',
};
const BACKEND_ROLES: UserRole[] = ['admin', 'technician'];
const ROLE_OPTIONS = (Object.keys(ROLE_LABEL) as UserRole[]).map((value) => ({
value,
label: ROLE_LABEL[value],
}));
const canLoginBackend = (role?: UserRole) => !!role && BACKEND_ROLES.includes(role);
function renderEmployeeSerial(serials?: EmployeeSerial[]) {
const activeSerial = serials?.find((serial) => serial.isActive) || serials?.[0];
if (!activeSerial) return '-';
return (
<Space direction="vertical" size={0}>
<span style={{ fontFamily: 'monospace' }}>{activeSerial.serialNumber}</span>
<Tag color={activeSerial.isActive ? 'green' : 'red'}>
{activeSerial.isActive ? '有效' : '已吊销'}
</Tag>
</Space>
);
}
function EmployeeSerialsPage() {
const currentUser = authApi.getCurrentUser();
const isAdmin = currentUser?.role === 'admin';
const [users, setUsers] = useState<User[]>([]);
const [employees, setEmployees] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
@@ -53,55 +71,59 @@ function EmployeeSerialsPage() {
const [createVisible, setCreateVisible] = useState(false);
const [createLoading, setCreateLoading] = useState(false);
const [createForm] = Form.useForm<CreateUserRequest>();
const createRole = Form.useWatch('role', createForm);
const [editingUser, setEditingUser] = useState<User | null>(null);
const [editingEmployee, setEditingEmployee] = useState<User | null>(null);
const [editLoading, setEditLoading] = useState(false);
const [editForm] = Form.useForm<UpdateUserRequest>();
const [resetPasswordUser, setResetPasswordUser] = useState<User | null>(null);
const [resetPasswordEmployee, setResetPasswordEmployee] = useState<User | null>(null);
const [resetLoading, setResetLoading] = useState(false);
const [resetForm] = Form.useForm<{ newPassword: string }>();
const [assignUser, setAssignUser] = useState<User | null>(null);
const [assignLoading, setAssignLoading] = useState(false);
const [assignForm] = Form.useForm<{ companyName: string; position: string; quantity: number }>();
const [serialsVisible, setSerialsVisible] = useState(false);
const [serialsLoading, setSerialsLoading] = useState(false);
const [serials, setSerials] = useState<EmployeeSerial[]>([]);
const loadUsers = async () => {
const loadEmployees = async () => {
setLoading(true);
try {
const result = await usersApi.list({
const result = await employeesApi.list({
page,
limit,
search: search || undefined,
role: roleFilter,
});
setUsers(result.data || []);
setEmployees(result.data || []);
setTotal(result.pagination?.total || 0);
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '加载员工列表失败');
setUsers([]);
setEmployees([]);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadUsers();
loadEmployees();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [page, limit, search, roleFilter]);
const openCreate = () => {
createForm.resetFields();
createForm.setFieldsValue({ role: 'employee' });
setCreateVisible(true);
};
const handleCreate = async (values: CreateUserRequest) => {
const payload = { ...values, username: values.employeeNo };
if (!canLoginBackend(values.role)) {
delete payload.password;
}
setCreateLoading(true);
try {
await usersApi.create(values);
message.success('员工创建成功');
await employeesApi.create(payload);
message.success('员工创建成功,员工码已自动生成');
setCreateVisible(false);
createForm.resetFields();
loadUsers();
loadEmployees();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '创建失败');
} finally {
@@ -109,23 +131,26 @@ function EmployeeSerialsPage() {
}
};
const openEdit = (user: User) => {
setEditingUser(user);
const openEdit = (employee: User) => {
setEditingEmployee(employee);
editForm.setFieldsValue({
name: user.name,
email: user.email,
role: user.role,
name: employee.name,
email: employee.email,
phone: employee.phone,
employeeNo: employee.employeeNo,
position: employee.position,
role: employee.role,
});
};
const handleEdit = async (values: UpdateUserRequest) => {
if (!editingUser) return;
if (!editingEmployee) return;
setEditLoading(true);
try {
await usersApi.update(editingUser.id, values);
await employeesApi.update(editingEmployee.id, values);
message.success('员工资料更新成功');
setEditingUser(null);
loadUsers();
setEditingEmployee(null);
loadEmployees();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '更新失败');
} finally {
@@ -134,12 +159,12 @@ function EmployeeSerialsPage() {
};
const handleResetPassword = async (values: { newPassword: string }) => {
if (!resetPasswordUser) return;
if (!resetPasswordEmployee) return;
setResetLoading(true);
try {
await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
await employeesApi.resetPassword(resetPasswordEmployee.id, values.newPassword);
message.success('密码重置成功');
setResetPasswordUser(null);
setResetPasswordEmployee(null);
resetForm.resetFields();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '重置失败');
@@ -148,18 +173,18 @@ function EmployeeSerialsPage() {
}
};
const handleDelete = (user: User) => {
const handleDelete = (employee: User) => {
Modal.confirm({
title: '确认删除',
content: `确定要删除员工 "${user.username}" 吗?`,
content: `确定要删除员工 "${employee.name}" 吗?`,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: async () => {
try {
await usersApi.delete(user.id);
await employeesApi.delete(employee.id);
message.success('删除成功');
loadUsers();
loadEmployees();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '删除失败');
}
@@ -167,78 +192,47 @@ function EmployeeSerialsPage() {
});
};
const openAssignCode = (user: User) => {
setAssignUser(user);
assignForm.setFieldsValue({
position: user.role === 'technician' ? '技术员' : user.role === 'admin' ? '管理员' : '员工',
quantity: 1,
});
};
const handleAssignCode = async (values: { companyName: string; position: string; quantity: number }) => {
if (!assignUser) return;
setAssignLoading(true);
try {
await employeeSerialApi.generate({
companyName: values.companyName,
position: values.position,
employeeName: assignUser.name,
quantity: values.quantity,
});
message.success('赋码成功');
setAssignUser(null);
assignForm.resetFields();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '赋码失败');
} finally {
setAssignLoading(false);
}
};
const openSerials = async (user: User) => {
setSerialsVisible(true);
setSerialsLoading(true);
try {
const result = await employeeSerialApi.list({ page: 1, limit: 200, search: user.name || user.username });
const list = (result.data || []).filter((s) => s.employeeName === user.name);
setSerials(list);
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '加载赋码记录失败');
setSerials([]);
} finally {
setSerialsLoading(false);
}
};
const columns = useMemo(
() => [
{ title: '用户名', dataIndex: 'username', key: 'username', render: (v: string) => <span style={{ fontFamily: 'monospace' }}>{v}</span> },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '邮箱', dataIndex: 'email', key: 'email', render: (v?: string) => v || '-' },
{ title: '名', dataIndex: 'name', key: 'name', width: 120 },
{ title: '电话', dataIndex: 'phone', key: 'phone', width: 140, render: (v?: string) => v || '-' },
{ title: '工号', dataIndex: 'employeeNo', key: 'employeeNo', width: 130, render: (v?: string) => v || '-' },
{ title: '岗位', dataIndex: 'position', key: 'position', width: 140, render: (v?: string) => v || '-' },
{
title: '角色',
dataIndex: 'role',
key: 'role',
width: 110,
render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
},
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
{
title: '员工码',
dataIndex: 'employeeSerials',
key: 'employeeSerials',
width: 190,
render: (serials?: EmployeeSerial[]) => renderEmployeeSerial(serials),
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
width: 170,
render: (v: string) => new Date(v).toLocaleString('zh-CN'),
},
{
title: '操作',
key: 'actions',
width: 240,
render: (_: unknown, record: User) => (
<Space wrap>
<Button type="link" size="small" icon={<IdcardOutlined />} onClick={() => openAssignCode(record)}>
</Button>
<Button type="link" size="small" onClick={() => openSerials(record)}>
</Button>
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>
</Button>
<Button type="link" size="small" icon={<KeyOutlined />} onClick={() => setResetPasswordUser(record)}>
</Button>
{canLoginBackend(record.role) && (
<Button type="link" size="small" icon={<KeyOutlined />} onClick={() => setResetPasswordEmployee(record)}>
</Button>
)}
{record.id !== currentUser?.id && (
<Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
@@ -262,7 +256,7 @@ function EmployeeSerialsPage() {
}
extra={
isAdmin && (
<Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateVisible(true)}>
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
</Button>
)
@@ -270,9 +264,9 @@ function EmployeeSerialsPage() {
>
<Space style={{ marginBottom: 16 }}>
<Input.Search
placeholder="搜索用户名/姓名/邮箱"
placeholder="搜索姓名/电话/工号/岗位"
allowClear
style={{ width: 280 }}
style={{ width: 300 }}
onSearch={(v) => {
setPage(1);
setSearch(v);
@@ -287,17 +281,17 @@ function EmployeeSerialsPage() {
<Select
placeholder="角色筛选"
allowClear
style={{ width: 180 }}
style={{ width: 160 }}
value={roleFilter}
onChange={(v) => {
setPage(1);
setRoleFilter(v);
}}
options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({ value: k, label: ROLE_LABEL[k] }))}
options={ROLE_OPTIONS}
/>
</Space>
<Table columns={columns} dataSource={users} rowKey="id" loading={loading} pagination={false} />
<Table columns={columns} dataSource={employees} rowKey="id" loading={loading} pagination={false} />
<div style={{ marginTop: 16 }}>
<Pagination
current={page}
@@ -313,98 +307,134 @@ function EmployeeSerialsPage() {
</div>
</Card>
<Modal title="新建员工" open={createVisible} onCancel={() => setCreateVisible(false)} footer={null} width={480}>
<Modal
title="新建员工"
open={createVisible}
onCancel={() => setCreateVisible(false)}
footer={null}
width={520}
>
<Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'employee' }}>
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { min: 3, max: 50, message: '用户名长度 3-50' }]}>
<Form.Item name="name" label="名" rules={[{ required: true, message: '请输入姓名' }]}>
<Input />
</Form.Item>
<Form.Item name="password" label="初始密码" rules={[{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少 6 位' }]}>
<Input.Password />
<Form.Item name="phone" label="电话" rules={[{ required: true, message: '请输入电话' }]}>
<Input />
</Form.Item>
<Form.Item name="employeeNo" label="工号" rules={[{ required: true, message: '请输入工号' }]}>
<Input />
</Form.Item>
<Form.Item name="position" label="岗位" rules={[{ required: true, message: '请输入岗位' }]}>
<Input />
</Form.Item>
<Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
<Select
options={ROLE_OPTIONS}
onChange={(role: UserRole) => {
if (!canLoginBackend(role)) {
createForm.setFieldValue('password', undefined);
}
}}
/>
</Form.Item>
{canLoginBackend(createRole) && (
<Form.Item
name="password"
label="初始密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少 6 位' },
]}
>
<Input.Password />
</Form.Item>
)}
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setCreateVisible(false)}></Button>
<Button type="primary" htmlType="submit" loading={createLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal
title={editingEmployee ? `编辑员工:${editingEmployee.name}` : '编辑员工'}
open={!!editingEmployee}
onCancel={() => setEditingEmployee(null)}
footer={null}
width={520}
>
<Form form={editForm} layout="vertical" onFinish={handleEdit}>
<Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
<Input />
</Form.Item>
<Form.Item name="phone" label="电话" rules={[{ required: true, message: '请输入电话' }]}>
<Input />
</Form.Item>
<Form.Item name="employeeNo" label="工号" rules={[{ required: true, message: '请输入工号' }]}>
<Input />
</Form.Item>
<Form.Item name="position" label="岗位" rules={[{ required: true, message: '请输入岗位' }]}>
<Input />
</Form.Item>
<Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
<Input />
</Form.Item>
<Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
<Select options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({ value: k, label: ROLE_LABEL[k] }))} />
<Select options={ROLE_OPTIONS} />
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setCreateVisible(false)}></Button>
<Button type="primary" htmlType="submit" loading={createLoading}></Button>
<Button onClick={() => setEditingEmployee(null)}></Button>
<Button type="primary" htmlType="submit" loading={editLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal title={editingUser ? `编辑员工:${editingUser.username}` : '编辑员工'} open={!!editingUser} onCancel={() => setEditingUser(null)} footer={null} width={480}>
<Form form={editForm} layout="vertical" onFinish={handleEdit}>
<Form.Item name="name" label="姓名"><Input /></Form.Item>
<Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}><Input /></Form.Item>
<Form.Item name="role" label="角色">
<Select options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({ value: k, label: ROLE_LABEL[k] }))} />
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setEditingUser(null)}></Button>
<Button type="primary" htmlType="submit" loading={editLoading}></Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal title={resetPasswordUser ? `重置密码:${resetPasswordUser.username}` : '重置密码'} open={!!resetPasswordUser} onCancel={() => setResetPasswordUser(null)} footer={null} width={420}>
<Modal
title={resetPasswordEmployee ? `重置密码:${resetPasswordEmployee.name}` : '重置密码'}
open={!!resetPasswordEmployee}
onCancel={() => {
setResetPasswordEmployee(null);
resetForm.resetFields();
}}
footer={null}
width={420}
>
<Form form={resetForm} layout="vertical" onFinish={handleResetPassword}>
<Form.Item name="newPassword" label="新密码" rules={[{ required: true, message: '请输入新密码' }, { min: 6, message: '密码至少 6 位' }]}>
<Form.Item
name="newPassword"
label="新密码"
rules={[
{ required: true, message: '请输入新密码' },
{ min: 6, message: '密码至少 6 位' },
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setResetPasswordUser(null)}></Button>
<Button type="primary" htmlType="submit" loading={resetLoading}></Button>
<Button
onClick={() => {
setResetPasswordEmployee(null);
resetForm.resetFields();
}}
>
</Button>
<Button type="primary" htmlType="submit" loading={resetLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal title={assignUser ? `${assignUser.name} 赋码` : '员工赋码'} open={!!assignUser} onCancel={() => setAssignUser(null)} footer={null} width={500}>
<Form form={assignForm} layout="vertical" onFinish={handleAssignCode}>
<Form.Item name="companyName" label="企业名称" rules={[{ required: true, message: '请输入企业名称' }]}>
<Input />
</Form.Item>
<Form.Item name="position" label="职位" rules={[{ required: true, message: '请输入职位' }]}>
<Input />
</Form.Item>
<Form.Item name="quantity" label="生成数量" initialValue={1} rules={[{ required: true, message: '请输入生成数量' }]}>
<InputNumber min={1} max={1000} style={{ width: '100%' }} />
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setAssignUser(null)}></Button>
<Button type="primary" htmlType="submit" loading={assignLoading}></Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal title="员工赋码记录" open={serialsVisible} onCancel={() => setSerialsVisible(false)} footer={null} width={900}>
<Table
rowKey="serialNumber"
loading={serialsLoading}
dataSource={serials}
pagination={false}
columns={[
{ title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
{ title: '企业名称', dataIndex: 'companyName', key: 'companyName' },
{ title: '职位', dataIndex: 'position', key: 'position' },
{ title: '员工姓名', dataIndex: 'employeeName', key: 'employeeName' },
{ title: '状态', dataIndex: 'isActive', key: 'isActive', render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '有效' : '已吊销'}</Tag> },
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
]}
/>
</Modal>
</div>
);
}
+3 -3
View File
@@ -15,7 +15,7 @@ function LoginPage() {
const handleLogin = async (values: { username: string; password: string; remember?: boolean }) => {
setLoading(true);
try {
await authApi.login(values.username, values.password);
const user = await authApi.login(values.username, values.password);
if (values.remember) {
localStorage.setItem('rememberedUsername', values.username);
@@ -25,7 +25,7 @@ function LoginPage() {
message.success('登录成功!');
setTimeout(() => {
navigate('/admin/dashboard');
navigate(user.role === 'technician' ? '/admin/aftersales' : '/admin/dashboard');
}, 500);
} catch (error: any) {
message.error(error.message || '登录失败,请重试');
@@ -123,4 +123,4 @@ function LoginPage() {
);
}
export default LoginPage;
export default LoginPage;
+3 -3
View File
@@ -16,7 +16,7 @@ import './styles/PublicQuery.css';
interface EmployeeSerialResult {
serialNumber: string;
companyName: string;
department: string;
position: string;
employeeName: string;
isActive: boolean;
createdAt: string;
@@ -164,11 +164,11 @@ function PublicQueryPage() {
<span className="label"></span>
<span className="value">{result.companyName}</span>
</div>
{serialType === 'employee' && (result as EmployeeSerialResult).department && (
{serialType === 'employee' && (result as EmployeeSerialResult).position && (
<>
<div className="detail-item">
<span className="label"></span>
<span className="value">{(result as EmployeeSerialResult).department}</span>
<span className="value">{(result as EmployeeSerialResult).position}</span>
</div>
<div className="detail-item">
<span className="label"></span>
-433
View File
@@ -1,433 +0,0 @@
import { useEffect, useState } from 'react';
import {
Card,
Table,
Button,
Space,
Input,
Select,
Tag,
Modal,
Form,
message,
Pagination,
} from 'antd';
import {
UserOutlined,
PlusOutlined,
EditOutlined,
DeleteOutlined,
KeyOutlined,
} from '@ant-design/icons';
import { usersApi, authApi } from '@/services/api';
import type { User, UserRole, CreateUserRequest, UpdateUserRequest } from '@/types';
const ROLE_LABEL: Record<UserRole, string> = {
admin: '管理员',
technician: '技术员',
employee: '员工(不可登录后台)',
user: '普通用户',
};
const ROLE_COLOR: Record<UserRole, string> = {
admin: 'red',
technician: 'blue',
employee: 'green',
user: 'default',
};
function UsersPage() {
const currentUser = authApi.getCurrentUser();
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [total, setTotal] = useState(0);
const [search, setSearch] = useState('');
const [roleFilter, setRoleFilter] = useState<UserRole | undefined>();
const [createVisible, setCreateVisible] = useState(false);
const [createLoading, setCreateLoading] = useState(false);
const [createForm] = Form.useForm<CreateUserRequest>();
const [editingUser, setEditingUser] = useState<User | null>(null);
const [editLoading, setEditLoading] = useState(false);
const [editForm] = Form.useForm<UpdateUserRequest>();
const [resetPasswordUser, setResetPasswordUser] = useState<User | null>(null);
const [resetLoading, setResetLoading] = useState(false);
const [resetForm] = Form.useForm<{ newPassword: string }>();
const loadUsers = async () => {
setLoading(true);
try {
const result = await usersApi.list({
page,
limit,
search: search || undefined,
role: roleFilter,
});
setUsers(result.data || []);
setTotal(result.pagination?.total || 0);
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '加载用户列表失败');
setUsers([]);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadUsers();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [page, limit, search, roleFilter]);
const handleCreate = async (values: CreateUserRequest) => {
setCreateLoading(true);
try {
await usersApi.create(values);
message.success('用户创建成功');
setCreateVisible(false);
createForm.resetFields();
loadUsers();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '创建失败');
} finally {
setCreateLoading(false);
}
};
const openEdit = (user: User) => {
setEditingUser(user);
editForm.setFieldsValue({
name: user.name,
email: user.email,
role: user.role,
});
};
const handleEdit = async (values: UpdateUserRequest) => {
if (!editingUser) return;
setEditLoading(true);
try {
await usersApi.update(editingUser.id, values);
message.success('用户更新成功');
setEditingUser(null);
loadUsers();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '更新失败');
} finally {
setEditLoading(false);
}
};
const handleResetPassword = async (values: { newPassword: string }) => {
if (!resetPasswordUser) return;
setResetLoading(true);
try {
await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
message.success('密码重置成功');
setResetPasswordUser(null);
resetForm.resetFields();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '重置失败');
} finally {
setResetLoading(false);
}
};
const handleDelete = (user: User) => {
Modal.confirm({
title: '确认删除',
content: `确定要删除用户 "${user.username}" 吗?此操作不可恢复!`,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: async () => {
try {
await usersApi.delete(user.id);
message.success('删除成功');
loadUsers();
} catch (err: any) {
message.error(err?.response?.data?.message || err.message || '删除失败');
}
},
});
};
const columns = [
{
title: '用户名',
dataIndex: 'username',
key: 'username',
render: (text: string) => <span style={{ fontFamily: 'monospace' }}>{text}</span>,
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
render: (text?: string) => text || '-',
},
{
title: '角色',
dataIndex: 'role',
key: 'role',
width: 100,
render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
width: 170,
render: (date: string) => new Date(date).toLocaleString('zh-CN'),
},
{
title: '操作',
key: 'actions',
width: 260,
render: (_: any, record: User) => (
<Space>
<Button
type="link"
size="small"
icon={<EditOutlined />}
onClick={() => openEdit(record)}
>
</Button>
<Button
type="link"
size="small"
icon={<KeyOutlined />}
onClick={() => setResetPasswordUser(record)}
>
</Button>
{record.id !== currentUser?.id && (
<Button
type="link"
size="small"
danger
icon={<DeleteOutlined />}
onClick={() => handleDelete(record)}
>
</Button>
)}
</Space>
),
},
];
return (
<div>
<Card
title={
<Space>
<UserOutlined />
<span></span>
</Space>
}
extra={
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => setCreateVisible(true)}
>
</Button>
}
>
<Space style={{ marginBottom: 16 }}>
<Input.Search
placeholder="搜索用户名/姓名/邮箱"
allowClear
style={{ width: 260 }}
onSearch={(v) => {
setPage(1);
setSearch(v);
}}
onChange={(e) => {
if (!e.target.value) {
setPage(1);
setSearch('');
}
}}
/>
<Select
placeholder="角色筛选"
allowClear
style={{ width: 140 }}
value={roleFilter}
onChange={(v) => {
setPage(1);
setRoleFilter(v);
}}
options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
value: k,
label: ROLE_LABEL[k],
}))}
/>
</Space>
<Table
columns={columns}
dataSource={users}
rowKey="id"
loading={loading}
pagination={false}
/>
<div style={{ marginTop: 16 }}>
<Pagination
current={page}
pageSize={limit}
total={total}
onChange={(newPage, newLimit) => {
setPage(newPage);
setLimit(newLimit);
}}
showSizeChanger
showTotal={(t) => `共计 ${t} 条记录`}
/>
</div>
</Card>
<Modal
title="新建用户"
open={createVisible}
onCancel={() => {
setCreateVisible(false);
createForm.resetFields();
}}
footer={null}
width={480}
>
<Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'technician' }}>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ min: 3, max: 50, message: '用户名长度 3-50' },
]}
>
<Input placeholder="登录用用户名" />
</Form.Item>
<Form.Item
name="password"
label="初始密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码至少 6 位' },
]}
>
<Input.Password placeholder="至少 6 位" />
</Form.Item>
<Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
<Input />
</Form.Item>
<Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
<Input />
</Form.Item>
<Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
<Select
options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
value: k,
label: ROLE_LABEL[k],
}))}
/>
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setCreateVisible(false)}></Button>
<Button type="primary" htmlType="submit" loading={createLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal
title={editingUser ? `编辑用户:${editingUser.username}` : '编辑用户'}
open={!!editingUser}
onCancel={() => setEditingUser(null)}
footer={null}
width={480}
>
<Form form={editForm} layout="vertical" onFinish={handleEdit}>
<Form.Item name="name" label="姓名">
<Input />
</Form.Item>
<Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
<Input />
</Form.Item>
<Form.Item name="role" label="角色">
<Select
options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
value: k,
label: ROLE_LABEL[k],
}))}
/>
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button onClick={() => setEditingUser(null)}></Button>
<Button type="primary" htmlType="submit" loading={editLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
<Modal
title={resetPasswordUser ? `重置密码:${resetPasswordUser.username}` : '重置密码'}
open={!!resetPasswordUser}
onCancel={() => {
setResetPasswordUser(null);
resetForm.resetFields();
}}
footer={null}
width={420}
>
<Form form={resetForm} layout="vertical" onFinish={handleResetPassword}>
<Form.Item
name="newPassword"
label="新密码"
rules={[
{ required: true, message: '请输入新密码' },
{ min: 6, message: '密码至少 6 位' },
]}
>
<Input.Password placeholder="至少 6 位" />
</Form.Item>
<Form.Item>
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
<Button
onClick={() => {
setResetPasswordUser(null);
resetForm.resetFields();
}}
>
</Button>
<Button type="primary" htmlType="submit" loading={resetLoading}>
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</div>
);
}
export default UsersPage;