formBuilder自定义单据
作者:王书硕
两部分组成:
- 创建form
- form组件
function createForm(): EntityForm {
const formScheme = {
closeDate: {
type: FieldTypeEnum.Timestamp,
initState: {
label: '关闭日期',
required: false,
visible: false,
},
},
closedReason: {
type: FieldTypeEnum.JsonObject,
referType: EN_BizReason,
initState: {
label: '关闭原因',
required: false,
visible: false,
},
},
closedReasonExplain: {
type: FieldTypeEnum.String,
initState: {
label: '关闭原因说明',
required: false,
visible: false,
},
},
};
const formBuilder = new FormBuilder();
Object.entries(formScheme).forEach(([key, value]) => {
formBuilder.appendField(key, makeField(value));
});
return formBuilder.toForm({});
}
function CloseInfoForm({ form }: { form: EntityForm }) {
return (
<MSTFormLayout form={form} columnSize={1}>
<MSTFormElement path={'closeDate'} />
<MSTFormElement path="closedReason">
<Observer>
{() => (
<Refer
entityName={EN_BizReason}
value={form.value['closedReason']}
isMulti={false}
onChange={value => {
form.select('closedReason').value = value;
}}
/>
)}
</Observer>
</MSTFormElement>
<MSTFormElement path="closedReasonExplain" />
</MSTFormLayout>
);
}