2BContentCmsBrowser/src/routes/Merchant/index.js

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Spin, Card, Form, Switch, Radio, Button, Input } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getLocalUser } from '../../utils/helper';

@connect(state => ({ merchant: state.merchant }))
@Form.create()
export default class MerchantInfo extends PureComponent {
  handlePageCancel = () => {
    this.props.dispatch(routerRedux.push('/'));
  }

  handlePageSubmit = (e) => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    const { getFieldsValue, validateFields } = form;

    validateFields((errors) => {
      if (errors) return;
      const data = { ...getFieldsValue() };
      const { merchantId } = getLocalUser();
      data.id = merchantId;
      dispatch({
        type: 'merchant/update',
        payload: data,
        callback: () => {
          dispatch(routerRedux.push('/'));
        },
      });
    });
  }

  render() {
    const { form, merchant } = this.props;
    const { item, loading } = merchant;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout>
        <Spin spinning={loading}>
          <Card>
            <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
              {/*
              <Form.Item label="厂商编号" hasFeedback {...formItemLayout}>
                {getFieldDecorator('code',{
                  rules: [{ required: true, type: 'string', message: '编号为必填写!' }],
                  initialValue: item.code,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="厂商名称" hasFeedback {...formItemLayout}>
                {getFieldDecorator('name',{
                  rules: [{ required: true, type: 'string', message: '名称为必填项!' }],
                  initialValue: item.name,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="厂商类型" {...formItemLayout}>
                {getFieldDecorator('domain',{
                  initialValue: item.domain || Codes.CODE_PJ,
                })(
                  <Radio.Group>
                    {Object.keys(domains).map(key =>
                      <Radio value={Number(key)} key={`domain-${key}`}>{domains[Number(key)]}</Radio>
                    )}
                  </Radio.Group>
                )}
              </Form.Item>
            */}
              <Form.Item label="开户银行" hasFeedback {...formItemLayout}>
                {getFieldDecorator('depositBank', {
                  rules: [{ required: true, type: 'string', message: '开户银行为必填项!' }],
                  initialValue: item.depositBank,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="银行账户" hasFeedback {...formItemLayout}>
                {getFieldDecorator('bankAccount', {
                  rules: [{ required: true, type: 'string', message: '银行账户为必填项!' }],
                  initialValue: item.bankAccount,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="营业执照编号" hasFeedback {...formItemLayout}>
                {getFieldDecorator('licenseId', {
                  initialValue: item.licenseId,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="纳税人识别号" hasFeedback {...formItemLayout}>
                {getFieldDecorator('taxNumber', {
                  initialValue: item.taxNumber,
                })(<Input />)}
              </Form.Item>
              <Form.Item label="发票类型" {...formItemLayout}>
                {getFieldDecorator('receiptType', {
                  initialValue: item.receiptType || 'SPECIAL',
                })(
                  <Radio.Group>
                    <Radio value="COMMON" key="receipt-com">普通发票</Radio>
                    <Radio value="SPECIAL" key="receipt-spl">增值税发票</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
              <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
                <Button onClick={this.handlePageCancel}>取消</Button>
                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}