123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- 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 { Hotax } 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: Hotax.DOMAIN_LJ,
- }, {
- title: '渠道商',
- value: Hotax.DOMAIN_PJ,
- }, {
- title: '供应商',
- value: Hotax.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();
- return (
- <PageHeaderLayout>
- <Card style={{ marginBottom: 70 }}>
- <Form>
- <Form.Item label={fieldLabels.type} {...formItemLayout}>
- {getFieldDecorator('domain', {
- rules: [{ required: true, message: '请选择商户类型!' }],
- initialValue: currentItem.domain || Hotax.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][34578][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>
- );
- }
- }
|