From ea6f46aafebc0fa6f102d7a6554dcbcd96fbb5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=9B=BD?= <854933521@qq.com>
Date: Tue, 5 Nov 2024 17:13:24 +0800
Subject: [PATCH] =?UTF-8?q?mycomponents/scan=20=E6=96=87=E4=BB=B6=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BBVue2=E5=8D=87=E7=BA=A7Vue3=208/2-10/25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scan/winComScanBalanceLocation.vue        | 459 +++++++++---------
 src/mycomponents/scan/winScanPackAndCont.vue  | 188 +++----
 2 files changed, 318 insertions(+), 329 deletions(-)

diff --git a/src/mycomponents/scan/winComScanBalanceLocation.vue b/src/mycomponents/scan/winComScanBalanceLocation.vue
index c874d59a..a2f129ac 100644
--- a/src/mycomponents/scan/winComScanBalanceLocation.vue
+++ b/src/mycomponents/scan/winComScanBalanceLocation.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <uni-popup ref="popup" :mask-click="false">
+    <u-popup v-model="show" mode="bottom">
       <view class="popup_box">
         <view class="pop_title uni-flex space-between">
           <view class="" style="font-size: 35rpx"> 扫描{{ title }} </view>
@@ -28,18 +28,18 @@
         </view>
         <view class="">
           <view class="">
-            <win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :isShowHistory="isShowHistory" :clearResult="true" :headerType="headerType"></win-com-scan>
+            <win-com-scan ref="comscanRef" :placeholder="title" @getResult="getScanResult" :isShowHistory="isShowHistory" :clearResult="true" :headerType="headerType"></win-com-scan>
           </view>
         </view>
       </view>
-    </uni-popup>
+    </u-popup>
     <balance-select ref="balanceSelect" @onSelectItem="selectBalanceItem"></balance-select>
     <!-- 模拟扫描功能 -->
   </view>
-  <comMessage ref="comMessage"></comMessage>
+  <comMessage ref="comMessageRef"></comMessage>
 </template>
 
-<script>
+<script setup>
 import winComScan from '@/mycomponents/scan/winComScan.vue'
 import balanceSelect from '@/mycomponents/balance/balanceSelect.vue'
 import { getBalanceByManagementPrecisionByPacking } from '@/common/balance.js'
@@ -48,255 +48,242 @@ import { getBalanceByParams, getBasicItemByCode } from '@/api/request2.js'
 
 import { getListLocationAreaTypeDesc, checkDirectoryItemExist, getDirectoryItemArray, getLocationAreaTypeName, getInventoryStatusDesc, getListItemTypeDesc, getItemTypeInfo } from '@/common/directory.js'
 import {getLabelInfo} from '@/common/label.js';
-export default {
-  name: 'winScanPack',
-  emits: ['getBalance', 'onCloseScanPopup'],
-  components: {
-    winComScan,
-    balanceSelect
+
+
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '箱标签'
   },
-  props: {
-    title: {
-      type: String,
-      default: '箱标签'
-    },
-    isShowHistory: {
-      type: Boolean,
-      default: false
-    },
-    headerType: {
-      type: String,
-      default: 'HPQ,HMQ'
-    },
-    balanceFromInventoryStatuses: {
-      // 是否传fromInventoryStatuses
-      type: Boolean,
-      default: true
-    },
-    bussinessCode: {
-      type: String,
-      default: ''
-    },
-    // 是否允许修改库位
-    allowModifyLocation: {
-      type: Boolean,
-      default: true
-    }
+  isShowHistory: {
+    type: Boolean,
+    default: false
   },
-  data() {
-    return {
-      scanResult: {},
-      show: false,
-      scanList: [],
-      expand: false,
-      showScanResult: {},
-      expendIcon: 'arrow-down',
-      fromLocationCode: '',
-      fromLocation: '',
-      fromLocationList: [],
-      fromLocationAreaTypeList: [],
-      locationOnFocus: false,
-      businessType: {},
-      inventoryStatus: [],
-      managementPrecision: '',
-      fromInventoryStatuses: [],
-      itemTypesList: [],
-      isCheck: false,
-      resultData: {}
-    }
+  headerType: {
+    type: String,
+    default: 'HPQ,HMQ'
+  },
+  balanceFromInventoryStatuses: {
+    type: Boolean,
+    default: true
   },
-  created() {},
-  methods: {
-    openScanPopup(businessType) {
-      this.businessType = businessType
-      this.fromInventoryStatuses = getDirectoryItemArray(businessType.outInventoryStatuses)
-      this.fromLocationAreaTypeList = getDirectoryItemArray(businessType.outAreaTypes)
-      this.itemTypesList = getDirectoryItemArray(businessType.itemTypes)
-      this.$refs.popup.open('bottom')
-      setTimeout(res=>{
-        this.packGetFocus()
-      },500)
-    },
+  bussinessCode: {
+    type: String,
+    default: ''
+  },
+  allowModifyLocation: {
+    type: Boolean,
+    default: true
+  }
+});
 
-    openScanPopupForJob(fromLocationCode, fromLocationList, jobContent) {
-      this.fromLocationCode = fromLocationCode
-      this.fromLocationCode = fromLocationCode;
-      this.fromLocationList = fromLocationList;
-      this.fromInventoryStatuses = getDirectoryItemArray(jobContent.outInventoryStatuses)
-      this.inventoryStatus = getDirectoryItemArray(jobContent.outInventoryStatuses); //出库库存状态; //出库库存状态
-      this.fromLocationAreaTypeList = getDirectoryItemArray(jobContent.fromAreaTypes); //出库库存状态
-      this.$refs.popup.open('bottom')
-      setTimeout(res => {
-        if (this.fromLocationCode != '') {
-          this.packGetFocus();
-        } else {
-          if (this.fromLocationList.length == 0) {
-            this.locationGetFocus();
-          } else {
-            this.fromLocationCode = this.fromLocationList[0];
-            this.packGetFocus();
-          }
-        }
-      }, 500)
-    },
-    //模拟扫描
-    openScanPopupForJobSimulate(fromLocationCode, fromLocationList, jobContent, scanMessage) {
-      this.fromLocationCode = fromLocationCode;
-      this.fromLocationList = fromLocationList;
-      if (!fromLocationCode) {
-        if (this.fromLocationList.length == 0) {
-          // this.locationGetFocus();
-          alert('没有来源库位：List')
-        } else {
-          this.fromLocationCode = this.fromLocationList[0];
-        }
-      }
-      this.fromInventoryStatuses = getDirectoryItemArray(jobContent.outInventoryStatuses)
-      this.inventoryStatus = getDirectoryItemArray(jobContent.outInventoryStatuses); //出库库存状态; //出库库存状态
-      this.fromLocationAreaTypeList = getDirectoryItemArray(jobContent.fromAreaTypes); //出库库存状态
-      getLabelInfo(scanMessage, this.headerType, callback => {
-        if (callback.success) {
-          this.getScanResult(callback);
-        } else {
-          this.showErrorMessage(callback.message, res => {})
-        }
-      })
-    },
+const businessType = ref({});
+const fromInventoryStatuses = ref([]);
+const fromLocationAreaTypeList = ref([]);
+const itemTypesList = ref([]);
+const fromLocationCode = ref('');
+const fromLocationList = ref([]);
+const inventoryStatus = ref([]);
+const resultData = ref({});
+const show = ref(false)
 
-    handleConfirm() {
-      this.$emit('confirm', this.fromLocationCode)
-    },
+const comMessageRef = ref(null);
+const comscanRef = ref(null);
 
-    getScanResult(result) {
-      if (this.fromLocationCode == '') {
-        this.showErrorMessage('请选择来源库位', (res) => {})
-        return
-      }
+const openScanPopup = (businessTypeValue) => {
+  businessType.value = businessTypeValue;
+  fromInventoryStatuses.value = getDirectoryItemArray(businessTypeValue.outInventoryStatuses);
+  fromLocationAreaTypeList.value = getDirectoryItemArray(businessTypeValue.outAreaTypes);
+  itemTypesList.value = getDirectoryItemArray(businessTypeValue.itemTypes);
+  show.value = true
+  setTimeout(() => {
+    packGetFocus();
+  }, 500);
+};
 
-      this.resultData = result
-      if (!result.package) {
-        this.showErrorMessage(`${result.label.code}包装信息为空`)
-        return
+const openScanPopupForJob = (fromLocationCodeValue, fromLocationListValue, jobContent) => {
+  fromLocationCode.value = fromLocationCodeValue;
+  fromLocationList.value = fromLocationListValue;
+  fromInventoryStatuses.value = getDirectoryItemArray(jobContent.outInventoryStatuses);
+  inventoryStatus.value = getDirectoryItemArray(jobContent.outInventoryStatuses);
+  fromLocationAreaTypeList.value = getDirectoryItemArray(jobContent.fromAreaTypes);
+  show.value = true
+  setTimeout(() => {
+    if (fromLocationCode.value !== '') {
+      packGetFocus();
+    } else {
+      if (fromLocationList.value.length === 0) {
+        // locationGetFocus();
+      } else {
+        fromLocationCode.value = fromLocationList.value[0];
+        packGetFocus();
       }
-      // 查询物料信息，然后查询库存
-      this.getItemCodeType(result.package.itemCode, (callBack) => {
-        this.queryBalance(this.resultData)
-      })
-    },
+    }
+  }, 500);
+};
+
+const openScanPopupForJobSimulate = (fromLocationCodeValue, fromLocationListValue, jobContent, scanMessage) => {
+  fromLocationCode.value = fromLocationCodeValue;
+  fromLocationList.value = fromLocationListValue;
+  if (!fromLocationCodeValue) {
+    if (fromLocationList.value.length === 0) {
+      alert('没有来源库位：List');
+    } else {
+      fromLocationCode.value = fromLocationList.value[0];
+    }
+  }
+  fromInventoryStatuses.value = getDirectoryItemArray(jobContent.outInventoryStatuses);
+  inventoryStatus.value = getDirectoryItemArray(jobContent.outInventoryStatuses);
+  fromLocationAreaTypeList.value = getDirectoryItemArray(jobContent.fromAreaTypes);
+  getLabelInfo(scanMessage, props.headerType, (callback) => {
+    if (callback.success) {
+      getScanResult(callback);
+    } else {
+      showErrorMessage(callback.message, () => {});
+    }
+  });
+};
+
+const handleConfirm = () => {
+  emit('confirm', fromLocationCode.value);
+};
+
+const getScanResult = (result) => {
+  if (fromLocationCode.value === '') {
+    showErrorMessage('请选择来源库位', () => {});
+    return;
+  }
+  resultData.value = result;
+  if (!result.package) {
+    showErrorMessage(`${result.label.code}包装信息为空`);
+    return;
+  }
+  getItemCodeType(result.package.itemCode, () => {
+    queryBalance(resultData.value);
+  });
+};
 
-    queryBalance(result) {
-      const params = {
-        locationCode: this.fromLocationCode,
-        itemCode: result.package.itemCode,
-        batch: result.label.batch,
-        packingNumber: result.label.packingNumber,
-        parentPackingNumber: result.package.parentNumber,
-        inventoryStatus: this.fromInventoryStatuses,
-        areaType: this.fromLocationAreaTypeList,
-        bussinessCode: this.bussinessCode
+const queryBalance = (result) => {
+  const params = {
+    locationCode: fromLocationCode.value,
+    itemCode: result.package.itemCode,
+    batch: result.label.batch,
+    packingNumber: result.label.packingNumber,
+    parentPackingNumber: result.package.parentNumber,
+    inventoryStatus: fromInventoryStatuses.value,
+    areaType: fromLocationAreaTypeList.value,
+    bussinessCode: props.bussinessCode
+  };
+  uni.showLoading({
+    title: '查询中',
+    mask: true
+  });
+  getBalanceByParams(params)
+    .then((res) => {
+      uni.hideLoading();
+      if (res.data.length === 0) {
+        const status = getInventoryStatusDesc(params.inventoryStatus);
+        const areaType = getListLocationAreaTypeDesc(params.areaType);
+        const hint = `按物料号 [${params.itemCode}] \n` +
+          `包装号 [${params.packingNumber}] \n` +
+          `批次 [${params.batch}] \n` +
+          `状态 [${status}] \n` +
+          `库区 [${areaType}] \n` +
+          '未查找到库存余额';
+        showErrorMessage(hint);
+      } else if (res.data.length === 1) {
+        result.balance = res.data[0];
+        if (result.label.packingNumber !== result.balance.packingNumber) {
+          result.balance.lableQty = result.label.qty;
+        }
+        emit('getBalance', result);
+      } else {
+        show.value = true
       }
-      getBalanceByParams(params)
-        .then((res) => {
-          uni.hideLoading()
-          if (res.data.length == 0) {
-            const status = getInventoryStatusDesc(params.inventoryStatus)
-            const areaType = getListLocationAreaTypeDesc(params.areaType)
-            const hint = `按物料号 [${params.itemCode}] \n` +
-                `包装号 [${params.packingNumber}] \n` +
-                `批次 [${params.batch}] \n` +
-                `状态 [${status}] \n` +
-                `库区 [${areaType}] \n` +
-                '未查找到库存余额'
-            this.showErrorMessage(hint)
-          } else if (res.data.length == 1) {
-            result.balance = res.data[0]
-            if (result.label.packingNumber != result.balance.packingNumber) {
-              result.balance.lableQty = result.label.qty
-            }
-            this.$emit('getBalance', result)
-            // this.closeScanPopup()
-          } else {
-            // 多条记录
-            this.$refs.balanceSelect.openPopup(res.data)
-          }
-        })
-        .catch((error) => {
-          uni.hideLoading()
-          this.showErrorMessage(error)
-        })
-    },
-    getItemCodeType(itemCode, callBack) {
-      uni.showLoading({
-        title: '加载中',
-        mask: true
-      })
-      getBasicItemByCode(itemCode)
-        .then((res) => {
-          if (res.data != null && res.data.list.length > 0) {
-            const result = res.data.list[0]
-            const status = result.available
-            const { type } = result
-            if (status == 'TRUE') {
-              if (checkDirectoryItemExist(this.itemTypesList, type)) {
-                callBack()
-              } else {
-                const hint = getListItemTypeDesc(this.itemTypesList)
-                uni.hideLoading()
-                this.showErrorMessage(`扫描物料[${itemCode}]是[${getItemTypeInfo(type).label}],需要的物料类型是[${hint}]`)
-              }
-            } else {
-              uni.hideLoading()
-              this.showErrorMessage(`物料【${itemCode}】不可用`)
-            }
+    })
+    .catch((error) => {
+      uni.hideLoading();
+      showErrorMessage(error);
+    });
+};
+
+const getItemCodeType = (itemCode, callBack) => {
+  uni.showLoading({
+    title: '加载中',
+    mask: true
+  });
+  getBasicItemByCode(itemCode)
+    .then((res) => {
+      if (res.data != null && res.data.list.length > 0) {
+        const result = res.data.list[0];
+        const status = result.available;
+        const { type } = result;
+        if (status === 'TRUE') {
+          if (checkDirectoryItemExist(itemTypesList.value, type)) {
+            callBack();
           } else {
-            uni.hideLoading()
-            this.showErrorMessage(`未查找到物料【${itemCode}】`)
-          }
-        })
-        .catch((error) => {
-          uni.hideLoading()
-          this.showErrorMessage(error)
-        })
-    },
-    showErrorMessage(message) {
-      this.packLoseFocus();
-      this.$refs.comMessage.showErrorMessage(message, (res) => {
-        if (res) {
-          if (this.$refs.comscan) {
-            this.$refs.comscan.getfocus()
+            const hint = getListItemTypeDesc(itemTypesList.value);
+            uni.hideLoading();
+            showErrorMessage(`扫描物料[${itemCode}]是[${getItemTypeInfo(type).label}],需要的物料类型是[${hint}]`);
           }
+        } else {
+          uni.hideLoading();
+          showErrorMessage(`物料【${itemCode}】不可用`);
         }
-      })
-    },
-    selectBalanceItem(item) {
-      this.resultData.balance = item
-      this.$emit('getBalance', this.resultData)
-      // this.closeScanPopup()
-    },
-    closeScanPopup() {
-      this.packLoseFocus()
-      this.$refs.popup.close()
-      this.$emit('onCloseScanPopup')
-    },
-    getfocus() {
-      if (this.$refs.comscan) {
-        this.$refs.comscan.getfocus()
+      } else {
+        uni.hideLoading();
+        showErrorMessage(`未查找到物料【${itemCode}】`);
       }
-    },
+    })
+    .catch((error) => {
+      uni.hideLoading();
+      showErrorMessage(error);
+    });
+};
 
-    packGetFocus() {
-      if (this.$refs.comscan) {
-        this.$refs.comscan.getfocus()
-      }
-    },
-
-    packLoseFocus() {
-      if (this.$refs.comscan) {
-        this.$refs.comscan.losefocus()
+const showErrorMessage = (message) => {
+  packLoseFocus();
+  comMessageRef.value.showErrorMessage(message, (res) => {
+    if (res) {
+      if (comscanRef.value) {
+        comscanRef.value.getfocus();
       }
     }
+  });
+};
+
+const selectBalanceItem = (item) => {
+  resultData.value.balance = item;
+  emit('getBalance', resultData.value);
+};
+
+const closeScanPopup = () => {
+  packLoseFocus();
+  show.value = false
+  emit('onCloseScanPopup');
+};
+
+const getfocus = () => {
+  if (comscanRef.value) {
+    comscanRef.value.getfocus();
   }
-}
+};
+
+const packGetFocus = () => {
+  if (comscanRef.value) {
+    comscanRef.value.getfocus();
+  }
+};
+
+const packLoseFocus = () => {
+  if (comscanRef.value) {
+    comscanRef.value.losefocus();
+  }
+};
+
+const emit = defineEmits(['confirm', 'getBalance', 'onCloseScanPopup']);
 </script>
 
 <style lang="scss">
diff --git a/src/mycomponents/scan/winScanPackAndCont.vue b/src/mycomponents/scan/winScanPackAndCont.vue
index 932b4be0..2bb0e70b 100644
--- a/src/mycomponents/scan/winScanPackAndCont.vue
+++ b/src/mycomponents/scan/winScanPackAndCont.vue
@@ -1,122 +1,124 @@
 <template>
   <view>
-    <uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()" :mask-close-able="false">
+    <u-popup v-model="show">
       <view class="popup_box">
         <view class="pop_title uni-flex space-between">
-          <view class="" style="font-size: 35rpx"> 扫描 : {{ title }} </view>
+          <view class="" style="font-size: 35rpx"> 扫描 : {{ title }}</view>
 
           <view class="">
-            <image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" @click="closeScanPopup()"></image>
+            <image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg"
+                   @click="closeScanPopup()"></image>
           </view>
         </view>
         <view class="">
           <view class="">
-            <win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType" :isShowHistory="isShowHistory" :clearResult="true"></win-com-scan>
+            <win-com-scan ref="comscan" :placeholder="title" @getResult="getScanResult" :headerType="headerType"
+                          :isShowHistory="isShowHistory" :clearResult="true"></win-com-scan>
           </view>
         </view>
       </view>
-    </uni-popup>
+    </u-popup>
 
     <comMessage ref="comMessage" @afterClose="getfocus"></comMessage>
   </view>
 </template>
 
-<script>
+<script setup>
 import winComScan from '@/mycomponents/scan/winComScan.vue'
-import { getContainerByNumber } from '@/api/request2.js'
+import {getContainerByNumber} from '@/api/request2.js'
 
-export default {
-  name: 'winScanPack',
-  components: {
-    winComScan
+import {ref, onMounted, watch} from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '箱标签或托标签'
   },
-  props: {
-    title: {
-      type: String,
-      default: '箱标签或托标签'
-    },
-    isShowHistory: {
-      type: Boolean,
-      default: true
-    },
-    headerType: {
-      type: String,
-      default: 'HPQ,HMQ,HCQ'
-    }
+  isShowHistory: {
+    type: Boolean,
+    default: true
   },
-  data() {
-    return {
-      show: false
+  headerType: {
+    type: String,
+    default: 'HPQ,HMQ,HCQ'
+  }
+});
+
+const show = ref(false);
+
+const popupRef = ref(null);
+const comscanRef = ref(null);
+const comMessageRef = ref(null);
+
+// 方法定义
+const openScanPopup = () => {
+  show.value = true;
+  setTimeout(() => {
+    getfocus();
+  }, 500);
+};
+
+const closeScanPopup = () => {
+  losefocus();
+  show.value = false
+  emit('close', '');
+};
+
+const scanClick = () => {
+  comscanRef.value.clickScanMsg();
+};
+
+const cancelClick = () => {
+  comscanRef.value.clearScanValue();
+};
+
+const getScanResult = (result) => {
+  if (result.success) {
+    if (result.label.labelType === 'ContainerLabel') {
+      getContainerByNumber(result);
+    } else {
+      emit('getResult', result);
     }
-  },
-  created() {},
-  methods: {
-    openScanPopup() {
-      this.$refs.popup.open('bottom')
-      setTimeout(res => {
-        this.getfocus()
-      }, 500)
-    },
-
-    closeScanPopup() {
-      this.losefocus()
-      this.$refs.popup.close()
-      this.$emit('close', '')
-    },
-
-    scanClick() {
-      this.$refs.comscan.clickScanMsg()
-    },
-
-    cancelClick() {
-      this.$refs.comscan.clearScanValue()
-    },
-
-    getScanResult(result) {
-      if (result.success) {
-        if (result.label.labelType == 'ContainerLabel') {
-          this.getContainerByNumber(result)
+  } else {
+    showMessage(result.message);
+  }
+};
+
+const getContainerByNumber = (result) => {
+  getContainerByNumber(result.label.container)
+      .then((res) => {
+        if (res.data.list.length > 0) {
+          emit('getResult', result);
         } else {
-          this.$emit('getResult', result)
+          showMessage(`未查找到托码【${result.label.container}】`);
         }
-      } else {
-        this.showMessage(result.message)
-      }
-    },
-
-    getContainerByNumber(result) {
-      getContainerByNumber(result.label.container)
-        .then((res) => {
-          if (res.data.list.length > 0) {
-            this.$emit('getResult', result)
-          } else {
-            this.showMessage(`未查找到托码【${result.label.container}】`)
-          }
-        })
-        .catch((error) => {
-          this.showMessage(error)
-        })
-    },
-
-    getfocus() {
-      if (this.$refs.comscan != undefined) {
-        this.$refs.comscan.getfocus()
-      }
-    },
-
-    losefocus() {
-      if (this.$refs.comscan != undefined) {
-        this.$refs.comscan.losefocus()
-      }
-    },
-    showMessage(message) {
-      this.$refs.comMessage.showMessage(message)
-    },
-    change(e) {
-      this.show = e.show
-    }
+      })
+      .catch((error) => {
+        showMessage(error);
+      });
+};
+
+const getfocus = () => {
+  if (comscanRef.value) {
+    comscanRef.value.getfocus();
   }
-}
+};
+
+const losefocus = () => {
+  if (comscanRef.value) {
+    comscanRef.value.losefocus();
+  }
+};
+
+const showMessage = (message) => {
+  comMessageRef.value.showMessage(message);
+};
+
+const change = (e) => {
+  show.value = e.show;
+};
+
+const emit = defineEmits(['close', 'getResult']);
 </script>
 
 <style lang="scss">