Hotax/src/routes/Terminal/WhiteList/WhiteListCreate.js

/* eslint-disable no-param-reassign,no-trailing-spaces */
import React, { Component } from 'react';
import pathToRegexp from 'path-to-regexp';
import moment from 'moment';
import { Card, Modal, Form, DatePicker, Button, List } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Selector from '../../../components/AXTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar';
import { Hotax } from '../../../utils/config';

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

@Form.create()
@connect(({ loading, terminal }) => ({
  terminal,
  tLoading: loading.models.terminal,
}))
export default class WhiteListCreatePage extends Component {
  state = {
    terminalSelectorDestroy: true,
  };
  componentDidMount() {
    const matchId = this.isEdit();
    if (matchId) {
      this.props.dispatch({
        type: 'terminal/fetchSpecialTerminalItem',
        payload: { userId: matchId },
      });
    } else {
      this.props.dispatch({
        type: 'terminal/fetchTerminalList',
        payload: {},
      });
    }
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'terminal/cleanState',
    });
  }
  handleTerminalSelectorModalShow = () => {
    this.setState({
      terminalSelectorDestroy: false,
    });
    this.props.dispatch({
      type: 'terminal/fetchTerminalList',
      payload: {},
    });
  }
  handleTerminalSelectorFinish = (rows) => {
    this.setState({
      terminalSelectorDestroy: true,
    });
    if (!rows || !rows.length) {
      return;
    }
    const { id, code, merchantName } = rows[0];
    this.props.dispatch({
      type: 'terminal/fixCurrentItem',
      payload: {
        code,
        merchantName,
        userId: id,
      },
    });
  };
  handleTerminalSelectorCancel = () => {
    this.setState({
      terminalSelectorDestroy: true,
    });
  };
  handleTerminalSelectorChange = (params) => {
    this.props.dispatch({
      type: 'terminal/fetchTerminalList',
      payload: params,
    });
  }
  isEdit = () => {
    const { location } = this.props;
    const match = pathToRegexp('/terminal/whitelist/edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  }
  handlePageSubmit = () => {
    this.props.form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        const { terminal } = this.props;
        const { currentItem } = terminal;
        const { id, code, userId, status } = currentItem;
        values = { id, code, userId, status, ...values };
        // 编辑模式
        if (this.isEdit()) {
          this.props.dispatch({
            type: 'terminal/updateSpecialTerminalItem',
            payload: values,
            states: this.props.location.state,
          });
        // 创建模式
        } else {
          delete values.id;
          values.status = Hotax.STATUS_NORMAL;
          this.props.dispatch({
            type: 'terminal/createSpecialTerminalItem',
            payload: values,
            states: this.props.location.state,
          });
        }
      }
    });
  }
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/terminal/whitelist',
      state: this.props.location.state,
    }));
  }

  render() {
    const { terminalSelectorDestroy } = this.state;
    const { form, tLoading, terminal } = this.props;
    const { getFieldDecorator } = form;
    const { currentItem } = terminal;
    const { code, merchantName, startTime, endTime } = currentItem;

    const getTerminalModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title="终端列表"
          maskClosable={false}
          onCancel={this.handleTerminalSelectorCancel}
        >
          <Selector
            multiple={false}
            loading={tLoading}
            selectorName="Terminal"
            list={terminal.list}
            pageNo={terminal.pageNo}
            pageSize={terminal.pageSize}
            totalSize={terminal.totalSize}
            onCancel={this.handleTerminalSelectorCancel}
            onChange={this.handleTerminalSelectorChange}
            onFinish={this.handleTerminalSelectorFinish}
          />
        </Modal>
      );
    };

    return (
      <div>
        <Card title={this.isEdit() ? '编辑白名单' : '创建白名单'} style={{ marginBottom: 70 }}>
          <Form>
            <Form.Item
              label={!this.isEdit() ? <a onClick={this.handleTerminalSelectorModalShow}>选择终端</a> : '终端账号'}
              {...formItemLayout}
            >
              <List
                bordered
                size="small"
                dataSource={[
                  `终端编号: ${code || ''}`,
                  `所属渠道: ${merchantName || ''}`,
                ]}
                renderItem={item => <List.Item>{item}</List.Item>}
                style={{ width: 280 }}
              />
            </Form.Item>
            <Form.Item label="起始日期" {...formItemLayout}>
              {getFieldDecorator('startTime', {
                rules: [{ required: true, message: '请选择起始日期' }],
                initialValue: startTime && moment(startTime),
              })(
                <DatePicker
                  showTime
                  placeholder="选择日期时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: 280 }}
                />
              )}
            </Form.Item>
            <Form.Item label="截止日期" {...formItemLayout}>
              {getFieldDecorator('endTime', {
                initialValue: endTime && moment(endTime),
              })(
                <DatePicker
                  showTime
                  placeholder="选择日期时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: 280 }}
                />
              )}
            </Form.Item>
          </Form>
          {!terminalSelectorDestroy && getTerminalModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.handlePageBack} style={{ marginRight: 10 }}>
            取消
          </Button>
          <Button type="primary" onClick={this.handlePageSubmit}>
            提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}