空箱跨区域移库

heshaofeng

2026-04-09 ca3e4977395bc02c5d147dffdff7381333fdfbca

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/extend/NoStockOut.vue

@@ -8,6 +8,14 @@
      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 
@@ -25,8 +33,11 @@
              @input="handleOutboundInput"
              @keyup.enter="validateOutboundOrder"
              ref="outboundInputRef"
              :disabled="loading"
              :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 label="采购单据:" name="purchaseOrderNo">
            <el-input
@@ -37,6 +48,7 @@
              @input="handlePurchaseInput"
              readonly
              ref="purchaseInputRef"
              :disabled="submitLoading"
            ></el-input>
          </el-form-item>
        </el-form>
@@ -53,7 +65,6 @@
            label="扫描条码:"
            style="width: 80%"
            name="barcode"
            :rules="[{ required: true, message: '请扫描或输入条码', trigger: 'blur' }]"
          >
            <el-input
              ref="barcodeInputRef"
@@ -62,7 +73,7 @@
              @keydown.enter="debouncedHandleScan" 
              autofocus
              class="custom-input"
              :disabled="!orderForm.outboundOrderNo || loading"
              :disabled="!isOutboundVerified || loading || submitLoading"
            ></el-input>
          </el-form-item>
          <el-form-item>
@@ -71,7 +82,7 @@
              size="small" 
              @click="handleScan" 
              class="custom-button"
              :disabled="!orderForm.outboundOrderNo || loading"
              :disabled="!isOutboundVerified || loading || submitLoading"
            >
              <Search /> ç¡®è®¤æ‰«æ
            </el-button>
@@ -123,12 +134,13 @@
                      @click="removeItem(index, item.barcode)"
                      icon="Delete"
                      circle
                      :disabled="loading"
                      :disabled="loading || submitLoading"
                    ></el-button>
                  </div>
                </transition-group>
                <div class="empty-tip" v-if="scannedBarcodes.length === 0">
                  <span>暂无扫描记录，请先输入出库单据后扫描条码</span>
                  <span v-if="isOutboundVerified">暂无扫描记录，请扫描条码</span>
                  <span v-else>请先输入并验证有效的出库单据号</span>
                </div>
              </el-scrollbar>
            </div>
@@ -142,7 +154,7 @@
            type="primary" 
            size="small" 
            @click="submit" 
            :disabled="scannedBarcodes.length === 0 || !orderForm.outboundOrderNo || loading" 
            :disabled="scannedBarcodes.length === 0 || !isOutboundVerified || loading || submitLoading" 
            class="submit-btn"
          >
            <Check /> æäº¤å‡ºåº“
@@ -156,7 +168,7 @@
              showDetailBox = false;
            }" 
            class="cancel-btn" 
            :disabled="loading"
            :disabled="loading || submitLoading"
          >
            å–消
          </el-button>
@@ -185,12 +197,31 @@
});
const scannedBarcodes = ref([]);
const loading = ref(false);
// æ–°å¢žï¼šæäº¤ä¸“属loading状态，控制遮罩层显示
const submitLoading = ref(false);
// æ ¸å¿ƒæ–°å¢žï¼šå‡ºåº“单验证状态标识
const isOutboundVerified = ref(false);

// æ¨¡æ¿å¼•ç”¨
const formRef = ref(null);
const barcodeInputRef = ref(null);
const outboundInputRef = ref(null);
const purchaseInputRef = ref(null);

const successAudioSrc = require('@/assets/audio/success.mp3');
const errorAudioSrc = require('@/assets/audio/error.mp3');

// ========== ä»…新增：音频播放函数（无其他代码改动） ==========
const playAudio = (audioSrc, volume = 0.8) => {
  try {
    const audio = new Audio(audioSrc);
    audio.volume = volume;
    audio.play().catch(() => {});
  } catch (e) {}
};
const playSuccess = () => playAudio(successAudioSrc);
const playError = () => playAudio(errorAudioSrc);
// ========== éŸ³é¢‘函数结束 ==========

// ç»„件挂载时聚焦到出库单输入框
onMounted(() => {
@@ -217,6 +248,8 @@
  formData.barcode = "";
  orderForm.outboundOrderNo = "";
  orderForm.purchaseOrderNo = "";
  submitLoading.value = false; // æ‰“开弹窗时重置提交loading
  isOutboundVerified.value = false; // æ‰“开弹窗时重置出库单验证状态
  nextTick(() => {
    outboundInputRef.value?.focus(); // æ‰“开弹窗仍聚焦出库单输入框
  });
@@ -224,11 +257,12 @@

/**
 * éªŒè¯å‡ºåº“单据号的有效性
 * æ ¸å¿ƒä¿®æ”¹ï¼šéªŒè¯æˆåŠŸåŽç›´æŽ¥èšç„¦æ¡ç æ‰«ææ¡†ï¼Œå¤±è´¥åˆ™èšç„¦å›žå‡ºåº“单输入框
 * æ ¸å¿ƒä¿®æ”¹ï¼šéªŒè¯æˆåŠŸåŽæ ‡è®°isOutboundVerified为true，失败则重置为false
 */
const validateOutboundOrder = async () => {
  const outboundOrderNo = orderForm.outboundOrderNo.trim();
  if (!outboundOrderNo) {
    ElMessage.warning("请输入出库单据号");
    return;
  }

@@ -240,8 +274,9 @@
    );

    if (res.status !== true) {
      // éªŒè¯å¤±è´¥ï¼šæ¸…空输入框，提示错误，聚焦回出库单输入框
      // éªŒè¯å¤±è´¥ï¼šæ¸…空输入框，提示错误，重置验证状态，聚焦回出库单输入框
      orderForm.outboundOrderNo = "";
      isOutboundVerified.value = false;
      ElMessage.error(res.message || "出库单据号验证失败，请检查单据号是否正确");
      nextTick(() => {
        outboundInputRef.value?.focus(); // å¤±è´¥èšç„¦å‡ºåº“单输入框
@@ -249,14 +284,16 @@
      return;
    }

    // éªŒè¯æˆåŠŸï¼šæç¤ºç”¨æˆ·ï¼Œç›´æŽ¥èšç„¦æ¡ç æ‰«ææ¡†ï¼ˆæ ¸å¿ƒä¿®æ”¹ï¼‰
    // éªŒè¯æˆåŠŸï¼šæ ‡è®°éªŒè¯çŠ¶æ€ä¸ºtrue，提示用户，聚焦条码扫描框
    isOutboundVerified.value = true;
    ElMessage.success("出库单据号验证通过");
    nextTick(() => {
      barcodeInputRef.value?.focus(); // æˆåŠŸç›´æŽ¥è·³è½¬åˆ°æ¡ç æ‰«ææ¡†
    });
  } catch (error) {
    // æŽ¥å£å¼‚常：清空输入框，提示错误，聚焦回出库单输入框
    // æŽ¥å£å¼‚常：清空输入框，提示错误，重置验证状态，聚焦回出库单输入框
    orderForm.outboundOrderNo = "";
    isOutboundVerified.value = false;
    ElMessage.error(`出库单据号验证异常：${error.message || "网络错误，请重试"}`);
    nextTick(() => {
      outboundInputRef.value?.focus(); // å¼‚常聚焦出库单输入框
@@ -268,8 +305,9 @@

// å‡ºåº“单输入处理
const handleOutboundInput = (value) => {
  // æ ¸å¿ƒä¿®æ”¹ï¼šè¾“入时自动重置验证状态（防止手动修改已验证的出库单号）
  if (value && value.trim()) {
    // å¯ä¿ç•™å‡ºåº“单号格式验证逻辑
    isOutboundVerified.value = false;
  }
};

@@ -282,10 +320,13 @@

// èšç„¦æ¡ç è¾“入框（复用函数）
const focusBarcodeInputDirectly = () => {
  if (orderForm.outboundOrderNo.trim()) {
  if (isOutboundVerified.value) {
    barcodeInputRef.value?.focus();
  } else {
    ElMessage.warning("请先输入有效的出库单据号");
    ElMessage.warning("请先输入并验证有效的出库单据号");
    nextTick(() => {
      outboundInputRef.value?.focus();
    });
  }
};

@@ -311,6 +352,16 @@

// æ‰«ææ¡ç æ ¸å¿ƒé€»è¾‘
const handleScan = async () => {
  // æ ¸å¿ƒæ–°å¢žï¼šå‰ç½®æ ¡éªŒï¼Œç¡®ä¿å‡ºåº“单已验证
  if (!isOutboundVerified.value) {
    ElMessage.warning("请先验证有效的出库单据号后再扫描条码");
    playError(); // ========== ä»…新增这一行 ==========
    nextTick(() => {
      outboundInputRef.value?.focus();
    });
    return;
  }

  if (!formRef.value) return;
  await formRef.value.validateField('barcode');

@@ -321,6 +372,7 @@
  const isDuplicate = scannedBarcodes.value.some(item => item.barcode === barcode);
  if (isDuplicate) {
    ElMessage.warning(`条码【${barcode}】已存在，无需重复扫描`);
    playError(); // ========== ä»…新增这一行 ==========
    formData.barcode = "";
    nextTick(() => barcodeInputRef.value?.focus()); // åŽ»é‡åŽä»èšç„¦æ¡ç æ¡†
    return;
@@ -330,12 +382,18 @@
    loading.value = true;

    // æ­¥éª¤1：查询采购单号
    const purchaseOrderNo = await getPurchaseOrderByBarcode(barcode);
    if (purchaseOrderNo) {
      orderForm.purchaseOrderNo = purchaseOrderNo;
      ElMessage.success(`成功查询到采购单：${purchaseOrderNo}`);
    } else {
      ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性");
    let purchaseOrderNo = '';
    try {
      purchaseOrderNo = await getPurchaseOrderByBarcode(barcode);
      if (purchaseOrderNo) {
        orderForm.purchaseOrderNo = purchaseOrderNo;
      } else {
        ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性");
        playError(); // ========== ä»…新增这一行 ==========
      }
    } catch (error) {
      ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性：" + error.message);
      playError(); // ========== ä»…新增这一行 ==========
    }

    // æ­¥éª¤2：验证条码并获取物料信息
@@ -348,6 +406,9 @@
    if (validateRes.status === true) {
      if (!Array.isArray(validateRes.data) || validateRes.data.length === 0) {
        ElMessage.warning("该条码验证成功，但未返回物料信息");
        playError(); // ========== ä»…新增这一行 ==========
        formData.barcode = "";
        nextTick(() => barcodeInputRef.value?.focus());
      } else {
        const newItems = validateRes.data.map(item => ({
          barcode: item.barcode || '',
@@ -360,14 +421,20 @@
        }));
        scannedBarcodes.value.push(...newItems);
        ElMessage.success(`扫描成功，新增 ${newItems.length} æ¡ç‰©æ–™ä¿¡æ¯ï¼Œç´¯è®¡ ${scannedBarcodes.value.length} æ¡`);
        playSuccess(); // ========== ä»…新增这一行 ==========
        formData.barcode = "";
      }
      formData.barcode = "";
    } else {
      ElMessage.error("扫描失败：" + (validateRes.message || '条码验证失败'));
      
      playError(); // ========== ä»…新增这一行 ==========
      formData.barcode = "";
      nextTick(() => barcodeInputRef.value?.focus());
    }
  } catch (error) {
    ElMessage.error(error.message);
    playError(); // ========== ä»…新增这一行 ==========
    formData.barcode = "";
    nextTick(() => barcodeInputRef.value?.focus());
  } finally {
    loading.value = false;
    // æ‰«æå®ŒæˆåŽå§‹ç»ˆèšç„¦æ¡ç è¾“入框（方便连续扫描）
@@ -418,9 +485,18 @@

// æäº¤å‡ºåº“
const submit = async () => {
  // æ ¸å¿ƒæ–°å¢žï¼šå‰ç½®æ ¡éªŒå‡ºåº“单验证状态
  if (!isOutboundVerified.value) {
    ElMessage.warning("出库单据号未验证，无法提交");
    nextTick(() => {
      outboundInputRef.value?.focus();
    });
    return;
  }

  if (scannedBarcodes.value.length === 0) {
    ElMessage.warning("请先扫描至少一条条码");
    nextTick(() => barcodeInputRef.value?.focus()); // æäº¤å¤±è´¥èšç„¦æ¡ç æ¡†
    nextTick(() => barcodeInputRef.value?.focus());
    return;
  }

@@ -428,7 +504,8 @@
  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(',') || '',
@@ -440,14 +517,17 @@
      showDetailBox.value = false;
      scannedBarcodes.value = [];
      orderForm.purchaseOrderNo = "";
      isOutboundVerified.value = false; // æäº¤æˆåŠŸåŽé‡ç½®éªŒè¯çŠ¶æ€
    } else {
      ElMessage.error("出库提交失败：" + (res.message || '提交失败'));
      nextTick(() => barcodeInputRef.value?.focus()); // æäº¤å¤±è´¥èšç„¦æ¡ç æ¡†
      nextTick(() => barcodeInputRef.value?.focus());
    }
  } catch (error) {
    ElMessage.error("出库提交异常：" + error.message);
    nextTick(() => barcodeInputRef.value?.focus()); // å¼‚常聚焦条码框
    nextTick(() => barcodeInputRef.value?.focus());
  } finally {
    // å…³é—­æäº¤loading，隐藏遮罩层
    submitLoading.value = false;
    loading.value = false;
  }
};
@@ -476,6 +556,52 @@
  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;
}

/* æ–°å¢žï¼šéªŒè¯çŠ¶æ€æ ‡ç­¾æ ·å¼ */
.verified-tag {
  color: #67c23a;
  font-size: 12px;
  margin-left: 8px;
  font-weight: 500;
}
.loading-tag {
  color: #409eff;
  font-size: 12px;
  margin-left: 8px;
  font-weight: 500;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.scan-list {
  width: 100%;
}