fx-form-widget
Version:
284 lines (277 loc) • 10.8 kB
JavaScript
import _Modal from "antd/es/modal";
import _Spin from "antd/es/spin";
import _Alert from "antd/es/alert";
import _Result from "antd/es/result";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Space from "antd/es/space";
import _message from "antd/es/message";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "antd/es/button";
import _Upload from "antd/es/upload";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useRef, useState } from 'react';
import { CloudUploadOutlined, DownloadOutlined } from '@ant-design/icons';
import { subformStore } from '../../stores';
import { subformMap } from '../../api';
import { downloadTemplateDOC } from '../../tools';
import { getEnv, getToken } from '../../../../config/tools';
import { unstable_batchedUpdates } from 'react-dom';
import { nanoid } from 'nanoid';
var API_HOST = new Map([['dev', 'https://dev-gateway.fxqifu.net/pangu'], ['qa', 'https://qa-gateway.fxqifu.net/pangu'], ['prod', 'https://gateway.fxqifu.net/pangu']]);
;
var downLoadImportTemplate = subformStore.downLoadImportTemplate;
var Dragger = _Upload.Dragger;
var ENV = getEnv();
var token = getToken();
var MAIN_HOST = API_HOST.get(ENV);
// 资源上传的地址
var action = "" + MAIN_HOST + subformMap.get('IMPORT');
var accept = ".csv, application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
// 资源上传的请求头
var headers = {
authority_token: token
};
var BatchImportModal = function BatchImportModal(props) {
var visible = props.visible,
formId = props.formId,
subformWid = props.subformWid,
maxCount = props.maxCount,
onCancel = props.onCancel,
getImportData = props.getImportData;
var _useState = useState(false),
hasError = _useState[0],
setHasError = _useState[1];
var _useState2 = useState({}),
errorInfo = _useState2[0],
setErrorInfo = _useState2[1];
var _useState3 = useState(false),
hasSuccess = _useState3[0],
setHasSuccess = _useState3[1];
var _useState4 = useState(false),
loading = _useState4[0],
setLoading = _useState4[1];
var importTableData = useRef([]);
var errorMessage = errorInfo.errorMessage,
errorUrl = errorInfo.errorUrl;
var handleDownloadClick = function handleDownloadClick() {
downloadTemplateByFormIdAndSubformWid(formId, subformWid);
};
// 资源上传携带的额外参数
var uplodaExtraData = {
formId: formId,
subformWid: subformWid
};
// 上传成功的回调
var onSuccess = function onSuccess(result) {
importTableData.current = [];
var success = result.success,
_result$data = result.data,
data = _result$data === void 0 ? {} : _result$data;
var improtData = data.data,
url = data.url,
failCount = data.failCount,
successCount = data.successCount;
if (url) {
unstable_batchedUpdates(function () {
setErrorInfo({
errorMessage: /*#__PURE__*/React.createElement(React.Fragment, null, "\u6210\u529F\u5BFC\u5165:", /*#__PURE__*/React.createElement(_Button, {
style: buttonStyle,
type: "link"
}, successCount), ", \u5931\u8D25\u5BFC\u5165:", /*#__PURE__*/React.createElement(_Button, {
danger: true,
style: buttonStyle,
type: "link"
}, failCount)),
errorUrl: url
});
setLoading(false);
setHasSuccess(false);
setHasError(true);
});
return;
}
if (success) {
importTableData.current = improtData.map(function (item) {
return _extends({}, item, {
editableId: nanoid()
});
});
unstable_batchedUpdates(function () {
setErrorInfo({
errorUrl: url,
errorMessage: /*#__PURE__*/React.createElement(React.Fragment, null, "\u6210\u529F\u5BFC\u5165:", /*#__PURE__*/React.createElement(_Button, {
style: buttonStyle,
type: "link"
}, successCount), ", \u5931\u8D25\u5BFC\u5165:", /*#__PURE__*/React.createElement(_Button, {
danger: true,
style: buttonStyle,
type: "link"
}, failCount))
});
setLoading(false);
setHasSuccess(true);
setHasError(false);
});
return;
}
unstable_batchedUpdates(function () {
setErrorInfo({
errorMessage: result.message,
errorUrl: url
});
setLoading(false);
setHasError(true);
setHasSuccess(false);
importTableData.current = null;
});
};
//上传失败的回调
var onError = function onError() {
_message.error('数据导入失败请检查数据');
setLoading(false);
};
// 数据上传前的回调
var beforeUpload = function beforeUpload() {
setLoading(true);
};
var uploadProps = {
action: action,
headers: headers,
data: uplodaExtraData,
accept: accept,
beforeUpload: beforeUpload,
onSuccess: onSuccess,
onError: onError
};
var buttonStyle = {
padding: 0,
margin: 0
};
var description = /*#__PURE__*/React.createElement(_Space, {
direction: "vertical"
}, /*#__PURE__*/React.createElement("span", null, "1\u3001\u8BF7\u52FF\u64C5\u81EA\u4FEE\u6539\u5BFC\u5165\u6A21\u677F\u7684\u8868\u5934\u5B57\u6BB5\uFF0C\u5426\u5219\u4F1A\u5BFC\u5165\u5931\u8D25"), /*#__PURE__*/React.createElement("span", null, "2\u3001\u6700\u591A\u53EF\u5BFC\u5165", /*#__PURE__*/React.createElement(_Button, {
style: buttonStyle,
type: "link"
}, maxCount), "\u6761\u6570\u636E\u660E\u7EC6\uFF0C\u8D85\u51FA\u90E8\u5206\u5219\u9ED8\u8BA4\u4E0D\u5BFC\u5165"), /*#__PURE__*/React.createElement("span", null, "3\u3001\u6807\u8BC6\u542B\u4E49:", /*#__PURE__*/React.createElement(_Button, {
danger: true,
type: "link",
style: buttonStyle
}, "*"), "\u4E3A\u5FC5\u586B\uFF0C\u82E5\u4E0D\u586B\u5219\u4F1A\u5BFC\u5165\u5931\u8D25"), /*#__PURE__*/React.createElement("span", null, "4\u3001\u91CD\u590D\u5BFC\u5165\u7684\u6570\u636E\uFF0C\u9ED8\u8BA4\u4EE5\u65B0\u589E\u6570\u636E\u5BFC\u5165"), /*#__PURE__*/React.createElement("span", null, "5\u3001\u63D0\u793A\u591A\u5C11\u884C\u5BFC\u5165\u5931\u8D25:\u53EF\u4EE5\u9009\u62E9\u9009\u62E9\u4E0B\u8F7D\u51FA\u9519\u7684\u6570\u636E\uFF0C\u51FA\u9519\u7684\u8868\u683C\u4E2D\u7B2C\u4E00\u5217\u4F1A\u663E\u793A\u9519\u8BEF\u539F\u56E0"), /*#__PURE__*/React.createElement(_Button, {
type: "link",
onClick: handleDownloadClick
}, "\u4E0B\u8F7D\u6A21\u7248"));
// 通过formId以及subformWid进行下载模版
var downloadTemplateByFormIdAndSubformWid = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formId, subformWid) {
var _ref2, _ref2$data, data, errorMessage, success, url;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(!formId || !subformWid)) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
_context.next = 4;
return downLoadImportTemplate(formId, subformWid);
case 4:
_ref2 = _context.sent;
_ref2$data = _ref2.data;
data = _ref2$data === void 0 ? {} : _ref2$data;
errorMessage = _ref2.message;
success = _ref2.success;
if (data === null || !success) {
_message.error(errorMessage);
}
url = data.url;
if (url) {
_context.next = 13;
break;
}
return _context.abrupt("return");
case 13:
downloadTemplateDOC(url, '子表单导入模版.xls');
case 14:
case "end":
return _context.stop();
}
}, _callee);
}));
return function downloadTemplateByFormIdAndSubformWid(_x, _x2) {
return _ref.apply(this, arguments);
};
}();
var handleDownErrorClick = function handleDownErrorClick() {
if (!errorUrl) {
return;
}
downloadTemplateDOC(errorUrl, '错误信息.xls');
};
var onOk = function onOk() {
getImportData === null || getImportData === void 0 ? void 0 : getImportData(importTableData.current);
};
var renderDownLoadErrorButton = function renderDownLoadErrorButton(url) {
if (url) {
return /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(_Button, {
type: "primary",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
key: "download",
onClick: handleDownErrorClick
}, "\u9519\u8BEF\u539F\u56E0"));
}
return null;
};
var renderDraggerUploadOrErrorResult = function renderDraggerUploadOrErrorResult(hasError, hasSuccess) {
if (hasError) {
return /*#__PURE__*/React.createElement(_Result, {
status: "error",
title: "\u5BFC\u5165\u5931\u8D25",
subTitle: errorMessage
});
}
if (hasSuccess) {
return /*#__PURE__*/React.createElement(_Result, {
status: "success",
title: "\u5BFC\u5165\u6210\u529F",
subTitle: errorMessage
});
}
return /*#__PURE__*/React.createElement(_Space, {
direction: "vertical"
}, /*#__PURE__*/React.createElement(Dragger, uploadProps, /*#__PURE__*/React.createElement("p", {
className: "ant-upload-drag-icon"
}, /*#__PURE__*/React.createElement(CloudUploadOutlined, null)), /*#__PURE__*/React.createElement("p", {
className: "ant-upload-text"
}, "\u70B9\u51FB\u6216\u5C06\u8981\u5BFC\u5165\u7684\u6587\u4EF6\u62D6\u62FD\u5230\u8FD9\u91CC\u4E0A\u4F20")), /*#__PURE__*/React.createElement(_Alert, {
message: "\u6CE8\u610F\u4E8B\u9879",
description: description,
type: "info"
}));
};
var modelResetProps = {
footer: renderDownLoadErrorButton(errorUrl)
};
useEffect(function () {
if (visible) {
setHasError(false);
setHasSuccess(false);
setErrorInfo({
errorUrl: ''
});
importTableData.current = [];
}
}, [visible]);
return /*#__PURE__*/React.createElement(_Modal, _extends({
title: "\u5BFC\u5165\u6570\u636E",
visible: visible,
width: 680,
okText: hasSuccess ? "导入" : "",
onCancel: onCancel,
onOk: onOk
}, !!errorUrl && modelResetProps), /*#__PURE__*/React.createElement(_Spin, {
tip: "\u6570\u636E\u6B63\u5728\u5BFC\u5165\u4E2D\uFF0C\u8BF7\u7A0D\u7B49...",
spinning: loading
}, renderDraggerUploadOrErrorResult(hasError, hasSuccess)));
};
export default BatchImportModal;