| | |
| | | ref="outboundInputRef" |
| | | :disabled="loading || submitLoading || isOutboundVerified" |
| | | ></el-input> |
| | | <!-- æ°å¢ï¼éªè¯ç¶ææç¤º --> |
| | | <span v-if="isOutboundVerified" class="verified-tag">â å·²éªè¯</span> |
| | | <span v-else-if="loading" class="loading-tag">⦠éªè¯ä¸...</span> |
| | | </el-form-item> |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <!-- 䏿¹æ¾ç¤ºæ¡ï¼ç´æ¥æ¸²æå端è¿åçæ°ç»ï¼ --> |
| | | <!-- 䏿¹æ¾ç¤ºæ¡ --> |
| | | <div class="scan-list"> |
| | | <el-card shadow="hover" style="margin-bottom: 10px; border: none;" class="custom-card"> |
| | | <div class="card-header"> |
| | |
| | | <div class="card-body"> |
| | | <el-scrollbar height="400px" class="custom-scrollbar"> |
| | | <transition-group name="barcode-item-transition"> |
| | | <div class="barcode-item" v-for="(item, index) in scannedBarcodes" :key="`${item.barcode}-${index}`" :data-index="index"> |
| | | <div class="barcode-item" v-for="(item, index) in scannedBarcodes" :key="`${item.barcode}-${index}`"> |
| | | <div class="barcode-detail"> |
| | | <div class="detail-row"> |
| | | <span class="label">æ¡ç ï¼</span> |
| | | <span class="value">{{ item.barcode || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ç©æç¼ç ï¼</span> |
| | | <span class="value">{{ item.materielCode || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ç©æåç§°ï¼</span> |
| | | <span class="value">{{ item.materielName || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">æ¹æ¬¡å·ï¼</span> |
| | | <span class="value">{{ item.batchNo || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">æ¡ç æ°éï¼</span> |
| | | <span class="value">{{ item.orderQuantity || item.quantity || 0 }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">ä¾åºåç¼ç ï¼</span> |
| | | <span class="value">{{ item.supplyCode || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"> |
| | | <span class="label">éè´åå·ï¼</span> |
| | | <span class="value">{{ item.purchaseOrderNo || '-' }}</span> |
| | | </div> |
| | | <div class="detail-row"><span class="label">æ¡ç ï¼</span><span class="value">{{ item.barcode || '-' }}</span></div> |
| | | <div class="detail-row"><span class="label">ç©æç¼ç ï¼</span><span class="value">{{ item.materielCode || '-' }}</span></div> |
| | | <div class="detail-row"><span class="label">ç©æåç§°ï¼</span><span class="value">{{ item.materielName || '-' }}</span></div> |
| | | <div class="detail-row"><span class="label">æ¹æ¬¡å·ï¼</span><span class="value">{{ item.batchNo || '-' }}</span></div> |
| | | <div class="detail-row"><span class="label">æ¡ç æ°éï¼</span><span class="value">{{ item.orderQuantity || item.quantity || 0 }}</span></div> |
| | | <div class="detail-row"><span class="label">ä¾åºåç¼ç ï¼</span><span class="value">{{ item.supplyCode || '-' }}</span></div> |
| | | <div class="detail-row"><span class="label">éè´åå·ï¼</span><span class="value">{{ item.purchaseOrderNo || '-' }}</span></div> |
| | | </div> |
| | | <el-button |
| | | class="delete-btn" |
| | |
| | | <el-button |
| | | type="text" |
| | | size="small" |
| | | @click="(e) => { |
| | | e.stopPropagation(); |
| | | e.preventDefault(); |
| | | showDetailBox = false; |
| | | }" |
| | | @click="handleCancel" |
| | | class="cancel-btn" |
| | | :disabled="loading || submitLoading" |
| | | > |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, onMounted, nextTick } from 'vue'; |
| | | import { ref, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { Search, Check } from '@element-plus/icons-vue'; |
| | | |
| | | import VolBox from "@/components/basic/VolBox.vue"; |
| | | import http from '@/api/http'; |
| | | |
| | | // ååºå¼æ°æ® |
| | | const showDetailBox = ref(false); |
| | | const orderForm = reactive({ |
| | | outboundOrderNo: "", |
| | | purchaseOrderNo: "" |
| | | }); |
| | | const formData = reactive({ |
| | | barcode: "", |
| | | }); |
| | | const orderForm = reactive({ outboundOrderNo: "", purchaseOrderNo: "" }); |
| | | const formData = reactive({ barcode: "" }); |
| | | const scannedBarcodes = ref([]); |
| | | const loading = ref(false); |
| | | // æ°å¢ï¼æäº¤ä¸å±loadingç¶æï¼æ§å¶é®ç½©å±æ¾ç¤º |
| | | const submitLoading = ref(false); |
| | | // æ ¸å¿æ°å¢ï¼åºåºåéªè¯ç¶ææ è¯ |
| | | const isOutboundVerified = ref(false); |
| | | let unlockCalled = false; // 鲿¢éå¤è§£é |
| | | |
| | | // 模æ¿å¼ç¨ |
| | | const formRef = ref(null); |
| | |
| | | const outboundInputRef = ref(null); |
| | | const purchaseInputRef = ref(null); |
| | | |
| | | // ç»ä»¶æè½½æ¶èç¦å°åºåºåè¾å
¥æ¡ |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); |
| | | }); |
| | | }); |
| | | // é³é¢èµæº |
| | | const successAudioSrc = require('@/assets/audio/success.mp3'); |
| | | const errorAudioSrc = require('@/assets/audio/error.mp3'); |
| | | const playAudio = (src, volume = 0.8) => { |
| | | try { const audio = new Audio(src); audio.volume = volume; audio.play().catch(() => {}); } catch(e) {} |
| | | }; |
| | | const playSuccess = () => playAudio(successAudioSrc); |
| | | const playError = () => playAudio(errorAudioSrc); |
| | | |
| | | // ç®å鲿彿° |
| | | const debounce = (fn, delay = 100) => { |
| | | let timer = null; |
| | | return (...args) => { |
| | | if (timer) clearTimeout(timer); |
| | | timer = setTimeout(() => { |
| | | fn.apply(this, args); |
| | | }, delay); |
| | | }; |
| | | // ========== è§£éæ ¸å¿é»è¾ï¼ä½¿ç¨æ°æ¥å£ MovePickingOrdersï¼ ========== |
| | | const unlockOutboundOrder = async () => { |
| | | if (!isOutboundVerified.value || !orderForm.outboundOrderNo?.trim()) return; |
| | | if (unlockCalled) return; |
| | | unlockCalled = true; |
| | | const outboundOrderNo = orderForm.outboundOrderNo.trim(); |
| | | try { |
| | | // æ¿æ¢ä¸º MovePickingOrders æ¥å£ |
| | | await http.post(`/api/OutboundPicking/MovePickingOrders?outOrder=${outboundOrderNo}`, null, "è§£éåºåºåä¸...").catch(() => {}); |
| | | } catch (error) { |
| | | // éé»å¤±è´¥ |
| | | } |
| | | }; |
| | | |
| | | // æå¼å¼¹çª |
| | | // 页é¢å
³é/å·æ°æ¶çåæ¥è§£éï¼ä½¿ç¨ sendBeacon æ fetch keepaliveï¼ |
| | | const unlockOnPageUnload = () => { |
| | | if (!isOutboundVerified.value || !orderForm.outboundOrderNo?.trim()) return; |
| | | const outboundOrderNo = orderForm.outboundOrderNo.trim(); |
| | | const url = `/api/OutboundPicking/MovePickingOrders?outOrder=${encodeURIComponent(outboundOrderNo)}`; |
| | | // ä½¿ç¨ fetch keepalive åé |
| | | fetch(url, { method: 'POST', keepalive: true, headers: { 'Content-Type': 'application/json' } }).catch(() => {}); |
| | | }; |
| | | |
| | | // çå¬å¼¹çªå
³éï¼ä»»ä½æ¹å¼ï¼åå·ãESCãé®ç½©ãåæ¶æé®çï¼ |
| | | watch(showDetailBox, (newVal, oldVal) => { |
| | | if (oldVal === true && newVal === false) { |
| | | // å¼¹çªå
³éæ¶è°ç¨è§£é |
| | | unlockOutboundOrder(); |
| | | } |
| | | }); |
| | | |
| | | // åæ¶æé® |
| | | const handleCancel = (e) => { |
| | | e?.stopPropagation(); |
| | | e?.preventDefault(); |
| | | showDetailBox.value = false; |
| | | }; |
| | | |
| | | // æå¼å¼¹çªï¼éç½®ææç¶æï¼ |
| | | const open = () => { |
| | | unlockCalled = false; |
| | | showDetailBox.value = true; |
| | | scannedBarcodes.value = []; |
| | | formData.barcode = ""; |
| | | orderForm.outboundOrderNo = ""; |
| | | orderForm.purchaseOrderNo = ""; |
| | | submitLoading.value = false; // æå¼å¼¹çªæ¶éç½®æäº¤loading |
| | | isOutboundVerified.value = false; // æå¼å¼¹çªæ¶éç½®åºåºåéªè¯ç¶æ |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); // æå¼å¼¹çªä»èç¦åºåºåè¾å
¥æ¡ |
| | | }); |
| | | submitLoading.value = false; |
| | | isOutboundVerified.value = false; |
| | | nextTick(() => outboundInputRef.value?.focus()); |
| | | }; |
| | | |
| | | /** |
| | | * éªè¯åºåºåæ®å·çæææ§ |
| | | * æ ¸å¿ä¿®æ¹ï¼éªè¯æååæ è®°isOutboundVerified为trueï¼å¤±è´¥åé置为false |
| | | */ |
| | | // éªè¯åºåºåå·ï¼ä»ä½¿ç¨åæ¥å£ï¼æ¤æ¥å£ç¨äºéªè¯åæ®æææ§ï¼ |
| | | const validateOutboundOrder = async () => { |
| | | const outboundOrderNo = orderForm.outboundOrderNo.trim(); |
| | | if (!outboundOrderNo) { |
| | | ElMessage.warning("请è¾å
¥åºåºåæ®å·"); |
| | | return; |
| | | } |
| | | |
| | | if (!outboundOrderNo) { ElMessage.warning("请è¾å
¥åºåºåæ®å·"); return; } |
| | | try { |
| | | loading.value = true; |
| | | const res = await http.post( |
| | | `/api/OutboundPicking/GetAvailablePickingOrders?outOrder=`+ outboundOrderNo, |
| | | "éªè¯åºåºåæ®å·ä¸..." |
| | | ); |
| | | |
| | | const res = await http.post(`/api/OutboundPicking/GetAvailablePickingOrders?outOrder=${outboundOrderNo}`, "éªè¯åºåºåæ®å·ä¸..."); |
| | | if (res.status !== true) { |
| | | // éªè¯å¤±è´¥ï¼æ¸
空è¾å
¥æ¡ï¼æç¤ºé误ï¼éç½®éªè¯ç¶æï¼èç¦ååºåºåè¾å
¥æ¡ |
| | | orderForm.outboundOrderNo = ""; |
| | | isOutboundVerified.value = false; |
| | | ElMessage.error(res.message || "åºåºåæ®å·éªè¯å¤±è´¥ï¼è¯·æ£æ¥åæ®å·æ¯å¦æ£ç¡®"); |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); // 失败èç¦åºåºåè¾å
¥æ¡ |
| | | }); |
| | | ElMessage.error(res.message || "åºåºåæ®å·éªè¯å¤±è´¥"); |
| | | nextTick(() => outboundInputRef.value?.focus()); |
| | | return; |
| | | } |
| | | |
| | | // éªè¯æåï¼æ è®°éªè¯ç¶æä¸ºtrueï¼æç¤ºç¨æ·ï¼èç¦æ¡ç æ«ææ¡ |
| | | isOutboundVerified.value = true; |
| | | ElMessage.success("åºåºåæ®å·éªè¯éè¿"); |
| | | nextTick(() => { |
| | | barcodeInputRef.value?.focus(); // æåç´æ¥è·³è½¬å°æ¡ç æ«ææ¡ |
| | | }); |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } catch (error) { |
| | | // æ¥å£å¼å¸¸ï¼æ¸
空è¾å
¥æ¡ï¼æç¤ºé误ï¼éç½®éªè¯ç¶æï¼èç¦ååºåºåè¾å
¥æ¡ |
| | | orderForm.outboundOrderNo = ""; |
| | | isOutboundVerified.value = false; |
| | | ElMessage.error(`åºåºåæ®å·éªè¯å¼å¸¸ï¼${error.message || "ç½ç»é误ï¼è¯·éè¯"}`); |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); // å¼å¸¸èç¦åºåºåè¾å
¥æ¡ |
| | | }); |
| | | ElMessage.error(`éªè¯å¼å¸¸ï¼${error.message || "ç½ç»é误"}`); |
| | | nextTick(() => outboundInputRef.value?.focus()); |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | }; |
| | | |
| | | // åºåºåè¾å
¥å¤ç |
| | | const handleOutboundInput = (value) => { |
| | | // æ ¸å¿ä¿®æ¹ï¼è¾å
¥æ¶èªå¨éç½®éªè¯ç¶æï¼é²æ¢æå¨ä¿®æ¹å·²éªè¯çåºåºåå·ï¼ |
| | | if (value && value.trim()) { |
| | | isOutboundVerified.value = false; |
| | | } |
| | | }; |
| | | const handleOutboundInput = (val) => { if (val?.trim()) isOutboundVerified.value = false; }; |
| | | const handlePurchaseInput = (val) => {}; |
| | | |
| | | // éè´åè¾å
¥å¤ç |
| | | const handlePurchaseInput = (value) => { |
| | | if (value && value.trim()) { |
| | | // å¯ä¿çéè´åå·æ ¼å¼éªè¯é»è¾ |
| | | } |
| | | }; |
| | | |
| | | // èç¦æ¡ç è¾å
¥æ¡ï¼å¤ç¨å½æ°ï¼ |
| | | const focusBarcodeInputDirectly = () => { |
| | | if (isOutboundVerified.value) { |
| | | barcodeInputRef.value?.focus(); |
| | | } else { |
| | | ElMessage.warning("请å
è¾å
¥å¹¶éªè¯ææçåºåºåæ®å·"); |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | /** |
| | | * æ ¹æ®æ¡ç æ¥è¯¢éè´åå· |
| | | */ |
| | | // è·åéè´åå· |
| | | const getPurchaseOrderByBarcode = async (barcode) => { |
| | | const res = await http.post(`/api/OutboundPicking/GetPurchaseOrderByBarcode?barCode=${encodeURIComponent(barcode)}`, "æ¥è¯¢éè´åå·ä¸..."); |
| | | |
| | | if (res.status !== true) { |
| | | throw new Error(res.message || "æ¥è¯¢éè´åå·å¤±è´¥"); |
| | | } |
| | | |
| | | if (res.status !== true) throw new Error(res.message || "æ¥è¯¢å¤±è´¥"); |
| | | let purchaseOrderNo = ''; |
| | | if (Array.isArray(res.data) && res.data.length > 0) { |
| | | purchaseOrderNo = res.data[0].purchaseOrderNo || res.data[0].orderId; |
| | | } else { |
| | | purchaseOrderNo = res.data?.purchaseOrderNo || res.data?.orderId; |
| | | } |
| | | |
| | | if (Array.isArray(res.data) && res.data.length > 0) purchaseOrderNo = res.data[0].purchaseOrderNo || res.data[0].orderId; |
| | | else purchaseOrderNo = res.data?.purchaseOrderNo || res.data?.orderId; |
| | | return purchaseOrderNo; |
| | | }; |
| | | |
| | | // æ«ææ¡ç æ ¸å¿é»è¾ |
| | | // æ«ææ¡ç |
| | | const handleScan = async () => { |
| | | // æ ¸å¿æ°å¢ï¼åç½®æ ¡éªï¼ç¡®ä¿åºåºåå·²éªè¯ |
| | | if (!isOutboundVerified.value) { |
| | | ElMessage.warning("请å
éªè¯ææçåºåºåæ®å·ååæ«ææ¡ç "); |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); |
| | | }); |
| | | ElMessage.warning("请å
éªè¯åºåºåæ®å·"); |
| | | playError(); |
| | | nextTick(() => outboundInputRef.value?.focus()); |
| | | return; |
| | | } |
| | | |
| | | if (!formRef.value) return; |
| | | await formRef.value.validateField('barcode'); |
| | | |
| | | const barcode = formData.barcode.trim(); |
| | | const outboundOrderNo = orderForm.outboundOrderNo.trim(); |
| | | |
| | | // æ¡ç å»é |
| | | if (!barcode) return; |
| | | const isDuplicate = scannedBarcodes.value.some(item => item.barcode === barcode); |
| | | if (isDuplicate) { |
| | | ElMessage.warning(`æ¡ç ã${barcode}ãå·²åå¨ï¼æ éé夿«æ`); |
| | | ElMessage.warning(`æ¡ç ã${barcode}ãå·²åå¨`); |
| | | playError(); |
| | | formData.barcode = ""; |
| | | nextTick(() => barcodeInputRef.value?.focus()); // å»éåä»èç¦æ¡ç æ¡ |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | return; |
| | | } |
| | | |
| | | try { |
| | | loading.value = true; |
| | | |
| | | // æ¥éª¤1ï¼æ¥è¯¢éè´åå· |
| | | const purchaseOrderNo = await getPurchaseOrderByBarcode(barcode); |
| | | if (purchaseOrderNo) { |
| | | orderForm.purchaseOrderNo = purchaseOrderNo; |
| | | } else { |
| | | ElMessage.info("æªæ¥è¯¢å°è¯¥æ¡ç 对åºçéè´åå·ï¼ç»§ç»éªè¯æ¡ç æææ§"); |
| | | formData.barcode = ""; |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } |
| | | |
| | | // æ¥éª¤2ï¼éªè¯æ¡ç å¹¶è·åç©æä¿¡æ¯ |
| | | let purchaseOrderNo = ''; |
| | | try { |
| | | purchaseOrderNo = await getPurchaseOrderByBarcode(barcode); |
| | | if (purchaseOrderNo) orderForm.purchaseOrderNo = purchaseOrderNo; |
| | | } catch (e) { ElMessage.info("æªæ¥è¯¢å°éè´åå·ï¼ç»§ç»éªè¯æ¡ç "); playError(); } |
| | | const validateRes = await http.post("/api/OutboundPicking/BarcodeValidate", { |
| | | outOder: outboundOrderNo, |
| | | outOder: orderForm.outboundOrderNo, |
| | | inOder: purchaseOrderNo || orderForm.purchaseOrderNo, |
| | | barCode: barcode |
| | | }); |
| | | |
| | | if (validateRes.status === true) { |
| | | if (!Array.isArray(validateRes.data) || validateRes.data.length === 0) { |
| | | ElMessage.warning("该æ¡ç éªè¯æåï¼ä½æªè¿åç©æä¿¡æ¯"); |
| | | formData.barcode = ""; |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } else { |
| | | const newItems = validateRes.data.map(item => ({ |
| | | barcode: item.barcode || '', |
| | | materielCode: item.materielCode || '', |
| | | materielName: item.materielName || '', |
| | | batchNo: item.batchNo || '', |
| | | orderQuantity: item.orderQuantity || item.quantity || 0, |
| | | supplyCode: item.supplyCode || '', |
| | | purchaseOrderNo: purchaseOrderNo || '' |
| | | })); |
| | | scannedBarcodes.value.push(...newItems); |
| | | ElMessage.success(`æ«ææåï¼æ°å¢ ${newItems.length} æ¡ç©æä¿¡æ¯ï¼ç´¯è®¡ ${scannedBarcodes.value.length} æ¡`); |
| | | formData.barcode = ""; |
| | | } |
| | | } else { |
| | | ElMessage.error("æ«æå¤±è´¥ï¼" + (validateRes.message || 'æ¡ç éªè¯å¤±è´¥')); |
| | | if (validateRes.status === true && Array.isArray(validateRes.data) && validateRes.data.length) { |
| | | const newItems = validateRes.data.map(item => ({ |
| | | barcode: item.barcode || '', |
| | | materielCode: item.materielCode || '', |
| | | materielName: item.materielName || '', |
| | | batchNo: item.batchNo || '', |
| | | orderQuantity: item.orderQuantity || item.quantity || 0, |
| | | supplyCode: item.supplyCode || '', |
| | | purchaseOrderNo: purchaseOrderNo || '' |
| | | })); |
| | | scannedBarcodes.value.push(...newItems); |
| | | ElMessage.success(`æ«ææåï¼æ°å¢ ${newItems.length} æ¡`); |
| | | playSuccess(); |
| | | formData.barcode = ""; |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } else { |
| | | ElMessage.error(validateRes.message || 'æ¡ç éªè¯å¤±è´¥'); |
| | | playError(); |
| | | formData.barcode = ""; |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error(error.message); |
| | | ElMessage.error('æ¡ç éªè¯å¼å¸¸'); |
| | | playError(); |
| | | formData.barcode = ""; |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } finally { |
| | | loading.value = false; |
| | | // æ«æå®æåå§ç»èç¦æ¡ç è¾å
¥æ¡ï¼æ¹ä¾¿è¿ç»æ«æï¼ |
| | | nextTick(() => { |
| | | barcodeInputRef.value?.focus(); |
| | | if (barcodeInputRef.value?.input) { |
| | | barcodeInputRef.value.input.select = () => {}; |
| | | } |
| | | }); |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } |
| | | }; |
| | | |
| | | // å¸¦é²æçæ«æå¤ç |
| | | const debouncedHandleScan = debounce(async (e) => { |
| | | e.stopPropagation(); |
| | | e.preventDefault(); |
| | | await handleScan(); |
| | | }, 100); |
| | | const debounce = (fn, delay = 100) => { |
| | | let timer = null; |
| | | return (...args) => { if (timer) clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; |
| | | }; |
| | | const debouncedHandleScan = debounce(async (e) => { e.stopPropagation(); e.preventDefault(); await handleScan(); }, 100); |
| | | |
| | | // ç§»é¤åæ¡è®°å½ |
| | | // å 餿¡ç |
| | | const removeItem = async (index, barcode) => { |
| | | try { |
| | | loading.value = true; |
| | |
| | | inOder: currentItem?.purchaseOrderNo || orderForm.purchaseOrderNo, |
| | | barCode: barcode |
| | | }); |
| | | |
| | | if (res.status === true) { |
| | | scannedBarcodes.value.splice(index, 1); |
| | | ElMessage.success("å 餿å"); |
| | | if (scannedBarcodes.value.length === 0) { |
| | | orderForm.purchaseOrderNo = ""; |
| | | } |
| | | if (scannedBarcodes.value.length === 0) orderForm.purchaseOrderNo = ""; |
| | | } else { |
| | | ElMessage.error("å é¤å¤±è´¥ï¼" + (res.message || 'å é¤å¤±è´¥')); |
| | | ElMessage.error("å é¤å¤±è´¥ï¼" + (res.message || '')); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("å 餿¡ç å¼å¸¸ï¼" + error.message); |
| | | ElMessage.error("å é¤å¼å¸¸"); |
| | | } finally { |
| | | loading.value = false; |
| | | // å é¤åä»èç¦æ¡ç è¾å
¥æ¡ |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } |
| | | }; |
| | | |
| | | // æäº¤åºåº |
| | | const submit = async () => { |
| | | // æ ¸å¿æ°å¢ï¼åç½®æ ¡éªåºåºåéªè¯ç¶æ |
| | | if (!isOutboundVerified.value) { |
| | | ElMessage.warning("åºåºåæ®å·æªéªè¯ï¼æ æ³æäº¤"); |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); |
| | | }); |
| | | ElMessage.warning("åºåºåæ®å·æªéªè¯"); |
| | | nextTick(() => outboundInputRef.value?.focus()); |
| | | return; |
| | | } |
| | | |
| | | if (scannedBarcodes.value.length === 0) { |
| | | ElMessage.warning("请å
æ«æè³å°ä¸æ¡æ¡ç "); |
| | | ElMessage.warning("请å
æ«ææ¡ç "); |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | return; |
| | | } |
| | | |
| | | const barcodes = scannedBarcodes.value.map(item => item.barcode); |
| | | const purchaseOrderNos = [...new Set(scannedBarcodes.value.map(item => item.purchaseOrderNo).filter(Boolean))]; |
| | | |
| | | try { |
| | | // å¼å¯æäº¤loadingï¼æ¾ç¤ºé®ç½©å± |
| | | submitLoading.value = true; |
| | | const res = await http.post("/api/OutboundPicking/NoStockOutSubmit", { |
| | | OutOderSubmit: orderForm.outboundOrderNo, |
| | | InOderSubmit: purchaseOrderNos.join(',') || '', |
| | | BarCodeSubmit: barcodes |
| | | }); |
| | | |
| | | if (res.status === true) { |
| | | ElMessage.success("åºåºæäº¤æå"); |
| | | showDetailBox.value = false; |
| | | scannedBarcodes.value = []; |
| | | orderForm.purchaseOrderNo = ""; |
| | | isOutboundVerified.value = false; // æäº¤æååéç½®éªè¯ç¶æ |
| | | unlockOutboundOrder(); |
| | | showDetailBox.value = false; // 触å watch è§£éï¼ä½æäº¤æååé常ä¸éè¦è§£éï¼å 为已ç»åºåºäºï¼ä¸è¿å端åºèªè¡å¤çç¶æï¼ |
| | | // 注æï¼æäº¤æååä¸åºè¯¥åè°ç¨è§£éæ¥å£ï¼å ä¸ºåæ®å·²å¤ç宿¯ãè¿ééè¿æ å¿é¿å
ï¼submit æååéç½®éªè¯ç¶æ |
| | | isOutboundVerified.value = false; |
| | | unlockCalled = true; // 鲿¢ watch 忬¡è°ç¨è§£é |
| | | } else { |
| | | ElMessage.error("åºåºæäº¤å¤±è´¥ï¼" + (res.message || 'æäº¤å¤±è´¥')); |
| | | unlockOutboundOrder(); |
| | | ElMessage.error("åºåºæäº¤å¤±è´¥ï¼" + (res.message || '')); |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error("åºåºæäº¤å¼å¸¸ï¼" + error.message); |
| | | unlockOutboundOrder(); |
| | | ElMessage.error("æäº¤å¼å¸¸ï¼" + error.message); |
| | | nextTick(() => barcodeInputRef.value?.focus()); |
| | | } finally { |
| | | // å
³éæäº¤loadingï¼éèé®ç½©å± |
| | | submitLoading.value = false; |
| | | loading.value = false; |
| | | } |
| | | }; |
| | | |
| | | // æ´é²ç»ç¶ç»ä»¶çæ¹æ³ |
| | | defineExpose({ |
| | | open |
| | | // çå½å¨æï¼æ·»å 页é¢å
³éæ¶çè§£éçå¬ |
| | | onMounted(() => { |
| | | window.addEventListener('beforeunload', unlockOnPageUnload); |
| | | }); |
| | | onBeforeUnmount(() => { |
| | | window.removeEventListener('beforeunload', unlockOnPageUnload); |
| | | // ç»ä»¶å¸è½½æ¶å¦æå¼¹çªè¿å¼çï¼ä¹å°è¯è§£éï¼ä½é常页é¢å
³éä¼è§¦å beforeunloadï¼ |
| | | if (showDetailBox.value) { |
| | | unlockOutboundOrder(); |
| | | } |
| | | }); |
| | | |
| | | // æ´é²æ¹æ³ |
| | | defineExpose({ open }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /*è¿æ¸¡å¨ç» */ |
| | | /* è¿æ¸¡å¨ç» */ |
| | | .barcode-item-transition-enter-active, |
| | | .barcode-item-transition-leave-active { |
| | | transition: all 0.3s ease; |
| | |
| | | transition: transform 1s ease; |
| | | } |
| | | |
| | | /* æ°å¢ï¼æäº¤é®ç½©å±æ ·å¼ */ |
| | | /* æäº¤é®ç½©å±æ ·å¼ */ |
| | | .submit-mask { |
| | | position: absolute; |
| | | top: 0; |
| | |
| | | animation: el-loading-circle 1.5s linear infinite; |
| | | } |
| | | |
| | | /* æ°å¢ï¼éªè¯ç¶ææ ç¾æ ·å¼ */ |
| | | /* éªè¯ç¶ææ ç¾æ ·å¼ */ |
| | | .verified-tag { |
| | | color: #67c23a; |
| | | font-size: 12px; |
| | |
| | | .scan-list { |
| | | width: 100%; |
| | | } |
| | | |
| | | .custom-card { |
| | | border-radius: 12px; |
| | | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; |
| | |
| | | .custom-card:hover { |
| | | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; |
| | | } |
| | | |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | font-size: 15px; |
| | | color: #333; |
| | | } |
| | | |
| | | .card-body { |
| | | padding: 0; |
| | | } |
| | | |
| | | .custom-scrollbar :deep(.el-scrollbar__thumb) { |
| | | background: rgba(0, 0, 0, 0.2); |
| | | border-radius: 4px; |
| | |
| | | .custom-scrollbar :deep(.el-scrollbar__wrap) { |
| | | overflow-x: hidden; |
| | | } |
| | | |
| | | .barcode-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | flex: 1; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .delete-btn { |
| | | color: #ea1919; |
| | | font-size: 16px; |
| | |
| | | color: #f56c6c !important; |
| | | background: rgba(245, 108, 108, 0.1); |
| | | } |
| | | |
| | | .empty-tip { |
| | | text-align: center; |
| | | padding: 80px 0; |
| | |
| | | font-size: 40px; |
| | | color: #dcdfe6; |
| | | } |
| | | |
| | | .custom-input :deep(.el-input__inner) { |
| | | border-radius: 6px; |
| | | border-color: #e4e7ed; |
| | |
| | | border-color: #409eff; |
| | | box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1); |
| | | } |
| | | |
| | | .custom-button { |
| | | border-radius: 6px; |
| | | height: 36px; |
| | |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2); |
| | | } |
| | | |
| | | .footer-actions { |
| | | text-align: right; |
| | | } |