| | |
| | | title="èæåºå
¥åº" |
| | | class="custom-vol-box" |
| | | > |
| | | <!-- æäº¤é®ç½©å±ï¼è¦çæ´ä¸ªå¼¹çªå
容åºå --> |
| | | <div class="submit-mask" v-show="submitLoading"> |
| | | <div class="mask-content"> |
| | | <el-loading-spinner class="loading-icon" /> |
| | | <span class="loading-text">æ£å¨æäº¤åºåºï¼è¯·ç¨å...</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div> |
| | | <!-- åæ®è¾å
¥åºåï¼æ¯ææ«ç ï¼ --> |
| | | <el-form |
| | |
| | | @input="handleOutboundInput" |
| | | @keyup.enter="validateOutboundOrder" |
| | | ref="outboundInputRef" |
| | | :disabled="loading" |
| | | :disabled="loading || submitLoading" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="éè´åæ®:" name="purchaseOrderNo"> |
| | |
| | | @input="handlePurchaseInput" |
| | | readonly |
| | | ref="purchaseInputRef" |
| | | :disabled="submitLoading" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | @keydown.enter="debouncedHandleScan" |
| | | autofocus |
| | | class="custom-input" |
| | | :disabled="!orderForm.outboundOrderNo || loading" |
| | | :disabled="!orderForm.outboundOrderNo || loading || submitLoading" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | size="small" |
| | | @click="handleScan" |
| | | class="custom-button" |
| | | :disabled="!orderForm.outboundOrderNo || loading" |
| | | :disabled="!orderForm.outboundOrderNo || loading || submitLoading" |
| | | > |
| | | <Search /> ç¡®è®¤æ«æ |
| | | </el-button> |
| | |
| | | @click="removeItem(index, item.barcode)" |
| | | icon="Delete" |
| | | circle |
| | | :disabled="loading" |
| | | :disabled="loading || submitLoading" |
| | | ></el-button> |
| | | </div> |
| | | </transition-group> |
| | |
| | | type="primary" |
| | | size="small" |
| | | @click="submit" |
| | | :disabled="scannedBarcodes.length === 0 || !orderForm.outboundOrderNo || loading" |
| | | :disabled="scannedBarcodes.length === 0 || !orderForm.outboundOrderNo || loading || submitLoading" |
| | | class="submit-btn" |
| | | > |
| | | <Check /> æäº¤åºåº |
| | |
| | | showDetailBox = false; |
| | | }" |
| | | class="cancel-btn" |
| | | :disabled="loading" |
| | | :disabled="loading || submitLoading" |
| | | > |
| | | åæ¶ |
| | | </el-button> |
| | |
| | | }); |
| | | const scannedBarcodes = ref([]); |
| | | const loading = ref(false); |
| | | // æ°å¢ï¼æäº¤ä¸å±loadingç¶æï¼æ§å¶é®ç½©å±æ¾ç¤º |
| | | const submitLoading = ref(false); |
| | | |
| | | // 模æ¿å¼ç¨ |
| | | const formRef = ref(null); |
| | |
| | | formData.barcode = ""; |
| | | orderForm.outboundOrderNo = ""; |
| | | orderForm.purchaseOrderNo = ""; |
| | | submitLoading.value = false; // æå¼å¼¹çªæ¶éç½®æäº¤loading |
| | | nextTick(() => { |
| | | outboundInputRef.value?.focus(); // æå¼å¼¹çªä»èç¦åºåºåè¾å
¥æ¡ |
| | | }); |
| | |
| | | const purchaseOrderNos = [...new Set(scannedBarcodes.value.map(item => item.purchaseOrderNo).filter(Boolean))]; |
| | | |
| | | try { |
| | | loading.value = true; |
| | | // å¼å¯æäº¤loadingï¼æ¾ç¤ºé®ç½©å± |
| | | submitLoading.value = true; |
| | | const res = await http.post("/api/OutboundPicking/NoStockOutSubmit", { |
| | | OutOderSubmit: orderForm.outboundOrderNo, |
| | | InOderSubmit: purchaseOrderNos.join(',') || '', |
| | |
| | | ElMessage.error("åºåºæäº¤å¼å¸¸ï¼" + error.message); |
| | | nextTick(() => barcodeInputRef.value?.focus()); // å¼å¸¸èç¦æ¡ç æ¡ |
| | | } finally { |
| | | // å
³éæäº¤loadingï¼éèé®ç½©å± |
| | | submitLoading.value = false; |
| | | loading.value = false; |
| | | } |
| | | }; |
| | |
| | | transition: transform 1s ease; |
| | | } |
| | | |
| | | /* æ°å¢ï¼æäº¤é®ç½©å±æ ·å¼ */ |
| | | .submit-mask { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(255, 255, 255, 0.85); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 100; |
| | | border-radius: inherit; |
| | | } |
| | | .mask-content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | gap: 12px; |
| | | color: #409eff; |
| | | font-size: 15px; |
| | | } |
| | | .loading-icon { |
| | | font-size: 24px; |
| | | animation: el-loading-circle 1.5s linear infinite; |
| | | } |
| | | |
| | | .scan-list { |
| | | width: 100%; |
| | | } |