2BCmsBrowser/src/routes/Terminal/table.js

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames';
import queryString from 'query-string';
import { Modal, Table, Popconfirm, Menu, Icon } from 'antd';
import AnimTableBody from '../../components/Animation/AnimTableBody';
import styles from './table.less';

const confirm = Modal.confirm;

const TableList = ({ onDeleteItem, onEditItem, location, pagination, ...tableProps }) => {
  // 从url中提取查询参数
  location.query = queryString.parse(location.search);
  const handleDeleteItem = (record) => {
    confirm({
      title: `您确定要${record.status === 'NORMAL' ? '禁用' : '解禁'}该终端账号?`,
      onOk () {
        onDeleteItem(record.id);
      },
    })
  }
  const columns = [{
    title: '终端编号',
    dataIndex: 'code',
    key: 'code',
  },{
    title: '终端名称',
    dataIndex: 'name',
    key: 'name',
  },{
    title: '校区',
    dataIndex: 'campusName',
    key: 'campusName',
  },{
    title: '添加时间',
    dataIndex: 'gmtCreated',
    key: 'gmtCreated',
    render: (text, record) => (
      <div>{moment(text).format('YYYY-MM-DD')}</div>
    )
  },{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    render: (text, record) => (
      <div>
        <a onClick={() => onEditItem(record)}>编辑</a>
        <span className={styles.splitLine} />
          <a onClick={() => handleDeleteItem(record)}>{record.status === 'NORMAL' ? '禁用' : '解禁'}</a>
      </div>
    )
  }];
  tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  };
  const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
  return (
    <Table
      simple
      bordered
      { ...tableProps }
      columns={columns}
      className={classnames({ [styles.table]: true, [styles.motion]: true })}
      rowKey={record => record.id}
      getBodyWrapper={getBodyWrapper}
    />
  );
}

TableList.propTypes = {
  location: PropTypes.object,
  onChange: PropTypes.func.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired,
}

export default TableList;