2BContentCmsBrowser/src/routes/Terminal/Edit/index.js

import React, { Component } from 'react';
import { Card, Form, Input, Select, Switch, Tooltip, Button, message } from 'antd';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import queryString from 'query-string';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import CampusSelectModal from './campus';
import { Codes, pageSize } from '../../../utils/config';
import { getLocalUser } from '../../../utils/helper';

@Form.create()
@connect(state => ({
  terminalDetail: state.terminalDetail,
  campus: state.campus,
}))
export default class TerminalProfile extends Component {
  handleCampusSelectClick = () => {
    const { merchantId } = getLocalUser();
    this.props.dispatch({ type: 'terminalDetail/showModal' });
    // 获取该渠道下的所属校区
    this.props.dispatch({
      type: 'campus/query',
      payload: { pageNo: 1, pageSize, merchantId },
    });
  }

  handleCampusModalOk = (data) => {
    this.props.dispatch({
      type: 'terminalDetail/saveCampus',
      payload: data,
    });
  }

  handleCampusModalCancel = () => {
    this.props.dispatch({ type: 'terminalDetail/hideModal' });
  }

  handleCampusModalSearch = () => {

  }

  handleCampusModalTableChange = () => {

  }

  handlePageCancel = () => {
    const { dispatch, terminalDetail } = this.props;
    const { filters } = terminalDetail;
    dispatch(routerRedux.push({
      pathname: '/terminal',
      search: queryString.stringify(filters),
    }));
  }

  handlePageSubmit = (e) => {
    e.preventDefault();

    const { dispatch, form, terminalDetail } = this.props;
    const { validateFields, getFieldsValue } = form;
    const { currentItem, operType, filters } = terminalDetail;
    const { campusId, id, status } = currentItem;

    validateFields((errors) => {
      if (errors) return;
      if (!campusId) {
        message.error('请选择校区!');
        return;
      }

      const data = { ...getFieldsValue(), campusId };
      if (operType === 'create') {
        data.status = Codes.CODE_NORMAL;
      } else if (operType === 'update') {
        data.status = status;
        data.id = id;
      }

      dispatch({
        type: `terminalDetail/${operType}`,
        payload: data,
        callback: () => {
          dispatch(routerRedux.push({
            pathname: '/terminal',
            search: queryString.stringify(filters),
          }));
        },
      });
    });
  }

  render() {
    const { form, terminalDetail, campus } = this.props;
    const { currentItem, modalShow, operType } = terminalDetail;
    const { name, password, status, campusId, campusName, campusCode } = currentItem;
    const { getFieldDecorator } = form;

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

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

    return (
      <PageHeaderLayout>
        <Card title="终端用户">
          <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
            <Form.Item hasFeedback label="所属校区" {...formItemLayout}>
              <Tooltip placement="top" title="点击选择校区">
                <Button disabled={operType === 'update'} style={{ marginRight: 20 }} type="primary" size="small" icon="select" onClick={this.handleCampusSelectClick}>选择</Button>
              </Tooltip>
              {campusName && <strong>{`${campusName}`}</strong>}
            </Form.Item>
            <Form.Item label="终端名称：" hasFeedback {...formItemLayout}>
              {getFieldDecorator('name', {
                initialValue: name,
              })(<Input placeholder="请输入(例: 教室三/教室四...)" />)}
            </Form.Item>
            {operType === 'create' ? (
              <Form.Item label="终端密码：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('password', {
                  rules: [{ required: true, type: 'string', message: '密码为必填项!' }],
                  initialValue: password,
                })(<Input placeholder="请输入" />)}
              </Form.Item>
) : (
  <Form.Item label="终端密码：" hasFeedback {...formItemLayout}>
    {getFieldDecorator('password', {
                  initialValue: password,
                })(<Input placeholder="修改密码时填写" />)}
  </Form.Item>
)}
            <Form.Item label="账号状态：" {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropsName: 'checked',
            })(
              <Switch
                defaultChecked={status === Codes.CODE_NORMAL}
                checkedChildren="使用中"
                unCheckedChildren="禁用中"
              />
            )}
            </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>
          {/* 校区模态选择框 */}
          <CampusSelectModal
            rowKeyName="id"
            modalVisible={modalShow}
            style={{ top: 20 }}
            width={600}
            onOk={this.handleCampusModalOk}
            onCancel={this.handleCampusModalCancel}
            onSearch={this.handleCampusModalSearch}
            fsTableDataSource={campus.list || []}
            fsTableLoading={campus.listLoading}
            fsTablePagination={campus.pagination}
            fsTableOnChange={this.handleCampusModalTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}