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

frontend/src/pages/advances/AdvancesPage.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;
@@ -24,6 +25,16 @@ const AdvancesPage: React.FC = () => {
   const [currentEditingStatus, setCurrentEditingStatus] = useState<string>('');
   const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({});
 
+  // 表单草稿保护
+  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
+    form,
+    storageKey: 'advance_create',
+  });
+
+  const handleFormChange = useCallback(() => {
+    saveDraft();
+  }, [saveDraft]);
+
   useEffect(() => {
     fetchAdvances();
     fetchProjects();
@@ -81,6 +92,29 @@ const AdvancesPage: React.FC = () => {
       attachments: []
     });
     setModalVisible(true);
+    setTimeout(() => {
+      if (hasDraft()) {
+        Modal.confirm({
+          title: '发现未完成的草稿',
+          content: '检测到上次未提交的预支申请，是否恢复？',
+          okText: '恢复草稿',
+          cancelText: '重新填写',
+          onOk: () => {
+            restoreDraft();
+          },
+          onCancel: () => {
+            clearDraft();
+            form.resetFields();
+            form.setFieldsValue({
+              advance_date: dayjs(),
+              currency: 'CNY',
+              applicant: user?.name || user?.username || '当前用户',
+              attachments: []
+            });
+          },
+        });
+      }
+    }, 0);
   };
 
   const handleEdit = (record: any) => {
@@ -162,8 +196,6 @@ const AdvancesPage: React.FC = () => {
       const values = await form.validateFields();
       // 保存时使用编辑时的状态
       const saveStatus = currentEditingStatus || 'pending_edit';
-      console.log('保存操作 - 状态:', saveStatus);
-      console.log('currentEditingStatus:', currentEditingStatus);
       const data = {
         ...values,
         advance_date: values.advance_date?.format('YYYY-MM-DD'),
@@ -171,7 +203,6 @@ const AdvancesPage: React.FC = () => {
         applicant: user?.name || user?.username,
         status: saveStatus
       };
-      console.log('保存操作 - 提交的数据:', data);
       const url = editingId ? '/api/advances/' + editingId : '/api/advances';
       const method = editingId ? 'PUT' : 'POST';
       const res = await fetch(url, {
@@ -180,9 +211,9 @@ const AdvancesPage: React.FC = () => {
         body: JSON.stringify(data)
       });
       const result = await res.json();
-      console.log('保存操作 - 响应:', result);
       if (result.success) {
         message.success(editingId ? '保存成功' : '创建成功');
+        clearDraft();
         setModalVisible(false);
         fetchAdvances();
       } else {
@@ -200,7 +231,6 @@ const AdvancesPage: React.FC = () => {
       const values = await form.validateFields();
       // 提交时使用pending状态
       const saveStatus = 'pending';
-      console.log('提交操作 - 状态:', saveStatus);
       const data = {
         ...values,
         advance_date: values.advance_date?.format('YYYY-MM-DD'),
@@ -208,7 +238,6 @@ const AdvancesPage: React.FC = () => {
         applicant: user?.name || user?.username,
         status: saveStatus
       };
-      console.log('提交操作 - 提交的数据:', data);
       const url = editingId ? '/api/advances/' + editingId : '/api/advances';
       const method = editingId ? 'PUT' : 'POST';
       const res = await fetch(url, {
@@ -217,9 +246,9 @@ const AdvancesPage: React.FC = () => {
         body: JSON.stringify(data)
       });
       const result = await res.json();
-      console.log('提交操作 - 响应:', result);
       if (result.success) {
         message.success(editingId ? '提交成功' : '创建成功');
+        clearDraft();
         setModalVisible(false);
         fetchAdvances();
       } else {
@@ -334,15 +363,46 @@ const AdvancesPage: React.FC = () => {
       <Modal 
         title={editingId ? '编辑预支' : '新建预支'} 
         open={modalVisible} 
-        onCancel={() => setModalVisible(false)} 
+        onCancel={() => {
+          if (form.isFieldsTouched()) {
+            Modal.confirm({
+              title: '确认关闭',
+              content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
+              okText: '关闭',
+              cancelText: '继续编辑',
+              onOk: () => {
+                saveDraft();
+                setModalVisible(false);
+              },
+            });
+          } else {
+            setModalVisible(false);
+          }
+        }}
         footer={[
-          <Button key="cancel" onClick={() => setModalVisible(false)}>取消</Button>,
+          <Button key="cancel" onClick={() => {
+            if (form.isFieldsTouched()) {
+              Modal.confirm({
+                title: '确认关闭',
+                content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
+                okText: '关闭',
+                cancelText: '继续编辑',
+                onOk: () => {
+                  saveDraft();
+                  setModalVisible(false);
+                },
+              });
+            } else {
+              setModalVisible(false);
+            }
+          }}>取消</Button>,
           <Button key="save" onClick={handleSave}>保存</Button>,
           <Button key="submit" type="primary" onClick={handleSubmitAndSubmit}>提交</Button>
         ]} 
+        maskClosable={false}
         width={700}
       >
-        <Form form={form} layout="vertical">
+        <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>