备份：大改造前的完整版本 - 修复合同细节/付款节点/文件上传/施工管理/项目保存等BUG

frontend/src/pages/ProcurementPage.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+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;
@@ -10,6 +11,16 @@ const ProcurementPage: React.FC = () => {
   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 },
@@ -60,6 +71,7 @@ const ProcurementPage: React.FC = () => {
 
   const handleSubmit = () => {
     message.success('采购申请已提交');
+    clearDraft()
     setModalVisible(false);
   };
 
@@ -73,7 +85,27 @@ const ProcurementPage: React.FC = () => {
         <Space>
           <RangePicker placeholder={['开始日期', '结束日期']} />
           <Input.Search placeholder="搜索采购单号" style={{ width: 200 }} />
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
+          <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>
@@ -109,11 +141,27 @@ const ProcurementPage: React.FC = () => {
       <Modal
         title="新建采购申请"
         open={modalVisible}
-        onCancel={() => setModalVisible(false)}
+        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">
+        <Form form={form} layout="vertical" onValuesChange={handleFormChange}>
           <Form.Item label="供应商" name="supplier" rules={[{ required: true }]}>
             <Select placeholder="选择供应商" options={[
               { value: 'supplier1', label: '老挝电力设备公司' },