index.js
2.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { Table, Alert, Badge, Divider } from 'antd';
import styles from './index.less';
const statusMap = ['default', 'processing', 'success', 'error'];
class StandardTable extends PureComponent {
state = {
selectedRowKeys: [],
};
componentWillReceiveProps(nextProps) {
// clean state
if (nextProps.selectedRows.length === 0) {
this.setState({
selectedRowKeys: [],
});
}
}
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
if (this.props.onSelectRow) {
this.props.onSelectRow(selectedRows);
}
this.setState({ selectedRowKeys });
}
handleTableChange = (pagination, filters, sorter) => {
this.props.onChange(pagination, filters, sorter);
}
cleanSelectedKeys = () => {
this.handleRowSelectChange([], []);
}
render() {
const { selectedRowKeys } = this.state;
const { data: { list, pagination },loading,columns } = this.props;
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
...pagination,
};
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
return (
<div className={styles.standardTable}>
<div className={styles.tableAlert}>
<Alert
message={(
<div>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
</div>
)}
type="info"
showIcon
/>
</div>
<Table
loading={loading}
rowKey={record => record.key}
rowSelection={rowSelection}
dataSource={list}
columns={columns}
pagination={paginationProps}
onChange={this.handleTableChange}
/>
</div>
);
}
}
export default StandardTable;