import React, { PureComponent, Fragment } from 'react'; import { Alert, Table, Select, Input, Button, Pagination } from 'antd'; import PropTypes from 'prop-types'; import Authorized from '../../utils/Authorized'; import styles from './StandardTableList.less'; function getSearchField(options) { if (options && options.keys && options.keys.length) { return options.keys[0].field; } } export default class StandardTableList extends PureComponent { static defaultProps = { keepUIState: {}, loading: false, dataSource: [], columns: [], header: false, footer: false, showStatusSelect: true, } static propTypes = { loading: PropTypes.bool, dataSource: PropTypes.array, columns: PropTypes.array, header: PropTypes.oneOfType([ PropTypes.object, PropTypes.bool, ]), footer: PropTypes.oneOfType([ PropTypes.object, PropTypes.bool, ]), showStatusSelect: PropTypes.bool, keepUIState: PropTypes.object, } constructor(props) { super(props); const { keepUIState, header: { basicSearch, }, footer: { pagination, }, } = this.props; this.state = { batchActionKey: keepUIState.batchActionKey, searchSelectKey: keepUIState.searchSelectKey || getSearchField(basicSearch), searchInputValue: keepUIState.searchInputValue || '', selectedKeys: keepUIState.selectedKeys || [], selectedStatusKey: keepUIState.selectedStatusKey || 'ALL', pageNo: keepUIState.pageNo || pagination.pageNo || 1, pageSize: keepUIState.pageSize || pagination.pageSize || 15, totalSize: keepUIState.totalSize || pagination.totalSize || 0, }; } componentWillReceiveProps(nextProps) { if (nextProps.footer) { const { pagination } = nextProps.footer; const { pageNo, pageSize, totalSize } = pagination; this.setState({ pageNo, pageSize, totalSize }); } } getListHeader = () => { const { showStatusSelect, header: { basicSearch, onAdvanceFilterClick, onCreateClick }, footer: { pagination }, } = this.props; const { keys } = basicSearch; return (
{showStatusSelect && ( )} {keys.map(item => ( {item.name} ))} } placeholder="请输入" enterButton onChange={this.handleInputChange} onSearch={this.handleSearchBtnClick} />
{onAdvanceFilterClick && ( 高级筛选 )} {/* noCreate 参数控制是否显示新建按钮 */} {onCreateClick !== undefined && ( )}
已选择 {this.state.selectedKeys.length} 项   总计 {pagination.totalSize} 项   )} type="info" showIcon />
); } getListFooter = () => { const { footer: { batchActions, pagination } } = this.props; const paginationProps = { total: this.state.totalSize, current: this.state.pageNo, pageSize: this.state.pageSize, showSizeChanger: true, showQuickJumper: true, onChange: this.handleListPageChange, onShowSizeChange: this.handleListPageSizeChange, }; return (
{batchActions && (
)} {pagination && (
`共 ${total} 条`} />
)}
); } // 过滤 handleFilterOperation = (kv) => { const { header: { onFilterClick, }, } = this.props; const { searchSelectKey, searchInputValue, selectedStatusKey, pageNo, pageSize, } = this.state; const queryParams = { pageNo, pageSize, [searchSelectKey]: searchInputValue, status: selectedStatusKey, ...kv, }; if (queryParams.status === 'ALL') { delete queryParams.status; } onFilterClick(queryParams, this.state); } // 单选/取消单选 handleItemSelectChange = (itemId, checked) => { const { selectedKeys } = this.state; const newSelectedKeys = [...selectedKeys]; if (checked) { this.setState({ selectedKeys: [...newSelectedKeys, itemId] }); } else { this.setState({ selectedKeys: newSelectedKeys.filter(a => a !== itemId) }); } } // 刷新页面,重置筛选参数 cleanFilterParams = () => { const { header: { basicSearch } } = this.props; this.setState({ batchActionKey: undefined, searchSelectKey: getSearchField(basicSearch), selectedKeys: [], searchInputValue: '', allChecked: false, selectedStatusKey: 'ALL', }); } // 过滤状态 handleStatusChange = (value) => { this.setState({ selectedStatusKey: value, }, () => this.handleFilterOperation({ status: value }) ); } // 选择搜索字段 handleSearchSelectChange = (value) => { this.setState({ searchSelectKey: value }); } // 响应input输入 handleInputChange = (e) => { this.setState({ searchInputValue: e.target.value }); } // 筛选搜索操作 handleSearchBtnClick = (value) => { const { searchSelectKey } = this.state; this.setState({ searchInputValue: value, }, () => this.handleFilterOperation({ [searchSelectKey]: value }) ); } // 刷新操作 handleRefreshBtnClick = () => { this.handleFilterOperation({}); } // list pageNo变化 handleListPageChange = (page, pageSize) => { this.setState({ pageSize, pageNo: page, }, () => { this.handleFilterOperation({ pageSize, pageNo: page, }); }); } // list pageSize变化 handleListPageSizeChange = (current, size) => { this.setState({ pageSize: size, pageNo: current, }, () => { this.handleFilterOperation({ pageSize: size, pageNo: current, }); }); } // 选择批量处理类型 handleBatchActionSelectChange = (value) => { this.setState({ batchActionKey: value }); } // 批量处理操作 handleBatchBtnClick = () => { const { footer: { onBatchClick } } = this.props; const { batchActionKey, selectedKeys } = this.state; onBatchClick(batchActionKey, selectedKeys); } handleRowSelectChange = (selectedKeys) => { this.setState({ selectedKeys }); } render() { const { loading, columns, dataSource, header, footer, } = this.props; const listFooter = footer ? this.getListFooter : false; const listHeader = header ? this.getListHeader : false; const { selectedKeys } = this.state; const rowSelection = { selectedKeys, onChange: this.handleRowSelectChange, }; return ( record.key} rowSelection={rowSelection} columns={columns} dataSource={dataSource} pagination={false} className={styles.table} /> ); } }