优化切换table页时候数据加载越来越慢

src/views/qw/sopTemp/updateSopTemp.vue

@@ -663,7 +663,7 @@
   cursor: pointer;
 }
 
-/deep/ .el-badge__content.is-fixed {
+.custom-input /deep/ .el-badge__content.is-fixed {
   top: 10px !important;
   right: 0 !important;
   width: 8px;
@@ -708,6 +708,8 @@ export default {
   components: {ImageUpload, userVideo, draggable},
   data() {
     return {
+      tabDataCache: {}, // tab数据缓存
+      tabLoadingStates: {}, // tab加载状态跟踪
       projectFrom:process.env.VUE_APP_PROJECT_FROM,
       addTag: [{
         addTag: [],
@@ -978,46 +980,95 @@ export default {
     leave(index, oldIndex) {
       const newData = this.setting[index]
       if (newData.dayNum && newData.id) {
+        // 检查是否有缓存数据
+        if (this.tabDataCache[newData.id]) {
+          // 使用缓存数据
+          this.applyCachedData(index, newData, this.tabDataCache[newData.id]);
+          // 预加载下一个tab数据
+          this.preloadNextTab(index);
+          return true;
+        }
+
+        // 防止重复请求同一tab数据
+        if (this.tabLoadingStates[newData.id]) {
+          return false;
+        }
+
+        this.tabLoadingStates[newData.id] = true;
         this.loading = true;
+
         selectRulesInfo(newData.id).then(res => {
-          this.$nextTick(() => {
-            this.loading = false;
-            this.videoList = [];
-            this.addTag = [];
-            this.$set(this.setting, index, {
-              ...newData,
-              voice: res.data.voice,
-              content: res.data.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
-            });
+          // 缓存当前tab数据
+          this.tabDataCache[newData.id] = res.data;
+          this.applyCachedData(index, newData, res.data);
+          this.loading = false;
+          this.tabLoadingStates[newData.id] = false;
+
+          // 预加载下一个tab数据
+          this.preloadNextTab(index);
+        }).catch(() => {
+          this.loading = false;
+          this.tabLoadingStates[newData.id] = false;
+        });
+      }
+      return false;
+    },
 
-            for (let j = 0; j < this.setting[index].content.length; j++) {
+    // 应用缓存数据到tab
+    applyCachedData(index, newData, cachedData) {
+      this.$nextTick(() => {
+        this.videoList = [];
+        this.addTag = [];
+        this.$set(this.setting, index, {
+          ...newData,
+          voice: cachedData.voice,
+          content: cachedData.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
+        });
 
-              if (this.setting[index].content[j].addTag != null) {
-                this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
-              }
-              if (this.setting[index].content[j].delTag != null) {
-                this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
-              }
-              this.videoList.push([])
-              this.addTag.push({
-                addTag: [],
-                inputVisible: false,
-                inputValue: '',
-                delTag: [],
-                delTagVisible: false,
-                delTagValue: ''
-              })
-              if (this.setting[index].content[j].type == 2) {
-                if (this.setting[index].content[j].hasOwnProperty('courseId')) {
-                  this.courseChange(this.setting[index].content[j], index, j);
-                }
-              }
-            }
+        for (let j = 0; j < this.setting[index].content.length; j++) {
+          if (this.setting[index].content[j].addTag != null) {
+            this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
+          }
+          if (this.setting[index].content[j].delTag != null) {
+            this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
+          }
+          this.videoList.push([])
+          this.addTag.push({
+            addTag: [],
+            inputVisible: false,
+            inputValue: '',
+            delTag: [],
+            delTagVisible: false,
+            delTagValue: ''
           })
-        });
-      }
+          if (this.setting[index].content[j].type == 2) {
+            if (this.setting[index].content[j].hasOwnProperty('courseId')) {
+              this.courseChange(this.setting[index].content[j], index, j);
+            }
+          }
+        }
+      })
+    },
 
+    // 预加载下一个tab数据
+    preloadNextTab(currentIndex) {
+      const nextIndex = (parseInt(currentIndex) + 1) % this.setting.length;
+      if (nextIndex !== parseInt(currentIndex) && this.setting[nextIndex] && this.setting[nextIndex].id) {
+        const nextTabId = this.setting[nextIndex].id;
+
+        // 如果下一个tab数据还没有缓存且未在加载中，则预加载
+        if (!this.tabDataCache[nextTabId] && !this.tabLoadingStates[nextTabId]) {
+          this.tabLoadingStates[nextTabId] = true;
+          selectRulesInfo(nextTabId).then(res => {
+            this.tabDataCache[nextTabId] = res.data;
+            this.tabLoadingStates[nextTabId] = false;
+          }).catch(() => {
+            this.tabLoadingStates[nextTabId] = false;
+          });
+        }
+      }
     },
+
     save() {
       let data = this.setting[this.tabIndex];
       let check = this.checkData(data);
@@ -1083,6 +1134,7 @@ export default {
         this.loading = false;
       });
     },
+
     checkData(data) {
       if (this.form.sendType != 4) {
 
@@ -1287,12 +1339,10 @@ export default {
           content[contentIndex].setting.push(newSetting);
         }
       }
-
-
     },
+
     delSetList(index, contentIndex, setIndex) {
       this.setting[index].content[contentIndex].setting.splice(setIndex, 1)
-
     },
 
     addContent(index) {
@@ -1341,7 +1391,6 @@ export default {
         dayNum: (this.form.gap * this.setting.length) + 1,
         content
       })
-
     },
     delSetting(index) {
       const newData = this.setting[index]
@@ -1358,7 +1407,6 @@ export default {
       } else {
         this.del(index);
       }
-
     },
     del(index) {
       if (index == 0) {
@@ -1411,18 +1459,13 @@ export default {
 
     //修改
     courseChangeUpdate(content, index, countIndex) {
-
       this.$set(content, 'videoId', null);
       // 查找选中的课程对应的 label
       const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === content.courseId);
       for (let i = 0; i < content.setting.length; i++) {
-
-
         this.$set(content.setting[i], 'linkTitle', null);
         this.$set(content.setting[i], 'linkDescribe', null);
         this.$set(content.setting[i], 'linkImageUrl', null);
-
-
         //如果是链接的才上
         if (selectedCourse && content.type == 2 && content.courseId != null) {
           //响应式直接给链接的标题/封面上值
@@ -1434,31 +1477,22 @@ export default {
           if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10) {
             this.$set(content.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
           }
-
-
         }
       }
-
-
       this.courseUpdate(content, index, countIndex);
     },
     handleInputVideoText(value, content) {
       // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
       const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
-
       // 删除不符合条件的字符
       const filteredValue = value.split('').filter(char => regex.test(char)).join('');
-
       this.$set(content, 'value', filteredValue);
-
     },
     courseUpdate(content, index, countIndex) {
       videoList(content.courseId).then(response => {
         // this.$set(this.videoList, countIndex, response.list); // 响应式设置videoList
         this.videoList.splice(countIndex, 1, response.list);
-
       });
-
     },
     toggleSalesCall(itemIndex, contentIndex, setIndex) {
       // 获取目标对象
@@ -1806,6 +1840,9 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(id) {
       getSopTemp(id).then(response => {
+        this.tabDataCache = {}; // 清空缓存
+        this.tabLoadingStates = {}; // 清空加载状态
+
         this.videoList = []
         this.form = response.data;
         this.setting = this.form.list || [];
@@ -1846,6 +1883,13 @@ export default {
             });
           }
         });
+        // 默认加载第一个 tab 的数据
+        if (this.setting && this.setting.length > 0) {
+          this.tabIndex = "0";
+          this.$nextTick(() => {
+            this.leave(0);
+          });
+        }
         // this.addTag.push({
         //   addTag: [],
         //   inputVisible: false,