From b0a20db908e4a6545e95283c31927f9d7aa9616c Mon Sep 17 00:00:00 2001
From: linxd <544554903@qq.com>
Date: Fri, 8 Aug 2025 16:32:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E4=BB=B7=E5=92=8C=E5=B9=B4=E5=AE=A1?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=96=B0=E5=A2=9E=E9=80=89=E6=8B=A9=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E6=97=B6,=E5=B0=86=E5=93=81=E7=B1=BB=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E5=92=8C=E5=93=81=E7=B1=BB=E5=9B=9E=E5=A1=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BasicInfoStep.tsx              | 113 +++++++++++----
 .../components/BasicInfoStep.tsx              | 131 ++++++++++++++----
 2 files changed, 193 insertions(+), 51 deletions(-)

diff --git a/src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/BasicInfoStep.tsx b/src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/BasicInfoStep.tsx
index bf12296..3bddf08 100644
--- a/src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/BasicInfoStep.tsx
+++ b/src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/BasicInfoStep.tsx
@@ -1,8 +1,8 @@
 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 { useIntl, FormattedMessage } from 'umi';
-import { getAllAnnualTemplates } from '@/servers/api/supplierAnnual';
+import { getAllAnnualTemplates,getAnnualTemplateDetail } from '@/servers/api/supplierAnnual';
 import CategorySelector from '@/components/CategorySelector';
 import styles from '../supplierAnnualTaskManageAdd.less';
 import { CategoryLimitationType } from '@/dicts/supplierTemplateDict';
@@ -83,17 +83,35 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
     });
   };
 
+  // 监听表单里 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 getAnnualTemplateDetail(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: 'supplierAnnualTaskManage.basicInfoStep.title' })} bordered={false} className="inner-card">
+      <Card
+        title={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.title' })}
+        bordered={false}
+        className="inner-card"
+      >
         <Form
           form={form}
           layout="vertical"
@@ -108,9 +126,14 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label="年审主题"
                 name="annualreviewTheme"
-                rules={[{ required: true, message: "请输入年审主题" }]}
+                rules={[{ required: true, message: '请输入年审主题' }]}
               >
-                <Input placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.theme.placeholder' })} maxLength={50} />
+                <Input
+                  placeholder={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.theme.placeholder',
+                  })}
+                  maxLength={50}
+                />
               </Form.Item>
             </Col>
             <Col span={12}>
@@ -121,11 +144,13 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                   value: value ? moment(value) : undefined,
                 })}
                 normalize={(value) => value && value.format('YYYY')}
-                rules={[{ required: true, message: "请选择年审年份" }]}
+                rules={[{ required: true, message: '请选择年审年份' }]}
               >
-                  <DatePicker
+                <DatePicker
                   style={{ width: '100%' }}
-                  placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.year.placeholder' })}
+                  placeholder={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.year.placeholder',
+                  })}
                   picker="year"
                 />
               </Form.Item>
@@ -137,7 +162,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label="年审开始时间"
                 name="startTime"
-                rules={[{ required: true, message: "请选择年审开始时间" }]}
+                rules={[{ required: true, message: '请选择年审开始时间' }]}
                 getValueProps={(value) => ({
                   value: value ? moment(value) : undefined,
                 })}
@@ -146,7 +171,9 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                 <DatePicker
                   style={{ width: '100%' }}
                   format="YYYY-MM-DD"
-                  placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.startTime.placeholder' })}
+                  placeholder={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.startTime.placeholder',
+                  })}
                 />
               </Form.Item>
             </Col>
@@ -154,7 +181,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
               <Form.Item
                 label="年审结束时间"
                 name="endTime"
-                rules={[{ required: true, message: "请选择年审结束时间" }]}
+                rules={[{ required: true, message: '请选择年审结束时间' }]}
                 getValueProps={(value) => ({
                   value: value ? moment(value) : undefined,
                 })}
@@ -163,7 +190,9 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                 <DatePicker
                   style={{ width: '100%' }}
                   format="YYYY-MM-DD"
-                  placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.endTime.placeholder' })}
+                  placeholder={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.endTime.placeholder',
+                  })}
                 />
               </Form.Item>
             </Col>
@@ -172,9 +201,18 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
           <Row gutter={24}>
             <Col span={12}>
               <Form.Item
-                label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation' })}
+                label={intl.formatMessage({
+                  id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation',
+                })}
                 name="categoryLimitation"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation.required' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({
+                      id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation.required',
+                    }),
+                  },
+                ]}
               >
                 <Radio.Group>
                   <Radio value={CategoryLimitationType.UNIVERSAL}>
@@ -186,12 +224,21 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
                 </Radio.Group>
               </Form.Item>
             </Col>
-            {shouldShowCategorySelector() && (
+            {showCategorySelector && (
               <Col span={12}>
                 <Form.Item
-                  label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.category' })}
+                  label={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.category',
+                  })}
                   name="categoryId"
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.category.required' }) }]}
+                  rules={[
+                    {
+                      required: true,
+                      message: intl.formatMessage({
+                        id: 'supplierAnnualTaskManage.basicInfoStep.category.required',
+                      }),
+                    },
+                  ]}
                 >
                   <CategorySelector multiple={false} />
                 </Form.Item>
@@ -202,15 +249,27 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
           <Row gutter={24}>
             <Col span={12}>
               <Form.Item
-                label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.template' })}
+                label={intl.formatMessage({
+                  id: 'supplierAnnualTaskManage.basicInfoStep.template',
+                })}
                 name="templateId"
-                rules={[{ required: true, message: intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.template.required' }) }]}
+                rules={[
+                  {
+                    required: true,
+                    message: intl.formatMessage({
+                      id: 'supplierAnnualTaskManage.basicInfoStep.template.required',
+                    }),
+                  },
+                ]}
               >
                 <Select
-                  placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.template.placeholder' })}
+                  placeholder={intl.formatMessage({
+                    id: 'supplierAnnualTaskManage.basicInfoStep.template.placeholder',
+                  })}
                   style={{ width: '100%' }}
                   allowClear
                   loading={loading}
+                  onSelect={handleTemplateSelect}
                 >
                   {templates.map((template) => (
                     <Option key={template.id} value={template.id}>
@@ -231,7 +290,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
 const ConnectedComponent = connect(
   ({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
     supplierAnnualTaskManage,
-  })
+  }),
 )(BasicInfoStepComponent);
 
 // 外层转发 ref 到 innerRef
diff --git a/src/pages/supplierEvaluateManage/supplierTaskManage/components/BasicInfoStep.tsx b/src/pages/supplierEvaluateManage/supplierTaskManage/components/BasicInfoStep.tsx
index 0293eb8..44e999a 100644
--- a/src/pages/supplierEvaluateManage/supplierTaskManage/components/BasicInfoStep.tsx
+++ b/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