소스 검색

feat: 添加订单类型切换时数据缓存功能,避免数据丢失

xieyong 1 개월 전
부모
커밋
1a0016b158

+ 62 - 2
src/views/purchasingManage/purchaseOrder/components/addDialogNew.vue

@@ -569,6 +569,7 @@
             :isContractId="
               !!form.contractId && !OutValidate.includes(form.sourceType)
             "
+            @dataChange="rawDataChange"
           ></inventoryTable>
         </el-tab-pane>
         <el-tab-pane
@@ -586,6 +587,7 @@
             :isContractId="
               !!form.contractId && !OutValidate.includes(form.sourceType)
             "
+            @dataChange="outputDataChange"
           ></inventoryTable>
         </el-tab-pane>
       </el-tabs>
@@ -968,6 +970,11 @@
         groupTreeData: [],
         groupData: [],
         OutValidate: ['3', '4'],
+        // 切换订单类型时缓存带料清单与产出清单的数据,避免因 tab 销毁而丢失
+        rawDetailListCache: [],
+        outputDetailListCache: [],
+        // 记录上一次订单类型是否在 orderSourceType 中,用于判断是否需要恢复缓存
+        prevSourceTypeInOrder: false,
 
         // 提交状态
         loading: false,
@@ -1115,6 +1122,21 @@
         console.log('isGenReceiptPlan', this.isGenReceiptPlan);
       });
     },
+    watch: {
+      // 监听订单类型变化,缓存带料清单与产出清单数据,切换回支持类型时恢复
+      'form.sourceType'(newVal, oldVal) {
+        const wasInOrder = this.orderSourceType.includes(oldVal);
+        const isInOrder = this.orderSourceType.includes(newVal);
+        // 从支持类型切到不支持类型:缓存当前数据
+        if (wasInOrder && !isInOrder) {
+          this.cacheDetailList();
+        }
+        // 从不支持类型切回支持类型:从缓存恢复数据
+        if (!wasInOrder && isInOrder) {
+          this.restoreCachedDetailList();
+        }
+      }
+    },
     methods: {
       changeReceiveTerms(row, index) {
         console.log('changeReceiveTerms~~~', row)
@@ -1945,9 +1967,47 @@
       },
 
       sourceTypeChange() {
-        // 当sourceType改变时,重置relationType及相关字段
+        // 当sourceType改变时,只重置relationType,保留各清单数据
         this.form.relationType = '';
-        this.valueChange();
+      },
+      // 实时同步带料清单数据到缓存
+      rawDataChange(val) {
+        this.rawDetailListCache = val || [];
+      },
+      // 实时同步产出清单数据到缓存
+      outputDataChange(val) {
+        this.outputDetailListCache = val || [];
+      },
+      /**
+       * 切换订单类型时缓存带料清单与产出清单的数据
+       * 由于 tab 上的 v-if 会销毁子组件,所以提前把数据保存到父组件
+       */
+      cacheDetailList() {
+        if (this.$refs.rawDetailListRef) {
+          this.rawDetailListCache =
+            this.$refs.rawDetailListRef.getTableValue() || [];
+        }
+        if (this.$refs.outputDetailListRef) {
+          this.outputDetailListCache =
+            this.$refs.outputDetailListRef.getTableValue() || [];
+        }
+      },
+      /**
+       * 当订单类型切回到支持带料/产出清单的类型时,从缓存恢复数据
+       */
+      restoreCachedDetailList() {
+        this.$nextTick(() => {
+          if (this.$refs.rawDetailListRef) {
+            this.$refs.rawDetailListRef.putTableValue(
+              this.rawDetailListCache || []
+            );
+          }
+          if (this.$refs.outputDetailListRef) {
+            this.$refs.outputDetailListRef.putTableValue(
+              this.outputDetailListCache || []
+            );
+          }
+        });
       },
       handleChangeRelationType(val) {
         // if(this.showReturnRelation) {

+ 9 - 0
src/views/purchasingManage/purchaseOrder/components/inventoryTableNew.vue

@@ -1169,6 +1169,15 @@
         purchaseSinglePriceData: []
       };
     },
+    watch: {
+      // 数据变化时通知父组件同步缓存,避免切换订单类型时数据丢失
+      'form.datasource': {
+        handler(val) {
+          this.$emit('dataChange', val || []);
+        },
+        deep: true
+      }
+    },
     created() {
       this.requestDict('生产类型');
       this.requestDict('商品价格类型');