feat: unify employee management with inline code assignment
This commit is contained in:
Frudrax Cheng
+297
-429
@@ -1,289 +1,255 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { Card, Table, Input, Button, Space, message, Modal, Tag, Form, Select, InputNumber, Pagination, ColorPicker } from 'antd';
|
import {
|
||||||
import { UserOutlined, PlusOutlined, StopOutlined, EditOutlined, QrcodeOutlined, DeleteOutlined } from '@ant-design/icons';
|
Card,
|
||||||
import { employeeSerialApi } from '@/services/api';
|
Table,
|
||||||
import QRCode from 'qrcode';
|
Button,
|
||||||
import { useNavigate } from 'react-router-dom';
|
Space,
|
||||||
import type { Color } from 'antd/es/color-picker';
|
Input,
|
||||||
import type { EmployeeSerial } from '@/types';
|
Select,
|
||||||
import { authApi } from '@/services/api';
|
Tag,
|
||||||
import EmployeeAccountsPanel from '@/components/EmployeeAccountsPanel';
|
Modal,
|
||||||
|
Form,
|
||||||
|
message,
|
||||||
|
Pagination,
|
||||||
|
InputNumber,
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
UserOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
KeyOutlined,
|
||||||
|
IdcardOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { usersApi, authApi, employeeSerialApi } from '@/services/api';
|
||||||
|
import type { User, UserRole, CreateUserRequest, UpdateUserRequest, EmployeeSerial } 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 EmployeeSerialsPage() {
|
function EmployeeSerialsPage() {
|
||||||
const [serials, setSerials] = useState<EmployeeSerial[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [page, setPage] = useState(1);
|
|
||||||
const [limit, setLimit] = useState(10);
|
|
||||||
const [total, setTotal] = useState(0);
|
|
||||||
const [generateModalVisible, setGenerateModalVisible] = useState(false);
|
|
||||||
const [generateLoading, setGenerateLoading] = useState(false);
|
|
||||||
const [editModalVisible, setEditModalVisible] = useState(false);
|
|
||||||
const [editLoading, setEditLoading] = useState(false);
|
|
||||||
const [selectedSerial, setSelectedSerial] = useState<EmployeeSerial | null>(null);
|
|
||||||
const [qrCodeModalVisible, setQrCodeModalVisible] = useState(false);
|
|
||||||
const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
|
|
||||||
const [generateForm] = Form.useForm();
|
|
||||||
const [editForm] = Form.useForm();
|
|
||||||
const [qrColor, setQrColor] = useState('#000000');
|
|
||||||
const [generatedData, setGeneratedData] = useState<any>(null);
|
|
||||||
const [generateSuccessModalVisible, setGenerateSuccessModalVisible] = useState(false);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const currentUser = authApi.getCurrentUser();
|
const currentUser = authApi.getCurrentUser();
|
||||||
const isAdmin = currentUser?.role === 'admin';
|
const isAdmin = currentUser?.role === 'admin';
|
||||||
|
|
||||||
const colorPresets = [
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
'#000000',
|
const [loading, setLoading] = useState(true);
|
||||||
'#165DFF',
|
const [page, setPage] = useState(1);
|
||||||
'#52C41A',
|
const [limit, setLimit] = useState(10);
|
||||||
'#FAAD14',
|
const [total, setTotal] = useState(0);
|
||||||
'#FF4D4F',
|
const [search, setSearch] = useState('');
|
||||||
'#722ED1',
|
const [roleFilter, setRoleFilter] = useState<UserRole | undefined>();
|
||||||
'#EB2F96',
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
const [createVisible, setCreateVisible] = useState(false);
|
||||||
loadSerials();
|
const [createLoading, setCreateLoading] = useState(false);
|
||||||
}, [page, limit, searchTerm]);
|
const [createForm] = Form.useForm<CreateUserRequest>();
|
||||||
|
|
||||||
const handlePageChange = (newPage: number, newLimit: number) => {
|
const [editingUser, setEditingUser] = useState<User | null>(null);
|
||||||
setPage(newPage);
|
const [editLoading, setEditLoading] = useState(false);
|
||||||
setLimit(newLimit);
|
const [editForm] = Form.useForm<UpdateUserRequest>();
|
||||||
};
|
|
||||||
|
|
||||||
const loadSerials = async () => {
|
const [resetPasswordUser, setResetPasswordUser] = 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 () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const result = await employeeSerialApi.list({ page, limit, search: searchTerm || undefined });
|
const result = await usersApi.list({
|
||||||
setSerials(result.data);
|
page,
|
||||||
setTotal(result.pagination.total);
|
limit,
|
||||||
} catch (error: any) {
|
search: search || undefined,
|
||||||
message.error(error.message || '加载员工序列号列表失败');
|
role: roleFilter,
|
||||||
setSerials([]);
|
});
|
||||||
|
setUsers(result.data || []);
|
||||||
|
setTotal(result.pagination?.total || 0);
|
||||||
|
} catch (err: any) {
|
||||||
|
message.error(err?.response?.data?.message || err.message || '加载员工列表失败');
|
||||||
|
setUsers([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleGenerate = async (values: { companyName: string; position: string; employeeName: string; quantity: number }) => {
|
useEffect(() => {
|
||||||
setGenerateLoading(true);
|
loadUsers();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [page, limit, search, roleFilter]);
|
||||||
|
|
||||||
|
const handleCreate = async (values: CreateUserRequest) => {
|
||||||
|
setCreateLoading(true);
|
||||||
try {
|
try {
|
||||||
const result = await employeeSerialApi.generate(values);
|
await usersApi.create(values);
|
||||||
|
message.success('员工创建成功');
|
||||||
if (result.serials && result.serials.length > 0) {
|
setCreateVisible(false);
|
||||||
const baseUrl = window.location.origin;
|
createForm.resetFields();
|
||||||
const queryUrl = `${baseUrl}/query?serial=${result.serials[0].serialNumber}`;
|
loadUsers();
|
||||||
const qrCode = await QRCode.toDataURL(queryUrl, {
|
} catch (err: any) {
|
||||||
color: {
|
message.error(err?.response?.data?.message || err.message || '创建失败');
|
||||||
dark: qrColor,
|
|
||||||
light: '#ffffff',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
setQrCodeDataUrl(qrCode);
|
|
||||||
setGeneratedData(result);
|
|
||||||
setGenerateSuccessModalVisible(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
message.success(result.message || '生成成功');
|
|
||||||
setGenerateModalVisible(false);
|
|
||||||
generateForm.resetFields();
|
|
||||||
loadSerials();
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error(error.message || '生成失败');
|
|
||||||
} finally {
|
} finally {
|
||||||
setGenerateLoading(false);
|
setCreateLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDownloadQR = () => {
|
const openEdit = (user: User) => {
|
||||||
const link = document.createElement('a');
|
setEditingUser(user);
|
||||||
link.download = `qrcode-${generatedData?.serials?.[0]?.serialNumber}.png`;
|
|
||||||
link.href = qrCodeDataUrl;
|
|
||||||
link.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleViewQuery = () => {
|
|
||||||
if (generatedData?.serials?.[0]?.serialNumber) {
|
|
||||||
navigate(`/query?serial=${generatedData.serials[0].serialNumber}`);
|
|
||||||
setGenerateSuccessModalVisible(false);
|
|
||||||
generateForm.resetFields();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = (serial: EmployeeSerial) => {
|
|
||||||
setSelectedSerial(serial);
|
|
||||||
editForm.setFieldsValue({
|
editForm.setFieldsValue({
|
||||||
companyName: serial.companyName,
|
name: user.name,
|
||||||
position: serial.position, // 映射 position 到 position
|
email: user.email,
|
||||||
employeeName: serial.employeeName,
|
role: user.role,
|
||||||
isActive: serial.isActive,
|
|
||||||
});
|
});
|
||||||
setEditModalVisible(true);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUpdate = async (values: { companyName?: string; position?: string; employeeName?: string; isActive?: boolean }) => {
|
const handleEdit = async (values: UpdateUserRequest) => {
|
||||||
if (!selectedSerial) return;
|
if (!editingUser) return;
|
||||||
setEditLoading(true);
|
setEditLoading(true);
|
||||||
try {
|
try {
|
||||||
await employeeSerialApi.update(selectedSerial.serialNumber, {
|
await usersApi.update(editingUser.id, values);
|
||||||
companyName: values.companyName,
|
message.success('员工资料更新成功');
|
||||||
position: values.position, // 映射 position 到 position
|
setEditingUser(null);
|
||||||
employeeName: values.employeeName,
|
loadUsers();
|
||||||
isActive: values.isActive,
|
} catch (err: any) {
|
||||||
});
|
message.error(err?.response?.data?.message || err.message || '更新失败');
|
||||||
message.success('更新成功');
|
|
||||||
setEditModalVisible(false);
|
|
||||||
loadSerials();
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error(error.message || '更新失败');
|
|
||||||
} finally {
|
} finally {
|
||||||
setEditLoading(false);
|
setEditLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRevoke = async (serial: EmployeeSerial) => {
|
const handleResetPassword = async (values: { newPassword: string }) => {
|
||||||
Modal.confirm({
|
if (!resetPasswordUser) return;
|
||||||
title: '确认吊销',
|
setResetLoading(true);
|
||||||
content: `确定要吊销序列号 "${serial.serialNumber}" 吗？`,
|
|
||||||
okText: '确定',
|
|
||||||
okType: 'danger',
|
|
||||||
cancelText: '取消',
|
|
||||||
onOk: async () => {
|
|
||||||
try {
|
try {
|
||||||
await employeeSerialApi.revoke(serial.serialNumber);
|
await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
|
||||||
message.success('吊销成功');
|
message.success('密码重置成功');
|
||||||
loadSerials();
|
setResetPasswordUser(null);
|
||||||
} catch (error: any) {
|
resetForm.resetFields();
|
||||||
message.error(error.message || '吊销失败');
|
} catch (err: any) {
|
||||||
|
message.error(err?.response?.data?.message || err.message || '重置失败');
|
||||||
|
} finally {
|
||||||
|
setResetLoading(false);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (serial: EmployeeSerial) => {
|
const handleDelete = (user: User) => {
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: '确认删除',
|
title: '确认删除',
|
||||||
content: `确定要删除序列号 "${serial.serialNumber}" 吗？此操作不可恢复！`,
|
content: `确定要删除员工 "${user.username}" 吗？`,
|
||||||
okText: '确定',
|
okText: '确定',
|
||||||
okType: 'danger',
|
okType: 'danger',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
onOk: async () => {
|
onOk: async () => {
|
||||||
try {
|
try {
|
||||||
await employeeSerialApi.delete(serial.serialNumber);
|
await usersApi.delete(user.id);
|
||||||
message.success('删除成功');
|
message.success('删除成功');
|
||||||
loadSerials();
|
loadUsers();
|
||||||
} catch (error: any) {
|
} catch (err: any) {
|
||||||
message.error(error.message || '删除失败');
|
message.error(err?.response?.data?.message || err.message || '删除失败');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleViewQrCode = async (serial: EmployeeSerial) => {
|
const openAssignCode = (user: User) => {
|
||||||
setSelectedSerial(serial);
|
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 {
|
try {
|
||||||
const baseUrl = window.location.origin;
|
await employeeSerialApi.generate({
|
||||||
const result = await employeeSerialApi.generateQrCode(serial.serialNumber, `${baseUrl}/query`);
|
companyName: values.companyName,
|
||||||
if (result.qrCodeData) {
|
position: values.position,
|
||||||
const qrDataUrl = result.qrCodeData.startsWith('data:')
|
employeeName: assignUser.name,
|
||||||
? result.qrCodeData
|
quantity: values.quantity,
|
||||||
: `data:image/png;base64,${result.qrCodeData}`;
|
});
|
||||||
setQrCodeDataUrl(qrDataUrl);
|
message.success('赋码成功');
|
||||||
setQrCodeModalVisible(true);
|
setAssignUser(null);
|
||||||
}
|
assignForm.resetFields();
|
||||||
} catch (error: any) {
|
} catch (err: any) {
|
||||||
message.error(error.message || '生成二维码失败');
|
message.error(err?.response?.data?.message || err.message || '赋码失败');
|
||||||
|
} finally {
|
||||||
|
setAssignLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearch = (value: string) => {
|
const openSerials = async (user: User) => {
|
||||||
setSearchTerm(value);
|
setSerialsVisible(true);
|
||||||
setPage(1);
|
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 = [
|
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: '序列号',
|
title: '角色',
|
||||||
dataIndex: 'serialNumber',
|
dataIndex: 'role',
|
||||||
key: 'serialNumber',
|
key: 'role',
|
||||||
width: 180,
|
render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '企业名称',
|
|
||||||
dataIndex: 'companyName',
|
|
||||||
key: 'companyName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '职位',
|
|
||||||
dataIndex: 'position',
|
|
||||||
key: 'position',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '员工姓名',
|
|
||||||
dataIndex: 'employeeName',
|
|
||||||
key: 'employeeName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'isActive',
|
|
||||||
key: 'isActive',
|
|
||||||
render: (isActive: boolean) => (
|
|
||||||
<Tag color={isActive ? 'green' : 'red'}>
|
|
||||||
{isActive ? '有效' : '已吊销'}
|
|
||||||
</Tag>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建时间',
|
|
||||||
dataIndex: 'createdAt',
|
|
||||||
key: 'createdAt',
|
|
||||||
render: (date: string) => new Date(date).toLocaleString('zh-CN'),
|
|
||||||
},
|
},
|
||||||
|
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
key: 'actions',
|
key: 'actions',
|
||||||
render: (_: any, record: EmployeeSerial) => (
|
render: (_: unknown, record: User) => (
|
||||||
<Space>
|
<Space wrap>
|
||||||
<Button
|
<Button type="link" size="small" icon={<IdcardOutlined />} onClick={() => openAssignCode(record)}>
|
||||||
type="link"
|
赋码
|
||||||
size="small"
|
|
||||||
icon={<QrcodeOutlined />}
|
|
||||||
onClick={() => handleViewQrCode(record)}
|
|
||||||
>
|
|
||||||
二维码
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button type="link" size="small" onClick={() => openSerials(record)}>
|
||||||
type="link"
|
赋码记录
|
||||||
size="small"
|
</Button>
|
||||||
icon={<EditOutlined />}
|
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>
|
||||||
onClick={() => handleEdit(record)}
|
|
||||||
>
|
|
||||||
编辑
|
编辑
|
||||||
</Button>
|
</Button>
|
||||||
{record.isActive && (
|
<Button type="link" size="small" icon={<KeyOutlined />} onClick={() => setResetPasswordUser(record)}>
|
||||||
<Button
|
重置密码
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<StopOutlined />}
|
|
||||||
onClick={() => handleRevoke(record)}
|
|
||||||
>
|
|
||||||
吊销
|
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
{record.id !== currentUser?.id && (
|
||||||
<Button
|
<Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
|
||||||
type="link"
|
|
||||||
size="small"
|
|
||||||
danger
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => handleDelete(record)}
|
|
||||||
>
|
|
||||||
删除
|
删除
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
</Space>
|
</Space>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
],
|
||||||
|
[currentUser?.id]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -295,247 +261,149 @@ function EmployeeSerialsPage() {
|
|||||||
</Space>
|
</Space>
|
||||||
}
|
}
|
||||||
extra={
|
extra={
|
||||||
<Space>
|
isAdmin && (
|
||||||
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateVisible(true)}>
|
||||||
|
新建员工
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Space style={{ marginBottom: 16 }}>
|
||||||
<Input.Search
|
<Input.Search
|
||||||
placeholder="搜索序列号/企业/职位/员工"
|
placeholder="搜索用户名/姓名/邮箱"
|
||||||
allowClear
|
allowClear
|
||||||
style={{ width: 250 }}
|
style={{ width: 280 }}
|
||||||
onSearch={handleSearch}
|
onSearch={(v) => {
|
||||||
|
setPage(1);
|
||||||
|
setSearch(v);
|
||||||
|
}}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
if (!e.target.value) {
|
if (!e.target.value) {
|
||||||
handleSearch('');
|
setPage(1);
|
||||||
|
setSearch('');
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Select
|
||||||
type="primary"
|
placeholder="角色筛选"
|
||||||
icon={<PlusOutlined />}
|
allowClear
|
||||||
onClick={() => setGenerateModalVisible(true)}
|
style={{ width: 180 }}
|
||||||
>
|
value={roleFilter}
|
||||||
生成序列号
|
onChange={(v) => {
|
||||||
</Button>
|
setPage(1);
|
||||||
</Space>
|
setRoleFilter(v);
|
||||||
}
|
}}
|
||||||
>
|
options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({ value: k, label: ROLE_LABEL[k] }))}
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={serials}
|
|
||||||
rowKey="serialNumber"
|
|
||||||
loading={loading}
|
|
||||||
pagination={false}
|
|
||||||
/>
|
/>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Table columns={columns} dataSource={users} rowKey="id" loading={loading} pagination={false} />
|
||||||
<div style={{ marginTop: 16 }}>
|
<div style={{ marginTop: 16 }}>
|
||||||
<Pagination
|
<Pagination
|
||||||
current={page}
|
current={page}
|
||||||
pageSize={limit}
|
pageSize={limit}
|
||||||
total={total}
|
total={total}
|
||||||
onChange={handlePageChange}
|
onChange={(newPage, newLimit) => {
|
||||||
showSizeChanger={true}
|
setPage(newPage);
|
||||||
|
setLimit(newLimit);
|
||||||
|
}}
|
||||||
|
showSizeChanger
|
||||||
showTotal={(t) => `共计 ${t} 条记录`}
|
showTotal={(t) => `共计 ${t} 条记录`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
{isAdmin && <div style={{ marginTop: 16 }}><EmployeeAccountsPanel /></div>}
|
|
||||||
|
|
||||||
<Modal
|
<Modal title="新建员工" open={createVisible} onCancel={() => setCreateVisible(false)} footer={null} width={480}>
|
||||||
title="生成员工序列号"
|
<Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'employee' }}>
|
||||||
open={generateModalVisible}
|
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { min: 3, max: 50, message: '用户名长度 3-50' }]}>
|
||||||
onCancel={() => {
|
<Input />
|
||||||
setGenerateModalVisible(false);
|
|
||||||
generateForm.resetFields();
|
|
||||||
}}
|
|
||||||
footer={null}
|
|
||||||
width={500}
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={generateForm}
|
|
||||||
layout="vertical"
|
|
||||||
onFinish={handleGenerate}
|
|
||||||
>
|
|
||||||
<Form.Item
|
|
||||||
name="companyName"
|
|
||||||
label="企业名称"
|
|
||||||
rules={[{ required: true, message: '请输入企业名称' }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入企业名称" />
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item name="password" label="初始密码" rules={[{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少 6 位' }]}>
|
||||||
name="position"
|
<Input.Password />
|
||||||
label="职位"
|
|
||||||
rules={[{ required: true, message: '请输入职位' }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入职位" />
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
|
||||||
name="employeeName"
|
<Input />
|
||||||
label="员工姓名"
|
|
||||||
rules={[{ required: true, message: '请输入员工姓名' }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入员工姓名" />
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
<Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
|
||||||
name="quantity"
|
<Input />
|
||||||
label="生成数量"
|
</Form.Item>
|
||||||
rules={[{ required: true, message: '请输入生成数量' }]}
|
<Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
|
||||||
initialValue={1}
|
<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)} 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 />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
||||||
|
<Button onClick={() => setResetPasswordUser(null)}>取消</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%' }} />
|
<InputNumber min={1} max={1000} style={{ width: '100%' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item
|
|
||||||
label="二维码颜色"
|
|
||||||
name="qrColor"
|
|
||||||
initialValue="#000000"
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
||||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
|
||||||
{colorPresets.map((color) => (
|
|
||||||
<div
|
|
||||||
key={color}
|
|
||||||
onClick={() => setQrColor(color)}
|
|
||||||
style={{
|
|
||||||
width: '28px',
|
|
||||||
height: '28px',
|
|
||||||
backgroundColor: color,
|
|
||||||
border: qrColor === color ? '2px solid #165DFF' : '2px solid #d9d9d9',
|
|
||||||
borderRadius: '4px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.2s',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<ColorPicker
|
|
||||||
value={qrColor}
|
|
||||||
onChange={(color: Color) => {
|
|
||||||
const hexColor = color.toHexString();
|
|
||||||
setQrColor(hexColor);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
||||||
<Button onClick={() => setGenerateModalVisible(false)}>取消</Button>
|
<Button onClick={() => setAssignUser(null)}>取消</Button>
|
||||||
<Button type="primary" htmlType="submit" loading={generateLoading}>
|
<Button type="primary" htmlType="submit" loading={assignLoading}>确认赋码</Button>
|
||||||
生成
|
|
||||||
</Button>
|
|
||||||
</Space>
|
</Space>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<Modal
|
<Modal title="员工赋码记录" open={serialsVisible} onCancel={() => setSerialsVisible(false)} footer={null} width={900}>
|
||||||
title="编辑员工序列号"
|
<Table
|
||||||
open={editModalVisible}
|
rowKey="serialNumber"
|
||||||
onCancel={() => {
|
loading={serialsLoading}
|
||||||
setEditModalVisible(false);
|
dataSource={serials}
|
||||||
editForm.resetFields();
|
pagination={false}
|
||||||
}}
|
columns={[
|
||||||
footer={null}
|
{ title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
|
||||||
width={500}
|
{ title: '企业名称', dataIndex: 'companyName', key: 'companyName' },
|
||||||
>
|
{ title: '职位', dataIndex: 'position', key: 'position' },
|
||||||
<Form
|
{ title: '员工姓名', dataIndex: 'employeeName', key: 'employeeName' },
|
||||||
form={editForm}
|
{ title: '状态', dataIndex: 'isActive', key: 'isActive', render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '有效' : '已吊销'}</Tag> },
|
||||||
layout="vertical"
|
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', render: (v: string) => new Date(v).toLocaleString('zh-CN') },
|
||||||
onFinish={handleUpdate}
|
]}
|
||||||
>
|
/>
|
||||||
<Form.Item
|
|
||||||
name="companyName"
|
|
||||||
label="企业名称"
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入企业名称" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="position"
|
|
||||||
label="职位"
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入职位" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="employeeName"
|
|
||||||
label="员工姓名"
|
|
||||||
>
|
|
||||||
<Input placeholder="请输入员工姓名" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="isActive"
|
|
||||||
label="状态"
|
|
||||||
>
|
|
||||||
<Select placeholder="请选择状态">
|
|
||||||
<Select.Option value={true}>有效</Select.Option>
|
|
||||||
<Select.Option value={false}>吊销</Select.Option>
|
|
||||||
</Select>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item>
|
|
||||||
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
|
||||||
<Button onClick={() => setEditModalVisible(false)}>取消</Button>
|
|
||||||
<Button type="primary" htmlType="submit" loading={editLoading}>
|
|
||||||
保存
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
title="生成成功"
|
|
||||||
open={generateSuccessModalVisible}
|
|
||||||
onCancel={() => setGenerateSuccessModalVisible(false)}
|
|
||||||
footer={null}
|
|
||||||
width={600}
|
|
||||||
>
|
|
||||||
{generatedData && (
|
|
||||||
<div>
|
|
||||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
|
||||||
<div>
|
|
||||||
<p><strong>企业名称:</strong> {generatedData.serials?.[0]?.companyName}</p>
|
|
||||||
<p><strong>职位:</strong> {generatedData.serials?.[0]?.position}</p>
|
|
||||||
<p><strong>员工姓名:</strong> {generatedData.serials?.[0]?.employeeName}</p>
|
|
||||||
<p><strong>生成数量:</strong> {generatedData.serials?.length || 0}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{qrCodeDataUrl && (
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
|
||||||
<img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
|
|
||||||
{generatedData.serials && generatedData.serials.length > 0 && (
|
|
||||||
<p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{generatedData.serials[0].serialNumber}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Space>
|
|
||||||
<Button type="primary" onClick={handleViewQuery}>查询序列号</Button>
|
|
||||||
<Button onClick={handleDownloadQR}>下载二维码</Button>
|
|
||||||
<Button onClick={() => {
|
|
||||||
setGenerateSuccessModalVisible(false);
|
|
||||||
generateForm.resetFields();
|
|
||||||
}}>生成新的序列号</Button>
|
|
||||||
</Space>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
title="员工二维码"
|
|
||||||
open={qrCodeModalVisible}
|
|
||||||
onCancel={() => setQrCodeModalVisible(false)}
|
|
||||||
footer={null}
|
|
||||||
width={400}
|
|
||||||
>
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
|
||||||
{qrCodeDataUrl && (
|
|
||||||
<>
|
|
||||||
<img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
|
|
||||||
<p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>
|
|
||||||
{selectedSerial?.serialNumber}
|
|
||||||
</p>
|
|
||||||
<p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
|
|
||||||
{selectedSerial?.companyName} - {selectedSerial?.position} - {selectedSerial?.employeeName}
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user