import React, { Component } from 'react'; import './index.less'; import Assets from '@src/components/Assets'; import CheckboxItem from '../CheckboxItem'; import Icon from '../Icon'; export default class UserTable extends Component { onChangePage(page) { const { current, total, onChange } = this.props; if (page < current || page > total) return; if (onChange) onChange(page); } onSort(key, value) { const { sortMap = {}, onSort } = this.props; sortMap[key] = value; if (onSort) onSort(sortMap); } onSelect(checked, key) { const { selectList = [] } = this.props; if (checked) { selectList.push(key); } else { selectList.splice(selectList.indexOf(key), 1); } if (this.props.onSelect) this.props.onSelect(selectList); } render() { const { columns = [], rowKey = 'key', data = [], select, selectList = [], current, total, size = 'basic', even = 'even', theme = 'defalut', border = true, header = true, sortMap = {}, maxHeight, } = this.props; return ( <div className={`user-table ${size} ${even} ${theme} ${border ? 'border' : ''}`}> <table> {header && ( <thead> <tr> {columns.map((item, i) => { return ( <th className={`${item.className || ''} ${i === 0 && select ? 'check' : ''}`} width={item.width} align={item.align} > {item.title} {item.fixSort && (sortMap[item.key] ? ( <Icon active name="arrow-down" onClick={() => this.onSort(item.key, '')} /> ) : ( <Icon name="arrow-up" onClick={() => this.onSort(item.key, 'desc')} /> ))} {item.sort && (sortMap[item.key] ? ( <Assets name={sortMap[item.key] === 'asc' ? 'seqencing2_up_select' : 'seqencing2_down_select'} onClick={() => this.onSort(item.key, sortMap[item.key] === 'asc' ? 'desc' : '')} /> ) : ( <Assets name="seqencing2_normal" onClick={() => this.onSort(item.key, 'asc')} /> ))} </th> ); })} </tr> </thead> )} <tbody style={{ maxHeight }}> {data.map(row => { const checked = selectList.indexOf(row[rowKey]) >= 0; return ( <tr> {columns.map((item, i) => { return ( <td className={`${item.className || ''} ${i === 0 && select ? 'check' : ''}`} width={item.width} align={item.align} > {i === 0 && select && ( <CheckboxItem theme="white" checked={checked} onClick={value => this.onSelect(value, row[rowKey])} /> )} {item.render ? item.render(row[item.key], row) : row[item.key]} </td> ); })} </tr> ); })} </tbody> </table> {data.length === 0 && <div className="empty">暂无数据</div>} {total && data.length > 0 && ( <div className="page"> <Icon name="arrow-left-small" onClick={() => this.onChangePage(current - 1)} /> <span> <b>{current}</b>/{total} </span> <Icon name="arrow-right-small" onClick={() => this.onChangePage(current + 1)} /> </div> )} </div> ); } }