yunhaifinance/frontend/src/pages/ProcurementPage.tsx

import React, { useCallback } from 'react';
import { Card, Typography, Button, Table, Tag, Space, Modal, Form, Input, Select, DatePicker, InputNumber, message, Row, Col, Statistic } from 'antd';
import { PlusOutlined, SearchOutlined, ShoppingOutlined } from '@ant-design/icons';
import useFormDraft from '../hooks/useFormDraft';

const { Title, Paragraph } = Typography;
const { RangePicker } = DatePicker;

const ProcurementPage: React.FC = () => {
  const [loading, setLoading] = React.useState(false);
  const [modalVisible, setModalVisible] = React.useState(false);
  const [form] = Form.useForm();

  // 表单草稿保护
  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
    form,
    storageKey: 'procurement_create',
  })

  const handleFormChange = useCallback(() => {
    saveDraft()
  }, [saveDraft])

  const columns = [
    { title: '采购单号', dataIndex: 'code', key: 'code', width: 140 },
    { title: '采购日期', dataIndex: 'date', key: 'date', width: 120 },
    { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
    { title: '物料名称', dataIndex: 'material', key: 'material' },
    { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 80 },
    { title: '单价', dataIndex: 'unitPrice', key: 'unitPrice', width: 100, render: (v: number) => `¥${v}` },
    { title: '总金额', dataIndex: 'amount', key: 'amount', width: 120, render: (v: number) => `¥${v?.toLocaleString()}` },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status', 
      width: 100,
      render: (v: string) => {
        const colors: Record<string, string> = {
          pending: 'default',
          approved: 'processing',
          received: 'success',
          rejected: 'error'
        };
        const texts: Record<string, string> = {
          pending: '待审批',
          approved: '已批准',
          received: '已入库',
          rejected: '已拒绝'
        };
        return <Tag color={colors[v]}>{texts[v]}</Tag>;
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: () => (
        <Space>
          <Button size="small" type="link">查看</Button>
          <Button size="small" type="link">审批</Button>
        </Space>
      )
    }
  ];

  const data = [
    { key: '1', code: 'PO20260318001', date: '2026-03-18', supplier: '老挝电力设备公司', material: '电缆 3x120', quantity: 1000, unitPrice: 45, amount: 45000, status: 'pending' },
    { key: '2', code: 'PO20260317002', date: '2026-03-17', supplier: '万象建材供应商', material: '钢管 DN50', quantity: 200, unitPrice: 120, amount: 24000, status: 'approved' },
    { key: '3', code: 'PO20260316003', date: '2026-03-16', supplier: '沙湾五金店', material: '螺栓 M12', quantity: 500, unitPrice: 5, amount: 2500, status: 'received' },
  ];

  const handleSubmit = () => {
    message.success('采购申请已提交');
    clearDraft()
    setModalVisible(false);
  };

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={3} style={{ marginBottom: 0 }}>采购管理</Title>
          <Paragraph type="secondary">管理采购订单和物料入库</Paragraph>
        </div>
        <Space>
          <RangePicker placeholder={['开始日期', '结束日期']} />
          <Input.Search placeholder="搜索采购单号" style={{ width: 200 }} />
          <Button type="primary" icon={<PlusOutlined />} onClick={() => {
            setModalVisible(true)
            // 检查是否有草稿，提示用户是否恢复
            setTimeout(() => {
              if (hasDraft()) {
                Modal.confirm({
                  title: '发现未完成的草稿',
                  content: '检测到上次未提交的采购信息，是否恢复？',
                  okText: '恢复草稿',
                  cancelText: '重新填写',
                  onOk: () => {
                    restoreDraft()
                  },
                  onCancel: () => {
                    clearDraft()
                    form.resetFields()
                  },
                })
              }
            }, 0)
          }}>
            新建采购
          </Button>
        </Space>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic title="待审批" value={5} prefix={<ShoppingOutlined />} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic title="已批准" value={12} valueStyle={{ color: '#1890ff' }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic title="已入库" value={28} valueStyle={{ color: '#52c41a' }} />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic title="本月采购额" value={156000} prefix="¥" />
          </Card>
        </Col>
      </Row>

      <Card>
        <Table columns={columns} dataSource={data} loading={loading} pagination={{ pageSize: 10 }} scroll={{ x: 1200 }} />
      </Card>

      <Modal
        title="新建采购申请"
        open={modalVisible}
        onCancel={() => {
          if (form.isFieldsTouched()) {
            Modal.confirm({
              title: '确认关闭',
              content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
              okText: '关闭',
              cancelText: '继续编辑',
              onOk: () => {
                saveDraft()
                setModalVisible(false)
              },
            })
          } else {
            setModalVisible(false)
          }
        }}
        onOk={handleSubmit}
        width={600}
        maskClosable={false}
      >
        <Form form={form} layout="vertical" onValuesChange={handleFormChange}>
          <Form.Item label="供应商" name="supplier" rules={[{ required: true }]}>
            <Select placeholder="选择供应商" options={[
              { value: 'supplier1', label: '老挝电力设备公司' },
              { value: 'supplier2', label: '万象建材供应商' },
              { value: 'supplier3', label: '沙湾五金店' }
            ]} />
          </Form.Item>
          <Form.Item label="物料名称" name="material" rules={[{ required: true }]}>
            <Input placeholder="请输入物料名称" />
          </Form.Item>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="数量" name="quantity" rules={[{ required: true }]}>
                <InputNumber style={{ width: '100%' }} min={1} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="单价" name="unitPrice" rules={[{ required: true }]}>
                <InputNumber style={{ width: '100%' }} min={0} precision={2} prefix="¥" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label="备注" name="remark">
            <Input.TextArea rows={3} placeholder="请输入备注说明" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ProcurementPage;