liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
linxd
2025-08-08 16:32:02 +08:00
parent a524a91494
commit b0a20db908
2 changed files with 193 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/BasicInfoStep.tsx
View File

@ -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

131
src/pages/supplierEvaluateManage/supplierTaskManage/components/BasicInfoStep.tsx
View File

@ -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