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 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 moment from 'moment';
import { useIntl, FormattedMessage } from 'umi'; import { useIntl, FormattedMessage } from 'umi';
import { getAllAnnualTemplates } from '@/servers/api/supplierAnnual'; import { getAllAnnualTemplates,getAnnualTemplateDetail } from '@/servers/api/supplierAnnual';
import CategorySelector from '@/components/CategorySelector'; import CategorySelector from '@/components/CategorySelector';
import styles from '../supplierAnnualTaskManageAdd.less'; import styles from '../supplierAnnualTaskManageAdd.less';
import { CategoryLimitationType } from '@/dicts/supplierTemplateDict'; 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;
// 判断是否显示品类选择器 // 处理模板选择 将模板的是否限制品类,和品类id赋值
const shouldShowCategorySelector = useCallback(() => { const handleTemplateSelect = async (templateId: string) => {
const categoryLimitation = taskFormData.categoryLimitation; const res = await getAnnualTemplateDetail(templateId);
return categoryLimitation === CategoryLimitationType.LIMITED; if (res.success && res.data) {
}, [taskFormData]); // 更新表单数据
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 ( return (
<div className={styles.basicInfoStep}> <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={form} form={form}
layout="vertical" layout="vertical"
@ -108,9 +126,14 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label="年审主题" label="年审主题"
name="annualreviewTheme" 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> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@ -121,11 +144,13 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
normalize={(value) => value && value.format('YYYY')} normalize={(value) => value && value.format('YYYY')}
rules={[{ required: true, message: "请选择年审年份" }]} rules={[{ required: true, message: '请选择年审年份' }]}
> >
<DatePicker <DatePicker
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.year.placeholder' })} placeholder={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.year.placeholder',
})}
picker="year" picker="year"
/> />
</Form.Item> </Form.Item>
@ -137,7 +162,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label="年审开始时间" label="年审开始时间"
name="startTime" name="startTime"
rules={[{ required: true, message: "请选择年审开始时间" }]} rules={[{ required: true, message: '请选择年审开始时间' }]}
getValueProps={(value) => ({ getValueProps={(value) => ({
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
@ -146,7 +171,9 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<DatePicker <DatePicker
style={{ width: '100%' }} style={{ width: '100%' }}
format="YYYY-MM-DD" format="YYYY-MM-DD"
placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.startTime.placeholder' })} placeholder={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.startTime.placeholder',
})}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
@ -154,7 +181,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label="年审结束时间" label="年审结束时间"
name="endTime" name="endTime"
rules={[{ required: true, message: "请选择年审结束时间" }]} rules={[{ required: true, message: '请选择年审结束时间' }]}
getValueProps={(value) => ({ getValueProps={(value) => ({
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
@ -163,7 +190,9 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<DatePicker <DatePicker
style={{ width: '100%' }} style={{ width: '100%' }}
format="YYYY-MM-DD" format="YYYY-MM-DD"
placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.endTime.placeholder' })} placeholder={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.endTime.placeholder',
})}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
@ -172,9 +201,18 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation' })} label={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.categoryLimitation',
})}
name="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.Group>
<Radio value={CategoryLimitationType.UNIVERSAL}> <Radio value={CategoryLimitationType.UNIVERSAL}>
@ -186,12 +224,21 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
</Col> </Col>
{shouldShowCategorySelector() && ( {showCategorySelector && (
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.category' })} label={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.category',
})}
name="categoryId" 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} /> <CategorySelector multiple={false} />
</Form.Item> </Form.Item>
@ -202,15 +249,27 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Row gutter={24}> <Row gutter={24}>
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.template' })} label={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.template',
})}
name="templateId" 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 <Select
placeholder={intl.formatMessage({ id: 'supplierAnnualTaskManage.basicInfoStep.template.placeholder' })} placeholder={intl.formatMessage({
id: 'supplierAnnualTaskManage.basicInfoStep.template.placeholder',
})}
style={{ width: '100%' }} style={{ width: '100%' }}
allowClear allowClear
loading={loading} loading={loading}
onSelect={handleTemplateSelect}
> >
{templates.map((template) => ( {templates.map((template) => (
<Option key={template.id} value={template.id}> <Option key={template.id} value={template.id}>
@ -231,7 +290,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
const ConnectedComponent = connect( const ConnectedComponent = connect(
({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({ ({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
supplierAnnualTaskManage, supplierAnnualTaskManage,
}) }),
)(BasicInfoStepComponent); )(BasicInfoStepComponent);
// 外层转发 ref 到 innerRef // 外层转发 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 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 moment from 'moment';
import { getAllTemplates } from '@/servers/api/supplierEvaluate'; import { getAllTemplates, getTemplateDetail } from '@/servers/api/supplierEvaluate';
import CategorySelector from '@/components/CategorySelector'; import CategorySelector from '@/components/CategorySelector';
import styles from '../supplierTaskManageAdd.less'; import styles from '../supplierTaskManageAdd.less';
import { CategoryLimitationType } from '@/dicts/supplierTemplateDict'; import { CategoryLimitationType } from '@/dicts/supplierTemplateDict';
@ -49,7 +49,10 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
setTemplates(response.data); setTemplates(response.data);
} }
} catch (error) { } catch (error) {
console.error(intl.formatMessage({ id: 'supplierTaskManage.message.fetchTemplatesFailed' }), error); console.error(
intl.formatMessage({ id: 'supplierTaskManage.message.fetchTemplatesFailed' }),
error,
);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -86,18 +89,36 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
payload: allValues, payload: allValues,
}); });
}; };
// 监听表单里 categoryLimitation 的当前值 判断是否显示品类选择器
const categoryLimitation = Form.useWatch('categoryLimitation', form);
const showCategorySelector = categoryLimitation === CategoryLimitationType.LIMITED;
// 判断是否显示品类选择器 // 处理模板选择 将模板的是否限制品类,和品类id赋值
const shouldShowCategorySelector = useCallback(() => { const handleTemplateSelect = async (templateId: string) => {
const categoryLimitation = taskFormData.categoryLimitation; const res = await getTemplateDetail(templateId);
return categoryLimitation === CategoryLimitationType.LIMITED; if (res.success && res.data) {
}, [taskFormData]); // 更新表单数据
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 ( return (
<div className={styles.basicInfoStep}> <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={form} form={form}
layout="vertical" layout="vertical"
@ -112,9 +133,19 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.evaluateTheme' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.evaluateTheme' })}
name="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> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@ -125,11 +156,20 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
normalize={(value) => value && value.format('YYYY')} 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 <DatePicker
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.selectYear' })} placeholder={intl.formatMessage({
id: 'supplierTaskManage.placeholder.selectYear',
})}
picker="year" picker="year"
/> />
</Form.Item> </Form.Item>
@ -141,26 +181,44 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.startTime' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.startTime' })}
name="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) => ({ getValueProps={(value) => ({
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
normalize={(value) => value && value.format('YYYY-MM-DD')} 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> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.endTime' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.endTime' })}
name="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) => ({ getValueProps={(value) => ({
value: value ? moment(value) : undefined, value: value ? moment(value) : undefined,
})} })}
normalize={(value) => value && value.format('YYYY-MM-DD')} 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> </Form.Item>
</Col> </Col>
</Row> </Row>
@ -170,7 +228,14 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.categoryLimitation' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.categoryLimitation' })}
name="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.Group>
<Radio value={CategoryLimitationType.UNIVERSAL}> <Radio value={CategoryLimitationType.UNIVERSAL}>
@ -182,12 +247,17 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
</Col> </Col>
{shouldShowCategorySelector() && ( {showCategorySelector && (
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.selectCategory' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.selectCategory' })}
name="categoryId" 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} /> <CategorySelector multiple={false} />
</Form.Item> </Form.Item>
@ -200,9 +270,22 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
<Form.Item <Form.Item
label={intl.formatMessage({ id: 'supplierTaskManage.form.selectTemplate' })} label={intl.formatMessage({ id: 'supplierTaskManage.form.selectTemplate' })}
name="templateId" 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) => ( {templates.map((template) => (
<Option key={template.id} value={template.id}> <Option key={template.id} value={template.id}>
{template.templateName} {template.templateName}
@ -222,7 +305,7 @@ const BasicInfoStepComponent = (props: BasicInfoStepProps) => {
const ConnectedComponent = connect( const ConnectedComponent = connect(
({ supplierTaskManage }: { supplierTaskManage: SupplierTaskModelState }) => ({ ({ supplierTaskManage }: { supplierTaskManage: SupplierTaskModelState }) => ({
supplierTaskManage, supplierTaskManage,
}) }),
)(BasicInfoStepComponent); )(BasicInfoStepComponent);
// 外层转发 ref 到 innerRef // 外层转发 ref 到 innerRef