import React, { Component } from 'react'; import './index.less'; import Assets from '@src/components/Assets'; import CheckboxItem from '../CheckboxItem'; import Icon from '../Icon'; import UserPagination from '../UserPagination'; export default class UserTable extends Component { 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, key, checked); } render() { const { columns = [], rowKey = 'key', data = [], select, selectList = [], current, total, pageSize, size = 'basic', even = 'even', theme = 'defalut', border = true, header = true, sortMap = {}, maxHeight, onChange, jump, } = 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, i) => { const checked = selectList.indexOf(row[rowKey]) >= 0; const isEven = i % 2; if (row.children) { return [ this.renderTr(row, checked, i, -1, isEven), ...row.children.map((item, index) => this.renderTr(item, checked, i, index, isEven)), ]; } return this.renderTr(row, checked, i, -1, isEven); })} </tbody> </table> {data.length === 0 && <div className="empty">暂无数据</div>} {total > 0 && data.length > 0 && ( <UserPagination jump={jump} total={total} pageSize={pageSize} current={current} onChange={onChange} /> )} </div> ); } renderTr(row, checked, rowIndex, childIndex, isEven) { const { columns } = this.props; return ( <tr hidden={row.disabled} className={`${isEven ? 'even' : 'odd'}`}> {columns.map((item, i) => { return this.renderTd(row, checked, item, rowIndex, childIndex, i); })} </tr> ); } renderTd(row, checked, item, index, childIndex, columnIndex) { const { select, rowKey = 'key' } = this.props; return ( <td className={`${item.className || ''} ${columnIndex === 0 && select ? 'check' : ''}`} width={item.width} align={item.align} > {childIndex === -1 && columnIndex === 0 && select && ( <CheckboxItem theme="white" checked={checked} onClick={value => this.onSelect(value, row[rowKey], row, rowKey)} /> )} {item.render ? item.render(row[item.key], row, index, childIndex) : row[item.key]} </td> ); } }