Hotax/src/routes/System/CmsUser/CmsUserEdit.js

import React, { PureComponent } from 'react';
import { Card, Form, Table, Input, Button, Radio, Icon, Switch } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import FooterToolbar from '../../../components/FooterToolbar';
import {renderAvatar, renderGender, renderStatus, boolToStatus, statusToBool} from '../../../utils/utils';
import styles from './CmsUserCreate.less';

const genders = [{
  title: '男',
  value: 'MALE',
}, {
  title: '女',
  value: 'FEMALE',
}];
const fieldLabels = {
  nickName: '用户昵称',
  gender: '用户性别',
  birthday: '出生日期',
  mobile: '电话',
  mail: '邮箱',
  qq: 'QQ号码',
  weChat: '微信号码',
  password: '用户密码',
  confirm: '确认密码',
  status: '账号状态',
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 12 },
  },
};

function cmsUserDataFormatter(item) {
  const {
    qq,
    name,
    mail,
    weChat,
    mobile,
    status,
    gender,
    avatar,
    birthday,
    nickName,
    merchantName,
  } = item;
  return [{
    key: 1,
    field: '用户头像',
    text: renderAvatar(avatar, nickName),
  }, {
    key: 2,
    field: '用户名称',
    text: name,
  }, {
    key: 3,
    field: '用户昵称',
    text: nickName,
  }, {
    key: 4,
    field: '出生日期',
    text: birthday,
  }, {
    key: 5,
    field: '用户性别',
    text: renderGender(gender),
  }, {
    key: 6,
    field: '所属商户',
    text: merchantName,
  }, {
    key: 7,
    field: '联系电话',
    text: mobile,
  }, {
    key: 8,
    field: 'QQ号码',
    text: qq,
  }, {
    key: 9,
    field: '微信',
    text: weChat,
  }, {
    key: 10,
    field: '邮箱',
    text: mail,
  }, {
    key: 11,
    field: '账号状态',
    text: renderStatus(status),
  }];
}

@Form.create()
@connect(({ loading, cmsUser }) => ({
  cmsUser,
  submitting: loading.models.cmsUser,
}))
export default class CmsUserEditPage extends PureComponent {
  state = {
    currentItem: {},
    passwordEdit: false,
  };
  componentWillMount() {
    this.setState({
      currentItem: this.props.location.state.currentItem,
    });
  }
  checkPassword = (rule, value, callback) => {
    if (value && value !== this.props.form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else if (!value) {
      callback('请再次输入密码进行确认');
    } else {
      callback();
    }
  };
  handlePasswordEdit = () => {
    this.setState({
      passwordEdit: true,
    });
  };
  handlePasswordSave = () => {
    this.props.form.validateFieldsAndScroll((error) => {
      if (!error) {
        this.setState({
          passwordEdit: false,
        });
      }
    });
  };
  handlePageSubmit = () => {
    this.props.form.validateFieldsAndScroll((error, values) => {
      const { currentItem, passwordEdit } = this.state;
      const { id } = currentItem;
      const { status, ...restProps } = values;
      restProps.status = boolToStatus(status);
      restProps.id = id;
      if (!error && !passwordEdit) {
        this.props.dispatch({
          type: 'cmsUser/updateCmsUserItem',
          payload: restProps,
          states: this.props.location.state,
        });
      }
    });
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/system/cms-user/list',
      state: this.props.location.state,
    }));
  };

  render() {
    const { form, submitting } = this.props;
    const { currentItem, passwordEdit } = this.state;
    const { getFieldDecorator } = form;
    const {
      qq,
      mail,
      gender,
      weChat,
      status,
      birthday,
      nickName,
      mobile,
    } = currentItem;

    const campusColumns = [{
      title: '字段名',
      key: 1,
      dataIndex: 'field',
      width: '15%',
    }, {
      title: '字段值',
      key: 2,
      dataIndex: 'text',
      width: '85%',
    }];

    return (
      <div>
        <Card title="用户详情" style={{ marginBottom: 16 }}>
          <Form>
            <Form.Item wrapperCol={{ span: 13, offset: 5 }}>
              <Table
                bordered
                size="small"
                showHeader={false}
                pagination={false}
                className={styles.infoTable}
                columns={campusColumns}
                dataSource={cmsUserDataFormatter(currentItem)}
              />
            </Form.Item>
          </Form>
        </Card>
        <Card title="修改信息" style={{ marginBottom: 70 }}>
          <Form hideRequiredMark>
            <Form.Item label={fieldLabels.nickName} {...formItemLayout}>
              {getFieldDecorator('nickName', {
                initialValue: nickName,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.password} {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [
                  {
                    pattern: /^[a-zA-Z0-9|-]+$/ig, message: '密码格式错误!',
                  }],
              })(
                <Input
                  type="password"
                  placeholder="请输入"
                  disabled={!passwordEdit}
                  addonBefore={<Icon type="lock" />}
                  addonAfter={
                    passwordEdit ? (
                      <Icon type="save" onClick={this.handlePasswordSave} />
                    ) : (
                      <Icon type="edit" onClick={this.handlePasswordEdit} />
                    )
                  }
                />
              )}
            </Form.Item>
            {passwordEdit && (
              <Form.Item label={fieldLabels.confirm} {...formItemLayout}>
                {getFieldDecorator('confirm', {
                  rules: [
                    {
                      validator: this.checkPassword,
                    }],
                })(
                  <Input
                    type="password"
                    placeholder="请输入"
                    addonBefore={<Icon type="lock" />}
                  />
                )}
              </Form.Item>
            )}
            <Form.Item label={fieldLabels.birthday} {...formItemLayout}>
              {getFieldDecorator('birthday', {
                initialValue: birthday,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.mobile} {...formItemLayout}>
              {getFieldDecorator('mobile', {
                rules: [{
                  pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
                }],
                initialValue: mobile,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.mail} {...formItemLayout}>
              {getFieldDecorator('mail', {
                initialValue: mail,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.qq} {...formItemLayout}>
              {getFieldDecorator('qq', {
                initialValue: qq,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.weChat} {...formItemLayout}>
              {getFieldDecorator('weChat', {
                initialValue: weChat,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.gender} {...formItemLayout}>
              {getFieldDecorator('gender', {
                initialValue: gender,
              })(
                <Radio.Group className={styles.radio}>
                  {
                    genders.map(item =>
                      (
                        <Radio.Button
                          key={item.value}
                          value={item.value}
                        >{item.title}
                        </Radio.Button>
                      )
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.status} {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: statusToBool(status),
              })(
                <Switch
                  checkedChildren="启用"
                  unCheckedChildren="禁用"
                />
              )}
            </Form.Item>
          </Form>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            loading={submitting}
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}