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

react components based on react

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _antd = require("antd");

var _api = require("@/common/api");

var _tool = require("@/common/tool");

/**
 * 通用表格
 */
var CommonTable = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(CommonTable, _Component);

  var _super = (0, _createSuper2.default)(CommonTable);

  function CommonTable(props) {
    var _this;

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

    _this.open = true;
    return _this;
  }

  (0, _createClass2.default)(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 (!(0, _tool.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({}, (0, _tool.getPageData)(tableDate), {
          pageSizeOptions: pageSizeOptions
        });
      } else pageData = Object.assign({}, (0, _tool.getPageData)(tableDate));

      return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
        spinning: loading
      }, tableTitle ? /*#__PURE__*/_react.default.createElement("h3", null, tableTitle, rightLink ? /*#__PURE__*/_react.default.createElement("a", {
        className: "right-link pull-right",
        href: rightLink,
        target: "_blank",
        rel: "noopener noreferrer"
      }, rightLinkTitle) : null) : null, /*#__PURE__*/_react.default.createElement(_antd.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 = (0, _tool.filterEmptyData)(Object.assign({}, apiData, data));
      (0, _api.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
        });

        _antd.message.error('获取数据失败:' + err.message);
      });
    }
  }]);
  return CommonTable;
}(_react.Component);

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