Add user management page and technician picker for reassign
- New /admin/users page (admin only) for creating technicians, editing role/email, resetting passwords, deleting users - AftersalesDetail reassign modal now uses a searchable Select populated from /api/users/assignable instead of raw user ID input - Menu entry only shown to admins Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frudrax Cheng
@@ -23,12 +23,13 @@ import {
|
||||
StopOutlined,
|
||||
UserSwitchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { aftersalesApi, authApi } from '@/services/api';
|
||||
import { aftersalesApi, authApi, usersApi } from '@/services/api';
|
||||
import type {
|
||||
AftersalesOrder,
|
||||
AftersalesServiceType,
|
||||
AftersalesWorkOrderStatus,
|
||||
UpdateAftersalesRequest,
|
||||
User,
|
||||
} from '@/types';
|
||||
|
||||
const SERVICE_TYPE_LABEL: Record<AftersalesServiceType, string> = {
|
||||
@@ -81,6 +82,7 @@ function AftersalesDetailPage() {
|
||||
|
||||
const [reassignModalVisible, setReassignModalVisible] = useState(false);
|
||||
const [reassignTechnicianId, setReassignTechnicianId] = useState<number | undefined>();
|
||||
const [assignableUsers, setAssignableUsers] = useState<User[]>([]);
|
||||
|
||||
const loadOrder = async () => {
|
||||
setLoading(true);
|
||||
@@ -107,6 +109,18 @@ function AftersalesDetailPage() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [serialNumber]);
|
||||
|
||||
const openReassign = async () => {
|
||||
setReassignModalVisible(true);
|
||||
if (assignableUsers.length === 0) {
|
||||
try {
|
||||
const users = await usersApi.assignable();
|
||||
setAssignableUsers(users);
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.message || err.message || '加载技术员列表失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (values: UpdateAftersalesRequest) => {
|
||||
if (!order) return;
|
||||
setSaving(true);
|
||||
@@ -260,7 +274,7 @@ function AftersalesDetailPage() {
|
||||
</Button>
|
||||
{isAdmin && !isClosed && (
|
||||
<>
|
||||
<Button icon={<UserSwitchOutlined />} onClick={() => setReassignModalVisible(true)}>
|
||||
<Button icon={<UserSwitchOutlined />} onClick={openReassign}>
|
||||
重新分配
|
||||
</Button>
|
||||
<Button danger icon={<StopOutlined />} onClick={handleForceClose}>
|
||||
@@ -424,25 +438,28 @@ function AftersalesDetailPage() {
|
||||
<Modal
|
||||
title="重新分配技术员"
|
||||
open={reassignModalVisible}
|
||||
onCancel={() => setReassignModalVisible(false)}
|
||||
onCancel={() => {
|
||||
setReassignModalVisible(false);
|
||||
setReassignTechnicianId(undefined);
|
||||
}}
|
||||
onOk={handleReassign}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="新技术员 ID" required>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入技术员的用户 ID"
|
||||
<Form.Item label="选择技术员" required>
|
||||
<Select
|
||||
placeholder="请选择技术员或管理员"
|
||||
value={reassignTechnicianId}
|
||||
onChange={(e) =>
|
||||
setReassignTechnicianId(e.target.value ? Number(e.target.value) : undefined)
|
||||
}
|
||||
onChange={(v) => setReassignTechnicianId(v)}
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
options={assignableUsers.map((u) => ({
|
||||
value: u.id,
|
||||
label: `${u.name}（${u.username}）${u.role === 'admin' ? ' · 管理员' : ' · 技术员'}`,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<p style={{ color: '#888', fontSize: 12 }}>
|
||||
后续会在用户管理页提供技术员列表选择，目前先输入 ID。
|
||||
</p>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,431 @@
|
||||
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: '技术员',
|
||||
user: '普通用户',
|
||||
};
|
||||
|
||||
const ROLE_COLOR: Record<UserRole, string> = {
|
||||
admin: 'red',
|
||||
technician: 'blue',
|
||||
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;
|
||||
Reference in New Issue
Block a user