Remove Generate.tsx

src/pages/EmployeeSerials.tsx

@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Card, Table, Input, Button, Space, message, Modal, Tag, Form, Select, InputNumber, Pagination } from 'antd';
+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() {
@@ -20,6 +23,20 @@ function EmployeeSerialsPage() {
   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();
@@ -48,6 +65,21 @@ function EmployeeSerialsPage() {
     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();
@@ -59,6 +91,21 @@ function EmployeeSerialsPage() {
     }
   };
 
+  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({
@@ -324,6 +371,38 @@ function EmployeeSerialsPage() {
           >
             <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>
@@ -388,6 +467,45 @@ function EmployeeSerialsPage() {
         </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}