From 33ef0adad6c59d4af70632c87e6bf9cffe5949cd Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Thu, 25 Jan 2018 22:31:36 +0800 Subject: [PATCH] refactor StandardTable - extract columns - support multiple sums display --- src/components/StandardTable/index.js | 123 ++++++++++---------------- src/routes/List/TableList.js | 68 +++++++++++++- 2 files changed, 112 insertions(+), 79 deletions(-) diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js index 639ef9df..907e8280 100644 --- a/src/components/StandardTable/index.js +++ b/src/components/StandardTable/index.js @@ -1,35 +1,56 @@ -import React, { PureComponent, Fragment } from 'react'; -import moment from 'moment'; -import { Table, Alert, Badge, Divider } from 'antd'; +import React, { PureComponent } from 'react'; +import { Table, Alert } from 'antd'; import styles from './index.less'; -const statusMap = ['default', 'processing', 'success', 'error']; +function initTotalList(columns) { + const totalList = []; + columns.forEach((column) => { + if (column.needTotal) { + totalList.push({ ...column, total: 0 }); + } + }); + return totalList; +} + class StandardTable extends PureComponent { - state = { - selectedRowKeys: [], - totalCallNo: 0, - }; + constructor(props) { + super(props); + const { columns } = props; + const needTotalList = initTotalList(columns); + + this.state = { + selectedRowKeys: [], + needTotalList, + }; + } componentWillReceiveProps(nextProps) { // clean state if (nextProps.selectedRows.length === 0) { + const needTotalList = initTotalList(nextProps.columns); this.setState({ selectedRowKeys: [], - totalCallNo: 0, + needTotalList, }); } } handleRowSelectChange = (selectedRowKeys, selectedRows) => { - const totalCallNo = selectedRows.reduce((sum, val) => { - return sum + parseFloat(val.callNo, 10); - }, 0); + let needTotalList = [...this.state.needTotalList]; + needTotalList = needTotalList.map((item) => { + return { + ...item, + total: selectedRows.reduce((sum, val) => { + return sum + parseFloat(val[item.dataIndex], 10); + }, 0), + }; + }); if (this.props.onSelectRow) { this.props.onSelectRow(selectedRows); } - this.setState({ selectedRowKeys, totalCallNo }); + this.setState({ selectedRowKeys, needTotalList }); } handleTableChange = (pagination, filters, sorter) => { @@ -41,69 +62,8 @@ class StandardTable extends PureComponent { } render() { - const { selectedRowKeys, totalCallNo } = this.state; - const { data: { list, pagination }, loading } = this.props; - - const status = ['关闭', '运行中', '已上线', '异常']; - - const columns = [ - { - title: '规则编号', - dataIndex: 'no', - }, - { - title: '描述', - dataIndex: 'description', - }, - { - title: '服务调用次数', - dataIndex: 'callNo', - sorter: true, - align: 'right', - render: val => `${val} 万`, - }, - { - title: '状态', - dataIndex: 'status', - filters: [ - { - text: status[0], - value: 0, - }, - { - text: status[1], - value: 1, - }, - { - text: status[2], - value: 2, - }, - { - text: status[3], - value: 3, - }, - ], - render(val) { - return ; - }, - }, - { - title: '更新时间', - dataIndex: 'updatedAt', - sorter: true, - render: val => {moment(val).format('YYYY-MM-DD HH:mm:ss')}, - }, - { - title: '操作', - render: () => ( - - 配置 - - 订阅警报 - - ), - }, - ]; + const { selectedRowKeys, needTotalList } = this.state; + const { data: { list, pagination }, loading, columns } = this.props; const paginationProps = { showSizeChanger: true, @@ -126,7 +86,16 @@ class StandardTable extends PureComponent { message={(
已选择 {selectedRowKeys.length} 项   - 服务调用总计 {totalCallNo} 万 + { + needTotalList.map(item => ( + {item.title}总计  + + {item.render ? item.render(item.total) : item.total} + + + ) + ) + } 清空
)} diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js index 8ee98e3e..a74860c7 100644 --- a/src/routes/List/TableList.js +++ b/src/routes/List/TableList.js @@ -1,6 +1,7 @@ -import React, { PureComponent } from 'react'; +import React, { PureComponent, Fragment } from 'react'; import { connect } from 'dva'; -import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd'; +import moment from 'moment'; +import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message, Badge, Divider } from 'antd'; import StandardTable from '../../components/StandardTable'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; @@ -9,6 +10,68 @@ import styles from './TableList.less'; const FormItem = Form.Item; const { Option } = Select; const getValue = obj => Object.keys(obj).map(key => obj[key]).join(','); +const statusMap = ['default', 'processing', 'success', 'error']; +const status = ['关闭', '运行中', '已上线', '异常']; +const columns = [ + { + title: '规则编号', + dataIndex: 'no', + }, + { + title: '描述', + dataIndex: 'description', + }, + { + title: '服务调用次数', + dataIndex: 'callNo', + sorter: true, + align: 'right', + render: val => `${val} 万`, + // mark to display a total number + needTotal: true, + }, + { + title: '状态', + dataIndex: 'status', + filters: [ + { + text: status[0], + value: 0, + }, + { + text: status[1], + value: 1, + }, + { + text: status[2], + value: 2, + }, + { + text: status[3], + value: 3, + }, + ], + render(val) { + return ; + }, + }, + { + title: '更新时间', + dataIndex: 'updatedAt', + sorter: true, + render: val => {moment(val).format('YYYY-MM-DD HH:mm:ss')}, + }, + { + title: '操作', + render: () => ( + + 配置 + + 订阅警报 + + ), + }, +]; const CreateForm = Form.create()((props) => { const { modalVisible, form, handleAdd, handleModalVisible } = props; @@ -335,6 +398,7 @@ export default class TableList extends PureComponent { selectedRows={selectedRows} loading={loading} data={data} + columns={columns} onSelectRow={this.handleSelectRows} onChange={this.handleStandardTableChange} /> -- GitLab