Hotax/src/routes/Campus/CampusCreate.js

/* eslint-disable no-trailing-spaces */
import React, { PureComponent } from 'react';
import pathToRegexp from 'path-to-regexp';
import { message, Card, Modal, List, Form, Input, Button, Popover, Icon } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Selector from '../../components/AXTableSelector/Selector';
import AXCityCascader from '../../components/AXCityCascader';
import FooterToolbar from '../../components/FooterToolbar';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {
  provinceCodeToName,
  provinceNameToCode,
} from '../../utils/utils';
import styles from './CampusCreate.less';

const Message = message;

const fieldLabels = {
  merchant: '所属商户',
  cityName: '所在城市',
  zoneName: '校区名称',
  contactName: '校区联系人',
  mobile: '联系电话',
  address: '收货地址',
  depositBank: '开户行',
  bankAccount: '银行账户',
};

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

@Form.create()
@connect(({ loading, merchant, campus }) => ({
  campus,
  merchant,
  submitting: loading.models.campus,
  loading: loading.models.merchant,
}))
export default class CampusCreatePage extends PureComponent {
  state = {
    merchantSelectorDestroy: true,
  };
  componentDidMount() {
    // 如果是编辑校区，加载校区详情
    const matchId = this.isEdit();
    if (matchId) {
      this.props.dispatch({
        type: 'campus/fetchCampusItem',
        payload: { id: matchId },
      });
    }
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'campus/cleanState',
      payload: {},
    });
  }
  isEdit = () => {
    const { location } = this.props;
    const match = pathToRegexp('/campus/edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  };
  handleMerchantSelectorModalShow = () => {
    this.setState({
      merchantSelectorDestroy: false,
    });
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: {},
    });
  };
  handleMerchantSelectorFinish = (rows) => {
    this.setState({
      merchantSelectorDestroy: true,
    });
    if (!rows || !rows.length) {
      return;
    }
    const { id, name } = rows[0];
    this.props.dispatch({
      type: 'campus/fixCurrentItem',
      payload: {
        merchantId: id,
        merchantName: name,
      },
    });
  };
  handleMerchantSelectorCancel = () => {
    this.setState({
      merchantSelectorDestroy: true,
    });
  };
  handleMerchantSelectorChange = (params) => {
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: params,
    });
  };
  handlePageSubmit = () => {
    this.props.form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        const { campus } = this.props;
        const { currentItem } = campus;
        const { merchantId } = currentItem;
        if (!merchantId) {
          Message.error('请选择该校区所属厂商');
          return;
        }

        const { cityName, ...restProps } = values;
        const [province, city] = cityName;
        restProps.provinceCode = provinceNameToCode(province);
        restProps.cityName = city;
        restProps.merchantId = merchantId;
        const matchId = this.isEdit();
        if (matchId) {
          restProps.id = matchId;
          this.props.dispatch({
            type: 'campus/updateCampusItem',
            payload: restProps,
            states: this.props.location.state,
          });
        } else {
          this.props.dispatch({
            type: 'campus/createCampusItem',
            payload: restProps,
            states: this.props.location.state,
          });
        }
      }
    });
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/campus/list',
      state: this.props.location.state,
    }));
  };

  render() {
    const { merchantSelectorDestroy } = this.state;
    const { form, merchant, mLoading, campus, submitting } = this.props;
    const { getFieldDecorator, getFieldsError } = form;
    const { currentItem } = campus;
    const { merchantName } = currentItem;

    const renderCityName = () => {
      const { provinceCode, cityName } = currentItem;
      if (!provinceCode && !cityName) {
        return null;
      } else {
        return [
          provinceCodeToName(provinceCode),
          cityName,
        ];
      }
    };

    const errors = getFieldsError();
    const getErrorInfo = () => {
      const errorCount = Object.keys(errors).filter(key => errors[key]).length;
      if (!errors || errorCount === 0) {
        return null;
      }
      const scrollToField = (fieldKey) => {
        const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
        if (labelNode) {
          labelNode.scrollIntoView(true);
        }
      };
      const errorList = Object.keys(errors).map((key) => {
        if (!errors[key]) {
          return null;
        }
        return (
          <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
            <Icon type="cross-circle-o" className={styles.errorIcon} />
            <div className={styles.errorMessage}>{errors[key][0]}</div>
            <div className={styles.errorField}>{fieldLabels[key]}</div>
          </li>
        );
      });
      return (
        <span className={styles.errorIcon}>
          <Popover
            title="表单校验信息"
            content={errorList}
            overlayClassName={styles.errorPopover}
            trigger="click"
            getPopupContainer={trigger => trigger.parentNode}
          >
            <Icon type="exclamation-circle" />
          </Popover>
          {errorCount}
        </span>
      );
    };

    const getMerchantModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title="厂商列表"
          maskClosable={false}
          onCancel={this.handleMerchantSelectorCancel}
        >
          <Selector
            multiple={false}
            loading={mLoading}
            selectorName="Merchant"
            list={merchant.list}
            pageNo={merchant.pageNo}
            pageSize={merchant.pageSize}
            totalSize={merchant.totalSize}
            onCancel={this.handleMerchantSelectorCancel}
            onChange={this.handleMerchantSelectorChange}
            onFinish={this.handleMerchantSelectorFinish}
          />
        </Modal>
      );
    };

    return (
      <PageHeaderLayout>
        <Card style={{ marginBottom: 70 }}>
          <Form>
            <Form.Item
              {...formItemLayout}
              label={!this.isEdit() ? <Button size="small" type="primary" onClick={this.handleMerchantSelectorModalShow}>所属厂商</Button> : '所属厂商'}
            >
              <List
                bordered
                size="small"
                dataSource={[
                  `${merchantName || '请选择'}`,
                ]}
                renderItem={item => <List.Item>{item}</List.Item>}
              />
            </Form.Item>
            <Form.Item label={fieldLabels.cityName} {...formItemLayout}>
              {getFieldDecorator('cityName', {
                rules: [{ required: true, message: '请选择校区地址!' }],
                initialValue: renderCityName(),
              })(
                <AXCityCascader />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.zoneName} {...formItemLayout}>
              {getFieldDecorator('zoneName', {
                rules: [{ required: true, message: '校区名不能为空!' }],
                initialValue: currentItem.zoneName,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.contactName} {...formItemLayout}>
              {getFieldDecorator('contactName', {
                rules: [{ required: true, message: '联系人不能为空!' }],
                initialValue: currentItem.contactName,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item 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 label={fieldLabels.depositBank} {...formItemLayout}>
              {getFieldDecorator('depositBank', {
                initialValue: currentItem.depositBank,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.bankAccount} {...formItemLayout}>
              {getFieldDecorator('bankAccount', {
                initialValue: currentItem.bankAccount,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.address} {...formItemLayout}>
              {getFieldDecorator('address', {
                initialValue: currentItem.address,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Form>
          {!merchantSelectorDestroy && getMerchantModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          {getErrorInfo()}
          <Button onClick={this.handlePageBack} style={{ marginRight: 10 }}>
            取消
          </Button>
          <Button type="primary" onClick={this.handlePageSubmit} loading={submitting}>
            提交
          </Button>
        </FooterToolbar>
      </PageHeaderLayout>
    );
  }
}