Hotax/src/routes/Terminal/User/TerminalCreate.js

import React, { PureComponent } from 'react';
import { message, Card, Modal, List, Form, Input, Button, Icon, Switch } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Selector from '../../../components/AXTableSelector/Selector';
import FooterToolbar from '../../../components/FooterToolbar';
import { boolToStatus } from '../../../utils/utils';

const Message = message;

const fieldLabels = {
  campus: '所属校区',
  name: '终端名称',
  password: '终端密码',
  confirm: '确认密码',
  status: '初始状态',
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 10 },
  },
};

@Form.create()
@connect(({ loading, terminal, campus }) => ({
  campus,
  terminal,
  cLoading: loading.models.campus,
  submitting: loading.models.terminal,
}))
export default class TerminalCreatePage extends PureComponent {
  state = {
    campusSelectorDestroy: true,
  };
  componentWillUnmount() {
    this.props.dispatch({
      type: 'terminal/cleanState',
    });
  }
  checkPassword = (rule, value, callback) => {
    if (value && value !== this.props.form.getFieldValue('password')) {
      callback('两次输入的密码不一致');
    } else {
      callback();
    }
  };
  handleCampusSelectorModalShow = () => {
    this.setState({
      campusSelectorDestroy: false,
    });
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: {},
    });
  };
  handleCampusSelectorFinish = (rows) => {
    this.setState({
      campusSelectorDestroy: true,
    });
    if (!rows || !rows.length) {
      return;
    }
    const { id, code, name, merchantName } = rows[0];
    this.props.dispatch({
      type: 'terminal/fixCurrentItem',
      payload: {
        merchantName,
        campusId: id,
        campusCode: code,
        campusName: name,
      },
    });
  };
  handleCampusSelectorCancel = () => {
    this.setState({
      campusSelectorDestroy: true,
    });
  };
  handleCampusSelectorChange = (params) => {
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: params,
    });
  };
  handlePageSubmit = () => {
    this.props.form.validateFieldsAndScroll((error, values) => {
      const { currentItem } = this.props.terminal;
      const { campusId } = currentItem;
      if (!campusId) {
        Message.error('请选择校区');
        return;
      }
      const { status, ...restProps } = values;
      restProps.status = boolToStatus(status);
      restProps.campusId = campusId;
      if (!error) {
        this.props.dispatch({
          type: 'terminal/createTerminalItem',
          payload: restProps,
          states: this.props.location.state,
        });
      }
    });
  };
  handlePageBack = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/terminal/user/list',
      state: this.props.location.state,
    }));
  };

  render() {
    const { campusSelectorDestroy } = this.state;
    const { form, cLoading, submitting, campus, terminal } = this.props;
    const { getFieldDecorator } = form;
    const { currentItem } = terminal;
    const { campusCode, campusName, merchantName } = currentItem;

    const getCampusModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title="校区列表"
          maskClosable={false}
          onCancel={this.handleCampusSelectorCancel}
        >
          <Selector
            multiple={false}
            loading={cLoading}
            selectorName="Campus"
            list={campus.list}
            pageNo={campus.pageNo}
            pageSize={campus.pageSize}
            totalSize={campus.totalSize}
            onCancel={this.handleCampusSelectorCancel}
            onChange={this.handleCampusSelectorChange}
            onFinish={this.handleCampusSelectorFinish}
          />
        </Modal>
      );
    };

    return (
      <div>
        <Card title="创建终端" style={{ marginBottom: 70 }}>
          <Form>
            <Form.Item
              {...formItemLayout}
              label={<a onClick={this.handleCampusSelectorModalShow}>选择校区</a>}
            >
              <List
                bordered
                size="small"
                dataSource={[
                  `校区编号: ${campusCode || ''}`,
                  `校区名称: ${campusName || ''}`,
                  `所属厂商: ${merchantName || ''}`,
                ]}
                renderItem={item => <List.Item>{item}</List.Item>}
              />
            </Form.Item>
            <Form.Item label={fieldLabels.name} {...formItemLayout}>
              {getFieldDecorator('name')(
                <Input
                  placeholder="选填(不填写会默认生成，格式为`教室xx`)"
                />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.password} {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true, message: '密码不能为空!',
                  }, {
                    pattern: /^[a-zA-Z0-9|-]+$/ig, message: '密码格式错误!',
                  }],
              })(
                <Input
                  type="password"
                  placeholder="请输入"
                  addonBefore={<Icon type="lock" />}
                />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.confirm} {...formItemLayout}>
              {getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true, message: '请再次输入你的密码',
                  }, {
                    validator: this.checkPassword,
                  }],
              })(
                <Input
                  type="password"
                  placeholder="请输入"
                  addonBefore={<Icon type="lock" />}
                />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.status} {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Switch
                  checkedChildren="启用"
                  unCheckedChildren="禁用"
                />
              )}
            </Form.Item>
          </Form>
          {!campusSelectorDestroy && getCampusModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            loading={submitting}
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}