Explorar o código

feat(inspectionWork): 添加 tab 切换时列表数据刷新功能

xieyong hai 22 horas
pai
achega
ce1895dfb3
Modificáronse 1 ficheiros con 19 adicións e 2 borrados
  1. 19 2
      src/views/inspectionWork/index.vue

+ 19 - 2
src/views/inspectionWork/index.vue

@@ -37,10 +37,27 @@
       this.activeTab = TAB_NAMES.includes(name) ? name : 'myWork';
       this.$set(this.mountedTabs, this.activeTab, true);
     },
+    activated() {
+      // 页面被页签缓存(keep-alive),从报工页返回时组件实例会被复用,
+      // ele-pro-table 不会重新请求接口,这里重新拉取当前 tab 的列表数据,
+      // 保证报工后的状态、合格数等展示正确
+      this.$nextTick(() => {
+        this.refreshList(this.activeTab);
+      });
+    },
     methods: {
+      /* 刷新指定 tab 的列表数据 */
+      refreshList(name) {
+        const ref =
+          name === 'myWork' ? this.$refs.myWorkRef : this.$refs.workListRef;
+        if (!ref) {
+          // 面板还未挂载,首次挂载时 ele-pro-table 会自动加载数据
+          return;
+        }
+        ref.search();
+      },
       /* Tab 切换 */
       handleTabClick(tab) {
-        console.log(tab, 'tab');
         const name = tab.paneName;
         this.$nextTick(() => {
           const ref =
@@ -50,7 +67,7 @@
           }
           if (this.mountedTabs[name]) {
             // 面板之前已挂载,手动刷新
-            ref.search();
+            this.refreshList(name);
           } else {
             // 首次挂载,ele-pro-table 会自动加载数据,这里只做标记,避免重复请求
             this.$set(this.mountedTabs, name, true);