sagacloud-manager-control/src/sagacare_components/Table/index.jsx

import React, { Fragment } from 'react';
import { Spin, Popover, Checkbox, Pagination } from 'antd';
import cx from 'classnames';
import styles from './index.less';
import { ArrowUpOutlined, ArrowDownOutlined, CheckSquareOutlined } from '@ant-design/icons';

export default ({
  pagination = true,
  loading,
  columns,
  dataSource,
  rowKey,
  page,
  total,
  rowSelection,
  showRowSelection,
  minHeight = 200,
  onRowClick,
  expandable = function () {},
  onPageChange,
  onSortChange,
  onFilterChange,
  classname = '',
}) => {
  return (
    <div className={cx(styles.table, classname)}>
      <Spin spinning={loading} delay={600}>
        <table>
          <thead>
            <tr>
              {columns.map((col) => {
                return (
                  <th
                    key={col.dataIndex}
                    style={{ ...col.titleStyle, width: col.width }}
                    width={col.width}
                  >
                    {col.sorter && (
                      <span
                        className={cx(styles.sorter, {
                          [styles.sortered]: !!col.sortered,
                        })}
                        onClick={() => {
                          onSortChange(col, col.sortered === 'DESC' ? 'ASC' : 'DESC');
                        }}
                      >
                        {col.title}
                        {/* <Icon type={col.sortered === 'DESC' ? 'downward' : 'upward'} weight={col.sortered ? 600 : 400} />
                         */}
                        {col.sortered === 'DESC' ? (
                          <ArrowDownOutlined weight={col.sortered ? 600 : 400} />
                        ) : (
                          <ArrowUpOutlined weight={col.sortered ? 600 : 400} />
                        )}
                      </span>
                    )}
                    {col.filters && (
                      <Popover
                        trigger="click"
                        placement="bottomLeft"
                        // arrowPointAtCenter
                        content={
                          <div className={styles.filterList}>
                            {col.filters.map((f) => {
                              return (
                                <div
                                  key={f.value}
                                  className={cx(styles.filterItem, {
                                    [styles.filterItemChecked]: col.filteredValue.includes(f.value),
                                  })}
                                  onClick={() => {
                                    let newList = [...col.filteredValue];
                                    if (col.filteredValue.includes(f.value)) {
                                      if (col.single) {
                                        newList = [];
                                      } else {
                                        newList = col.filteredValue.filter(
                                          (item) => item !== f.value,
                                        );
                                      }
                                    } else {
                                      if (col.single) {
                                        newList = [f.value];
                                      } else {
                                        newList.push(f.value);
                                      }
                                    }
                                    onFilterChange(col.dataIndex, newList);
                                  }}
                                >
                                  <Checkbox checked={col.filteredValue.includes(f.value)} />
                                  <span className={styles.filterItemValue}>{f.label}</span>
                                </div>
                              );
                            })}
                          </div>
                        }
                      >
                        <span className={cx(styles.filter)}>
                          {col.filteredValue.length > 0 && (
                            <span className={cx(styles.fangxing)}>
                              <span className={cx(styles.circle)}></span>
                            </span>
                          )}
                          {col.filteredValue.length == 0 && (
                            <span className={cx(styles.filterTitlePic)}>
                              <CheckSquareOutlined style={{ fontSize: '16px' }} />
                            </span>
                          )}
                          <span>{col.title}</span>
                        </span>
                      </Popover>
                    )}
                    {!col.sorter && !col.filters && <span>{col.title}</span>}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {loading && dataSource.length === 0 && (
              <tr>
                <td colSpan={columns.length}>
                  <div style={{ height: minHeight }} />
                </td>
              </tr>
            )}
            <tr></tr>
            {dataSource.map((item, index) => {
              return (
                <Fragment key={item[rowKey]}>
                  <tr
                    onClick={() => onRowClick && onRowClick(item)}
                    className={cx({ [styles.canClick]: !!onRowClick })}
                  >
                    {columns.map((col) => {
                      return (
                        <td key={col.dataIndex}>
                          {col.render && col.render(item[col.dataIndex], item, index)}
                          {!col.render &&
                            (item[col.dataIndex] === undefined ? '-' : item[col.dataIndex])}
                        </td>
                      );
                    })}
                  </tr>
                  <tr>{expandable(item)}</tr>
                </Fragment>
              );
            })}
          </tbody>
        </table>
        {pagination && (
          <div className={styles.page}>
            <div>
              <Pagination
                current={page.pageNum}
                pageSize={page.pageSize}
                total={total}
                showSizeChanger={false}
                itemRender={(c, t, o) => {
                  if (t === 'prev') {
                    return <a>上一页</a>;
                  }
                  if (t === 'next') {
                    return <a>下一页</a>;
                  }
                  return o;
                }}
                onChange={(current, pageSize) => {
                  window.scrollTo(0, 0);
                  onPageChange({
                    pageNum: current,
                    pageSize,
                  });
                }}
              />
            </div>
          </div>
        )}
      </Spin>
    </div>
  );
};