sourcecode/front/src/layouts/FieldLayout/index.js

import React, { Component } from 'react';
import { Form, Button, Switch, Select, DatePicker, Input, InputNumber, Modal, Radio, Row, Col } from 'antd';
import FileUpload from '../../components/FileUpload';

const { TextArea } = Input;

class FormLayout extends Component {
  constructor(props) {
    super(props);
    if (props.onEvent) {
      props.onEvent('confirm', this.onConfirm.bind(this));
      props.onEvent('cancel', this.onCancel.bind(this));
    }
  }

  onConfirm() {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }
      if (this.props.onConfirm) this.props.onConfirm(fieldsValue);
    });
  }

  onCancel() {
    if (this.props.onCancel) this.props.onCancel();
  }

  getItem(item, option) {
    switch (item.type) {
      case 'radio':
        return (
          <Radio.Group className={item.class}>
            {item.select.map((i, index) => {
              if (typeof i === 'string') {
                return (
                  <Radio key={index} value={i}>
                    {i}
                  </Radio>
                );
              }
              return (
                <Radio key={index} value={i.value}>
                  {i.label}
                </Radio>
              );
            })}
          </Radio.Group>
        );
      case 'select':
        return (
          <Select className={item.class} placeholder={item.placeholder}>
            {item.select.map((i, index) => {
              if (typeof item === 'string') {
                return (
                  <Select.Option key={index} value={i}>
                    {i}
                  </Select.Option>
                );
              }
              return (
                <Select.Option key={index} value={i.value}>
                  {i.label}
                </Select.Option>
              );
            })}
          </Select>
        );
      case 'render':
        return item.render(option);
      case 'textarea':
        return <TextArea autosize className={item.class} placeholder={item.placeholder} disabled={!!item.disabled} />;
      case 'input':
        return (
          <Input
            className={item.class}
            placeholder={item.placeholder}
            readOnly={!!item.readOnly}
            disabled={!!item.disabled}
          />
        );
      case 'number':
        return (
          <InputNumber
            className={item.class}
            placeholder={item.placeholder}
            readOnly={!!item.readOnly}
            disabled={!!item.disabled}
          />
        );
      case 'switch':
        return <Switch className={item.class} />;
      case 'date':
        return <DatePicker className={item.class} placeholder={item.placeholder} />;
      case 'hidden':
        return <Input type="hidden" />;
      case 'image':
      case 'file':
        return (
          <FileUpload
            {...item}
            value={this.props.form.getFieldValue(item.key)}
            onChange={file => this.props.form.setFieldsValue({ [item.key]: file })}
            onEnd={url => {
              this.props.form.setFieldsValue({ [item.key]: url });
            }}
            onError={err => {
              this.props.form.setFields({ [item.key]: { value: '', errors: [err] } });
            }}
          />
        );
      default:
        return <div />;
    }
  }

  getForm(modal) {
    const { itemList = [], hideAction = false, confirmText = '确定', cancelText = '取消', data = {} } = this.props;
    const { getFieldDecorator } = this.props.form;
    const hideSubmit = modal || (!modal && hideAction);
    return (
      <Form>
        <Row>
          {itemList.map((item, index) => {
            const option = item.option ? Object.assign({}, item.option) : {};
            if (data && data[item.key]) {
              option.initialValue = data[item.key];
            }
            if (item.type === 'hidden') {
              return <div>{getFieldDecorator(item.key, option)(this.getItem(item, option))}</div>;
            }
            return (
              <Col xs={12} sm={12} md={8} lg={8} xl={6}>
                <Form.Item
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: modal ? 16 : 16 }}
                  key={index}
                  label={`${item.name}:`}
                >
                  {getFieldDecorator(item.key, option)(this.getItem(item, option))}
                </Form.Item>
              </Col>
            );
          })}
        </Row>
        {!hideSubmit && (
          <Form.Item wrapperCol={{ offset: 6 }}>
            <Button type="primary" onClick={() => this.onConfirm()} style={{ marginRight: 20 }}>
              {confirmText}
            </Button>
            <Button onClick={() => this.onCancel()}>{cancelText}</Button>
          </Form.Item>
        )}
      </Form>
    );
  }

  render() {
    const { modal = false, title, confirmText = '确定', cancelText = '取消' } = this.props;
    return modal ? (
      <Modal
        title={title}
        visible
        className="field-layout"
        okText={confirmText}
        cancelText={cancelText}
        onOk={() => this.onConfirm()}
        onCancel={() => this.onCancel()}
      >
        {this.getForm(modal)}
      </Modal>
    ) : (
      <div className="field-layout">{this.getForm()}</div>
    );
  }
}

export default Form.create()(FormLayout);