Refactor EditModal component: improve array handling and enhance form field definitions

This commit is contained in:
2026-07-03 13:19:51 +08:00
parent 9829d4db12
commit 703f0b1deb

View File

@@ -22,21 +22,63 @@ interface EditModalProps {
onSubmit: (values: API.PublicJobFair.JobFairForm) => Promise<void>; onSubmit: (values: API.PublicJobFair.JobFairForm) => Promise<void>;
} }
/** 逗号串 -> 数组(空值返回 [''] 保证至少一行) */ const UNIT_FIELD = 'unitName';
const toArr = (s?: string): string[] => {
if (!s) return ['']; type UnitFormItem =
const arr = s.split(',').map((x) => x.trim()).filter(Boolean); | string
return arr.length ? arr : ['']; | { unitName?: string; value?: string; label?: string; name?: string }
| null
| undefined;
/** 逗号串 -> ProFormList 数组(空值保证至少一行) */
const toArr = (s?: string): { [UNIT_FIELD]: string }[] => {
if (!s) return [{ unitName: '' }];
const arr = s
.split(',')
.map((x) => x.trim())
.filter(Boolean);
return (arr.length ? arr : ['']).map((unitName) => ({ unitName }));
}; };
/** 数组 -> 逗号串(过滤空串) */ /** 数组 -> 逗号串(过滤空串) */
const toStr = (arr?: string[]): string => const toStr = (arr?: UnitFormItem[]): string =>
(arr || []).map((x) => (x || '').trim()).filter(Boolean).join(','); (arr || [])
.map((item) => {
if (item == null) return '';
if (typeof item === 'object') {
return item.unitName ?? item.value ?? item.label ?? item.name ?? '';
}
return item;
})
.map((item) => String(item).trim())
.filter(Boolean)
.join(',');
const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, onCancel, onSubmit }) => { const splitCommaText = (value?: string | string[]): string[] => {
if (Array.isArray(value)) {
return value.map((item) => String(item).trim()).filter(Boolean);
}
if (!value) return [];
return String(value)
.split(',')
.map((item) => item.trim())
.filter(Boolean);
};
const EditModal: React.FC<EditModalProps> = ({
open,
values,
jobFairTypeEnum,
onCancel,
onSubmit,
}) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [mapOpen, setMapOpen] = useState(false); const [mapOpen, setMapOpen] = useState(false);
const [locationInfo, setLocationInfo] = useState<{ address?: string; latitude?: number; longitude?: number }>({}); const [locationInfo, setLocationInfo] = useState<{
address?: string;
latitude?: number;
longitude?: number;
}>({});
const [yesNoEnum, setYesNoEnum] = useState<any>({}); const [yesNoEnum, setYesNoEnum] = useState<any>({});
const isCrossDomain = Form.useWatch('isCrossDomain', form); const isCrossDomain = Form.useWatch('isCrossDomain', form);
@@ -54,9 +96,7 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
jobFairHostUnitList: toArr(values.jobFairHostUnit), jobFairHostUnitList: toArr(values.jobFairHostUnit),
jobFairHelpUnitList: toArr(values.jobFairHelpUnit), jobFairHelpUnitList: toArr(values.jobFairHelpUnit),
jobFairOrganizeUnitList: toArr(values.jobFairOrganizeUnit), jobFairOrganizeUnitList: toArr(values.jobFairOrganizeUnit),
crossDomainCityList: values.crossDomainCities crossDomainCityList: splitCommaText(values.crossDomainCities),
? values.crossDomainCities.split(',').map((x) => x.trim()).filter(Boolean)
: [],
}); });
setLocationInfo({ setLocationInfo({
address: values.jobFairAddress, address: values.jobFairAddress,
@@ -65,9 +105,9 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
}); });
} else { } else {
form.setFieldsValue({ form.setFieldsValue({
jobFairHostUnitList: [''], jobFairHostUnitList: toArr(),
jobFairHelpUnitList: [''], jobFairHelpUnitList: toArr(),
jobFairOrganizeUnitList: [''], jobFairOrganizeUnitList: toArr(),
crossDomainCityList: [], crossDomainCityList: [],
}); });
setLocationInfo({}); setLocationInfo({});
@@ -111,8 +151,7 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
jobFairHostUnit: toStr(jobFairHostUnitList), jobFairHostUnit: toStr(jobFairHostUnitList),
jobFairHelpUnit: toStr(jobFairHelpUnitList), jobFairHelpUnit: toStr(jobFairHelpUnitList),
jobFairOrganizeUnit: toStr(jobFairOrganizeUnitList), jobFairOrganizeUnit: toStr(jobFairOrganizeUnitList),
crossDomainCities: crossDomainCities: isCrossDomain === 'y' ? toStr(crossDomainCityList) : '',
isCrossDomain === 'y' ? toStr(crossDomainCityList) : '',
}; };
await onSubmit(payload); await onSubmit(payload);
}} }}
@@ -136,11 +175,7 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
valueEnum={jobFairTypeEnum} valueEnum={jobFairTypeEnum}
rules={[{ required: true, message: '请选择招聘会类型' }]} rules={[{ required: true, message: '请选择招聘会类型' }]}
/> />
<ProFormRadio.Group <ProFormRadio.Group name="isCrossDomain" label="是否跨域" valueEnum={yesNoEnum} />
name="isCrossDomain"
label="是否跨域"
valueEnum={yesNoEnum}
/>
{isCrossDomain === 'y' && ( {isCrossDomain === 'y' && (
<ProFormSelect <ProFormSelect
name="crossDomainCityList" name="crossDomainCityList"
@@ -203,7 +238,7 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
copyIconProps={false} copyIconProps={false}
creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加主办单位' }} creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加主办单位' }}
> >
<ProFormText placeholder="请输入主办单位" /> <ProFormText name={UNIT_FIELD} placeholder="请输入主办单位" />
</ProFormList> </ProFormList>
<ProFormList <ProFormList
name="jobFairHelpUnitList" name="jobFairHelpUnitList"
@@ -212,7 +247,7 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
copyIconProps={false} copyIconProps={false}
creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加协办单位' }} creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加协办单位' }}
> >
<ProFormText placeholder="请输入协办单位" /> <ProFormText name={UNIT_FIELD} placeholder="请输入协办单位" />
</ProFormList> </ProFormList>
<ProFormList <ProFormList
name="jobFairOrganizeUnitList" name="jobFairOrganizeUnitList"
@@ -221,16 +256,21 @@ const EditModal: React.FC<EditModalProps> = ({ open, values, jobFairTypeEnum, on
copyIconProps={false} copyIconProps={false}
creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加承办单位' }} creatorButtonProps={{ position: 'bottom', creatorButtonText: '添加承办单位' }}
> >
<ProFormText placeholder="请输入承办单位" /> <ProFormText name={UNIT_FIELD} placeholder="请输入承办单位" />
</ProFormList> </ProFormList>
<ProFormText name="jobFairPhone" label="联系电话" placeholder="请输入联系电话" /> <ProFormText name="jobFairPhone" label="联系电话" placeholder="请输入联系电话" />
<ProFormTextArea name="jobFairIntroduction" label="招聘会简介" placeholder="请输入招聘会简介" /> <ProFormTextArea
name="jobFairIntroduction"
label="招聘会简介"
placeholder="请输入招聘会简介"
/>
<ProForm.Item label="地图选点"> <ProForm.Item label="地图选点">
<Button onClick={() => setMapOpen(true)}></Button> <Button onClick={() => setMapOpen(true)}></Button>
{locationInfo.latitude && ( {locationInfo.latitude && (
<div style={{ marginTop: 8, color: '#666' }}> <div style={{ marginTop: 8, color: '#666' }}>
{locationInfo.address} | {locationInfo.longitude} | {locationInfo.latitude} {locationInfo.address} | {locationInfo.longitude} |
{locationInfo.latitude}
</div> </div>
)} )}
</ProForm.Item> </ProForm.Item>