优化模板显示

src/views/qw/sopTemp/updateSopTemp.vue

@@ -785,6 +785,12 @@ export default {
         companyId: null,
         gap: 1,
       },
+      // 缓存对象用于存储预加载的数据
+      tabCache: {},
+      // 标记哪些tab已经被请求过
+      loadedTabs: new Set(),
+      // 标记正在加载的tab，避免重复请求
+      loadingTabs: new Set(),
       // 表单校验
       rules: {
         name: [
@@ -975,48 +981,140 @@ export default {
       // });
     },
     // 切换标签保存数据
-    leave(index, oldIndex) {
+    async leave(index, oldIndex) {
       const newData = this.setting[index]
       if (newData.dayNum && newData.id) {
-        this.loading = true;
-        selectRulesInfo(newData.id).then(res => {
-          this.$nextTick(() => {
+        // 检查是否已经有缓存数据
+        if (this.tabCache[newData.id]) {
+          // 使用缓存数据，无需loading
+          this.applyCachedData(index, newData);
+        } else {
+          // 没有缓存，需要请求数据
+          this.loading = true;
+          try {
+            const res = await selectRulesInfo(newData.id);
+            // 缓存数据
+            this.tabCache[newData.id] = res.data;
+            this.loadedTabs.add(index);
+            this.applyDataToTab(index, newData, res.data);
+          } catch (error) {
+            console.error("获取规则信息失败:", error);
+          } finally {
             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: ""}]}]
-            });
-
-            for (let j = 0; j < this.setting[index].content.length; j++) {
+          }
+        }
+        
+        // 预加载下一个tab的数据
+        this.preloadNextTab(index);
+      }
+    },
+    
+    // 应用缓存数据到tab
+    applyCachedData(index, newData) {
+      const cachedData = this.tabCache[newData.id];
+      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
+    applyDataToTab(index, newData, data) {
+      this.$nextTick(() => {
+        this.videoList = [];
+        this.addTag = [];
+        this.$set(this.setting, index, {
+          ...newData,
+          voice: data.voice,
+          content: data.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
         });
-      }
 
+        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的数据
+    async preloadNextTab(currentIndex) {
+      const nextIndex = parseInt(currentIndex) + 1;
+      // 检查是否有下一个tab
+      if (nextIndex >= this.setting.length) {
+        return;
+      }
+      
+      const nextTabData = this.setting[nextIndex];
+      // 只预加载已存在的tab（有id的），跳过新建的tab
+      if (!nextTabData.id || !nextTabData.dayNum) {
+        return;
+      }
+      
+      // 如果已经加载过或正在加载，则跳过
+      if (this.loadedTabs.has(nextIndex) || this.loadingTabs.has(nextIndex) || this.tabCache[nextTabData.id]) {
+        return;
+      }
+      
+      // 标记为正在加载
+      this.loadingTabs.add(nextIndex);
+      
+      try {
+        const res = await selectRulesInfo(nextTabData.id);
+        // 缓存数据
+        this.tabCache[nextTabData.id] = res.data;
+        this.loadedTabs.add(nextIndex);
+      } catch (error) {
+        console.error("预加载tab数据失败:", error);
+      } finally {
+        // 移除加载标记
+        this.loadingTabs.delete(nextIndex);
+      }
     },
     save() {
       let data = this.setting[this.tabIndex];
@@ -1079,6 +1177,18 @@ export default {
           ...this.setting[this.tabIndex],
           id: e.data.id,
         });
+        
+        // 更新缓存中的数据
+        const currentTabId = this.setting[this.tabIndex].id;
+        if (currentTabId) {
+          // 重新获取最新数据并更新缓存
+          selectRulesInfo(currentTabId).then(res => {
+            this.tabCache[currentTabId] = res.data;
+            this.loadedTabs.add(parseInt(this.tabIndex));
+          }).catch(error => {
+            console.error("更新缓存失败:", error);
+          });
+        }
       }).catch(() => {
         this.loading = false;
       });