Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhanbo.xu
9de8413f 1 parent b9caf032

优化导出并修改代码

Inline Side-by-side
Showing 4 changed files with 257 additions and 119 deletions
...@@ -64,3 +64,29 @@ export function getCustomizeExcel(data) { ...@@ -64,3 +64,29 @@ export function getCustomizeExcel(data) {
64 data: data, 64 data: data,
65 }); 65 });
66 } 66 }
67 +
68 +// 查询导出的任务ID
69 +
70 +// POST
71 +// /exportList/submitExportTask
72 +export function getSubmitExportTask(data) {
73 + return request({
74 + url: "/bus-customer/exportList/submitExportTask",
75 + method: "post",
76 + data: data,
77 + });
78 +}
79 +// /asyncExport/taskStatus/{taskId}
80 +export function getTaskStatus(data) {
81 + return request({
82 + url: "/bus-customer/asyncExport/taskStatus/" + data.taskId,
83 + method: "get",
84 + });
85 +}
86 +// /asyncExport/download/{taskId}
87 +export function getDownload(data) {
88 + return request({
89 + url: "/bus-customer/asyncExport/download/" + data.taskId,
90 + method: "get",
91 + });
92 +}
......
1 -import axios from 'axios' 1 +import axios from "axios";
2 -import { MessageBox, Message } from 'element-ui' 2 +import { MessageBox, Message } from "element-ui";
3 -import store from '@/store' 3 +import store from "@/store";
4 -import { getToken, setTime, removeTime, removeToken } from '@/utils/auth' 4 +import { getToken, setTime, removeTime, removeToken } from "@/utils/auth";
5 -import errorCode from '@/utils/errorCode' 5 +import errorCode from "@/utils/errorCode";
6 -import i18n from '@/assets/languages' 6 +import i18n from "@/assets/languages";
7 7
8 -axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' 8 +axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
9 // 创建axios实例 9 // 创建axios实例
10 const service = axios.create({ 10 const service = axios.create({
11 // axios中请求配置有baseURL选项，表示请求URL公共部分 11 // axios中请求配置有baseURL选项，表示请求URL公共部分
12 baseURL: process.env.VUE_APP_BASE_API, 12 baseURL: process.env.VUE_APP_BASE_API,
13 // 超时 13 // 超时
14 - timeout: 1800000 14 + timeout: 180000000,
15 -}) 15 +});
16 // request拦截器 16 // request拦截器
17 -service.interceptors.request.use(config => { 17 +service.interceptors.request.use(
18 - // 是否需要设置 token 18 + (config) => {
19 - const isToken = (config.headers || {}).isToken === false 19 + // 是否需要设置 token
20 - // if (getToken() && !isToken) { 20 + const isToken = (config.headers || {}).isToken === false;
21 - config.headers['Authorization'] = getToken() == null ? '1' : 'Bearer ' + getToken()// 让每个请求携带自定义token 请根据实际情况自行修改 21 + // if (getToken() && !isToken) {
22 - // } 22 + config.headers["Authorization"] =
23 - config.headers['Lang'] = localStorage.getItem('iClearExpLang') ? localStorage.getItem('iClearExpLang') : '1' 23 + getToken() == null ? "1" : "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
24 - config.headers['Ver'] = process.env.VUE_APP_APIVERSION 24 + // }
25 - // get请求映射params参数 25 + config.headers["Lang"] = localStorage.getItem("iClearExpLang")
26 - if (config.method === 'get' && config.params) { 26 + ? localStorage.getItem("iClearExpLang")
27 - let url = config.url + '?'; 27 + : "1";
28 - for (const propName of Object.keys(config.params)) { 28 + config.headers["Ver"] = process.env.VUE_APP_APIVERSION;
29 - const value = config.params[propName]; 29 + // get请求映射params参数
30 - var part = encodeURIComponent(propName) + "="; 30 + if (config.method === "get" && config.params) {
31 - if (value !== null && typeof (value) !== "undefined") { 31 + let url = config.url + "?";
32 - if (typeof value === 'object') { 32 + for (const propName of Object.keys(config.params)) {
33 - for (const key of Object.keys(value)) { 33 + const value = config.params[propName];
34 - let params = propName + '[' + key + ']'; 34 + var part = encodeURIComponent(propName) + "=";
35 - var subPart = encodeURIComponent(params) + "="; 35 + if (value !== null && typeof value !== "undefined") {
36 - url += subPart + encodeURIComponent(value[key]) + "&"; 36 + if (typeof value === "object") {
37 + for (const key of Object.keys(value)) {
38 + let params = propName + "[" + key + "]";
39 + var subPart = encodeURIComponent(params) + "=";
40 + url += subPart + encodeURIComponent(value[key]) + "&";
41 + }
42 + } else {
43 + url += part + encodeURIComponent(value) + "&";
37 } 44 }
38 - } else {
39 - url += part + encodeURIComponent(value) + "&";
40 } 45 }
41 } 46 }
47 + url = url.slice(0, -1);
48 + config.params = {};
49 + config.url = url;
42 } 50 }
43 - url = url.slice(0, -1); 51 + // let token = getToken() != null ? getToken().split('.')[0] : null
44 - config.params = {}; 52 + // let userType = store.getters.userData.organization ? store.getters.userData.organization.code : null
45 - config.url = url; 53 + // if ((token == '2' && userType != null && userType != 'customer') || (token == '1' && userType == 'customer')) {
54 + // config.url = ''
55 + // MessageBox.alert('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
56 + // confirmButtonText: '重新登录',
57 + // cancelButtonText: '取消',
58 + // type: 'warning'
59 + // }
60 + // ).then(() => {
61 + // store.dispatch('FedLogOut')
62 + // })
63 + // return config
64 + // } else {
65 + return config;
66 + // }
67 + },
68 + (error) => {
69 + console.log(error);
70 + Promise.reject(error);
46 } 71 }
47 - // let token = getToken() != null ? getToken().split('.')[0] : null 72 +);
48 - // let userType = store.getters.userData.organization ? store.getters.userData.organization.code : null
49 - // if ((token == '2' && userType != null && userType != 'customer') || (token == '1' && userType == 'customer')) {
50 - // config.url = ''
51 - // MessageBox.alert('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
52 - // confirmButtonText: '重新登录',
53 - // cancelButtonText: '取消',
54 - // type: 'warning'
55 - // }
56 - // ).then(() => {
57 - // store.dispatch('FedLogOut')
58 - // })
59 - // return config
60 - // } else {
61 - return config
62 - // }
63 -}, error => {
64 - console.log(error)
65 - Promise.reject(error)
66 -})
67 73
68 // 响应拦截器 74 // 响应拦截器
69 -service.interceptors.response.use(res => { 75 +service.interceptors.response.use(
70 - if (res.config.url != '/manager-server/systemAddressInfoController/findSystemAddressInfoAll') { 76 + (res) => {
71 - setTime(new Date().getTime()) 77 + if (
72 - } 78 + res.config.url !=
73 - // 未设置状态码则默认成功状态 79 + "/manager-server/systemAddressInfoController/findSystemAddressInfoAll"
74 - const code = Number(res.data.code) || 200; 80 + ) {
75 - // 获取错误信息 81 + setTime(new Date().getTime());
76 - const msg = errorCode[code] || res.data.message || errorCode['default']
77 - if (code === 50000 || code === 530) {
78 - removeToken()
79 - MessageBox.alert(i18n.t('system.loginOut'), i18n.t('system.systemTip'), {
80 - confirmButtonText: i18n.t('system.relogin'),
81 - cancelButtonText: i18n.t('system.close'),
82 - type: 'warning'
83 } 82 }
84 - ).finally(() => { 83 + // 未设置状态码则默认成功状态
85 - store.dispatch('FedLogOut') 84 + const code = Number(res.data.code) || 200;
86 - }) 85 + // 获取错误信息
87 - } else if (code === 10005) { 86 + const msg = errorCode[code] || res.data.message || errorCode["default"];
88 - removeToken() 87 + if (code === 50000 || code === 530) {
89 - MessageBox.alert('<span style="font-weight:700">系统版本已更新！</span><br/>当前版本非最新版，请退出系统后刷新您当前所使用的浏览器后，重新登录系统!</br> </br>常用浏览器的快速刷新页面操作方法有：</br>1、谷歌浏览器请按“F5键”或“Ctrl键 + R键”快速刷新页面</br>2、360浏览器跟EDGE浏览器请按“Ctrl键 + R键”快速刷新页面</br>3、IE浏览器请按“F5键”或“Ctrl键 + R键”快速刷新页面</br> </br>其它浏览器的刷新方式请根据浏览器的菜单进行操作！', i18n.t('system.systemTip'), { 88 + removeToken();
90 - confirmButtonText: i18n.t('system.relogin'), 89 + MessageBox.alert(i18n.t("system.loginOut"), i18n.t("system.systemTip"), {
91 - cancelButtonText: i18n.t('system.close'), 90 + confirmButtonText: i18n.t("system.relogin"),
92 - type: 'warning', 91 + cancelButtonText: i18n.t("system.close"),
93 - customClass: 'systemVerError', 92 + type: "warning",
94 - dangerouslyUseHTMLString: true 93 + }).finally(() => {
94 + store.dispatch("FedLogOut");
95 + });
96 + } else if (code === 10005) {
97 + removeToken();
98 + MessageBox.alert(
99 + '<span style="font-weight:700">系统版本已更新！</span><br/>当前版本非最新版，请退出系统后刷新您当前所使用的浏览器后，重新登录系统!</br> </br>常用浏览器的快速刷新页面操作方法有：</br>1、谷歌浏览器请按“F5键”或“Ctrl键 + R键”快速刷新页面</br>2、360浏览器跟EDGE浏览器请按“Ctrl键 + R键”快速刷新页面</br>3、IE浏览器请按“F5键”或“Ctrl键 + R键”快速刷新页面</br> </br>其它浏览器的刷新方式请根据浏览器的菜单进行操作！',
100 + i18n.t("system.systemTip"),
101 + {
102 + confirmButtonText: i18n.t("system.relogin"),
103 + cancelButtonText: i18n.t("system.close"),
104 + type: "warning",
105 + customClass: "systemVerError",
106 + dangerouslyUseHTMLString: true,
107 + }
108 + ).finally(() => {
109 + store.dispatch("FedLogOut");
110 + });
111 + } else if (code === 500) {
112 + MessageBox.alert(msg, i18n.t("system.tipTitle2"), {
113 + dangerouslyUseHTMLString: true,
114 + });
115 + return Promise.reject(new Error(msg));
116 + } else if (code !== 200) {
117 + // MessageBox.alert(msg, '注意', {
118 + // dangerouslyUseHTMLString: true
119 + // });
120 + return res.data;
121 + } else {
122 + return res.data;
95 } 123 }
96 - ).finally(() => { 124 + },
97 - store.dispatch('FedLogOut') 125 + (error) => {
98 - }) 126 + removeTime();
99 - } else if (code === 500) { 127 + console.log("err" + error);
100 - MessageBox.alert(msg, i18n.t('system.tipTitle2'), {
101 - dangerouslyUseHTMLString: true
102 - });
103 - return Promise.reject(new Error(msg))
104 - } else if (code !== 200) {
105 - // MessageBox.alert(msg, '注意', {
106 - // dangerouslyUseHTMLString: true
107 - // });
108 - return res.data
109 - } else {
110 - return res.data
111 - }
112 -},
113 - error => {
114 - removeTime()
115 - console.log('err' + error)
116 let { message } = error; 128 let { message } = error;
117 if (message == "Network Error") { 129 if (message == "Network Error") {
118 - message = i18n.t('system.systemError1'); 130 + message = i18n.t("system.systemError1");
119 - } 131 + } else if (message.includes("timeout")) {
120 - else if (message.includes("timeout")) { 132 + message = i18n.t("system.systemError2");
121 - message = i18n.t('system.systemError2'); 133 + } else if (message.includes("Request failed with status code")) {
122 - } 134 + message = i18n.t("system.systemError3", {
123 - else if (message.includes("Request failed with status code")) { 135 + a: message.substr(message.length - 3),
124 - message = i18n.t('system.systemError3', { a: message.substr(message.length - 3) }); 136 + });
125 } 137 }
126 Message({ 138 Message({
127 message: message, 139 message: message,
128 - type: 'error', 140 + type: "error",
129 - duration: 5 * 1000 141 + duration: 5 * 1000,
130 - }) 142 + });
131 - return Promise.reject(error) 143 + return Promise.reject(error);
132 } 144 }
133 -) 145 +);
134 146
135 -export default service 147 +export default service;
......
...@@ -20,6 +20,8 @@ const apiUrl = { ...@@ -20,6 +20,8 @@ const apiUrl = {
20 declareDataModel: "/bus-customer/declareData/downloadTemplate", 20 declareDataModel: "/bus-customer/declareData/downloadTemplate",
21 // 清单查询下载 21 // 清单查询下载
22 listExport: "/bus-customer/exportList/listExport", 22 listExport: "/bus-customer/exportList/listExport",
23 + // 根据id导出
24 + customDownloadXls: "/bus-customer/asyncExport/download",
23 }; 25 };
24 26
25 const baseUrl = process.env.VUE_APP_BASE_API; 27 const baseUrl = process.env.VUE_APP_BASE_API;
...@@ -31,6 +33,8 @@ export function downLoadZip(urlStatus, str, filename, type, method, data) { ...@@ -31,6 +33,8 @@ export function downLoadZip(urlStatus, str, filename, type, method, data) {
31 url = baseUrl + apiUrl[str]; 33 url = baseUrl + apiUrl[str];
32 } else if (urlStatus == "res") { 34 } else if (urlStatus == "res") {
33 url = str; 35 url = str;
36 + } else if (urlStatus == "task") {
37 + url = baseUrl + apiUrl[str] + "/" + data.taskId;
34 } 38 }
35 console.log(url); 39 console.log(url);
36 40
......
...@@ -215,6 +215,7 @@ ...@@ -215,6 +215,7 @@
215 size="small" 215 size="small"
216 icon="el-icon-download" 216 icon="el-icon-download"
217 @click="downloadData" 217 @click="downloadData"
218 + :loading="isPolling || exportLoading"
218 > 219 >
219 导出 220 导出
220 </el-button> 221 </el-button>
...@@ -282,7 +283,12 @@ ...@@ -282,7 +283,12 @@
282 </template> 283 </template>
283 284
284 <script> 285 <script>
285 -import { getAllexportList, getListReceiptData } from "@/api/exportList-api.js"; 286 +import {
287 + getAllexportList,
288 + getListReceiptData,
289 + getSubmitExportTask,
290 + getTaskStatus,
291 +} from "@/api/exportList-api.js";
286 import CustomDialog from "./custom-dialog.vue"; 292 import CustomDialog from "./custom-dialog.vue";
287 import { formatDateNew } from "../../utils"; 293 import { formatDateNew } from "../../utils";
288 294
...@@ -415,6 +421,11 @@ export default { ...@@ -415,6 +421,11 @@ export default {
415 formItemconsignmentHeadCode: false, 421 formItemconsignmentHeadCode: false,
416 }, 422 },
417 tableMaxheight: null, 423 tableMaxheight: null,
424 + exportLoading: false,
425 + pollTimer: null, // 定时器实例
426 + pollInterval: 5000, // 轮询间隔（5秒）
427 + isPolling: false, // 轮询状态标识
428 + currentTaskId: null,
418 }; 429 };
419 }, 430 },
420 created() { 431 created() {
...@@ -423,9 +434,13 @@ export default { ...@@ -423,9 +434,13 @@ export default {
423 mounted() { 434 mounted() {
424 this.tableMaxheight = window.innerHeight - 360; 435 this.tableMaxheight = window.innerHeight - 360;
425 }, 436 },
437 + beforeDestroy() {
438 + this.stopPolling(); // 组件销毁前清理定时器
439 + },
426 watch: { 440 watch: {
427 $route() { 441 $route() {
428 this.popoverClose(); 442 this.popoverClose();
443 + this.stopPolling(); // 组件销毁前清理定时器
429 }, 444 },
430 }, 445 },
431 methods: { 446 methods: {
...@@ -496,6 +511,68 @@ export default { ...@@ -496,6 +511,68 @@ export default {
496 summaryApplicationStatus: "", 511 summaryApplicationStatus: "",
497 }; 512 };
498 }, 513 },
514 +
515 + // 查询成功后调用的其他接口
516 + async callOtherApi() {
517 + try {
518 + const fileName = `${formatDateNew(new Date())}.xlsx`;
519 + this.fileDownload
520 + .downLoadZip("task", "customDownloadXls", fileName, "xlsx", "get", {
521 + taskId: this.currentTaskId,
522 + })
523 + .finally(() => {
524 + // this.cancelDownload();
525 + this.exportLoading = false;
526 + });
527 + } catch (error) {
528 + console.error("后续接口调用失败:", error);
529 + }
530 + },
531 + // 轮询查询状态
532 + async pollStatus() {
533 + try {
534 + const result = await getTaskStatus({ taskId: this.currentTaskId });
535 +
536 + if (+result.code === 200) {
537 + // PENDING, PROCESSING, COMPLETED, FAILED
538 + if (result.data.status === "COMPLETED") {
539 + this.stopPolling(); // 停止轮询
540 + await this.callOtherApi(); // 调用其他接口
541 + } else if (result.data.status === "FAILED") {
542 + this.stopPolling();
543 + this.handleFailure();
544 + this.alertWarningMsg(result.data.errorMessage);
545 + } else {
546 + this.startPolling(); // 启动轮询
547 + }
548 + } else {
549 + this.stopPolling();
550 + this.handleFailure();
551 + }
552 + // 其他状态继续轮询
553 + } catch (error) {
554 + console.error("轮询查询失败:", error);
555 + this.stopPolling();
556 + }
557 + },
558 + // 启动轮询
559 + startPolling() {
560 + if (this.isPolling) return;
561 +
562 + this.isPolling = true;
563 + this.pollTimer = setInterval(() => {
564 + this.pollStatus();
565 + }, this.pollInterval);
566 + },
567 + // 停止轮询
568 + stopPolling() {
569 + if (this.pollTimer) {
570 + clearInterval(this.pollTimer);
571 + this.pollTimer = null;
572 + }
573 + this.isPolling = false;
574 + this.exportLoading = false;
575 + },
499 //导出 576 //导出
500 downloadData() { 577 downloadData() {
501 let obj = { ...this.sreachFormData }; 578 let obj = { ...this.sreachFormData };
...@@ -527,13 +604,32 @@ export default { ...@@ -527,13 +604,32 @@ export default {
527 // // 2. 清单查询 604 // // 2. 清单查询
528 // console.log(res); 605 // console.log(res);
529 // }); 606 // });
530 - const fileName = `${formatDateNew(new Date())}.xlsx`; 607 + this.exportLoading = true;
531 - this.fileDownload 608 +
532 - .downLoadZip("api", "listExport", fileName, "xlsx", "post", { 609 + this.$confirm(`正在导出中，请稍候！`, "提示", {
533 - ...obj, 610 + confirmButtonText: "确定",
611 + cancelButtonText: "取消",
612 + type: "warning",
613 + })
614 + .then(() => {
615 + getSubmitExportTask(obj).then((res) => {
616 + if (+res.code === 200) {
617 + console.log(res);
618 + this.currentTaskId = res.data;
619 + this.startPolling();
620 + }
621 + });
622 + // this.fileDownload
623 + // .downLoadZip("api", "listExport", fileName, "xlsx", "post", {
624 + // ...obj,
625 + // })
626 + // .finally(() => {
627 + // // this.cancelDownload();
628 + // this.exportLoading = false;
629 + // });
534 }) 630 })
535 - .finally(() => { 631 + .catch(() => {
536 - this.cancelDownload(); 632 + this.exportLoading = false;
537 }); 633 });
538 }, 634 },
539 //查询详情 635 //查询详情
......