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

frontend/src/pages/PaymentRequestsPage.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Table, Button, Card, Space, Tag, Modal, Form, Input, InputNumber, Select, DatePicker, message, Descriptions, Image, Divider, Tabs } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, UndoOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { useAuthStore } from '../store/authStore';
 import FileUpload from '../components/FileUpload';
+import useFormDraft from '../hooks/useFormDraft';
 
 const { Option } = Select;
 const { TextArea } = Input;
@@ -69,6 +70,16 @@ const PaymentRequestsPage: React.FC = () => {
   const [selectedRecord, setSelectedRecord] = useState<any>(null);
   const [form] = Form.useForm();
   const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({});
+
+  // 表单草稿保护
+  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
+    form,
+    storageKey: 'payment_request_create',
+  });
+
+  const handleFormChange = useCallback(() => {
+    saveDraft();
+  }, [saveDraft]);
   
   // 数据列表
   const [subcontractors, setSubcontractors] = useState<PayeeEntity[]>([]);
@@ -212,6 +223,31 @@ const PaymentRequestsPage: React.FC = () => {
       expense_type: 'company'
     });
     setModalVisible(true);
+    setTimeout(() => {
+      if (hasDraft()) {
+        Modal.confirm({
+          title: '发现未完成的草稿',
+          content: '检测到上次未提交的付款申请，是否恢复？',
+          okText: '恢复草稿',
+          cancelText: '重新填写',
+          onOk: () => {
+            restoreDraft();
+          },
+          onCancel: () => {
+            clearDraft();
+            form.resetFields();
+            form.setFieldsValue({
+              application_date: dayjs(),
+              currency: 'CNY',
+              applicant: user?.name || user?.username || '当前用户',
+              attachments: [],
+              payee_type: 'other',
+              expense_type: 'company'
+            });
+          },
+        });
+      }
+    }, 0);
   };
 
   const handleEdit = (record: any) => {
@@ -307,6 +343,7 @@ const PaymentRequestsPage: React.FC = () => {
       const result = await res.json();
       if (result.success) {
         message.success(editingId ? '更新成功' : '创建成功');
+        clearDraft();
         setModalVisible(false);
         fetchRequests();
       } else {
@@ -432,8 +469,23 @@ const PaymentRequestsPage: React.FC = () => {
         </Tabs>
       </Card>
 
-      <Modal title={editingId ? '编辑付款申请' : '新建付款申请'} open={modalVisible} onOk={handleSubmit} onCancel={() => setModalVisible(false)} width={900}>
-        <Form form={form} layout="vertical">
+      <Modal title={editingId ? '编辑付款申请' : '新建付款申请'} open={modalVisible} onOk={handleSubmit} onCancel={() => {
+        if (form.isFieldsTouched()) {
+          Modal.confirm({
+            title: '确认关闭',
+            content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
+            okText: '关闭',
+            cancelText: '继续编辑',
+            onOk: () => {
+              saveDraft();
+              setModalVisible(false);
+            },
+          });
+        } else {
+          setModalVisible(false);
+        }
+      }} maskClosable={false} width={900}>
+        <Form form={form} layout="vertical" onValuesChange={handleFormChange}>
           <Form.Item name="applicant" label="申请人">
             <Input disabled style={{ color: 'rgba(0,0,0,0.85)', backgroundColor: '#f5f5f5' }} />
           </Form.Item>