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

frontend/src/pages/SuppliersPage.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { Table, Button, Modal, Form, Input, Select, message, Space, Tag, Card, Row, Col, Statistic } from 'antd'
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ShopOutlined, BankOutlined } from '@ant-design/icons'
 import type { ColumnsType } from 'antd/es/table'
 import FileUpload from '../components/FileUpload'
+import useFormDraft from '../hooks/useFormDraft'
 
 interface Contact {
   name: string
@@ -48,6 +49,16 @@ const SupplierPage: React.FC = () => {
   // 从 location state 中获取返回路径
   const returnTo = (location.state as { returnTo?: string })?.returnTo
 
+  // 表单草稿保护
+  const { save: saveDraft, restore: restoreDraft, clear: clearDraft, hasDraft } = useFormDraft({
+    form,
+    storageKey: 'supplier_create',
+  })
+
+  const handleFormChange = useCallback(() => {
+    saveDraft()
+  }, [saveDraft])
+
   const fetchSuppliers = async () => {
     setLoading(true)
     try {
@@ -91,23 +102,6 @@ const SupplierPage: React.FC = () => {
       )
     },
     { title: '供应类别', dataIndex: 'supply_category', key: 'supply_category', width: 120 },
-    { title: '主联系人', key: 'primary_contact', width: 100, render: (_, record) => getPrimaryContact(record.contacts || []) },
-    { 
-      title: '收款信息', 
-      key: 'payment_info', 
-      width: 200,
-      render: (_, record) => {
-        const primary = getPrimaryPaymentInfo(record.payment_infos || [])
-        if (!primary) return <Tag>未设置</Tag>
-        return (
-          <div style={{ fontSize: 12 }}>
-            <div><BankOutlined /> {primary.bank_name || '-'}</div>
-            <div>户名: {primary.account_name || '-'}</div>
-            <div>账号: {primary.bank_account ? primary.bank_account.slice(-4).padStart(primary.bank_account.length, '*') : '-'}</div>
-          </div>
-        )
-      }
-    },
     { title: '国家', dataIndex: 'country', key: 'country', width: 80, render: (country) => <Tag>{country || '-'}</Tag> },
     { title: '采购金额', dataIndex: 'total_purchase_amount', key: 'total_purchase_amount', width: 100, render: (amount) => `¥${(amount || 0).toLocaleString()}` },
     { title: '应付金额', dataIndex: 'total_payable', key: 'total_payable', width: 100, render: (amount) => <span style={{ color: amount > 0 ? '#ff4d4f' : '#52c41a' }}>¥{(amount || 0).toLocaleString()}</span> },
@@ -176,6 +170,7 @@ const SupplierPage: React.FC = () => {
       const data = await response.json()
       if (data.success) {
         message.success(editingSupplier ? '更新成功' : '创建成功')
+        clearDraft()
         setModalVisible(false)
         form.resetFields()
         setEditingSupplier(null)
@@ -234,6 +229,29 @@ const SupplierPage: React.FC = () => {
       payment_infos: []
     })
     setModalVisible(true)
+    // 检查是否有草稿，提示用户是否恢复
+    setTimeout(() => {
+      if (hasDraft()) {
+        Modal.confirm({
+          title: '发现未完成的草稿',
+          content: '检测到上次未提交的供应商信息，是否恢复？',
+          okText: '恢复草稿',
+          cancelText: '重新填写',
+          onOk: () => {
+            restoreDraft()
+          },
+          onCancel: () => {
+            clearDraft()
+            form.resetFields()
+            form.setFieldsValue({ 
+              country: 'Laos', 
+              contacts: [{ name: '', position: '', phone: '', is_primary: true }],
+              payment_infos: []
+            })
+          },
+        })
+      }
+    }, 0)
   }
   
   // 如果是从采购申请页面跳转过来的，自动打开新增供应商弹窗
@@ -265,11 +283,31 @@ const SupplierPage: React.FC = () => {
       <Modal 
         title={editingSupplier ? '编辑供应商' : '新增供应商'} 
         open={modalVisible} 
-        onCancel={() => { setModalVisible(false); form.resetFields(); setEditingSupplier(null) }} 
+        onCancel={() => {
+          if (form.isFieldsTouched()) {
+            Modal.confirm({
+              title: '确认关闭',
+              content: '表单数据尚未保存，关闭后可通过草稿恢复。确定关闭吗？',
+              okText: '关闭',
+              cancelText: '继续编辑',
+              onOk: () => {
+                saveDraft()
+                setModalVisible(false)
+                form.resetFields()
+                setEditingSupplier(null)
+              },
+            })
+          } else {
+            setModalVisible(false)
+            form.resetFields()
+            setEditingSupplier(null)
+          }
+        }} 
         onOk={() => form.submit()} 
         width={800}
+        maskClosable={false}
       >
-        <Form form={form} layout="vertical" onFinish={handleSubmit}>
+        <Form form={form} layout="vertical" onFinish={handleSubmit} onValuesChange={handleFormChange}>
           <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
             <Input placeholder="供应商名称" />
           </Form.Item>