RealBull/src/routes/Merchant/MerchantCreate.js

import React, { PureComponent } from 'react';
import pathToRegexp from 'path-to-regexp';
import { Card, Form, Input, Button, Radio, Switch } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import FooterToolbar from '../../components/FooterToolbar';
import {
  DOMAIN_CP,
  DOMAIN_LJ,
  DOMAIN_PJ,
} from '../../utils/config';
import { statusToBool, boolToStatus } from '../../utils/utils';
import styles from './MerchantCreate.less';

const fieldLabels = {
  type: '商户类型',
  name: '商户名称',
  code: '商户编号',
  simple: '商户简称',
  contactName: '商户联系人',
  mobile: '联系电话',
  depositBank: '开户银行',
  bankAccount: '银行账户',
  licenseId: '营业执照',
  taxNumber: '纳税人识别号',
  receiptType: '发票类型',
};
const domains = [{
  title: '平台方',
  value: DOMAIN_LJ,
}, {
  title: '渠道商',
  value: DOMAIN_PJ,
}, {
  title: '供应商',
  value: DOMAIN_CP,
}];
const receipts = [{
  title: '普通发票',
  value: 'COMMON',
}, {
  title: '增值税发票',
  value: 'SPECIAL',
}];
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 12 },
  },
};

@Form.create()
@connect(({ loading, merchant }) => ({
  merchant,
  submitting: loading.models.merchant,
}))
export default class MerchantCreatePage extends PureComponent {
  componentWillMount() {
    // 如果是添加商户操作,进入此页面时把state清一下
    const { location } = this.props;
    const match = pathToRegexp('/merchant/create').exec(location.pathname);
    if (match) {
      this.cleanPageState();
    }
  }
  componentDidMount() {
    const matchId = this.isEdit();
    if (matchId) {
      this.props.dispatch({
        type: 'merchant/fetchMerchantItem',
        payload: { id: matchId },
      });
    }
  }
  isEdit = () => {
    // 根据路径判断操作类型并决定是否需加载该条目信息<create/edit>
    const { location } = this.props;
    const match = pathToRegexp('/merchant/edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  }
  cleanPageState = () => {
    this.props.dispatch({
      type: 'merchant/cleanItemState',
      payload: {},
    });
  }
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/merchant/list',
      state: this.props.location.state,
    }));
  }
  handlePageSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { status, ...rest } = values;
        const matchId = this.isEdit();
        rest.status = boolToStatus(status);
        if (matchId) {
          rest.id = matchId;
          this.props.dispatch({
            type: 'merchant/updateMerchantItem',
            payload: rest,
            states: this.props.location.state,
          });
        } else {
          this.props.dispatch({
            type: 'merchant/createMerchantItem',
            payload: rest,
            states: this.props.location.state,
          });
        }
      }
    });
  }

  render() {
    const { submitting, merchant, form } = this.props;
    const { getFieldDecorator } = form;
    const { currentItem } = merchant;

    // 是否可编辑
    const isEditable = this.isEdit() ? true : false;

    return (
      <PageHeaderLayout>
        <Card style={{ marginBottom: 70 }}>
          <Form>
            <Form.Item label={fieldLabels.type} {...formItemLayout}>
              {getFieldDecorator('domain', {
                rules: [{ required: true, message: '请选择商户类型!' }],
                initialValue: currentItem.domain || DOMAIN_PJ,
              })(
                <Radio.Group disabled={isEditable} className={styles.radio}>
                  {
                    domains.map(item =>
                      (
                        <Radio.Button
                          key={item.value}
                          value={item.value}
                        >{item.title}
                        </Radio.Button>
                      )
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true, message: '请填写商户编号!',
                  }, {
                    pattern: /^[0-9]{4,6}$/g, message: '请输入4-6位数字编号!',
                  },
                ],
                initialValue: currentItem.code,
              })(
                <Input disabled={isEditable} placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.name} {...formItemLayout}>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请填写商户名称!' }],
                initialValue: currentItem.name,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.simple} {...formItemLayout}>
              {getFieldDecorator('simple', {
                rules: [{ required: true, message: '请填写商户简称!' }],
                initialValue: currentItem.simple,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.contactName} {...formItemLayout}>
              {getFieldDecorator('contactName', {
                rules: [{ required: true, message: '请填写商户联系人!' }],
                initialValue: currentItem.contactName,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.mobile} {...formItemLayout}>
              {getFieldDecorator('mobile', {
                rules: [
                  {
                    required: true, message: '请填写联系电话!',
                  }, {
                    pattern: /^[1][3,4,5,7,8][0-9]{9}$/g, message: '请输入11位有效手机号!',
                  }],
                initialValue: currentItem.mobile,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.depositBank} {...formItemLayout}>
              {getFieldDecorator('depositBank', {
                rules: [{
                  required: true, message: '开户银行不能为空!',
                }],
                initialValue: currentItem.depositBank,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.bankAccount} {...formItemLayout}>
              {getFieldDecorator('bankAccount', {
                rules: [{
                  required: true, message: '银行账号不能为空!',
                }, {
                  pattern: /^[0-9]{1,22}$/g, message: '请输入有效的银行账户!',
                }],
                initialValue: currentItem.bankAccount,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.licenseId} {...formItemLayout}>
              {getFieldDecorator('licenseId', {
                initialValue: currentItem.licenseId,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.taxNumber} {...formItemLayout}>
              {getFieldDecorator('taxNumber', {
                initialValue: currentItem.taxNumber,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.receiptType} {...formItemLayout}>
              {getFieldDecorator('receiptType', {
                initialValue: currentItem.receiptType || 'COMMON',
              })(
                <Radio.Group className={styles.radio}>
                  {
                    receipts.map(item =>
                      (
                        <Radio.Button
                          key={item.value}
                          value={item.value}
                        >{item.title}
                        </Radio.Button>
                      )
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="状态" {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: status ? statusToBool(currentItem.status) : true,
              })(
                <Switch
                  checkedChildren="启用"
                  unCheckedChildren="不启用"
                />
              )}
            </Form.Item>
          </Form>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.handlePageBack} style={{ marginRight: 10 }}>
            取消
          </Button>
          <Button type="primary" onClick={this.handlePageSubmit} loading={submitting}>
            提交
          </Button>
        </FooterToolbar>
      </PageHeaderLayout>
    );
  }
}