estateagents-admin-manager/src/components/XForm/WrapperItem.jsx

import React from 'react';
import {
  Form,
  Input,
  InputNumber,
  Checkbox,
  Radio,
  DatePicker,
  TimePicker,
  Select,
} from 'antd';
import ImageUploader from './ImageUpload';

const Item = Form.Item
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker

const FieldTypes = {
  Text: 'Text',
  Password: 'Password',
  Number: 'Number',
  Switch: 'Switch',
  TimePicker: 'TimePicker',
  DatePicker: 'DatePicker',
  RangePicker: 'RangePicker',
  MonthPicker: 'MonthPicker',
  Select: 'Select',
  ImageUploader: 'ImageUploader',
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

const WrapperItem = (props) => {
  const {
    form,
    label,
    name,
    type,
    placeholder,
    render,
    rules,
    value,
    dict,
    action,
    props: fieldProps,
    ...restProps
  } = props;

  const { getFieldDecorator } = form || {};

  let config = {
    rules,
    initialValue: value
  }

  if (type === FieldTypes.Switch) {
    config = {
      ...config,
      valuePropName: 'checked',
    };
  }
  
  if (type === FieldTypes.ImageUploader) {
    config = {
      ...config,
      getValueFromEvent: x => x,
    };
  }

  // 没有类型与组件, 生成隐藏字段
  if (!type && !render) {
    getFieldDecorator(name, config);
    return <></>;
  }

  const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.name}</Option>))

  let Field = <></>;
  if (render) {
    Field = typeof render === 'function' ? render(props) : render
  } else {
    switch (type) {
      case FieldTypes.Text:
        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
        break;
      case FieldTypes.Password:
        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
        break;
      case FieldTypes.Number:
        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
        break;
      case FieldTypes.Switch:
        Field = <Switch {...fieldProps} />;
        break;
      case FieldTypes.TimePicker:
        Field = <TimePicker {...fieldProps} style={{ width: '100%' }}/>;
        break;
      case FieldTypes.DatePicker:
        Field = <DatePicker {...fieldProps} style={{ width: '100%' }}/>;
        break;
      case FieldTypes.RangePicker:
        Field = <RangePicker {...fieldProps} style={{ width: '100%' }}/>;
        break;
      case FieldTypes.MonthPicker:
        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }}/>;
        break;
      case FieldTypes.Select:
        Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
        break;
      case FieldTypes.ImageUploader:
        Field = <ImageUploader {...fieldProps}/>
        break;
      default:
        throw new Error(`暂时不支持的组件类型: ${type}`)
    }
  }

  if (!label && !name && !action) return Field;
  
  const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps

  return (
    <Item label={label} {...itemProps}>
      {action ? Field : getFieldDecorator(name, config)(Field)}
    </Item>
  )
};

export default WrapperItem;
export { FieldTypes };