|
@@ -1,5 +1,52 @@
|
|
|
import Common from './Common.js';
|
|
import Common from './Common.js';
|
|
|
import Notify from './Notify.js';
|
|
import Notify from './Notify.js';
|
|
|
|
|
+const showFullscreenLoading = () => {
|
|
|
|
|
+ // 创建全屏遮罩
|
|
|
|
|
+ const overlay = document.createElement('div');
|
|
|
|
|
+ overlay.style.position = 'fixed';
|
|
|
|
|
+ overlay.style.top = '0';
|
|
|
|
|
+ overlay.style.left = '0';
|
|
|
|
|
+ overlay.style.width = '100vw';
|
|
|
|
|
+ overlay.style.height = '100vh';
|
|
|
|
|
+ overlay.style.backgroundColor = '#96e5b8';
|
|
|
|
|
+ overlay.style.zIndex = '9999';
|
|
|
|
|
+ overlay.style.opacity = '0.6';
|
|
|
|
|
+ overlay.style.display = 'flex';
|
|
|
|
|
+ overlay.style.justifyContent = 'center';
|
|
|
|
|
+ overlay.style.alignItems = 'center';
|
|
|
|
|
+ overlay.id = 'fullscreen-loading';
|
|
|
|
|
+
|
|
|
|
|
+ // 创建旋转动画元素
|
|
|
|
|
+ const spinner = document.createElement('div');
|
|
|
|
|
+ spinner.style.width = '50px';
|
|
|
|
|
+ spinner.style.height = '50px';
|
|
|
|
|
+ spinner.style.border = '5px solid rgb(20, 214, 140)';
|
|
|
|
|
+ spinner.style.borderRadius = '50%';
|
|
|
|
|
+ spinner.style.opacity = '1';
|
|
|
|
|
+ spinner.style.borderTopColor = '#fff';
|
|
|
|
|
+ spinner.style.animation = 'spin 1s linear infinite';
|
|
|
|
|
+
|
|
|
|
|
+ // 添加CSS动画关键帧
|
|
|
|
|
+ const style = document.createElement('style');
|
|
|
|
|
+ style.textContent = `
|
|
|
|
|
+ @keyframes spin {
|
|
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
|
|
+ }
|
|
|
|
|
+ `;
|
|
|
|
|
+
|
|
|
|
|
+ overlay.appendChild(spinner);
|
|
|
|
|
+ document.body.appendChild(style);
|
|
|
|
|
+ document.body.appendChild(overlay);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const hideFullscreenLoading = () => {
|
|
|
|
|
+ const overlay = document.getElementById('fullscreen-loading');
|
|
|
|
|
+ if (overlay) {
|
|
|
|
|
+ overlay.remove();
|
|
|
|
|
+ // 移除动态添加的style标签
|
|
|
|
|
+ document.querySelector('style').remove();
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
/**
|
|
/**
|
|
|
* 报表下载服务
|
|
* 报表下载服务
|
|
|
*/
|
|
*/
|
|
@@ -7,10 +54,10 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * GET 方式下载文件
|
|
|
|
|
- * @param {*} url
|
|
|
|
|
- * @param {*} fileName
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * GET 方式下载文件
|
|
|
|
|
+ * @param {*} url
|
|
|
|
|
+ * @param {*} fileName
|
|
|
|
|
+ */
|
|
|
downloadFile: function (url, fileName) {
|
|
downloadFile: function (url, fileName) {
|
|
|
var xhr = new XMLHttpRequest();
|
|
var xhr = new XMLHttpRequest();
|
|
|
xhr.open('get', url, true);
|
|
xhr.open('get', url, true);
|
|
@@ -18,53 +65,61 @@ export default {
|
|
|
xhr.setRequestHeader('token', token);
|
|
xhr.setRequestHeader('token', token);
|
|
|
xhr.setRequestHeader('Content-type', 'application/json');
|
|
xhr.setRequestHeader('Content-type', 'application/json');
|
|
|
xhr.responseType = 'blob';
|
|
xhr.responseType = 'blob';
|
|
|
- xhr.onreadystatechange = function(){
|
|
|
|
|
- if(xhr.readyState === 4 && xhr.status === 200){
|
|
|
|
|
- let res = xhr.response;
|
|
|
|
|
- let type = xhr.getResponseHeader('Content-Type');
|
|
|
|
|
- let blob = new Blob([res], { type: type });
|
|
|
|
|
- const blobUrl = URL.createObjectURL(blob);
|
|
|
|
|
- const link = document.createElement('a');
|
|
|
|
|
- link.download = fileName;
|
|
|
|
|
- link.style.display = 'none';
|
|
|
|
|
- link.href = blobUrl;
|
|
|
|
|
- document.body.appendChild(link);
|
|
|
|
|
- link.click();
|
|
|
|
|
- URL.revokeObjectURL(blobUrl);
|
|
|
|
|
- document.body.removeChild(link);
|
|
|
|
|
|
|
+ showFullscreenLoading();
|
|
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
|
|
+ if (xhr.readyState === 4) {
|
|
|
|
|
+ if (xhr.status === 200) {
|
|
|
|
|
+ let res = xhr.response;
|
|
|
|
|
+ let type = xhr.getResponseHeader('Content-Type');
|
|
|
|
|
+ let blob = new Blob([res], { type: type });
|
|
|
|
|
+ const blobUrl = URL.createObjectURL(blob);
|
|
|
|
|
+ const link = document.createElement('a');
|
|
|
|
|
+ link.download = fileName;
|
|
|
|
|
+ link.style.display = 'none';
|
|
|
|
|
+ link.href = blobUrl;
|
|
|
|
|
+ document.body.appendChild(link);
|
|
|
|
|
+ link.click();
|
|
|
|
|
+ URL.revokeObjectURL(blobUrl);
|
|
|
|
|
+ document.body.removeChild(link);
|
|
|
|
|
+ }
|
|
|
|
|
+ hideFullscreenLoading();
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+ xhr.onerror = function () {
|
|
|
|
|
+ hideFullscreenLoading();
|
|
|
|
|
+ Notify.error('文件下载失败');
|
|
|
|
|
+ };
|
|
|
xhr.send();
|
|
xhr.send();
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * 报表下载
|
|
|
|
|
- * @param {Object} fileName
|
|
|
|
|
- * @author GuoZhiBo 20200410
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * 报表下载
|
|
|
|
|
+ * @param {Object} fileName
|
|
|
|
|
+ * @author GuoZhiBo 20200410
|
|
|
|
|
+ */
|
|
|
reportDownload: function (fileName) {
|
|
reportDownload: function (fileName) {
|
|
|
var downloadUrl = Common.getApiURL('file/reportDownload') + '?fileName=' + window.encodeURIComponent(fileName);
|
|
var downloadUrl = Common.getApiURL('file/reportDownload') + '?fileName=' + window.encodeURIComponent(fileName);
|
|
|
this.downloadFile(downloadUrl, fileName);
|
|
this.downloadFile(downloadUrl, fileName);
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * 文件下载
|
|
|
|
|
- * @param {Object} className 类名称
|
|
|
|
|
- * @param {Object} fileName 文件名称
|
|
|
|
|
- * @author GuoZhiBo 20211008
|
|
|
|
|
- */
|
|
|
|
|
- fileDownload:function(className, fileName){
|
|
|
|
|
|
|
+ * 文件下载
|
|
|
|
|
+ * @param {Object} className 类名称
|
|
|
|
|
+ * @param {Object} fileName 文件名称
|
|
|
|
|
+ * @author GuoZhiBo 20211008
|
|
|
|
|
+ */
|
|
|
|
|
+ fileDownload: function (className, fileName) {
|
|
|
var downloadUrl = Common.getApiURL('file/fileDownload') + '?className=' + className
|
|
var downloadUrl = Common.getApiURL('file/fileDownload') + '?className=' + className
|
|
|
- + '&fileName=' + window.encodeURIComponent(fileName);
|
|
|
|
|
|
|
+ + '&fileName=' + window.encodeURIComponent(fileName);
|
|
|
this.downloadFile(downloadUrl, fileName);
|
|
this.downloadFile(downloadUrl, fileName);
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * POST 方式下载文件
|
|
|
|
|
- * @param {http请求的地址} url
|
|
|
|
|
- * @param {post请求需要的参数} params
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * POST 方式下载文件
|
|
|
|
|
+ * @param {http请求的地址} url
|
|
|
|
|
+ * @param {post请求需要的参数} params
|
|
|
|
|
+ */
|
|
|
postDownloadFile: function (url, params) {
|
|
postDownloadFile: function (url, params) {
|
|
|
var form = document.createElement('form');
|
|
var form = document.createElement('form');
|
|
|
form.style.display = 'none';
|
|
form.style.display = 'none';
|