Hotax/src/routes/Frontend/Personalize/PersonalizeList.js

/* eslint-disable prefer-destructuring */
import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Modal, Form, Button, message } from 'antd';
import { StandardTableList } from '../../../components/AXList';
import AXRemoteSelect from '../../../components/AXRemoteSelect';
import Ellipsis from '../../../components/Ellipsis';
import { addRowKey, renderStatus, renderBindStatus } from '../../../utils/utils';

const Message = message;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
    md: { span: 13 },
  },
};
function arrayDataFormatter(data) {
  return data.map((item) => {
    return {
      text: item.name,
      value: `${item.name}||${item.id}`,
    };
  });
}

@Form.create()
@connect(({ loading, campus, merchant, terminal }) => ({
  campus,
  merchant,
  terminal,
  fetching1: loading.models.merchant,
  fetching2: loading.models.campus,
  loading: loading.models.terminal,
}))
export default class PersonalizeListPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
      merchants: (state || {}).merchants || [], // 记录筛选的渠道
      campuses: (state || {}).campuses || [], // 记录筛选的校区
      filterModalDestroy: true,
    };
  }
  componentWillMount() {
    this.props.dispatch({
      type: 'terminal/cleanState',
    });
  }
  componentDidMount() {
    const { merchants, campuses } = this.state;
    let merchantId;
    if (merchants && merchants.length) {
      merchantId = merchants[0].split('||')[1];
    }
    let campusId;
    if (campuses && campuses.length) {
      campusId = campuses[0].split('||')[1];
    }
    this.props.dispatch({
      type: 'terminal/fetchTerminalList',
      payload: {
        campusId,
        merchantId,
        ...this.state.Queryers,
      },
    });
  }
  handleEditOperation = (item) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/frontend/personalize/edit/${item.id}`,
      state: {
        merchantId: item.merchantId,
        ...this.state,
      },
    }));
  };
  handleFilterOperation = (params, states) => {
    this.setState({
      UIParams: states,
      Queryers: params,
    });
    const { merchants, campuses } = this.state;
    let merchantId;
    if (merchants && merchants.length) {
      merchantId = merchants[0].split('||')[1];
    }
    let campusId;
    if (campuses && campuses.length) {
      campusId = campuses[0].split('||')[1];
    }
    this.props.dispatch({
      type: 'terminal/fetchTerminalList',
      payload: {
        campusId,
        merchantId,
        ...params,
      },
    });
  };
  handleModalFilterOperation = () => {
    const { getFieldsValue } = this.props.form;
    const { merchants, campuses } = getFieldsValue();
    let merchantId;
    if (merchants && merchants.length) {
      merchantId = merchants[0].split('||')[1];
    }
    let campusId;
    if (campuses && campuses.length) {
      campusId = campuses[0].split('||')[1];
    }
    this.props.dispatch({
      type: 'terminal/fetchTerminalList',
      payload: {
        ...this.state.Queryers,
        merchantId,
        campusId,
      },
    });
    this.setState({ merchants, campuses });
    this.handleFilterModalDestroy();
  };
  handleBatchOperation = () => {
    Message.info('暂不支持批量操作!');
  };
  handleFilterModalShow = () => {
    this.setState({ filterModalDestroy: false });
  };
  handleFilterModalDestroy = () => {
    this.setState({ filterModalDestroy: true });
  };
  handleMerchantRemoteSelectSearch = (value) => {
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: {
        pageSize: 50,
        name: value,
      },
    });
  };
  handleCampusRemoteSelectSearch = (value) => {
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: {
        pageSize: 50,
        name: value,
      },
    });
  };

  render() {
    const { merchants, campuses } = this.state;
    const { loading, fetching1, fetching2, form, campus, merchant, terminal } = this.props;
    const { list, totalSize, pageSize, pageNo } = terminal;
    const { getFieldDecorator } = form;
    const renderCampusName = (name) => {
      return (
        <Ellipsis tooltip lines={1}>{name}</Ellipsis>
      );
    };
    const renderOperation = (item) => {
      return (
        <div>
          <Button
            size="small"
            className="editBtn"
            onClick={() => this.handleEditOperation(item)}
          >用户配置
          </Button>
        </div>
      );
    };
    const batchActions = [{
      key: 'config',
      name: '批量配置',
    }];
    const basicSearch = {
      keys: [{
        name: '终端编号',
        field: 'code',
      }, {
        name: '终端名称',
        field: 'name',
      }],
    };
    const pagination = {
      pageNo,
      pageSize,
      totalSize,
    };
    const columns = [{
      title: '终端编号',
      key: 1,
      dataIndex: 'code',
      width: '15%',
    }, {
      title: '终端名称',
      key: 2,
      dataIndex: 'name',
      width: '12%',
    }, {
      title: '所属校区',
      key: 3,
      dataIndex: 'campusName',
      render: text => renderCampusName(text),
      width: '18%',
    }, {
      title: '所属渠道',
      key: 4,
      dataIndex: 'merchantName',
      width: '10%',
    }, {
      title: '账号状态',
      key: 5,
      dataIndex: 'status',
      render: text => renderStatus(text, '已禁用'),
      width: '8%',
    }, {
      title: '绑定状态',
      key: 6,
      dataIndex: 'deviceStatus',
      render: text => renderBindStatus(text),
      width: '9%',
    }, {
      title: '更新时间',
      key: 7,
      dataIndex: 'gmtModified',
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
      width: '15%',
    }, {
      title: '操作',
      key: 8,
      dataIndex: 'operation',
      render: (_, record) => renderOperation(record),
      width: '13%',
      align: 'right',
    }];
    return (
      <Card>
        <StandardTableList
          columns={columns}
          loading={loading}
          dataSource={addRowKey(list)}
          header={{
            basicSearch,
            onAdvanceFilterClick: this.handleFilterModalShow,
            onFilterClick: this.handleFilterOperation,
            onCreateClick: this.handleCreateOperation,
          }}
          footer={{
            pagination,
            batchActions,
            onBatchClick: this.handleBatchOperation,
          }}
          keepUIState={{ ...this.state.UIParams }}
        />
        {!this.state.filterModalDestroy && (
          <Modal
            width={600}
            visible
            title="高级筛选"
            okText="筛选"
            cancelText="取消"
            maskClosable={false}
            onCancel={this.handleFilterModalDestroy}
            onOk={this.handleModalFilterOperation}
          >
            <Form>
              <Form.Item label="所属商户" {...formItemLayout}>
                {getFieldDecorator('merchants', {
                  initialValue: merchants,
                })(
                  <AXRemoteSelect
                    fetching={fetching1}
                    dataSource={arrayDataFormatter(merchant.list)}
                    onSearch={this.handleMerchantRemoteSelectSearch}
                  />
                )}
              </Form.Item>
              <Form.Item label="所属校区" {...formItemLayout}>
                {getFieldDecorator('campuses', {
                  initialValue: campuses,
                })(
                  <AXRemoteSelect
                    fetching={fetching2}
                    dataSource={arrayDataFormatter(campus.list)}
                    onSearch={this.handleCampusRemoteSelectSearch}
                  />
                )}
              </Form.Item>
            </Form>
          </Modal>
        )}
      </Card>
    );
  }
}