sh/shz-admin
2
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lapuda
2026-07-03 13:19:51 +08:00
parent 9829d4db12
commit 703f0b1deb
1 changed files with 67 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/Jobfair/PublicJobFair/components/EditModal.tsx
View File

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