任务修改回显

src/pages/supplierEvaluateManage/supplierTaskManage/components/SupplierSelectStep.tsx

@@ -1,21 +1,25 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
 import { Card, Form } from 'antd';
 import styles from '../supplierTaskManageAdd.less';
 import SupplierSelector from '@/components/SupplierSelector';
+import type { TaskAddRequest,SupplierItem } from '@/servers/types/supplierEvaluateTask';
 
 interface SupplierSelectStepProps {
-  formData: any;                    // 从父组件传递的表单数据
-  onFormDataChange: (data: any) => void;  // 表单数据变更的回调函数
-}
-
-interface SupplierItem {
-  id: string;                       // 供应商ID
-  name: string;                     // 供应商名称
-  supplierType: string;             // 供应商类型
-  [key: string]: any;               // 其他可能的字段
+  formData: Partial<TaskAddRequest>;                    // 从父组件传递的表单数据
+  onFormDataChange: (data: Partial<TaskAddRequest>) => void;  // 表单数据变更的回调函数
 }
 
 const SupplierSelectStep = forwardRef<any, SupplierSelectStepProps>(({ formData, onFormDataChange }, ref) => {
+  // 内部状态，避免直接操作formData导致循环更新
+  const [selectedSuppliers, setSelectedSuppliers] = useState<SupplierItem[]>([]);
+
+  // 当formData.selectedSuppliers更新时，同步到本地状态
+  useEffect(() => {
+    if (formData.selectedSuppliers && formData.selectedSuppliers.length > 0) {
+      setSelectedSuppliers(formData.selectedSuppliers);
+    }
+  }, [formData.selectedSuppliers]); // 只在表单ID变化时更新（编辑模式加载时）
+
   // 暴露表单方法给父组件
   useImperativeHandle(ref, () => ({
     validateFields: () => {
@@ -24,23 +28,19 @@ const SupplierSelectStep = forwardRef<any, SupplierSelectStepProps>(({ formData,
     },
     getFieldsValue: () => {
       return {
-        selectedSuppliers: formData.selectedSuppliers || [],
-        supplierIds: (formData.selectedSuppliers || []).map((supplier: SupplierItem) => ({ id: supplier.id }))
+        selectedSuppliers,
+        supplierIds: selectedSuppliers.map((supplier: SupplierItem) => ({ id: supplier.id }))
       };
     },
     setFieldsValue: (values: any) => {
       if (values.selectedSuppliers) {
-        onFormDataChange({
-          ...formData,
-          selectedSuppliers: values.selectedSuppliers
-        });
+        setSelectedSuppliers(values.selectedSuppliers);
       }
     },
   }));
 
   // 处理供应商选择
   const handleSupplierSelect = (suppliers: SupplierItem[]) => {
-
     // 确保每个供应商都有evaluators字段
     const suppliersWithEvaluators = suppliers.map(supplier => ({
       ...supplier,
@@ -48,9 +48,11 @@ const SupplierSelectStep = forwardRef<any, SupplierSelectStepProps>(({ formData,
       evaluatorCount: supplier.evaluators?.length || 0  // 计算评价人员数量
     }));
 
+    // 更新本地状态
+    setSelectedSuppliers(suppliersWithEvaluators);
 
+    // 通知父组件
     onFormDataChange({
-      ...formData,
       selectedSuppliers: suppliersWithEvaluators,
       supplierIds: suppliersWithEvaluators.map(supplier => ({ id: supplier.id }))
     });
@@ -61,7 +63,7 @@ const SupplierSelectStep = forwardRef<any, SupplierSelectStepProps>(({ formData,
       <Card title="供应商选择" bordered={false} className="inner-card">
         <SupplierSelector
           onSelect={handleSupplierSelect}
-          selectedSuppliers={formData.selectedSuppliers || []}
+          selectedSuppliers={selectedSuppliers}
         />
       </Card>
     </div>