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

import React, { Component } from 'react';
import './index.less';
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 ? 'select' : ''}`}
                      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] ? (
                          <Icon
                            active
                            name={`arrow-${sortMap[item.key] === 'asc' ? 'up' : 'down'}`}
                            onClick={() => this.onSort(item.key, sortMap[item.key] === 'asc' ? 'desc' : '')}
                          />
                        ) : (
                          <Icon name="arrow-up" 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 ? 'select' : ''}`}
                        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="prev" onClick={() => this.onChangePage(current - 1)} />
            <span>
              <b>{current}</b>/{total}
            </span>
            <Icon name="next" onClick={() => this.onChangePage(current + 1)} />
          </div>
        )}
      </div>
    );
  }
}