基于React的应用Antd的Form表单生成函数

基于我们这个组件，我们只需要输入一个数组，即可返回一个基于Antd Form的表单，数组属性为

title–表单中文名称 dataIndex–与实体类对应或表单属性名 valueType–组件类型(输入、单选、多选、时间等)

required–是否必输项 errorMessage–必输校验失败后提示的语句

import {Input, Form, DatePicker, TreeSelect, Switch, InputNumber, Radio, Select, Col} from 'antd';

const formBuilder = (data) => {
  return (data || []).map((field) => {
    const basicAttr = {
      label: field.title,
      name: field.dataIndex,
    };
    switch (field.valueType) {
      case 'datetime':
        if (field.dataIndex !== 'update_time') {
          return (
            <Form.Item {...basicAttr} key={field.dataIndex} rules={
              [{
                required: field.required,
                message: field.errorMessage
              }]
            }>
              <DatePicker showTime disabled={field.disabled} placeholder={field.errorMessage} allowClear/>
            </Form.Item>
          );
        }
        return null;
      case 'date':
        if (field.dataIndex !== 'date') {
          return (
            <Col span={field.span}>
              <Form.Item {...basicAttr} key={field.dataIndex} rules={
                [{
                  required: field.required,
                  message: field.errorMessage
                }]
              }>
                <DatePicker disabled={field.disabled} placeholder={field.errorMessage} allowClear style={{width: '100%'}}/>
              </Form.Item>
            </Col>
          );
        }
        return null;
      case 'select':
        return (
          <Col span={field.span}>
            <Form.Item {...basicAttr} key={field.dataIndex} rules={
              [{
                required: field.required,
                message: field.errorMessage
              }]
            }>
              <Select disabled={field.disabled} placeholder={field.errorMessage} allowClear style={{width: '100%'}} defaultValue={field.defaultValue}>
                {(field.data || []).map((option: any) => {
                  return (
                    <Select.Option value={option.value} key={option.value}>
                      {option.title}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        );
      case 'multiselect':
        return (
          <Col span={field.span}>
            <Form.Item {...basicAttr} key={field.dataIndex} rules={
              [{
                required: field.required,
                message: field.errorMessage
              }]
            }>
              <Select disabled={field.disabled} placeholder={field.errorMessage} allowClear style={{width: '100%'}} mode={"multiple"}>
                {(field.data || []).map((option: any) => {
                  return (
                    <Select.Option value={option.value} key={option.value}>
                      {option.title}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        );
      case 'tree':
        return (
          <Form.Item {...basicAttr} key={field.dataIndex}>
            <TreeSelect treeData={field.data} disabled={field.disabled} treeCheckable />
          </Form.Item>
        );
      case 'switch':
        return (
          <Form.Item {...basicAttr} valuePropName="checked" key={field.dataIndex}>
            <Switch disabled={field.disabled} defaultChecked />
          </Form.Item>
        );
      case 'number':
        return (
          <Form.Item {...basicAttr} key={field.dataIndex}>
            <InputNumber disabled={field.disabled} />
          </Form.Item>
        );
      case 'textarea':
          return (
            <Col span={field.span}>
              <Form.Item {...basicAttr} key={field.dataIndex}  rules={
                [{
                  required: field.required,
                  message: field.errorMessage
                }]
              }>
                <Input.TextArea disabled={field.disabled} placeholder={field.errorMessage} allowClear style={{width: '100%'}}/>
              </Form.Item>
            </Col>
        );
      case 'radio':
          return (
            <Col span={field.span}>
              <Form.Item {...basicAttr} key={field.dataIndex}>
                <Radio.Group buttonStyle="solid" defaultValue={field.data[0]?.value} style={{width: '100%'}}>
                  {(field.data || []).map((item: any) => {
                    return <Radio.Button value={item.value}>{item.title}</Radio.Button>;
                  })}
                </Radio.Group>
              </Form.Item>
            </Col>
        );
      case 'radio2':
        return (
          <Col span={field.span}>
            <Form.Item {...basicAttr} key={field.dataIndex}>
              <Radio.Group buttonStyle="solid" defaultValue={field.defaultValue} style={{width: '100%'}}>
                {(field.data || []).map((item: any) => {
                  return <Radio value={item.value}>{item.title}</Radio>;
                })}
              </Radio.Group>
            </Form.Item>
          </Col>
      );
      case 'parent':
        return (
          <Form.Item {...basicAttr} key={field.dataIndex}>
            <TreeSelect
              showSearch
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
              treeData={field.data}
              placeholder="Please select"
              treeDefaultExpandAll
              allowClear
            />
          </Form.Item>
        );
      default:
        return (
          <Col span={field.span}>
            <Form.Item {...basicAttr} key={field.dataIndex} rules={
              [{
                required: field.required,
                message: field.errorMessage
              }]}>
              <Input disabled={field.disabled} placeholder={field.errorMessage} allowClear style={{width: '100%'}} defaultValue={field.defaultValue}/>
            </Form.Item>
          </Col>

        );
    }
  });
};

export default formBuilder;