mycomponents/page/container/record 文件迁移Vue2升级Vue3 8/2-10/25

src/pages/container/record/containerUnBindRecord.vue

@@ -56,296 +56,281 @@ import winScanContainer from '@/mycomponents/scan/winScanContainer.vue'
 import recordComDetailCard from '@/mycomponents/record/recordComDetailCard.vue'
 import comPalletRecord from '@/pages/container/coms/comPalletRecord.vue'
 
-export default {
-  components: {
-    winScanButton,
-    winScanPack,
-    comBlankView,
-    targetContainer,
-    recordComDetailCard,
-    winScanContainer,
-    comPalletRecord
-  },
-  data() {
-    return {
-      id: '',
-      scanCount: 0,
-      detailSource: [], // 绑定在页面上的数据源
-      businessTypeInfo: {},
-      fromLocationInfo: {},
-      containerCode: ''
+import { ref, onMounted, nextTick } from 'vue';
+import { useStore } from 'vuex';
+import { onLoad,onNavigationBarButtonTap } from '@dcloudio/uni-app'
+
+const id = ref('');
+const scanCount = ref(0);
+const detailSource = ref([]);
+const businessTypeInfo = ref({});
+const fromLocationInfo = ref({});
+const containerCode = ref('');
+
+const scanPopup = ref(null);
+const scanContainer = ref(null);
+const comMessage = ref(null);
+
+const emit = defineEmits(['close', 'getResult']);
+
+onLoad((option) => {
+  uni.setNavigationBarTitle({
+    title: option.title
+  });
+})
+
+onNavigationBarButtonTap((e) => {
+  if (e.index === 0) {
+    goHome();
+  }
+})
+
+onMounted(() => {
+  showContainerPopup();
+});
+
+const getScanResult = (result) => {
+  try {
+    const { packingNumber, batch, qty, itemCode } = result.label;
+    const detail = detailSource.value.find((r) => r.itemCode === itemCode);
+    if (detail == undefined) {
+      showMessage(`物料号【${itemCode}】不在列表中`);
+    } else {
+      const itemDetail = detail.subList.find((r) => r.packingNumber === packingNumber && r.batch === batch);
+      if (itemDetail == undefined) {
+        showMessage(`箱码【${packingNumber}】,批次【${batch}】不在列表中`);
+      } else if (itemDetail.scaned) {
+        showMessage(`箱码【${packingNumber}】,批次【${batch}】已经扫描`);
+      } else {
+        itemDetail.scaned = true;
+        itemDetail.record = createRecordInfo(itemDetail, result.label);
+        // calcHandleQty();
+      }
     }
-  },
-  onLoad(option) {
-    uni.setNavigationBarTitle({
-      title: option.title
-    })
-  },
-  // 返回首页
-  onNavigationBarButtonTap(e) {
-    if (e.index === 0) {
-      goHome()
+  } catch (e) {
+    showErrorMessage(e.message);
+  }
+};
+
+const createRecordInfo = (detail, label) => {
+  const record = {};
+  Object.assign(record, detail);
+  record.qty = Number(label.qty);
+  return record;
+};
+
+const calcHandleQty = () => {
+  calcHandleQty(detailSource.value);
+  scanPopupGetFocus();
+};
+
+const getDataSource = (subList) => {
+  const items = [];
+  subList.forEach((detail) => {
+    let item = items.find((r) => r.itemCode === detail.itemCode);
+    if (item == undefined) {
+      item = createItemInfo(detail);
+      const newDetail = createDetailInfo(detail);
+      item.subList.push(newDetail);
+      items.push(item);
+    } else {
+      item.qty = calc.add(item.qty, detail.qty);
+      const newDetail = createDetailInfo(detail);
+      item.subList.push(newDetail);
     }
-  },
-  // 拦截返回按钮事件
-  onBackPress(e) {},
-
-  onPullDownRefresh() {},
-
-  mounted() {
-    this.showContainerPopup()
-  },
-  methods: {
-    getScanResult(result) {
-      try {
-        const { packingNumber } = result.label
-        const { batch } = result.label
-        const { qty } = result.label
-        const { itemCode } = result.label
-        const detail = this.detailSource.find((r) => r.itemCode == itemCode)
-        if (detail == undefined) {
-          this.showMessage(`物料号【${itemCode}】不在列表中`)
-        } else {
-          const itemDetail = detail.subList.find((r) => r.packingNumber == packingNumber && r.batch == batch)
-          if (itemDetail == undefined) {
-            this.showMessage(`箱码【${packingNumber}】,批次【${batch}】不在列表中`)
-          } else if (itemDetail.scaned) {
-            this.showMessage(`箱码【${packingNumber}】,批次【${batch}】已经扫描`)
-          } else {
-            itemDetail.scaned = true
-            itemDetail.record = this.createRecordInfo(itemDetail, result.label)
-            // this.calcHandleQty();
-          }
-        }
-      } catch (e) {
-        this.showErrorMessage(e.message)
-      }
-    },
-
-    createRecordInfo(detail, label) {
-      const record = {}
-      detail.scaned = true
-      // let record = JSON.parse(JSON.stringify(detail));
-      // 克隆对象，深度克隆，防止双向绑定同一个变量
-      Object.assign(record, detail)
-      record.qty = Number(label.qty)
-      return record
-    },
-
-    calcHandleQty() {
-      calcHandleQty(this.detailSource)
-      this.scanPopupGetFocus()
-      this.$forceUpdate()
-    },
-
-    getDataSource(subList) {
-      const items = []
-      subList.forEach((detail) => {
-        let item = items.find((r) => r.itemCode == detail.itemCode)
-        if (item == undefined) {
-          item = this.createItemInfo(detail)
-          const newDetail = this.createDetailInfo(detail) //
-          item.subList.push(newDetail)
-          items.push(item)
-        } else {
-          item.qty = calc.add(item.qty, detail.qty)
-          const newDetail = this.createDetailInfo(detail) //
-          item.subList.push(newDetail)
-        }
-      })
-      return items
-    },
-
-    removeItem(index, item) {
-      this.detailSource.splice(index, 1)
-    },
-
-    createItemInfo(res) {
-      const item = {
-        itemCode: res.itemCode,
-        itemName: res.itemName,
-        packQty: res.packQty,
-        packUnit: res.packUnit,
-        qty: res.qty,
-        handleQty: 0,
-        uom: res.uom,
-        subList: []
-      }
-      return item
-    },
-
-    createDetailInfo(data) {
-      data.scaned = false
-      data.packingNumber = data.contentNumber
-      data.qty = Number(data.qty)
-      data.handleQty = 0
-      const detail = data
-      return detail
-    },
-
-    removePack() {
-      for (let i = 0; i < this.detailSource.length; i++) {
-        const item = this.detailSource[i]
-        if (item.subList.length == 0) {
-          this.detailSource.splice(i, 1)
-        }
-      }
-      this.updateData()
-    },
+  });
+  return items;
+};
+
+const removeItem = (index) => {
+  detailSource.value.splice(index, 1);
+};
+
+const createItemInfo = (res) => {
+  const item = {
+    itemCode: res.itemCode,
+    itemName: res.itemName,
+    packQty: res.packQty,
+    packUnit: res.packUnit,
+    qty: res.qty,
+    handleQty: 0,
+    uom: res.uom,
+    subList: []
+  };
+  return item;
+};
+
+const createDetailInfo = (data) => {
+  data.scaned = false;
+  data.packingNumber = data.contentNumber;
+  data.qty = Number(data.qty);
+  data.handleQty = 0;
+  return data;
+};
+
+const removePack = () => {
+  for (let i = 0; i < detailSource.value.length; i++) {
+    const item = detailSource.value[i];
+    if (item.subList.length === 0) {
+      detailSource.value.splice(i, 1);
+    }
+  }
+  updateData();
+};
 
-    openScanPopup() {
-      if (this.containerCode == '') {
-        this.showContainerPopup()
-        return
-      }
-      this.$refs.scanPopup.openScanPopup()
-    },
-    showContainerPopup() {
-      this.$nextTick(() => {
-        this.$refs.scanContainer.openScanPopup()
-      })
-    },
-    closeScanPopup() {
-      this.$refs.scanPopup.closeScanPopup()
-    },
-
-    scanPopupGetFocus() {
-      if (this.$refs.scanPopup != undefined) {
-        this.$refs.scanPopup.getfocus()
-      }
-    },
+const openScanPopup = () => {
+  if (containerCode.value === '') {
+    showContainerPopup();
+    return;
+  }
+  scanPopup.value.openScanPopup();
+};
+
+const showContainerPopup = () => {
+  nextTick(() => {
+    scanContainer.value.openScanPopup();
+  });
+};
+
+const closeScanPopup = () => {
+  scanPopup.value.closeScanPopup();
+};
+
+const scanPopupGetFocus = () => {
+  if (scanPopup.value != undefined) {
+    scanPopup.value.getfocus();
+  }
+};
+
+const scanPopupLoseFocus = () => {
+  if (scanPopup.value != undefined) {
+    scanPopup.value.losefocus();
+  }
+};
+
+const commit = () => {
+  uni.showLoading({
+    title: '提交中...',
+    mask: true
+  });
+
+  scanCount.value = getScanCount(detailSource.value[0].subList);
+  if (scanCount.value === 0) {
+    showErrorMessage('扫描数为0,请先扫描要解绑的箱码');
+    return;
+  }
 
-    scanPopupLoseFocus() {
-      if (this.$refs.scanPopup != undefined) {
-        this.$refs.scanPopup.losefocus()
+  const params = getParams();
+  console.log(`提交${JSON.stringify(params)}`);
+
+  containerUnBindRecordSubmit(params)
+    .then((res) => {
+      uni.hideLoading();
+      if (res.data) {
+        showCommitSuccessMessage(`提交成功\n生成器具绑定记录\n${res.data}`);
+        clear();
+      } else {
+        showErrorMessage(`提交失败[${res.msg}]`);
       }
-    },
-
-    commit() {
-      uni.showLoading({
-        title: '提交中...',
-        mask: true
-      })
-
-      this.scanCount = getScanCount(this.detailSource[0].subList)
-      if (this.scanCount == 0) {
-        this.showErrorMessage('扫描数为0,请先扫描要解绑的箱码')
-        return
+    })
+    .catch((error) => {
+      uni.hideLoading();
+      showErrorMessage(error);
+    });
+};
+
+const getParams = () => {
+  const subList = [];
+  const creator = useStore().state.user.id;
+  const params = {
+    number: containerCode.value,
+    type: 'bind',
+    status: 'USED',
+    creator
+  };
+
+  detailSource.value.forEach((item) => {
+    item.subList.forEach((detail) => {
+      if (detail.scaned) {
+        detail.containerContentType = 'PACKAGE';
+        detail.contentNumber = detail.packingNumber;
+        detail.itemCode = detail.itemCode;
+        detail.batch = detail.batch;
+        detail.inventoryStatus = detail.inventoryStatus;
+        detail.qty = detail.handleQty;
+        detail.package = null;
+        subList.push(detail);
       }
-
-      const params = this.getParams()
-      console.log(`提交${JSON.stringify(params)}`)
-
-      containerUnBindRecordSubmit(params)
-        .then((res) => {
-          uni.hideLoading()
-          if (res.data) {
-            this.showCommitSuccessMessage(`提交成功\n生成器具绑定记录\n${res.data}`)
-            this.clear()
-          } else {
-            this.showErrorMessage(`提交失败[${res.msg}]`)
-          }
-        })
-        .catch((error) => {
-          uni.hideLoading()
-          this.showErrorMessage(error)
-        })
-    },
-
-    getParams() {
-      const subList = []
-      const creator = this.$store.state.user.id
-      const params = {
-        number: this.containerCode,
-        type: 'bind',
-        status: 'USED',
-        creator
+    });
+  });
+  params.subList = subList;
+  return params;
+};
+
+const showMessage = (message) => {
+  setTimeout(() => {
+    scanPopupLoseFocus();
+    comMessage.value.showMessage(message, (res) => {
+      if (res) {
+        scanPopupGetFocus();
       }
-
-      this.detailSource.forEach((item) => {
-        item.subList.forEach((detail) => {
-          if (detail.scaned) {
-            detail.containerContentType = 'PACKAGE'
-            detail.contentNumber = detail.packingNumber
-
-            detail.itemCode = detail.itemCode
-            detail.batch = detail.batch
-            detail.inventoryStatus = detail.inventoryStatus
-            detail.qty = detail.handleQty
-            detail.package = null
-            subList.push(detail)
-          }
-        })
-      })
-      params.subList = subList
-      return params
-    },
-
-    showMessage(message) {
-      setTimeout((r) => {
-        this.scanPopupLoseFocus()
-        this.$refs.comMessage.showMessage(message, (res) => {
-          if (res) {
-            this.scanPopupGetFocus()
-          }
-        })
-      })
-    },
-
-    showErrorMessage(message) {
-      setTimeout((r) => {
-        this.scanPopupLoseFocus()
-        this.$refs.comMessage.showErrorMessage(message, (res) => {
-          if (res) {
-            this.scanPopupGetFocus()
-          }
-        })
-      })
-    },
-
-    showScanMessage(message) {
-      this.$refs.comMessage.showScanMessage(message)
-    },
-
-    afterCloseMessage() {
-      this.scanPopupGetFocus()
-    },
-
-    closeScanMessage() {
-      this.scanPopupGetFocus()
-    },
-
-    getContainer(containerInfo) {
-      this.containerCode = containerInfo.number
-      getContainerDetailByNumber(this.containerCode)
-        .then((res) => {
-          if (res.data != null && res.data.subList.length > 0) {
-            this.detailSource = this.getDataSource(res.data.subList)
-          }
-        })
-        .catch((error) => {
-          this.showErrorMessage(error.message)
-        })
-    },
-
-    showCommitSuccessMessage(hint) {
-      this.$refs.comMessage.showSuccessMessage(hint, (res) => {
-        this.containerCode = ''
-      })
-    },
-
-    updateData() {
-      this.calcHandleQty()
-      for (let i = 0; i < this.detailSource.length; i++) {
-        const item = this.detailSource[i]
-        if (item.qty == 0) {
-          this.detailSource.splice(i, 1)
-        }
+    });
+  });
+};
+
+const showErrorMessage = (message) => {
+  setTimeout(() => {
+    scanPopupLoseFocus();
+    comMessage.value.showErrorMessage(message, (res) => {
+      if (res) {
+        scanPopupGetFocus();
+      }
+    });
+  });
+};
+
+const showScanMessage = (message) => {
+  comMessage.value.showScanMessage(message);
+};
+
+const afterCloseMessage = () => {
+  scanPopupGetFocus();
+};
+
+const closeScanMessage = () => {
+  scanPopupGetFocus();
+};
+
+const getContainer = (containerInfo) => {
+  containerCode.value = containerInfo.number;
+  getContainerDetailByNumber(containerCode.value)
+    .then((res) => {
+      if (res.data != null && res.data.subList.length > 0) {
+        detailSource.value = getDataSource(res.data.subList);
       }
-    },
-    clear() {}
+    })
+    .catch((error) => {
+      showErrorMessage(error.message);
+    });
+};
+
+const showCommitSuccessMessage = (hint) => {
+  comMessage.value.showSuccessMessage(hint, (res) => {
+    containerCode.value = '';
+  });
+};
+
+const updateData = () => {
+  calcHandleQty();
+  for (let i = 0; i < detailSource.value.length; i++) {
+    const item = detailSource.value[i];
+    if (item.qty === 0) {
+      detailSource.value.splice(i, 1);
+    }
   }
-}
+};
+
+const clear = () => {};
 </script>
 
 <style scoped lang="scss"></style>