@aliretail/react-materials-components
Version:
632 lines (536 loc) • 21 kB
JavaScript
import _Dialog from "@alifd/next/es/dialog";
import _Balloon from "@alifd/next/es/balloon";
import _Upload from "@alifd/next/es/upload";
import _Progress from "@alifd/next/es/progress";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import { callApi, excelImport, queryImportState, getTemplateUrl, Status, UploadStatus, getDownloadUrl } from "./utils";
import showHistoryDrawer from "./History";
var PREFIX = 'cz5-';
var DEFAULT_MAX_SIZE = 100 * 1024 * 1024; // 100M
var BigExcelImport = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(BigExcelImport, _React$Component);
function BigExcelImport(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.getAppCode = function () {
return _this.props.appCode;
};
_this.openImportDialog = function () {
var jobId = _this.props.jobId;
var _this$state = _this.state,
hasBackgroundJob = _this$state.hasBackgroundJob,
status = _this$state.status; // 内部状态处于 导入中, 只打开弹窗
if (status === Status.IMPORTING) {
_this.setState({
showImportLayerVisible: true
});
} else if (jobId) {
if (!hasBackgroundJob) {
queryImportState(jobId, _this.handleImportProgress);
}
_this.setState({
showImportLayerVisible: true,
hasBackgroundJob: true
});
} else {
_this.setState({
showImportLayerVisible: true,
uploadStatus: '',
status: '',
footerActions: ['history', 'cancel'],
result: {},
file: {}
});
}
};
_this.handleImportProgress = function (_ref) {
var _result$inputFile;
var status = _ref.status,
result = _ref.result,
percent = _ref.percent,
inputFile = _ref.inputFile;
var subTitle = _this.props.subTitle;
var titleSuffix = subTitle ? "[" + subTitle + "]" : '';
var msg = (result === null || result === void 0 ? void 0 : result.errorMessage) || '';
if (result !== null && result !== void 0 && (_result$inputFile = result.inputFile) !== null && _result$inputFile !== void 0 && _result$inputFile.length) {
var _result$inputFile$;
msg = "\u6587\u4EF6\uFF1A" + ((_result$inputFile$ = result.inputFile[0]) === null || _result$inputFile$ === void 0 ? void 0 : _result$inputFile$.name) + " " + msg;
}
if (status === Status.DONE) {
_this.props.onImportSuccess && _this.props.onImportSuccess(result);
_this.setState({
footerActions: ['ok', 'history']
});
_Message.show({
type: 'success',
title: "\u5BFC\u5165\u6210\u529F" + titleSuffix,
content: msg
});
_this.doNotify(status, result);
} else if (status === Status.ERROR || status === Status.PARTIALSUCCESS) {
_this.props.onImportError && _this.props.onImportError(result);
if (status === Status.PARTIALSUCCESS) {
_Message.show({
type: 'notice',
title: "\u90E8\u5206\u5BFC\u5165\u6210\u529F" + titleSuffix,
content: msg
});
} else {
_Message.show({
type: 'error',
title: "\u5BFC\u5165\u5931\u8D25" + titleSuffix,
content: msg
});
}
_this.setState({
footerActions: ['ok', 'history'],
fileError: true
});
_this.doNotify(status, result);
}
var nextState = {
result: result,
inputFile: inputFile
};
if (percent !== undefined) {
nextState.percent = percent;
}
if (status !== undefined) {
nextState.status = status;
}
_this.setState(nextState);
};
_this.handleCloseDialog = function () {
var onCancel = _this.props.onCancel;
_this.setState({
showImportLayerVisible: false
});
onCancel && onCancel();
};
_this.handleBackgroundTask = function () {
_this.handleCloseDialog();
_Message.success('导入将在后台继续进行');
};
_this.doImport = function (file) {
var parameters = _this.props.parameters || {};
if (_this.props.sceneId) {
parameters.sceneId = _this.props.sceneId;
}
if (_this.props.maxRowNum) {
parameters.MAX_ROW_NUMBER = _this.props.maxRowNum;
}
_this.setState({
footerActions: ['back', 'history']
});
excelImport({
service: _this.props.service,
app: _this.getAppCode(),
file: file,
parameters: parameters
}, _this.handleImportProgress);
};
_this.doNotify = function (status, result) {
var notifyService = _this.props.notifyService; // 导入结果
if (notifyService) {
var _notifyService$value = notifyService === null || notifyService === void 0 ? void 0 : notifyService.value,
appCode = _notifyService$value.appCode,
code = _notifyService$value.code,
_notifyService$value$ = _notifyService$value.input,
input = _notifyService$value$ === void 0 ? [] : _notifyService$value$;
var params = input.reduce(function (obj, item) {
var bind = item.bind,
name = item.name;
obj[name] = bind;
return obj;
}, _extends({}, result, {
status: status,
jobId: result._id
}));
callApi({
code: code,
app: appCode,
data: params,
method: 'POST'
});
}
};
_this.handleImport = function () {
_this.doImport(_this.state.file);
};
_this.onUploadSuccess = function (file) {
if (file && file.state === 'done') {
_this.setState({
uploadStatus: UploadStatus.DONE,
file: file.response[0]
});
}
};
_this.checkType = function (file, type) {
if (type === '.xlsx') {
var splits = file.name.split('.'); // 无扩展名
if (splits.length < 2) {
return false;
}
var extName = splits.pop(); // 非xlsx文件
if (extName !== 'xlsx') {
return false;
}
}
return true;
};
_this.checkSize = function (file) {
if ((file === null || file === void 0 ? void 0 : file.size) > DEFAULT_MAX_SIZE) {
return false;
}
return true;
};
_this.beforeUpload = function (file) {
// 强制校验文件类型
var _this$props$fileType = _this.props.fileType,
fileType = _this$props$fileType === void 0 ? '.xlsx' : _this$props$fileType;
var isValid = _this.checkType(file, fileType);
if (!isValid) {
file.errorReason = '请选择xlsx文件导入';
return false;
} // 校验文件大小
var isSizeValid = _this.checkSize(file);
if (!isSizeValid) {
file.errorReason = '文件大小不可超过100M';
return false;
}
_this.setState({
uploadStatus: UploadStatus.UPLOADING
});
};
_this.onUploadError = function (file) {
var _file$originFileObj;
_this.setState({
uploadStatus: UploadStatus.ERROR,
uploadErrorReason: file === null || file === void 0 ? void 0 : (_file$originFileObj = file.originFileObj) === null || _file$originFileObj === void 0 ? void 0 : _file$originFileObj.errorReason
});
};
_this.onRemove = function () {
_this.setState({
uploadStatus: '',
status: '',
result: {},
footerActions: ['history', 'cancel']
});
};
_this.isDownloadNeeded = function () {
var _this$state2 = _this.state,
status = _this$state2.status,
result = _this$state2.result;
var needDownload = status === Status.ERROR || status === Status.PARTIALSUCCESS;
var hasFile = result && result.outputFile;
return needDownload && hasFile;
};
_this.handleOk = function () {
var onOk = _this.props.onOk;
var result = _this.state.result;
var outputFile = result.outputFile;
if (_this.isDownloadNeeded()) {
outputFile.length && window.open(getDownloadUrl(outputFile[0]));
}
_this.setState({
showImportLayerVisible: false
});
onOk && onOk();
};
_this.renderFooter = function () {
var _this$state3 = _this.state,
_this$state3$footerAc = _this$state3.footerActions,
footerActions = _this$state3$footerAc === void 0 ? [] : _this$state3$footerAc,
uploadStatus = _this$state3.uploadStatus;
var _this$props = _this.props,
service = _this$props.service,
showHistory = _this$props.showHistory;
var result = [/*#__PURE__*/React.createElement("div", {
className: "footer-left-zone",
key: "footer-left-zone"
}, uploadStatus === '' && /*#__PURE__*/React.createElement(_Button, {
type: "secondary",
href: getTemplateUrl(service, _this.getAppCode()),
component: "a"
}, /*#__PURE__*/React.createElement(_Icon, {
type: "download"
}), "\u4E0B\u8F7D\u5BFC\u5165\u6A21\u677F"))];
var actions = [];
if (footerActions.includes('ok')) {
var content = '完成';
if (_this.isDownloadNeeded()) {
content = '完成，并下载失败数据';
}
actions.push( /*#__PURE__*/React.createElement(_Button, {
type: "primary",
key: "ok",
className: "btn-confirm",
onClick: _this.handleOk
}, content));
}
if (footerActions.includes('back')) {
actions.push( /*#__PURE__*/React.createElement(_Button, {
type: "secondary",
key: "ok",
className: "btn-confirm",
onClick: _this.handleBackgroundTask
}, "\u540E\u53F0\u8FDB\u884C\uFF0C\u5B8C\u6210\u540E\u901A\u77E5\u6211"));
}
if (footerActions.includes('history') && showHistory) {
actions.push( /*#__PURE__*/React.createElement(_Button, {
type: "normal",
key: "history",
className: "btn-history",
onClick: _this.handleShowHistory
}, "\u67E5\u770B\u5386\u53F2"));
}
if (footerActions.includes('cancel')) {
actions.push( /*#__PURE__*/React.createElement(_Button, {
type: "normal",
key: "cancel",
className: "btn-cancel",
onClick: _this.handleCloseDialog
}, "\u53D6\u6D88"));
}
result.push( /*#__PURE__*/React.createElement("div", {
key: "footer-right-zone",
className: "footer-right-zone"
}, actions));
return /*#__PURE__*/React.createElement("div", {
className: PREFIX + "export-footer"
}, result);
};
_this.renderImportHint = function () {
var _this$state4 = _this.state,
uploadStatus = _this$state4.uploadStatus,
status = _this$state4.status;
var _this$props$importHin = _this.props.importHint,
importHint = _this$props$importHin === void 0 ? '请根据模板内容编辑后再上传，重复数据将进行覆盖。' : _this$props$importHin;
if (uploadStatus === '' && status === '') {
return /*#__PURE__*/React.createElement(_Message, {
className: PREFIX + "excelimport-tip",
type: "notice"
}, /*#__PURE__*/React.createElement("div", {
className: PREFIX + "excelimport-tip-inner"
}, importHint));
}
return null;
};
_this.handleShowHistory = function () {
var _this$props2 = _this.props,
sceneId = _this$props2.sceneId,
subTitle = _this$props2.subTitle,
service = _this$props2.service,
appCode = _this$props2.appCode,
historyInputQuery = _this$props2.historyInputQuery;
showHistoryDrawer({
sceneId: sceneId,
subTitle: subTitle,
flowCode: service,
appCode: appCode,
inputQuery: historyInputQuery
});
};
var initialState = {
showImportLayerVisible: false,
uploadStatus: '',
status: '',
footerActions: ['history', 'cancel'],
fileError: false,
// 失败状态
hasBackgroundJob: false,
percent: 0
};
if (props.jobId) {
initialState.status = Status.IMPORTING;
initialState.uploadStatus = UploadStatus.DONE;
}
_this.state = initialState;
return _this;
}
var _proto = BigExcelImport.prototype;
_proto.renderImportContent = function renderImportContent() {
var isComplex = this.props.isComplex;
var _this$state5 = this.state,
status = _this$state5.status,
percent = _this$state5.percent,
_this$state5$result = _this$state5.result,
result = _this$state5$result === void 0 ? {} : _this$state5$result,
_this$state5$file = _this$state5.file,
file = _this$state5$file === void 0 ? {} : _this$state5$file,
inputFile = _this$state5.inputFile;
var _ref2 = (result === null || result === void 0 ? void 0 : result.output) || {},
totalNum = _ref2.totalNum,
successNum = _ref2.successNum;
var content = null;
if (status === Status.IMPORTING) {
content = /*#__PURE__*/React.createElement("div", {
className: PREFIX + "status-importing"
}, /*#__PURE__*/React.createElement(_Progress, {
className: PREFIX + "status-importing-progress",
percent: percent,
size: "large",
textRender: function textRender() {
return '';
}
}), /*#__PURE__*/React.createElement("div", {
className: PREFIX + "status-importing-text"
}, "\u6B63\u5728\u89E3\u6790 " + (file.name || (inputFile === null || inputFile === void 0 ? void 0 : inputFile.name)) + "\uFF0C\u5DF2\u5B8C\u6210 " + percent + "%"));
} else if (status === Status.DONE) {
content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
type: "success-filling",
size: "xxl",
style: {
color: '#1DC11D'
}
}), /*#__PURE__*/React.createElement("p", {
className: PREFIX + "result-tip"
}, isComplex ? '上传' : '导入', "\u5B8C\u6210\uFF01\u6210\u529F", isComplex ? '上传' : '导入', ' ', /*#__PURE__*/React.createElement("em", null, totalNum), " \u6761\u6570\u636E"));
} else if (status === Status.ERROR) {
content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
type: "delete-filling",
size: "xxl",
style: {
color: '#FF3000'
}
}), /*#__PURE__*/React.createElement("p", {
className: PREFIX + "result-tip"
}, isComplex ? '上传' : '导入', "\u5931\u8D25\uFF01\u6570\u636E\u5168\u90E8\u89E3\u6790\u5931\u8D25"), /*#__PURE__*/React.createElement("p", null, (result === null || result === void 0 ? void 0 : result.errorMessage) || '请下载失败数据文档查看失败原因'));
} else if (status === Status.PARTIALSUCCESS) {
content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
type: "warning",
size: "xxl",
style: {
color: '#FF9300'
}
}), /*#__PURE__*/React.createElement("p", {
className: PREFIX + "result-tip"
}, "\u90E8\u5206", isComplex ? '上传' : '导入', "\u6210\u529F\uFF01\u6210\u529F ", /*#__PURE__*/React.createElement("em", null, successNum), ' ', "\u6761\uFF0C\u5931\u8D25", /*#__PURE__*/React.createElement("em", null, totalNum - successNum), " \u6761\u6570\u636E"), /*#__PURE__*/React.createElement("p", null, "\u8BF7\u4E0B\u8F7D\u5931\u8D25\u6570\u636E\u6587\u6863\u67E5\u770B\u5931\u8D25\u539F\u56E0"));
}
if (!content) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: PREFIX + "excelimport-box"
}, content);
};
_proto.renderUpload = function renderUpload() {
var _this$props$fileType2 = this.props.fileType,
fileType = _this$props$fileType2 === void 0 ? '.xlsx' : _this$props$fileType2;
var _this$state6 = this.state,
status = _this$state6.status,
uploadStatus = _this$state6.uploadStatus;
var canUpload = ![UploadStatus.DONE, UploadStatus.UPLOADING, UploadStatus.ERROR].includes(uploadStatus);
if (status !== '') {
return null;
}
return /*#__PURE__*/React.createElement(_Upload.Dragger, {
listType: "text",
action: "/file/upload",
onSuccess: this.onUploadSuccess,
beforeUpload: this.beforeUpload,
onError: this.onUploadError,
onRemove: this.onRemove // @ts-ignore
,
onCancel: this.onRemove,
data: function data() {
return {
uploadType: 'ExcelImport'
};
} // @ts-ignore
,
labelText: "\u4E0A\u4F20",
accept: fileType,
limit: 1
}, canUpload ? /*#__PURE__*/React.createElement("div", {
className: PREFIX + "upload-drag-wrap next-upload-drag"
}, /*#__PURE__*/React.createElement("p", {
className: "next-upload-drag-icon"
}, /*#__PURE__*/React.createElement(_Icon, {
type: "upload"
})), /*#__PURE__*/React.createElement("p", {
className: "next-upload-drag-text"
}, "\u70B9\u51FB\u9009\u62E9\u6216\u79FB\u52A8\u6587\u4EF6\u81F3\u6B64\u5904"), /*#__PURE__*/React.createElement("p", {
className: "next-upload-drag-hint"
}, "\u6587\u4EF6\u683C\u5F0F\u652F\u6301 .xlsx")) : /*#__PURE__*/React.createElement("span", null));
};
_proto.renderImportButton = function renderImportButton() {
var _this$state7 = this.state,
uploadStatus = _this$state7.uploadStatus,
uploadErrorReason = _this$state7.uploadErrorReason,
status = _this$state7.status;
if ((uploadStatus === UploadStatus.UPLOADING || uploadStatus === UploadStatus.DONE) && status === '') {
return /*#__PURE__*/React.createElement("div", {
className: PREFIX + "excelimport-btn"
}, /*#__PURE__*/React.createElement(_Button, {
type: "primary",
disabled: uploadStatus === UploadStatus.UPLOADING,
onClick: this.handleImport
}, "\u5F00\u59CB\u5BFC\u5165"));
}
if (uploadStatus === UploadStatus.ERROR) {
return /*#__PURE__*/React.createElement("div", {
className: PREFIX + "upload-error-tip"
}, uploadErrorReason || '上传失败，请删除后重新选择文件上传');
}
return null;
};
_proto.renderBtn = function renderBtn() {
var _this$props3 = this.props,
_this$props3$btnText = _this$props3.btnText,
btnText = _this$props3$btnText === void 0 ? '查看进度' : _this$props3$btnText,
hideIcon = _this$props3.hideIcon,
hoverText = _this$props3.hoverText,
_this$props3$hoverAli = _this$props3.hoverAlign,
hoverAlign = _this$props3$hoverAli === void 0 ? 't' : _this$props3$hoverAli,
className = _this$props3.className,
jobId = _this$props3.jobId,
text = _this$props3.text,
btnType = _this$props3.btnType;
var isTextBtn = !!jobId || text;
var isImporting = this.state.status === Status.IMPORTING;
var btnCaption = btnText;
var btnIcon = 'download';
if (isImporting) {
btnCaption = '导入中';
btnIcon = 'loading';
}
var btn = /*#__PURE__*/React.createElement(_Button, {
text: isTextBtn,
type: btnType,
className: className,
onClick: this.openImportDialog
}, !hideIcon && /*#__PURE__*/React.createElement(_Icon, {
type: btnIcon
}), btnCaption);
if (hoverText) {
btn = /*#__PURE__*/React.createElement(_Balloon.Tooltip, {
trigger: btn,
align: hoverAlign
}, hoverText);
}
return btn;
};
_proto.render = function render() {
var subTitle = this.props.subTitle;
var btn = this.renderBtn();
return /*#__PURE__*/React.createElement(React.Fragment, null, btn, /*#__PURE__*/React.createElement(_Dialog, {
title: "\u5BFC\u5165" + (subTitle ? "[" + subTitle + "]" : ''),
visible: this.state.showImportLayerVisible,
footer: this.renderFooter(),
onClose: this.handleCloseDialog,
overlayProps: {
wrapperClassName: PREFIX + "excel-import-popup"
}
}, /*#__PURE__*/React.createElement("div", {
className: PREFIX + "excelimport-layer-content"
}, this.renderImportHint(), this.renderUpload(), this.renderImportButton(), this.renderImportContent())));
};
return BigExcelImport;
}(React.Component);
export default BigExcelImport;