@aliretail/react-materials-components/es/DataExport/index.js

B 端物料组件库

import _Drawer from "@alifd/next/es/drawer";
import _Message from "@alifd/next/es/message";
import _SplitButton from "@alifd/next/es/split-button";
import _Dialog from "@alifd/next/es/dialog";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import PropTypes from 'prop-types';
import History from "./History";
import QueryInfo from "./QueryInfo";
var Status = {
  EXPORTING: 'exporting',
  DONE: 'export_done',
  ERROR: 'error'
};

var DataExport = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(DataExport, _React$Component);

  function DataExport() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.historyRef = /*#__PURE__*/React.createRef();
    _this.state = {
      exportHistoryVisible: false,
      exportConfirmVisible: false,
      currentPage: 1,
      exportQuery: {}
    };

    _this.handleExportButtonClick = function (event) {
      var onExportButtonClick = _this.props.onExportButtonClick;
      var query = onExportButtonClick(event);

      _this.setState({
        exportHistoryVisible: false,
        exportConfirmVisible: true,
        exportQuery: query
      });
    };

    _this.handleCancelExport = function () {
      _this.setState({
        exportConfirmVisible: false
      });
    };

    _this.handleCloseHistory = function () {
      _this.setState({
        exportHistoryVisible: false
      });
    };

    _this.handleShowExportHistoryButtonClick = function () {
      _this.setState({
        exportHistoryVisible: true,
        exportConfirmVisible: false,
        currentPage: 1
      });
    };

    _this.handleDoExportButtonClick = function () {
      var exportQuery = _this.state.exportQuery;

      _this.doExport(exportQuery);
    };

    _this.doExport = function (query) {
      var onExport = _this.props.onExport;
      onExport(query).then(function (response) {
        if (response.success) {
          _this.queryExportState((response.data || {}).jobid);
        } else {
          _this.onExportFinish(Status.ERROR, response.message, null);
        }
      }, function (e) {
        _this.onExportFinish(Status.ERROR, e.message, null);
      });
    };

    _this.queryExportState = function (jobId, retryCount) {
      if (retryCount === void 0) {
        retryCount = 0;
      }

      var duration = 1000;
      var queryExportState = _this.props.queryExportState;
      return queryExportState(jobId).then(function (resp) {
        if (!resp.success) {
          if (retryCount > 2) {
            _this.onExportFinish(Status.ERROR, resp.message, jobId);
          } else {
            setTimeout(function () {
              return _this.queryExportState(jobId, retryCount + 1);
            }, duration);
          }
        } else if (resp.finished === 100) {
          setTimeout(function () {
            return _this.onExportFinish(Status.DONE, resp, jobId);
          }, 100);
        } else {
          _this.onExportFinish(Status.EXPORTING, resp, jobId);

          setTimeout(function () {
            return _this.queryExportState(jobId);
          }, duration);
        }
      });
    };

    _this.onExportFinish = function (status, result, jobId) {
      if (status === Status.ERROR) {
        if (!_this.props.onExportError || !_this.props.onExportError(result)) {
          _Dialog.show({
            type: 'alert',
            title: '导出失败',
            content: result
          });
        }
      } else if (status === Status.DONE) {
        if (_this.props.onExportSuccess) {
          _this.props.onExportSuccess(result);
        }

        if (result && result.outputFile) {// this.downloadFile(result.outputFile[0]);
        }

        if (_this.historyRef.current) {
          _this.historyRef.current.refreshHistory();
        }
      }

      _this.handleShowExportHistoryButtonClick();
    };

    return _this;
  }

  var _proto = DataExport.prototype;

  _proto.renderChildren = function renderChildren() {
    var _this2 = this;

    var children = this.props.children;
    var content = null;

    if (children) {
      content = React.Children.map(children, function (child) {
        if (child) {
          var type = child.props['data-button-type'];

          if (type === 'export') {
            return /*#__PURE__*/React.cloneElement(child, {
              onClick: _this2.handleExportButtonClick,
              key: 'export'
            });
          } else if (type === 'history') {
            return /*#__PURE__*/React.cloneElement(child, {
              onClick: _this2.handleShowExportHistoryButtonClick,
              key: 'history'
            });
          } else {
            return child;
          }
        }

        return null;
      });
    } else {
      content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_SplitButton, {
        leftButtonProps: {
          onClick: this.handleExportButtonClick
        },
        onItemClick: this.handleShowExportHistoryButtonClick,
        label: '导出',
        type: "secondary"
      }, /*#__PURE__*/React.createElement(_SplitButton.Item, {
        key: "\u5BFC\u51FA\u5386\u53F2"
      }, "\u5BFC\u51FA\u5386\u53F2")));
    }

    return content;
  };

  _proto.renderConfirm = function renderConfirm() {
    var _this$state = this.state,
        exportConfirmVisible = _this$state.exportConfirmVisible,
        exportQuery = _this$state.exportQuery;
    var translateQuery = this.props.translateQuery;

    if (!exportConfirmVisible) {
      return null;
    }

    var classPrefix = 'data-export-confirm-';
    var conditon = translateQuery(exportQuery);
    return /*#__PURE__*/React.createElement(_Dialog, {
      title: "\u5BFC\u51FA",
      visible: true,
      onOk: this.handleDoExportButtonClick,
      onCancel: this.handleShowExportHistoryButtonClick,
      onClose: this.handleCancelExport,
      okProps: {
        children: '导出'
      },
      cancelProps: {
        children: '查看历史导出报表'
      },
      className: classPrefix + "body",
      overlayProps: {
        wrapperClassName: classPrefix + "dialog"
      }
    }, /*#__PURE__*/React.createElement(_Message, {
      type: "notice",
      className: classPrefix + "message"
    }, "\u5DF2\u751F\u6210\u7684\u62A5\u8868\u5C06\u4E3A\u60A8\u4FDD\u755930\u5929"), /*#__PURE__*/React.createElement("h4", {
      className: classPrefix + "title"
    }, "\u67E5\u8BE2\u6761\u4EF6"), /*#__PURE__*/React.createElement("div", {
      className: classPrefix + "query-wrapper"
    }, /*#__PURE__*/React.createElement(QueryInfo, {
      data: conditon
    })));
  };

  _proto.renderHistory = function renderHistory() {
    var exportHistoryVisible = this.state.exportHistoryVisible;

    if (!exportHistoryVisible) {
      return null;
    }

    var _this$props = this.props,
        onFetchHistory = _this$props.onFetchHistory,
        translateQuery = _this$props.translateQuery;
    return /*#__PURE__*/React.createElement(_Drawer, {
      title: "\u5BFC\u51FA\u5386\u53F2",
      placement: "right",
      width: "800px",
      visible: true,
      onClose: this.handleCloseHistory
    }, /*#__PURE__*/React.createElement(_Message, {
      type: "notice",
      className: 'data-export-confirm-message'
    }, "\u5DF2\u751F\u6210\u62A5\u8868\u5C06\u4E3A\u60A8\u4FDD\u755930\u5929\uFF0C\u8BF7\u53CA\u65F6\u4E0B\u8F7D"), /*#__PURE__*/React.createElement(History, {
      ref: this.historyRef,
      onFetchHistory: onFetchHistory,
      translateQuery: translateQuery,
      doExport: this.doExport
    }));
  };

  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderChildren(), this.renderConfirm(), this.renderHistory());
  };

  return DataExport;
}(React.Component);

DataExport.propTypes = {
  onExport: PropTypes.func.isRequired,
  onExportButtonClick: PropTypes.func.isRequired,
  onFetchHistory: PropTypes.func.isRequired,
  translateQuery: PropTypes.func.isRequired,
  children: PropTypes.node,
  onExportError: PropTypes.func
};
DataExport.defaultProps = {
  children: null
};
export default DataExport;