123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- 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>
- );
- }
- }
|