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

import React, { Component } from 'react';
import { Form, Select, Switch, Radio, Input, Modal, Icon } from 'antd';
import { Codes, domains } from '../../utils/config';

@Form.create()
export default class CMSUserModalForm extends Component {
  handleModalOk = () => {
    const { form, onOk, modalType, item } = this.props;
    const { validateFields, getFieldsValue } = form;

    validateFields((errors) => {
      if (errors) return;
      const data = { ...getFieldsValue() };

      data.status ? data.status = Codes.CODE_NORMAL : data.status = Codes.CODE_DELETE;

      if (modalType === 'update') {
        data.id = item.id;
      }

      onOk(data);
    });
  }

  render() {
    const { item, merchantList, onOk, form, modalType, ...modalProps } = this.props;
    const { getFieldDecorator } = form;

    const modalOpts = { ...modalProps, onOk: this.handleModalOk };
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 15 },
    };

    return (
      <Modal {...modalOpts}>
        <Form layout="horizontal">
          <Form.Item label="选择厂商" hasFeedback {...formItemLayout}>
            {getFieldDecorator('merchantId', {
              rules: [{ required: true, type: 'string', message: '该项为必选项!' }],
              initialValue: item.merchantId,
            })(
              <Select
                showSearch
                allowClear
                placeholder="请选择"
                optionFilterProp="children"
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {merchantList.map(selItem => <Select.Option value={selItem.id} key={selItem.id}>{`${selItem.code}/${selItem.name}`}</Select.Option>)}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="用户名称：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('name', {
              rules: [{ required: true, type: 'string', message: '用户名为必填项!' }],
              initialValue: item.name,
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          {modalType === 'create' ? (
            <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [{ required: true, type: 'string', message: '密码为必填项!' }],
                initialValue: item.password,
              })(<Input placeholder="请输入" />)}
            </Form.Item>
) : (
  <Form.Item label="用户密码：" hasFeedback {...formItemLayout}>
    {getFieldDecorator('password', {
                initialValue: item.password,
              })(<Input placeholder="修改密码时填写" />)}
  </Form.Item>
)}
          <Form.Item label="用户昵称：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('nickName', {
              initialValue: item.nickName,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="用户性别：" {...formItemLayout}>
            {getFieldDecorator('gender', {
              initialValue: item.gender || 'MALE',
            })(
              <Radio.Group>
                <Radio value="MALE" key="MALE">男</Radio>
                <Radio value="FEMALE" key="FEMALE">女</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="出生日期：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('birthday', {
              initialValue: item.birthday,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="电话：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('mobile', {
              initialValue: item.mobile,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="邮箱：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('mail', {
              initialValue: item.mail,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="QQ：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('qq', {
              initialValue: item.qq,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="微信：" hasFeedback {...formItemLayout}>
            {getFieldDecorator('weChat', {
              initialValue: item.weChat,
            })(<Input />)}
          </Form.Item>
          <Form.Item label="账号状态：" {...formItemLayout}>
            {getFieldDecorator('status', {
              valuePropsName: 'checked',
          })(<Switch defaultChecked={item.status === Codes.CODE_NORMAL} checkedChildren="使用中" unCheckedChildren="禁用中" />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}