Form for real-time custom validation
After selecting the company, adjust the interface to verify in real time whether the company can join
<Form ref={form => this.form = form} initialValues={form}>
<FormRow styleName='shop'>
<FormElement
width={550}
label="添加共享公司"
>
<Form.List name="companyInfo">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey }) => (
<div key={key} style={
{
display: 'flex' }} align="baseline">
<Form.Item
name={[name, 'companyId']}
fieldKey={[fieldKey, 'fieldKey']}
rules={[
{ required: true, message: "请添加共享公司" },
() => ({
async validator(_, value) {
if (value === undefined) {
return
}
const d = { companyId: value } //改结构
if (JSON.stringify(oldData).indexOf(JSON.stringify(d)) !== -1) {
return
} else {
await that.props.ajax.get('/admin/platformCompanyShareConfig/searchByCompanyId', { companyId: value?.value, type: 1 }).then(res => {
if (res.data?.companyInfo !== null) {
return Promise.reject(new Error('该公司已加入其他共享，无法加入'));
} else {
return Promise.resolve();
}
})
return Promise.resolve();
}
},
}),
]}
>
<Select
showSearch
placeholder="请输入公司名称搜索后选择"
onSearch={this.onSearch}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
labelInValue={true}
disabled={type === "check" ? true : false}
style={
{ width: 400 }}
>
{
options?.map(item => <Option value={item.id}>{item.companyName}</Option>)
}
</Select>
</Form.Item>
{
fields.length === 1 || type == 'check' ?
<div styleName="buttonContent">{type !== "check" ? <PlusCircleOutlined styleName="dynamic-button" onClick={() => add()} /> : null} </div>
: fields.length !== name + 1 ?
<div styleName="buttonContent"><MinusCircleOutlined styleName="dynamic-button" onClick={() => remove(name)} /></div>
: fields.length === name + 1 ?
<div styleName="buttonContent">
<PlusCircleOutlined styleName="dynamic-button" onClick={() => add()} />
<MinusCircleOutlined styleName="dynamic-button" onClick={() => remove(name)} />
</div>
: null
}
</div>
)
)}
</>
)
}
</Form.List>
</FormElement>
</FormRow>
</Form>