Hotax/src/components/RBList/StandardTableList.js

import React, { PureComponent, Fragment } from 'react';
import { Alert, Table, Select, Input, Button, Pagination } from 'antd';
import PropTypes from 'prop-types';
import Authorized from '../../utils/Authorized';
import styles from './StandardTableList.less';

function getSearchField(options) {
  if (options && options.keys && options.keys.length) {
    return options.keys[0].field;
  }
}

export default class StandardTableList extends PureComponent {
  static defaultProps = {
    keepUIState: {},
    loading: false,
    dataSource: [],
    columns: [],
    header: false,
    footer: false,
    showStatusSelect: true,
  }
  static propTypes = {
    loading: PropTypes.bool,
    dataSource: PropTypes.array,
    columns: PropTypes.array,
    header: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.bool,
    ]),
    footer: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.bool,
    ]),
    showStatusSelect: PropTypes.bool,
    keepUIState: PropTypes.object,
  }
  constructor(props) {
    super(props);
    const {
      keepUIState,
      header: {
        basicSearch,
      },
      footer: {
        pagination,
      },
    } = this.props;
    this.state = {
      batchActionKey: keepUIState.batchActionKey,
      searchSelectKey: keepUIState.searchSelectKey || getSearchField(basicSearch),
      searchInputValue: keepUIState.searchInputValue || '',
      selectedKeys: keepUIState.selectedKeys || [],
      selectedStatusKey: keepUIState.selectedStatusKey || 'ALL',
      pageNo: keepUIState.pageNo || pagination.pageNo || 1,
      pageSize: keepUIState.pageSize || pagination.pageSize || 15,
      totalSize: keepUIState.totalSize || pagination.totalSize || 0,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.footer) {
      const { pagination } = nextProps.footer;
      const { pageNo, pageSize, totalSize } = pagination;
      this.setState({ pageNo, pageSize, totalSize });
    }
  }
  getListHeader = () => {
    const {
      showStatusSelect,
      header: { basicSearch, onAdvanceFilterClick, onCreateClick },
      footer: { pagination },
    } = this.props;
    const { keys } = basicSearch;
    return (
      <div className={styles.header}>
        <div className={styles.headerSearch}>
          <div className={styles.basicSearch}>
            <div className={styles.left}>
              {showStatusSelect && (
              <Select
                onChange={this.handleStatusChange}
                value={this.state.selectedStatusKey}
                style={{ width: '20%', marginRight: 10 }}
              >
                <Select.Option key="all" value="ALL">全部状态</Select.Option>
                <Select.Option key="normal" value="NORMAL">正常</Select.Option>
                <Select.Option key="delete" value="DEL">已删除</Select.Option>
              </Select>
)}
              <Input.Search
                value={this.state.searchInputValue}
                style={{ width: '75%' }}
                addonBefore={
                  <Select
                    placeholder="请选择"
                    value={this.state.searchSelectKey}
                    onChange={this.handleSearchSelectChange}
                  >
                    {keys.map(item => (
                      <Select.Option
                        key={item.field}
                        value={item.field}
                      >
                        {item.name}
                      </Select.Option>))}
                  </Select>
                }
                placeholder="请输入"
                enterButton
                onChange={this.handleInputChange}
                onSearch={this.handleSearchBtnClick}
              />
            </div>
            <div className={styles.right}>
              {onAdvanceFilterClick && (
              <a
                className={styles.searchLevel}
                onClick={onAdvanceFilterClick}
              >高级筛选
              </a>
)}
              <Button icon="sync" onClick={this.handleRefreshBtnClick}>刷新</Button>
              {/* noCreate 参数控制是否显示新建按钮 */}
              {onCreateClick !== undefined && (
              <Authorized authority="root" noMatch={null}>
                <Button
                  icon="plus"
                  type="primary"
                  style={{ marginLeft: 5 }}
                  onClick={onCreateClick}
                >新建
                </Button>
              </Authorized>
)}
            </div>
          </div>
        </div>
        <Alert
          message={(
            <Fragment>
              已选择 <a style={{ fontWeight: 600 }}>{this.state.selectedKeys.length}</a> 项&nbsp;&nbsp;
              总计 <a style={{ fontWeight: 600 }}>{pagination.totalSize}</a> 项&nbsp;&nbsp;
            </Fragment>
          )}
          type="info"
          showIcon
        />
      </div>
    );
  }
  getListFooter = () => {
    const { footer: { batchActions, pagination } } = this.props;
    const paginationProps = {
      total: this.state.totalSize,
      current: this.state.pageNo,
      pageSize: this.state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      onChange: this.handleListPageChange,
      onShowSizeChange: this.handleListPageSizeChange,
    };
    return (
      <div className={styles.footer}>
        {batchActions && (
        <Authorized authority="root" noMatch={null}>
          <div className={styles.batch}>
            <Select
              style={{ width: 100 }}
              placeholder="请选择..."
              value={this.state.batchActionKey}
              onChange={this.handleBatchActionSelectChange}
            >
              {batchActions.map(item => (
                <Select.Option key={item.key} value={item.key}>
                  {item.name}
                </Select.Option>))}
            </Select>
            <Button
              type="primary"
              style={{ marginLeft: 15 }}
              onClick={this.handleBatchBtnClick}
              disabled={!this.state.selectedKeys.length}
            >确定
            </Button>
          </div>
        </Authorized>)}
        {pagination && (
        <div className={styles.pagination}>
          <Pagination
            {...paginationProps}
            showTotal={total => `共 ${total} 条`}
          />
        </div>)}
      </div>
    );
  }
  // 过滤
  handleFilterOperation = (kv) => {
    const {
      header: {
        onFilterClick,
      },
    } = this.props;
    const {
      searchSelectKey,
      searchInputValue,
      selectedStatusKey,
      pageNo,
      pageSize,
    } = this.state;
    const queryParams = {
      pageNo,
      pageSize,
      [searchSelectKey]: searchInputValue,
      status: selectedStatusKey,
      ...kv,
    };
    if (queryParams.status === 'ALL') {
      delete queryParams.status;
    }
    onFilterClick(queryParams, this.state);
  }
  // 单选/取消单选
  handleItemSelectChange = (itemId, checked) => {
    const { selectedKeys } = this.state;
    const newSelectedKeys = [...selectedKeys];
    if (checked) {
      this.setState({ selectedKeys: [...newSelectedKeys, itemId] });
    } else {
      this.setState({ selectedKeys: newSelectedKeys.filter(a => a !== itemId) });
    }
  }
  // 刷新页面，重置筛选参数
  cleanFilterParams = () => {
    const { header: { basicSearch } } = this.props;
    this.setState({
      batchActionKey: undefined,
      searchSelectKey: getSearchField(basicSearch),
      selectedKeys: [],
      searchInputValue: '',
      allChecked: false,
      selectedStatusKey: 'ALL',
    });
  }
  // 过滤状态
  handleStatusChange = (value) => {
    this.setState({
      selectedStatusKey: value,
    }, () =>
      this.handleFilterOperation({ status: value })
    );
  }
  // 选择搜索字段
  handleSearchSelectChange = (value) => {
    this.setState({ searchSelectKey: value });
  }
  // 响应input输入
  handleInputChange = (e) => {
    this.setState({ searchInputValue: e.target.value });
  }
  // 筛选搜索操作
  handleSearchBtnClick = (value) => {
    const { searchSelectKey } = this.state;
    this.setState({
      searchInputValue: value,
    }, () =>
      this.handleFilterOperation({ [searchSelectKey]: value })
    );
  }
  // 刷新操作
  handleRefreshBtnClick = () => {
    this.handleFilterOperation({});
  }
  // list pageNo变化
  handleListPageChange = (page, pageSize) => {
    this.setState({
      pageSize,
      pageNo: page,
    }, () => {
      this.handleFilterOperation({
        pageSize,
        pageNo: page,
      });
    });
  }
  // list pageSize变化
  handleListPageSizeChange = (current, size) => {
    this.setState({
      pageSize: size,
      pageNo: current,
    }, () => {
      this.handleFilterOperation({
        pageSize: size,
        pageNo: current,
      });
    });
  }
  // 选择批量处理类型
  handleBatchActionSelectChange = (value) => {
    this.setState({ batchActionKey: value });
  }
  // 批量处理操作
  handleBatchBtnClick = () => {
    const { footer: { onBatchClick } } = this.props;
    const { batchActionKey, selectedKeys } = this.state;
    onBatchClick(batchActionKey, selectedKeys);
  }
  handleRowSelectChange = (selectedKeys) => {
    this.setState({ selectedKeys });
  }

  render() {
    const {
      loading,
      columns,
      dataSource,
      header,
      footer,
    } = this.props;
    const listFooter = footer ? this.getListFooter : false;
    const listHeader = header ? this.getListHeader : false;
    const { selectedKeys } = this.state;
    const rowSelection = {
      selectedKeys,
      onChange: this.handleRowSelectChange,
    };
    return (
      <Table
        bordered={false}
        title={listHeader}
        footer={listFooter}
        loading={loading}
        rowKey={record => record.key}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        className={styles.table}
      />
    );
  }
}