import React, { Component, Fragment } from 'react'; import NormalTable from '../NormalTable'; import Index from '../Shell'; function initTotalList(columns) { const totalList = []; columns.forEach((column) => { if (column.needTotal) { totalList.push({ ...column, total: 0 }); } }); return totalList; } class StandardTable extends Component { constructor(props) { super(props); const { columns } = props; const needTotalList = initTotalList(columns); this.state = { selectedRowKeys: [], needTotalList, }; } static getDerivedStateFromProps(nextProps) { // clean state if (nextProps.selectedRows && nextProps.selectedRows.length === 0) { const needTotalList = initTotalList(nextProps.columns); return { selectedRowKeys: [], needTotalList, }; } return null; } handleRowSelectChange = (selectedRowKeys, selectedRows) => { let { needTotalList } = this.state; needTotalList = needTotalList.map((item) => ({ ...item, total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex], 10), 0), })); const { onSelectRow } = this.props; if (onSelectRow) { onSelectRow(selectedRows, selectedRowKeys); } this.setState({ selectedRowKeys, needTotalList }); }; handleTableChange = (pagination, filters, sorter) => { const { onChange } = this.props; if (onChange) { onChange(pagination, filters, sorter); } }; cleanSelectedKeys = () => { this.handleRowSelectChange([], []); }; render() { const { selectedRowKeys, needTotalList } = this.state; const { data: { list, pagination }, loading, columns, rowKey, components, scroll, noSelectRow, bordered, showHeader, } = this.props; const paginationProps = { showSizeChanger: true, showQuickJumper: true, ...pagination, }; const rowSelection = { selectedRowKeys, onChange: this.handleRowSelectChange, type: this.props.selectType || 'checkbox ', getCheckboxProps: (record) => ({ disabled: record.disabled, }), }; return ( <div> <Index> {!noSelectRow ? ( <span style={{ paddingLeft: '12px', paddingTop: '8px' }}> 已选择 {selectedRowKeys.length} {needTotalList.map((item) => ( <span style={{ marginLeft: 8 }} key={item.dataIndex}> {item.title} 总计 <span style={{ fontWeight: 600 }}> {item.render ? item.render(item.total) : item.total} </span> </span> ))} <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}> 清空 </a> </span> ) : ( <div style={{ height: '1px' }} /> )} </Index> <NormalTable components={components} loading={loading} rowKey={rowKey || 'key'} rowSelection={typeof noSelectRow !== 'undefined' && noSelectRow ? null : rowSelection} dataSource={list} bordered={bordered} columns={columns} size="small" scroll={scroll} showHeader={showHeader} pagination={pagination === null ? null : paginationProps} onChange={this.handleTableChange} /> </div> ); } } export default StandardTable;