534 lines
16 KiB
TypeScript
534 lines
16 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Card, Table, Input, Button, Space, message, Modal, Tag, Form, Select, InputNumber, Pagination, ColorPicker } from 'antd';
|
|
import { UserOutlined, PlusOutlined, StopOutlined, EditOutlined, QrcodeOutlined, DeleteOutlined } from '@ant-design/icons';
|
|
import { employeeSerialApi } from '@/services/api';
|
|
import QRCode from 'qrcode';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import type { Color } from 'antd/es/color-picker';
|
|
import type { EmployeeSerial } from '@/types';
|
|
|
|
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 colorPresets = [
|
|
'#000000',
|
|
'#165DFF',
|
|
'#52C41A',
|
|
'#FAAD14',
|
|
'#FF4D4F',
|
|
'#722ED1',
|
|
'#EB2F96',
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadSerials();
|
|
}, [page, limit, searchTerm]);
|
|
|
|
const handlePageChange = (newPage: number, newLimit: number) => {
|
|
setPage(newPage);
|
|
setLimit(newLimit);
|
|
};
|
|
|
|
const loadSerials = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await employeeSerialApi.list({ page, limit, search: searchTerm || undefined });
|
|
setSerials(result.data);
|
|
setTotal(result.pagination.total);
|
|
} catch (error: any) {
|
|
message.error(error.message || '加载员工序列号列表失败');
|
|
setSerials([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleGenerate = async (values: { companyName: string; department: string; employeeName: string; quantity: number }) => {
|
|
setGenerateLoading(true);
|
|
try {
|
|
const result = await employeeSerialApi.generate(values);
|
|
|
|
if (result.serials && result.serials.length > 0) {
|
|
const baseUrl = window.location.origin;
|
|
const queryUrl = `${baseUrl}/query?serial=${result.serials[0].serialNumber}`;
|
|
const qrCode = await QRCode.toDataURL(queryUrl, {
|
|
color: {
|
|
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 {
|
|
setGenerateLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDownloadQR = () => {
|
|
const link = document.createElement('a');
|
|
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({
|
|
companyName: serial.companyName,
|
|
department: serial.department,
|
|
employeeName: serial.employeeName,
|
|
isActive: serial.isActive,
|
|
});
|
|
setEditModalVisible(true);
|
|
};
|
|
|
|
const handleUpdate = async (values: { companyName?: string; department?: string; employeeName?: string; isActive?: boolean }) => {
|
|
if (!selectedSerial) return;
|
|
setEditLoading(true);
|
|
try {
|
|
await employeeSerialApi.update(selectedSerial.serialNumber, values);
|
|
message.success('更新成功');
|
|
setEditModalVisible(false);
|
|
loadSerials();
|
|
} catch (error: any) {
|
|
message.error(error.message || '更新失败');
|
|
} finally {
|
|
setEditLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRevoke = async (serial: EmployeeSerial) => {
|
|
Modal.confirm({
|
|
title: '确认吊销',
|
|
content: `确定要吊销序列号 "${serial.serialNumber}" 吗？`,
|
|
okText: '确定',
|
|
okType: 'danger',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
try {
|
|
await employeeSerialApi.revoke(serial.serialNumber);
|
|
message.success('吊销成功');
|
|
loadSerials();
|
|
} catch (error: any) {
|
|
message.error(error.message || '吊销失败');
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleDelete = async (serial: EmployeeSerial) => {
|
|
Modal.confirm({
|
|
title: '确认删除',
|
|
content: `确定要删除序列号 "${serial.serialNumber}" 吗？此操作不可恢复！`,
|
|
okText: '确定',
|
|
okType: 'danger',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
try {
|
|
await employeeSerialApi.delete(serial.serialNumber);
|
|
message.success('删除成功');
|
|
loadSerials();
|
|
} catch (error: any) {
|
|
message.error(error.message || '删除失败');
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleViewQrCode = async (serial: EmployeeSerial) => {
|
|
setSelectedSerial(serial);
|
|
try {
|
|
const baseUrl = window.location.origin;
|
|
const result = await employeeSerialApi.generateQrCode(serial.serialNumber, `${baseUrl}/query`);
|
|
if (result.qrCodeData) {
|
|
const qrDataUrl = result.qrCodeData.startsWith('data:')
|
|
? result.qrCodeData
|
|
: `data:image/png;base64,${result.qrCodeData}`;
|
|
setQrCodeDataUrl(qrDataUrl);
|
|
setQrCodeModalVisible(true);
|
|
}
|
|
} catch (error: any) {
|
|
message.error(error.message || '生成二维码失败');
|
|
}
|
|
};
|
|
|
|
const handleSearch = (value: string) => {
|
|
setSearchTerm(value);
|
|
setPage(1);
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: '序列号',
|
|
dataIndex: 'serialNumber',
|
|
key: 'serialNumber',
|
|
width: 180,
|
|
},
|
|
{
|
|
title: '企业名称',
|
|
dataIndex: 'companyName',
|
|
key: 'companyName',
|
|
},
|
|
{
|
|
title: '部门',
|
|
dataIndex: 'department',
|
|
key: 'department',
|
|
},
|
|
{
|
|
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: '操作',
|
|
key: 'actions',
|
|
render: (_: any, record: EmployeeSerial) => (
|
|
<Space>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
icon={<QrcodeOutlined />}
|
|
onClick={() => handleViewQrCode(record)}
|
|
>
|
|
二维码
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
icon={<EditOutlined />}
|
|
onClick={() => handleEdit(record)}
|
|
>
|
|
编辑
|
|
</Button>
|
|
{record.isActive && (
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
danger
|
|
icon={<StopOutlined />}
|
|
onClick={() => handleRevoke(record)}
|
|
>
|
|
吊销
|
|
</Button>
|
|
)}
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
danger
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => handleDelete(record)}
|
|
>
|
|
删除
|
|
</Button>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Card
|
|
title={
|
|
<Space>
|
|
<UserOutlined />
|
|
<span>员工管理</span>
|
|
</Space>
|
|
}
|
|
extra={
|
|
<Space>
|
|
<Input.Search
|
|
placeholder="搜索序列号/企业/部门/员工"
|
|
allowClear
|
|
style={{ width: 250 }}
|
|
onSearch={handleSearch}
|
|
onChange={(e) => {
|
|
if (!e.target.value) {
|
|
handleSearch('');
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => setGenerateModalVisible(true)}
|
|
>
|
|
生成序列号
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={serials}
|
|
rowKey="serialNumber"
|
|
loading={loading}
|
|
pagination={false}
|
|
/>
|
|
<div style={{ marginTop: 16 }}>
|
|
<Pagination
|
|
current={page}
|
|
pageSize={limit}
|
|
total={total}
|
|
onChange={handlePageChange}
|
|
showSizeChanger={true}
|
|
showTotal={(t) => `共计 ${t} 条记录`}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Modal
|
|
title="生成员工序列号"
|
|
open={generateModalVisible}
|
|
onCancel={() => {
|
|
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
|
|
name="department"
|
|
label="部门"
|
|
rules={[{ required: true, message: '请输入部门' }]}
|
|
>
|
|
<Input placeholder="请输入部门" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="employeeName"
|
|
label="员工姓名"
|
|
rules={[{ required: true, message: '请输入员工姓名' }]}
|
|
>
|
|
<Input placeholder="请输入员工姓名" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="quantity"
|
|
label="生成数量"
|
|
rules={[{ required: true, message: '请输入生成数量' }]}
|
|
initialValue={1}
|
|
>
|
|
<InputNumber min={1} max={1000} style={{ width: '100%' }} />
|
|
</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>
|
|
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
|
<Button onClick={() => setGenerateModalVisible(false)}>取消</Button>
|
|
<Button type="primary" htmlType="submit" loading={generateLoading}>
|
|
生成
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title="编辑员工序列号"
|
|
open={editModalVisible}
|
|
onCancel={() => {
|
|
setEditModalVisible(false);
|
|
editForm.resetFields();
|
|
}}
|
|
footer={null}
|
|
width={500}
|
|
>
|
|
<Form
|
|
form={editForm}
|
|
layout="vertical"
|
|
onFinish={handleUpdate}
|
|
>
|
|
<Form.Item
|
|
name="companyName"
|
|
label="企业名称"
|
|
>
|
|
<Input placeholder="请输入企业名称" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="department"
|
|
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]?.department}</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?.department} - {selectedSerial?.employeeName}
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EmployeeSerialsPage; |