feat: 【我的素材】全景图片页上传后进行切图进度轮询

src/views/material/pano/index.vue

@@ -161,10 +161,8 @@ import {
   checkMStatus,
 } from "@/api";
 
-// 1切图，2失败，3成功
-
 const TYPE = "pano";
-const LONG_POLLING_INTERVAL = 10;
+const LONG_POLLING_INTERVAL = 5;
 
 export default {
   name: 'Pano',
@@ -214,10 +212,12 @@ export default {
     longPollingSwitch: {
       handler: function (newVal) {
         if (!newVal) {
-          this.getMaterialList(true);
           this.clearinter();
         } else {
-          this.beginLongPolling();
+          this.clearinter();
+          this.interval = setInterval(() => {
+            this._checkMStatus();
+          }, LONG_POLLING_INTERVAL * 1000);
         }
       },
     },
@@ -245,12 +245,6 @@ export default {
       this.interval && clearInterval(this.interval);
       this.interval = null;
     },
-    beginLongPolling() {
-      this.clearinter();
-      this.interval = setInterval(() => {
-        this._checkMStatus(true);
-      }, LONG_POLLING_INTERVAL * 1000);
-    },
     handleRename(newName) {
       editMaterial(
         {
@@ -328,30 +322,34 @@ export default {
         }
       });
     },
-    _checkMStatus(islongpolling = null) {
-      let ids = this.uploadList.filter((item) => !!item.id);
-      if (ids.length > 0) {
+    _checkMStatus() {
+      let loadingTaskList = this.uploadTaskList.filter((item) => item.status === 'LOADING');
+      if (loadingTaskList.length > 0) {
         checkMStatus(
           {
-            ids: ids.map((item) => item.id),
-            islongpolling,
+            ids: this.uploadTaskList.map((item) => item.backendId),
+            islongpolling: true,
           },
           (res) => {
-            let tmp = [];
-            this.uploadList.forEach((item) => {
-              let titem = res.data.find((sub) => item.id == sub.id);
-              if (titem) {
-                tmp.push(titem);
-              } else {
-                tmp.push(item);
+            // 1切图中，2失败，3成功
+            res.data.forEach(eachRes => {
+              if (eachRes.status === 2) {
+                const index = this.uploadTaskList.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                index >= 0 && (this.uploadTaskList[index].status = 'FAIL')
+                index >= 0 && (this.uploadTaskList[index].statusText = '素材切图失败')
+              } else if (eachRes.status === 3) {
+                const index = this.uploadTaskList.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                index >= 0 && (this.uploadTaskList[index].status = 'SUCCESS')
+                index >= 0 && (this.uploadTaskList[index].statusText = '切图成功')
               }
             });
-            this.uploadList = tmp;
-            if (tmp.some((item) => item.status == 3)) {
-              this.getMaterialList(true)
-            }
-            if (!tmp.some((item) => item.status == 1)) {
+            if (!this.uploadTaskList.some((item) => item.status === 'LOADING')) {
               this.longPollingSwitch = false;
+              setTimeout(() => {
+                this.uploadTaskList = []
+                this.uploadHandlerList = []
+                this.refreshListDebounced()
+              }, 1000);
             }
           }
         );
@@ -457,9 +455,16 @@ export default {
               uid: data.list.uid,
             },
             (response) => {
-              this.uploadTaskList[index].status = 'SUCCESS'
-              this.uploadTaskList[index].statusText = '素材上传成功'
-              resolve(response);
+              if (response.data.id) {
+                this.uploadTaskList[index].statusText = '正在切图处理'
+                this.uploadTaskList[index].ifKnowProgress = false
+                this.uploadTaskList[index].backendId = response.data.id
+                resolve(response);
+              } else {
+                this.uploadTaskList[index].status = 'FAIL'
+                this.uploadTaskList[index].statusText = '素材上传失败'
+                reject('拿不到上传后文件id')
+              }
             },
             (err) => {
               if (err.status === 0) { // 用户取消了上传任务。TODO：判断依据不够完美。
@@ -480,9 +485,14 @@ export default {
         uploadPromiseList.push(promise);
       });
       Promise.allSettled(uploadPromiseList).then(() => {
-        this.uploadTaskList = []
-        this.uploadHandlerList = []
-        this.refreshListDebounced()
+        if (!this.uploadTaskList.some((item) => item.status === 'LOADING')) {
+          setTimeout(() => {
+            this.uploadTaskList = []
+            this.uploadHandlerList = []
+          }, 1000);
+        } else {
+          this.longPollingSwitch = true
+        }
       });
     },
     onCancelTask(index) {