Hotax/src/components/AXTableSelector/MultipleSelectTable.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Pagination, Button } from 'antd';
import styles from './MultipleSelectTable.less';

export default class MultipleSelectTable extends Component {
  static defaultProps = {
    loading: false,
    columns: [],
    dataSource: [],
    pagination: false,
  };
  static propTypes = {
    loading: PropTypes.bool,
    columns: PropTypes.array,
    dataSource: PropTypes.array,
    pagination: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.bool,
    ]),
  };
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: props.selectedRows,
      selectedRowKeys: props.selectedRowKeys,
    };
  }

  /**
   * 全选操作回调
   */
  handleCheckAllOperation = () => {
    const allSelectableRows = this.props.dataSource.filter(rowData => !rowData.disabled);
    const allSelectableRowKeys = allSelectableRows.map(rowData => rowData.key);
    this.setState({
      selectedRows: allSelectableRows,
      selectedRowKeys: allSelectableRowKeys,
    });
  };
  handleTransferOperation = () => {
    this.props.onTransfer(this.state.selectedRows);
    this.setState({
      selectedRows: [],
      selectedRowKeys: [],
    });
  };
  /**
   * 移除操作回调
   */
  handleRemoveOperation = () => {
    this.props.onRemove(this.state.selectedRows);
  };
  /**
   * 选中项变化回调
   * @param selectedRowKeys
   * @param selectedRows
   */
  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows,
      selectedRowKeys,
    });
  };
  /**
   * 待选table页码变化回调
   * @param page
   * @param pageSize
   */
  handleTableChange = (page, pageSize) => {
    this.props.onChange(page, pageSize);
  };

  render() {
    const { loading, columns, dataSource, pagination, tableType } = this.props;
    const { selectedRowKeys } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    const renderTableFooter = (paginationProps) => {
      if (paginationProps) {
        return (
          <Pagination
            {...paginationProps}
            onChange={this.handleTableChange}
          />
        );
      } else {
        return false;
      }
    };

    return (
      <div className={styles.container}>
        <div className={styles.tableWrapper}>
          <Table
            bordered
            className={styles.table}
            pagination={false}
            loading={loading}
            columns={columns}
            dataSource={dataSource}
            footer={() => renderTableFooter(pagination)}
            rowKey={record => record.key}
            rowSelection={rowSelection}
            onChange={this.handleTableChange}
            scroll={{ y: 350 }}
          />
        </div>
        <div className={styles.buttonWrapper}>
          <Button
            size="small"
            onClick={this.handleCheckAllOperation}
            style={{ marginRight: 10 }}
          >全选
          </Button>
          {tableType === 'waiting' ?
            (
              <Button
                size="small"
                type="primary"
                onClick={this.handleTransferOperation}
              >确定
              </Button>
            ) : (
              <Button
                size="small"
                type="primary"
                onClick={this.handleRemoveOperation}
              >移除
              </Button>
            )
          }
        </div>
      </div>
    );
  }
}