knk-react/es/components/basic/table/common_table.js

react components based on react

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";

/**
 * 通用表格
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, message, Spin } from 'antd';
import { fetch } from '@/common/api';
import { getPageData, isObjEmpty, filterEmptyData } from '@/common/tool';

var CommonTable = /*#__PURE__*/function (_Component) {
  _inherits(CommonTable, _Component);

  var _super = _createSuper(CommonTable);

  function CommonTable(props) {
    var _this;

    _classCallCheck(this, CommonTable);

    _this = _super.call(this, props);
    _this.handleGetData = _this.handleGetData.bind(_assertThisInitialized(_this));
    _this.handleChangePage = _this.handleChangePage.bind(_assertThisInitialized(_this));
    _this.state = {
      tableDate: [],
      loading: false
    }; // 是否已加载

    _this.open = true;
    return _this;
  }

  _createClass(CommonTable, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handleGetData({
        page: 1,
        pageSize: 10
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.open = false;
    }
  }, {
    key: "handleChangePage",
    value: function handleChangePage(page, filters, sorter) {
      var sortType = this.props.sortType;
      var orders = {};

      if (!isObjEmpty(sorter)) {
        sortType.map(function (item) {
          if (item.text == sorter.columnKey) {
            orders = {
              sortType: item.value,
              isDesc: sorter.order === 'descend' ? 1 : 0
            };
          }
        });
      }

      this.handleGetData(Object.assign({
        page: page.current,
        pageSize: page.pageSize
      }, orders));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          tableDate = _this$state.tableDate,
          loading = _this$state.loading;
      var _this$props = this.props,
          tableTitle = _this$props.tableTitle,
          columns = _this$props.columns,
          isShowPagination = _this$props.isShowPagination,
          rightLink = _this$props.rightLink,
          rightLinkTitle = _this$props.rightLinkTitle,
          pageSizeOptions = _this$props.pageSizeOptions,
          rowKeyFun = _this$props.rowKeyFun,
          scroll = _this$props.scroll;
      var pageData;

      if (isShowPagination && pageSizeOptions) {
        pageData = Object.assign({}, getPageData(tableDate), {
          pageSizeOptions: pageSizeOptions
        });
      } else pageData = Object.assign({}, getPageData(tableDate));

      return /*#__PURE__*/React.createElement(Spin, {
        spinning: loading
      }, tableTitle ? /*#__PURE__*/React.createElement("h3", null, tableTitle, rightLink ? /*#__PURE__*/React.createElement("a", {
        className: "right-link pull-right",
        href: rightLink,
        target: "_blank",
        rel: "noopener noreferrer"
      }, rightLinkTitle) : null) : null, /*#__PURE__*/React.createElement(Table, {
        columns: columns,
        bordered: true,
        pagination: isShowPagination ? pageData : false,
        dataSource: tableDate.content,
        onChange: this.handleChangePage,
        rowKey: rowKeyFun,
        scroll: scroll
      }));
    }
  }, {
    key: "handleGetData",
    value: function handleGetData(data) {
      var _this2 = this;

      var _this$props2 = this.props,
          apiName = _this$props2.apiName,
          apiData = _this$props2.apiData,
          apiMethod = _this$props2.apiMethod;
      this.setState({
        loading: true
      });
      var sendData = filterEmptyData(Object.assign({}, apiData, data));
      fetch(apiName, sendData, apiMethod).then(function (data) {
        // 判断如果卸载,则不再设置数据
        if (!_this2.open) return;
        if (!data.data || !data.data.content) data.data.content = [];
        data.data.content.map(function (item, inx) {
          item.key = inx;
        });

        _this2.setState({
          loading: false,
          tableDate: data.data
        });
      }).catch(function (err) {
        if (!_this2.open) return;

        _this2.setState({
          loading: false
        });

        message.error('获取数据失败:' + err.message);
      });
    }
  }]);

  return CommonTable;
}(Component);

CommonTable.propTypes = {
  rightLink: PropTypes.string,
  // table 右侧链接
  rightLinkTitle: PropTypes.string,
  // table 右侧链接文案
  tableTitle: PropTypes.string,
  // table名字
  columns: PropTypes.array.isRequired,
  //表格的配置项
  isShowBordered: PropTypes.bool,
  // table是否带有边框,
  isShowPagination: PropTypes.bool,
  // table是否展示分页
  apiName: PropTypes.string.isRequired,
  // API请求名,由于直接诶读取data.data的数组数据,所以该API不能使用分页
  apiData: PropTypes.object,
  // api请求附加的数据
  apiMethod: PropTypes.string,
  // api请求method,
  sortType: PropTypes.array,
  // table排序类型 [{ text: 'sortName', value: 'sortValue'}],
  pageSizeOptions: PropTypes.array,
  rowKeyFun: PropTypes.func,
  scroll: PropTypes.object
};
export default CommonTable;