import React, { PureComponent, Fragment } from 'react'; import { connect } from 'dva'; import { Table, Button, Input, Checkbox, Icon, Popover, Col } from 'antd'; import styles from './index.less'; const { Search } = Input; function initColumns(columns) { const lists = columns.map(i => { return { show: true, ...i, }; }); return lists; } function filterColumes(columns) { const filterData = columns.filter(i => !!i.dataIndex); const initColumn = filterData.map(i => { return { dataIndex: i.dataIndex, show: i.show, }; }); return initColumn; } function saveColumns(list, path) { const str = localStorage.getItem(path); let columns = []; if (str) { const storage = JSON.parse(str); list.forEach(item => { const one = storage.find(i => i.dataIndex === item.dataIndex); const obj = { ...item, }; if (one) { obj.show = one.show; } columns.push(obj); }); } else { const simple = filterColumes(list); localStorage.setItem(path, JSON.stringify(simple)); columns = list; } return columns; } @connect(({ allspace }) => ({ allspace, })) class RefreshTable extends PureComponent { static defaultProps = { search: true, searchPlaceHolder: '按名称模糊搜索', save: true, scrollFlag: false, scrollY: 0, scroll: false, }; constructor(props) { super(props); this.state = { datecolumns: [], width: 0, columnVisible: false, }; } componentDidMount() { this.initData(); } componentWillReceiveProps(nextProps) { this.initData(); // todo 关于这儿是否有bug测试 // clean state const { datecolumns } = this.state; if (nextProps.columns.length > 0 && datecolumns.length > 0) { const datecolumnsRefresh = nextProps.columns.map((i, idx) => { let nowData = ''; datecolumns.forEach(item => { if (item.dataIndex === i.dataIndex) { nowData = item; } }); const { show } = nowData; const obj = { ...nowData, ...i, show, }; return obj; }); this.setState({ datecolumns: datecolumnsRefresh, }); } } initData = () => { const { scrollFlag, columns, save, pathName } = this.props; let { width } = this.state; const initData = initColumns(columns); let datecolumns = null; if (save) { datecolumns = saveColumns(initData, pathName); } else { datecolumns = initData; } if (scrollFlag) { datecolumns.forEach(item => { if (item.show) { width += item.width; } }); this.setState({ width, datecolumns, }); } else { this.setState({ datecolumns, }); } }; defaultList = () => { const { datecolumns = [] } = this.state; const defaultCheckedList = []; datecolumns.forEach(item => { if (item.show) { defaultCheckedList.push(item.dataIndex); } }); return defaultCheckedList; }; handleTableChange = (pagination, filters, sorter) => { const { onChange } = this.props; const { datecolumns } = this.state; if (onChange) { onChange(pagination, filters, sorter); } if (sorter.field) { datecolumns.forEach(item => { item.sortOrder = false; item.dataIndex === sorter.field && (item.sortOrder = sorter.order); }); this.setState({ datecolumns, }); } else { datecolumns.forEach(item => { item.sortOrder = false; }); this.setState({ datecolumns, }); } }; handleColumnVisible = () => {}; showTableColumn = visible => { this.setState({ columnVisible: visible, }); }; changeColumn = value => { const { scrollFlg, pathName } = this.props; const { datecolumns } = this.state; let width = 0; const arr = []; datecolumns.forEach(item => { const obj = { ...item, }; if (value.indexOf(item.dataIndex) !== -1) { obj.show = true; if (scrollFlg) { width += obj.width; } } else { obj.show = false; } arr.push(obj); }); this.setState({ datecolumns: arr, width, }); const storage = arr.map(i => { return { dataIndex: i.dataIndex, show: i.show, }; }); localStorage.setItem(pathName, JSON.stringify(storage)); }; handleCancel = () => { this.setState({ columnVisible: false, }); }; handleRefresh = () => { const { handleRefresh } = this.props; const { datecolumns } = this.state; if (handleRefresh) { datecolumns.forEach(item => { item.sortOrder = false; }); this.setState({ datecolumns, }); handleRefresh(); } }; render() { const { scroll, scrollY, data, children, rowKey, searchPlaceHolder, tableParam, handleRefresh, handleSearch, changeSearch, pageSizeArr, searchWidth, ...rest } = this.props; const { resultList = [], totalsize = 0 } = data; const { columnVisible, datecolumns, width } = this.state; const defaultScroll = {}; if (scroll) { defaultScroll.x = width; } if (scrollY) { defaultScroll.y = scrollY; } const paginationProps = { showSizeChanger: true, showQuickJumper: true, showTotal: () => `共${totalsize}条记录 第${tableParam.pageNo}/${Math.ceil( totalsize / tableParam.pageSize )}页`, current: tableParam.pageNo, pageSize: tableParam.pageSize, total: totalsize, pageSizeOptions: pageSizeArr ? pageSizeArr : ['10', '20', '30', '40'], }; const checkValue = this.defaultList(); return ( <div className={styles.RefreshTable}> <div className={styles.tableListOperator}> {handleRefresh && ( <Button icon="reload" type="primary" onClick={this.handleRefresh} className={styles.tableRefresh} /> )} <Popover onVisibleChange={this.showTableColumn} placement="bottomLeft" visible={columnVisible} trigger="click" className={styles.dropdown} content={ <Checkbox.Group className={styles.selsectMenu} defaultValue={checkValue} onChange={this.changeColumn} > {datecolumns.map(item => ( <Col key={`item_${item.dataIndex}`} style={{ marginBottom: '8px' }}> <Checkbox value={item.dataIndex} key={item.dataIndex} disabled={item.disabled} className={styles.checkboxStyle} > {item.title} </Checkbox> </Col> ))} </Checkbox.Group> } > <Button className={styles.refreshButton}> <Icon type="appstore" theme="filled" style={{ fontSize: '14px' }} /> </Button> </Popover> {children ? <Fragment>{children}</Fragment> : null} {handleSearch && ( <Search placeholder={searchPlaceHolder} style={{ width: searchWidth ? searchWidth : '200px', marginRight: '10px' }} value={tableParam.filterParam} onChange={changeSearch} onSearch={value => handleSearch(value)} /> )} </div> <Table {...rest} rowKey={ rowKey || (record => record.id || (record.namespace ? record.name + 'https://www.jb51.net/' + record.namespace : record.name)) } size="middle" loading={tableParam.loading} dataSource={resultList} pagination={paginationProps} scroll={defaultScroll} columns={datecolumns.filter(item => item.show === true)} onChange={this.handleTableChange} /> </div> ); } } export default RefreshTable;
调用组件页面