Hotax/src/routes/Dashboard/Accounts/AccountsTerminals.js

import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Card, Badge } from 'antd';
import { StandardTableList } from '../../../components/AXList';
import { addRowKey } from '../../../utils/utils';
import styles from './AccountsTerminals.less';


@connect(({ loading, accounts }) => ({
  accounts,
  loading: loading.models.accounts,
}))

export default class TerminalsAccountsPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
    };
  }
  componentWillMount() {
    this.props.dispatch({
      type: 'accounts/fetchTerminalsList',
      payload: { ...this.state.Queryers }
    })
  }
  // 下载
  handleDownloadOperation = () => {
    this.props.dispatch({
      type: 'accounts/fetchTerminalsExcel',
    })
  };

  handleFilterOperation = (params, states) => {
    this.setState({
      UIParams: states,
      Queryers: params,
    });
    this.props.dispatch({
      type: 'accounts/fetchTerminalsList',
      payload: {
        ...params,
      },
    });
  };
  render() {
    const { loading,accounts } = this.props;
    const { list, totalSize, pageSize, pageNo } = accounts;

    const basicSearch = {
      keys: [{
        name: '终端编号',
        field: 'code',
      }],
    };
    const pagination = {
      pageNo,
      pageSize,
      totalSize,
    };

    const columns = [{
      title: '终端编号',
      key: 1,
      dataIndex: 'ucode',
      width: '15%',
    }, {
      title: '课程包编号',
      key: 2,
      dataIndex: 'pcode',
      width: '10%',
    }, {
      title: '课程包名称',
      key: 3,
      dataIndex: 'pname',
      width: '15%',
    }, {
      title: '权限有效期',
      key: 4,
      render: (_, record) => {
        const { startTimeStr, endTimeStr } = record;
        return (
          <div className={styles.authDesc}>
            <p><span>起始时间:&nbsp;&nbsp;</span>{`${startTimeStr}`}</p>
            <p><span>到期时间:&nbsp;&nbsp;</span>{`${endTimeStr}`}</p>
          </div>
        );
      },
      dataIndex: 'cityName',
      width: '15%',
      align: 'center',
    }, {
      title: '权限有效时长',
      key: 5,
      dataIndex: 'endTime',
      render: (text) => {
        const day = moment(text).diff(moment(), 'days');
        if (day < 0) {
          return <Badge status="error" text="已到期" />;
        }
        return <span><span style={{ color: '#52c41a', fontWeight: 'bold' }}>{day}</span>天到期</span>;
      },
      width: '10%',
    }, {
      title: '校区名称',
      key: 6,
      dataIndex: 'campusName',
      width: '16%',
    }, {
      title: '联系电话',
      key: 7,
      dataIndex: 'campusContactWay',
      width: '12%',
    }, {
      title: '联系人',
      key: 8,
      dataIndex: 'campusContactName',
      width: '6%',
    }];

    return (
      <Card>
        <StandardTableList
          columns={columns}
          loading={loading}
          dataSource={addRowKey(list)}
          header={{
            basicSearch,
            onFilterClick: this.handleFilterOperation,
            onDownload: this.handleDownloadOperation,
          }}
          footer={{
            pagination,
          }}
          keepUIState={{ ...this.state.UIParams }}
          showStatusSelect={false}
        />
      </Card>
    );
  }
}