评价和年审任务新增选择模板时,将品类限制和品类回填

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
-import { Form, Input, Select, DatePicker, Row, Col, Card, Radio } from 'antd';
+import { Form, Input, Select, DatePicker, Row, Col, Card, Radio, message } from 'antd';
 import moment from 'moment';
-import { getAllTemplates } from '@/servers/api/supplierEvaluate';
+import { getAllTemplates, getTemplateDetail } from '@/servers/api/supplierEvaluate';
 import CategorySelector from '@/components/CategorySelector';
 import styles from '../supplierTaskManageAdd.less';
 import { CategoryLimitationType } from '@/dicts/supplierTemplateDict';
@@ -49,7 +49,10 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
         setTemplates(response.data);
       }
     } catch (error) {
-      console.error(intl.formatMessage({ id: 'supplierTaskManage.message.fetchTemplatesFailed' }), error);
+      console.error(
+        intl.formatMessage({ id: 'supplierTaskManage.message.fetchTemplatesFailed' }),
+        error,
+      );
     } finally {
       setLoading(false);
     }
@@ -86,18 +89,36 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
       payload: allValues,
     });
   };
+  // 监听表单里 categoryLimitation 的当前值 判断是否显示品类选择器
+  const categoryLimitation = Form.useWatch('categoryLimitation', form);
+  const showCategorySelector = categoryLimitation === CategoryLimitationType.LIMITED;
 
 
-  // 判断是否显示品类选择器
-  const shouldShowCategorySelector = useCallback(() => {
-    const categoryLimitation = taskFormData.categoryLimitation;
-    return categoryLimitation === CategoryLimitationType.LIMITED;
-  }, [taskFormData]);
-
+  // 处理模板选择 将模板的是否限制品类,和品类id赋值
+  const handleTemplateSelect = async (templateId: string) => {
+    const res = await getTemplateDetail(templateId);
+    if (res.success && res.data) {
+      // 更新表单数据
+      const formValues = {
+        ...taskFormData,
+        categoryLimitation: res.data.categoryLimitation || CategoryLimitationType.UNIVERSAL,
+        categoryId: res.data.categoryId,
+      };
+      form.setFieldsValue(formValues);
+    } else {
+      message.error(
+        intl.formatMessage({ id: 'supplierTemplateManage.message.getDetailFailed' }) || res.message,
+      );
+    }
+  };
 
   return (
     <div className={styles.basicInfoStep}>
-      <Card title={intl.formatMessage({ id: 'supplierTaskManage.card.basicInfo' })} bordered={false} className="inner-card">
+      <Card
+        title={intl.formatMessage({ id: 'supplierTaskManage.card.basicInfo' })}
+        bordered={false}
+        className="inner-card"
+      >
         <Form
           form={form}
           layout="vertical"
@@ -112,9 +133,19 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label={intl.formatMessage({ id: 'supplierTaskManage.form.evaluateTheme' })}
                 name="evaluateTheme"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.placeholder.evaluateTheme' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({
+                      id: 'supplierTaskManage.placeholder.evaluateTheme',
+                    }),
+                  },
+                ]}
               >
-                <Input placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.input' })} maxLength={50} />
+                <Input
+                  placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.input' })}
+                  maxLength={50}
+                />
               </Form.Item>
             </Col>
             <Col span={12}>
@@ -125,11 +156,20 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                   value: value ? moment(value) : undefined,
                 })}
                 normalize={(value) => value && value.format('YYYY')}
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.placeholder.selectYear' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({
+                      id: 'supplierTaskManage.placeholder.selectYear',
+                    }),
+                  },
+                ]}
               >
                 <DatePicker
                   style={{ width: '100%' }}
-                  placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.selectYear' })}
+                  placeholder={intl.formatMessage({
+                    id: 'supplierTaskManage.placeholder.selectYear',
+                  })}
                   picker="year"
                 />
               </Form.Item>
@@ -141,26 +181,44 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label={intl.formatMessage({ id: 'supplierTaskManage.form.startTime' })}
                 name="startTime"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.form.startTime' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({ id: 'supplierTaskManage.form.startTime' }),
+                  },
+                ]}
                 getValueProps={(value) => ({
                   value: value ? moment(value) : undefined,
                 })}
                 normalize={(value) => value && value.format('YYYY-MM-DD')}
               >
-                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.date' })} />
+                <DatePicker
+                  style={{ width: '100%' }}
+                  format="YYYY-MM-DD"
+                  placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.date' })}
+                />
               </Form.Item>
             </Col>
             <Col span={12}>
               <Form.Item
                 label={intl.formatMessage({ id: 'supplierTaskManage.form.endTime' })}
                 name="endTime"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.form.endTime' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({ id: 'supplierTaskManage.form.endTime' }),
+                  },
+                ]}
                 getValueProps={(value) => ({
                   value: value ? moment(value) : undefined,
                 })}
                 normalize={(value) => value && value.format('YYYY-MM-DD')}
               >
-                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.date' })} />
+                <DatePicker
+                  style={{ width: '100%' }}
+                  format="YYYY-MM-DD"
+                  placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.date' })}
+                />
               </Form.Item>
             </Col>
           </Row>
@@ -170,7 +228,14 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label={intl.formatMessage({ id: 'supplierTaskManage.form.categoryLimitation' })}
                 name="categoryLimitation"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.form.categoryLimitation' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({
+                      id: 'supplierTaskManage.form.categoryLimitation',
+                    }),
+                  },
+                ]}
               >
                 <Radio.Group>
                   <Radio value={CategoryLimitationType.UNIVERSAL}>
@@ -182,12 +247,17 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                 </Radio.Group>
               </Form.Item>
             </Col>
-            {shouldShowCategorySelector() && (
+            {showCategorySelector && (
               <Col span={12}>
                 <Form.Item
                   label={intl.formatMessage({ id: 'supplierTaskManage.form.selectCategory' })}
                   name="categoryId"
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.form.selectCategory' }) }]}
+                  rules={[
+                    {
+                      required: true,
+                      message: intl.formatMessage({ id: 'supplierTaskManage.form.selectCategory' }),
+                    },
+                  ]}
                 >
                   <CategorySelector multiple={false} />
                 </Form.Item>
@@ -200,9 +270,22 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label={intl.formatMessage({ id: 'supplierTaskManage.form.selectTemplate' })}
                 name="templateId"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierTaskManage.form.selectTemplate' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({ id: 'supplierTaskManage.form.selectTemplate' }),
+                  },
+                ]}
               >
-                <Select placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.selectTemplate' })} style={{ width: '100%' }} allowClear loading={loading}>
+                <Select
+                  placeholder={intl.formatMessage({
+                    id: 'supplierTaskManage.placeholder.selectTemplate',
+                  })}
+                  style={{ width: '100%' }}
+                  allowClear
+                  loading={loading}
+                  onSelect={handleTemplateSelect}
+                >
                   {templates.map((template) => (
                     <Option key={template.id} value={template.id}>
                       {template.templateName}
@@ -222,7 +305,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
 const ConnectedComponent = connect(
   ({ supplierTaskManage }: { supplierTaskManage: SupplierTaskModelState }) => ({
     supplierTaskManage,
-  })
+  }),
 )(BasicInfoStepComponent);
 
 // 外层转发 ref 到 innerRef