index.tsx 4.44 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Alert, Table } from 'antd';
陈帅's avatar
陈帅 committed
2
import { ColumnProps, TableRowSelection, TableProps } from 'antd/es/table';
陈帅's avatar
陈帅 committed
3
import React, { Component, Fragment } from 'react';
陈帅's avatar
陈帅 committed
4

陈帅's avatar
陈帅 committed
5
import { TableListItem } from '../../data.d';
陈帅's avatar
陈帅 committed
6
import styles from './index.less';
7

陈帅's avatar
陈帅 committed
8 9 10 11 12
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export interface StandardTableProps<T> extends Omit<TableProps<T>, 'columns'> {
  columns: StandardTableColumnProps[];
  data: {
陈帅's avatar
陈帅 committed
13
    list: TableListItem[];
陈帅's avatar
陈帅 committed
14 15 16 17 18 19
    pagination: StandardTableProps<TableListItem>['pagination'];
  };
  selectedRows: TableListItem[];
  onSelectRow: (rows: any) => void;
}

陈帅's avatar
陈帅 committed
20
export interface StandardTableColumnProps extends ColumnProps<TableListItem> {
陈帅's avatar
陈帅 committed
21 22
  needTotal?: boolean;
  total?: number;
陈帅's avatar
陈帅 committed
23
}
陈帅's avatar
陈帅 committed
24 25 26 27 28 29

function initTotalList(columns: StandardTableColumnProps[]) {
  if (!columns) {
    return [];
  }
  const totalList: StandardTableColumnProps[] = [];
jim's avatar
jim committed
30
  columns.forEach(column => {
ddcat1115's avatar
ddcat1115 committed
31 32 33 34 35 36 37
    if (column.needTotal) {
      totalList.push({ ...column, total: 0 });
    }
  });
  return totalList;
}

陈帅's avatar
陈帅 committed
38 39 40 41 42 43 44
interface StandardTableState {
  selectedRowKeys: string[];
  needTotalList: StandardTableColumnProps[];
}

class StandardTable extends Component<StandardTableProps<TableListItem>, StandardTableState> {
  static getDerivedStateFromProps(nextProps: StandardTableProps<TableListItem>) {
jim's avatar
jim committed
45 46 47 48 49 50 51 52 53 54
    // clean state
    if (nextProps.selectedRows.length === 0) {
      const needTotalList = initTotalList(nextProps.columns);
      return {
        selectedRowKeys: [],
        needTotalList,
      };
    }
    return null;
  }
陈帅's avatar
陈帅 committed
55

陈帅's avatar
陈帅 committed
56 57 58 59 60 61 62 63 64 65
  constructor(props: StandardTableProps<TableListItem>) {
    super(props);
    const { columns } = props;
    const needTotalList = initTotalList(columns);

    this.state = {
      selectedRowKeys: [],
      needTotalList,
    };
  }
陈帅's avatar
陈帅 committed
66

陈帅's avatar
陈帅 committed
67 68 69 70 71
  handleRowSelectChange: TableRowSelection<TableListItem>['onChange'] = (
    selectedRowKeys,
    selectedRows: TableListItem[],
  ) => {
    const currySelectedRowKeys = selectedRowKeys as string[];
陈帅's avatar
陈帅 committed
72
    let { needTotalList } = this.state;
73 74
    needTotalList = needTotalList.map(item => ({
      ...item,
陈帅's avatar
陈帅 committed
75
      total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex || 0]), 0),
76
    }));
陈帅's avatar
陈帅 committed
77 78 79
    const { onSelectRow } = this.props;
    if (onSelectRow) {
      onSelectRow(selectedRows);
80 81
    }

陈帅's avatar
陈帅 committed
82
    this.setState({ selectedRowKeys: currySelectedRowKeys, needTotalList });
jim's avatar
jim committed
83
  };
84

陈帅's avatar
陈帅 committed
85 86 87 88
  handleTableChange: TableProps<TableListItem>['onChange'] = (
    pagination,
    filters,
    sorter,
陈帅's avatar
陈帅 committed
89 90
    ...rest
  ) => {
陈帅's avatar
陈帅 committed
91 92
    const { onChange } = this.props;
    if (onChange) {
陈帅's avatar
陈帅 committed
93
      onChange(pagination, filters, sorter, ...rest);
陈帅's avatar
陈帅 committed
94
    }
jim's avatar
jim committed
95
  };
96 97

  cleanSelectedKeys = () => {
陈帅's avatar
陈帅 committed
98 99 100
    if (this.handleRowSelectChange) {
      this.handleRowSelectChange([], []);
    }
jim's avatar
jim committed
101
  };
102 103

  render() {
ddcat1115's avatar
ddcat1115 committed
104
    const { selectedRowKeys, needTotalList } = this.state;
陈帅's avatar
陈帅 committed
105 106
    const { data, rowKey, ...rest } = this.props;
    const { list = [], pagination = false } = data || {};
107 108 109 110 111 112 113

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

陈帅's avatar
陈帅 committed
114
    const rowSelection: TableRowSelection<TableListItem> = {
115 116
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
陈帅's avatar
陈帅 committed
117
      getCheckboxProps: (record: TableListItem) => ({
nikogu's avatar
nikogu committed
118 119
        disabled: record.disabled,
      }),
120 121 122 123 124 125
    };

    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}>
          <Alert
jim's avatar
jim committed
126
            message={
陈帅's avatar
陈帅 committed
127
              <Fragment>
ddcat1115's avatar
ddcat1115 committed
128
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a>&nbsp;&nbsp;
陈帅's avatar
陈帅 committed
129
                {needTotalList.map((item, index) => (
jim's avatar
jim committed
130
                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
陈帅's avatar
陈帅 committed
131 132
                    {item.title}
                    总计&nbsp;
jim's avatar
jim committed
133
                    <span style={{ fontWeight: 600 }}>
陈帅's avatar
陈帅 committed
134 135 136
                      {item.render
                        ? item.render(item.total, item as TableListItem, index)
                        : item.total}
ddcat1115's avatar
ddcat1115 committed
137
                    </span>
jim's avatar
jim committed
138 139 140 141 142
                  </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空
                </a>
陈帅's avatar
陈帅 committed
143
              </Fragment>
jim's avatar
jim committed
144
            }
145 146 147 148 149
            type="info"
            showIcon
          />
        </div>
        <Table
150
          rowKey={rowKey || 'key'}
151 152 153 154
          rowSelection={rowSelection}
          dataSource={list}
          pagination={paginationProps}
          onChange={this.handleTableChange}
155
          {...rest}
156 157 158 159 160 161 162
        />
      </div>
    );
  }
}

export default StandardTable;