sourcecode/front/project/www/components/UserTable/index.js

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,
    } = 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 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>
    );
  }
}