2BCmsBrowser/src/routes/CmsUser/modal.js

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Cascader, Switch, Radio, Input, Modal, Icon } from 'antd';
import { Codes, domains } from '../../utils/config';

const RadioGroup = Radio.Group;
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 15,
  },
}

const ModalForm = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    getFieldsValue,
    validateFields,
  },
  ...modalProps,
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) return;
      const data = {
        ...getFieldsValue(),
      };
      item.id ? data.id = item.id : null;
      onOk(data);
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="所属平台：" {...formItemLayout}>
          {getFieldDecorator('domain', {
            rules: [{ required: true, type: 'number', message: '请选择平台!' }],
            initialValue: item.domain || Codes.CODE_LJ,
          })(
            <RadioGroup>
            {Object.keys(domains).map(key => <Radio value={Number(key)} key={key}>{domains[Number(key)]}</Radio>)}
            </RadioGroup>
          )}
        </FormItem>
        <FormItem label="用户名称：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            rules: [{ required: true, type: 'string', message: '用户名为必填项!' }],
            initialValue: item.name,
          })(<Input />)}
        </FormItem>
        <FormItem label="用户昵称：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('nickname', {
            initialValue: item.nickname,
          })(<Input />)}
        </FormItem>
        <FormItem label="用户性别：" {...formItemLayout}>
          {getFieldDecorator('gender', {
            initialValue: item.gender || 0,
          })(
            <RadioGroup>
              <Radio value={0} key={0}>男</Radio>
              <Radio value={1} key={1}>女</Radio>
            </RadioGroup>
          )}
        </FormItem>
        <FormItem label="出生日期：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('birthday', {
            initialValue: item.birthday,
          })(<Input />)}
        </FormItem>
        <FormItem label="电话：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('mobile', {
            initialValue: item.mobile,
          })(<Input />)}
        </FormItem>
        <FormItem label="邮箱：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('mail', {
            initialValue: item.mail,
          })(<Input />)}
        </FormItem>
        <FormItem label="QQ：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('qq', {
            initialValue: item.qq,
          })(<Input />)}
        </FormItem>
        <FormItem label="微信：" hasFeedback {...formItemLayout}>
          {getFieldDecorator('weChat', {
            initialValue: item.weChat,
          })(<Input />)}
        </FormItem>
        <FormItem label="账号状态：" {...formItemLayout}>
          {getFieldDecorator('status', {
            valuePropsName: 'checked',
        })(<Switch defaultChecked={item.status === Codes.CODE_NORMAL ? true : false} checkedChildren="使用中" unCheckedChildren="禁用中" />)}
        </FormItem>
      </Form>
    </Modal>
  )
}

ModalForm.propTypes = {
  item: PropTypes.object,
  form: PropTypes.object,
  type: PropTypes.string,
  onOk: PropTypes.func,
}

export default Form.create()(ModalForm);