MultipleSelectTable.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Table, Pagination, Button } from 'antd';
  4. import styles from './MultipleSelectTable.less';
  5. export default class MultipleSelectTable extends Component {
  6. static defaultProps = {
  7. loading: false,
  8. columns: [],
  9. dataSource: [],
  10. pagination: false,
  11. };
  12. static propTypes = {
  13. loading: PropTypes.bool,
  14. columns: PropTypes.array,
  15. dataSource: PropTypes.array,
  16. pagination: PropTypes.oneOfType([
  17. PropTypes.object,
  18. PropTypes.bool,
  19. ]),
  20. };
  21. constructor(props) {
  22. super(props);
  23. this.state = {
  24. selectedRows: props.selectedRows,
  25. selectedRowKeys: props.selectedRowKeys,
  26. };
  27. }
  28. /**
  29. * 全选操作回调
  30. */
  31. handleCheckAllOperation = () => {
  32. const allSelectableRows = this.props.dataSource.filter(rowData => !rowData.disabled);
  33. const allSelectableRowKeys = allSelectableRows.map(rowData => rowData.key);
  34. this.setState({
  35. selectedRows: allSelectableRows,
  36. selectedRowKeys: allSelectableRowKeys,
  37. });
  38. };
  39. handleTransferOperation = () => {
  40. this.props.onTransfer(this.state.selectedRows);
  41. this.setState({
  42. selectedRows: [],
  43. selectedRowKeys: [],
  44. });
  45. };
  46. /**
  47. * 移除操作回调
  48. */
  49. handleRemoveOperation = () => {
  50. this.props.onRemove(this.state.selectedRows);
  51. };
  52. /**
  53. * 选中项变化回调
  54. * @param selectedRowKeys
  55. * @param selectedRows
  56. */
  57. handleRowSelectChange = (selectedRowKeys, selectedRows) => {
  58. this.setState({
  59. selectedRows,
  60. selectedRowKeys,
  61. });
  62. };
  63. /**
  64. * 待选table页码变化回调
  65. * @param page
  66. * @param pageSize
  67. */
  68. handleTableChange = (page, pageSize) => {
  69. this.props.onChange(page, pageSize);
  70. };
  71. render() {
  72. const { loading, columns, dataSource, pagination, tableType } = this.props;
  73. const { selectedRowKeys } = this.state;
  74. const rowSelection = {
  75. selectedRowKeys,
  76. onChange: this.handleRowSelectChange,
  77. getCheckboxProps: record => ({
  78. disabled: record.disabled,
  79. }),
  80. };
  81. const renderTableFooter = (paginationProps) => {
  82. if (paginationProps) {
  83. return (
  84. <Pagination
  85. {...paginationProps}
  86. onChange={this.handleTableChange}
  87. />
  88. );
  89. } else {
  90. return false;
  91. }
  92. };
  93. return (
  94. <div className={styles.container}>
  95. <div className={styles.tableWrapper}>
  96. <Table
  97. bordered
  98. className={styles.table}
  99. pagination={false}
  100. loading={loading}
  101. columns={columns}
  102. dataSource={dataSource}
  103. footer={() => renderTableFooter(pagination)}
  104. rowKey={record => record.key}
  105. rowSelection={rowSelection}
  106. onChange={this.handleTableChange}
  107. scroll={{ y: 350 }}
  108. />
  109. </div>
  110. <div className={styles.buttonWrapper}>
  111. <Button
  112. size="small"
  113. onClick={this.handleCheckAllOperation}
  114. style={{ marginRight: 10 }}
  115. >全选
  116. </Button>
  117. {tableType === 'waiting' ?
  118. (
  119. <Button
  120. size="small"
  121. type="primary"
  122. onClick={this.handleTransferOperation}
  123. >确定
  124. </Button>
  125. ) : (
  126. <Button
  127. size="small"
  128. type="primary"
  129. onClick={this.handleRemoveOperation}
  130. >移除
  131. </Button>
  132. )
  133. }
  134. </div>
  135. </div>
  136. );
  137. }
  138. }