基于react antd的表单显隐控制

基于react antd的表单显隐控制

显隐方法：

type FormConf = Record<string, any>;
export const defineFormConfig = (originForm: any, newForm: FormConf) => {
  if (!isArray(originForm) || !isObject(newForm)) { 
    return originForm; 
  };

  originForm.forEach((item: any) => {
    if (item?.type !== 'select' && isArray(item?.lists)) {
      defineFormConfig(item?.lists, newForm);
    }
    const conf = newForm[item?.key];
    if (isObject(conf)) {
      Object.assign(item, conf);
    }
  })
  return originForm;
}

表单中的使用：

export const COL = [
  {
    key: 'id',
    title: 'id',
    visible: true,
  },
  {
    key: 'parameterId',
    title: 'parameterId',
    disabled: true,
  },
]

<Form
  form={ form }
  initialValues={ initAddValues }
  onFinish={ handleSubmit }
  layout="vertical"
>
  {(
    defineFormConfig(COL, {
      parameterName: { disabled: modalTitle === t('edit') },
    }) || []
  ).map((item: any) => {
    const { title, required = false, disabled = false } = item;

    return (
      <Form.Item
        label={ t(title) }
        name={ title }
        rules={ [{ required: required, message: t('pleaseEnter') }] }
      >
        { title === 'parameterContent' ? <Input.TextArea /> : <Input disabled={ disabled } /> }
      </Form.Item>
    )
  }
)}
</Form>