提交一下 换git仓库了

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

@@ -1,45 +1,69 @@
-import React, { useState, useEffect } from 'react';
-import { Form, Input, Select, DatePicker, Row, Col, Card } from 'antd';
+import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, DatePicker, Row, Col, Card, Radio } from 'antd';
 import moment from 'moment';
+import { getAllTemplates } from '@/servers/api/supplierEvaluate';
 import CategorySelector from '@/components/CategorySelector';
 import styles from '../supplierTaskManageAdd.less';
+import { CategoryLimitationType } from '@/dicts/supplierTemplateDict';
 
 const { Option } = Select;
 
 interface BasicInfoStepProps {
-  formData: any;
-  onFormDataChange: (data: any) => void;
+  formData: Partial<SupplierEvaluate.TaskAddRequest>;
+  onFormDataChange: (data: Partial<SupplierEvaluate.TaskAddRequest>) => void;
 }
 
 interface TemplateItem {
   id: string;
   templateName: string;
-  isUnlimitedCategory?: boolean;
+  categoryLimitation?: string;
 }
 
-const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChange }) => {
+const BasicInfoStep = forwardRef<any, BasicInfoStepProps>(({ formData, onFormDataChange }, ref) => {
   const [form] = Form.useForm();
   const [templates, setTemplates] = useState<TemplateItem[]>([]);
-  const [categoryTemplates, setCategoryTemplates] = useState<any[]>([]);
   const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>(undefined);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // 暴露表单方法给父组件
+  useImperativeHandle(ref, () => ({
+    validateFields: () => form.validateFields(),
+    getFieldsValue: () => form.getFieldsValue(),
+    setFieldsValue: (values: any) => form.setFieldsValue(values),
+  }));
+
+  // 获取模板列表
+  const fetchTemplates = async () => {
+    setLoading(true);
+    try {
+      const response = await getAllTemplates();
+      if (response.success && response.data) {
+        setTemplates(response.data);
+      } else {
+        setTemplates([
+          { id: '1', templateName: '不限品类模板', categoryLimitation: '0' },
+          { id: '2', templateName: '限制品类模板', categoryLimitation: '1' },
+        ]);
+      }
+    } catch (error) {
+      console.error('获取模板列表失败:', error);
+      // 使用模拟数据
+      setTemplates([
+        { id: '1', templateName: '不限品类模板', categoryLimitation: '0' },
+        { id: '2', templateName: '限制品类模板', categoryLimitation: '1' },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   // 获取评价模板和初始化表单数据
   useEffect(() => {
-    // 模拟API调用获取模板列表
-    const mockTemplates = [
-      { id: '1', templateName: '不限品类', isUnlimitedCategory: true },
-      { id: '2', templateName: '按品类', isUnlimitedCategory: false },
-    ];
-    setTemplates(mockTemplates);
+    fetchTemplates();
 
     // 初始化表单数据
     if (formData) {
-      const initialValues = {
-        ...formData,
-        evaluateStartTime: formData.evaluateStartTime ? moment(formData.evaluateStartTime) : undefined,
-        evaluateEndTime: formData.evaluateEndTime ? moment(formData.evaluateEndTime) : undefined,
-      };
-      form.setFieldsValue(initialValues);
+      form.setFieldsValue(formData);
 
       // 设置已选品类
       if (formData.categoryId) {
@@ -48,73 +72,61 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
     }
   }, []);
 
-  // 获取品类对应的模板数据
-  useEffect(() => {
-    if (selectedCategoryId) {
-      // 模拟API调用，根据品类ID获取对应的模板列表
-      const mockCategoryTemplates = [
-        { id: 'ct1', templateName: '硬件设备评价模板' },
-        { id: 'ct2', templateName: '备件评价模板' },
-        { id: 'ct3', templateName: '通用备件评价模板' },
-      ];
-      setCategoryTemplates(mockCategoryTemplates);
-    } else {
-      setCategoryTemplates([]);
-    }
-  }, [selectedCategoryId]);
-
-  // 检查当前选择的模板是否限制品类
-  const isTemplateUnlimitedCategory = () => {
-    const templateId = form.getFieldValue('templateId');
-    const currentTemplate = templates.find(t => t.id === templateId);
-    return currentTemplate?.isUnlimitedCategory;
-  };
-
   // 表单值变化时触发
   const handleValuesChange = (changedValues: any, allValues: any) => {
     // 处理模板变更
     if (changedValues.templateId) {
-      // 如果选择了不限品类的模板，清空品类选择和品类模板选择
-      if (isTemplateUnlimitedCategory()) {
+      const template = templates.find((t) => t.id === changedValues.templateId);
+      if (template) {
         form.setFieldsValue({
-          categoryId: undefined,
-          categoryTemplateId: undefined
+          categoryLimitation: template.categoryLimitation || '0',
         });
-        setSelectedCategoryId(undefined);
+
+        // 如果选择了不限品类的模板，清空品类选择
+        if (template.categoryLimitation === '0') {
+          form.setFieldsValue({
+            categoryId: undefined,
+          });
+          setSelectedCategoryId(undefined);
+        }
       }
     }
 
     // 处理品类变更
     if (changedValues.categoryId) {
       setSelectedCategoryId(changedValues.categoryId?.[0]);
-      form.setFieldsValue({ categoryTemplateId: undefined });
     }
 
-    // 将moment对象转换为字符串再传递
+    // 默认设置weightStatus为0
     const formattedValues = {
       ...allValues,
-      evaluateStartTime: allValues.evaluateStartTime?.format('YYYY-MM-DD'),
-      evaluateEndTime: allValues.evaluateEndTime?.format('YYYY-MM-DD'),
+      weightStatus: 0,
     };
+
     onFormDataChange(formattedValues);
   };
 
   // 年度选项生成
-  const yearOptions = () => {
+  const yearOptions = useCallback(() => {
     const currentYear = new Date().getFullYear();
-    return Array.from({ length: 11 }, (_, i) => currentYear - 5 + i).map(year => (
-      <Option key={year} value={year.toString()}>{year}</Option>
+    return Array.from({ length: 11 }, (_, i) => currentYear - 5 + i).map((year) => (
+      <Option key={year} value={year.toString()}>
+        {year}
+      </Option>
     ));
-  };
+  }, []);
 
   // 判断是否显示品类选择器
-  const shouldShowCategorySelector = () => {
-    const templateId = form.getFieldValue('templateId');
-    if (!templateId) return false;
+  const shouldShowCategorySelector = useCallback(() => {
+    const categoryLimitation = form.getFieldValue('categoryLimitation');
+    return categoryLimitation === CategoryLimitationType.LIMITED;
+  }, [form]);
 
-    const currentTemplate = templates.find(t => t.id === templateId);
-    return currentTemplate && !currentTemplate.isUnlimitedCategory;
-  };
+  // 处理品类选择变化
+  const handleCategoryChange = useCallback((value: string | string[]) => {
+    const categoryId = Array.isArray(value) ? value[0] : value;
+    setSelectedCategoryId(categoryId);
+  }, []);
 
   return (
     <div className={styles.basicInfoStep}>
@@ -123,7 +135,10 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
           form={form}
           layout="vertical"
           onValuesChange={handleValuesChange}
-          initialValues={formData}
+          initialValues={{
+            ...formData,
+            categoryLimitation: formData.categoryLimitation || '0',
+          }}
         >
           <Row gutter={24}>
             <Col span={12}>
@@ -141,7 +156,7 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
                 name="evaluateYear"
                 rules={[{ required: true, message: '请选择评价年度' }]}
               >
-                <Select placeholder="2025" style={{ width: '100%' }}>
+                <Select placeholder="请选择年度" style={{ width: '100%' }}>
                   {yearOptions()}
                 </Select>
               </Form.Item>
@@ -152,49 +167,42 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
             <Col span={12}>
               <Form.Item
                 label="评价开始时间"
-                name="evaluateStartTime"
+                name="startTime"
                 rules={[{ required: true, message: '请选择评价开始时间' }]}
+                getValueProps={(value) => ({
+                  value: value ? moment(value) : undefined,
+                })}
+                normalize={(value) => value && value.format('YYYY-MM-DD')}
               >
-                <DatePicker
-                  style={{ width: '100%' }}
-                  format="YYYY-MM-DD"
-                  placeholder="年/月/日"
-                />
+                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="年/月/日" />
               </Form.Item>
             </Col>
             <Col span={12}>
               <Form.Item
                 label="评价结束时间"
-                name="evaluateEndTime"
+                name="endTime"
                 rules={[{ required: true, message: '请选择评价结束时间' }]}
+                getValueProps={(value) => ({
+                  value: value ? moment(value) : undefined,
+                })}
+                normalize={(value) => value && value.format('YYYY-MM-DD')}
               >
-                <DatePicker
-                  style={{ width: '100%' }}
-                  format="YYYY-MM-DD"
-                  placeholder="年/月/日"
-                />
+                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="年/月/日" />
               </Form.Item>
             </Col>
           </Row>
 
-          <Row gutter={24} align="middle">
+          <Row gutter={24}>
             <Col span={12}>
               <Form.Item
-                label="适用评价模板"
-                name="templateId"
-                rules={[{ required: true, message: '请选择适用评价模板' }]}
+                label="品类限制类型"
+                name="categoryLimitation"
+                rules={[{ required: true, message: '请选择品类限制类型' }]}
               >
-                <Select
-                  placeholder="请选择"
-                  style={{ width: '100%' }}
-                  allowClear
-                >
-                  {templates.map(template => (
-                    <Option key={template.id} value={template.id}>
-                      {template.templateName}
-                    </Option>
-                  ))}
-                </Select>
+                <Radio.Group>
+                  <Radio value={CategoryLimitationType.UNIVERSAL}>通用不限品类</Radio>
+                  <Radio value={CategoryLimitationType.LIMITED}>限制品类</Radio>
+                </Radio.Group>
               </Form.Item>
             </Col>
             {shouldShowCategorySelector() && (
@@ -204,16 +212,7 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
                   name="categoryId"
                   rules={[{ required: true, message: '请选择品类' }]}
                 >
-                  <CategorySelector
-                    onChange={(values: string[]) => {
-                      const categoryId = values?.[0];
-                      setSelectedCategoryId(categoryId);
-
-                      if (!categoryId) {
-                        form.setFieldsValue({ categoryTemplateId: undefined });
-                      }
-                    }}
-                  />
+                  <CategorySelector onChange={handleCategoryChange} />
                 </Form.Item>
               </Col>
             )}
@@ -223,15 +222,11 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
             <Col span={12}>
               <Form.Item
                 label="选择模板"
-                name="categoryTemplateId"
-                rules={[{ required: true, message: '请选择模板' }]}
+                name="templateId"
+                rules={[{ required: true, message: '请选择适用评价模板' }]}
               >
-                <Select
-                  placeholder="请选择"
-                  style={{ width: '100%' }}
-                  allowClear
-                >
-                  {categoryTemplates.map(template => (
+                <Select placeholder="请选择" style={{ width: '100%' }} allowClear loading={loading}>
+                  {templates.map((template) => (
                     <Option key={template.id} value={template.id}>
                       {template.templateName}
                     </Option>
@@ -244,6 +239,6 @@ const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChang
       </Card>
     </div>
   );
-};
+});
 
 export default BasicInfoStep;