heshaofeng
2026-01-13 d741e7a7ad7de5045e5c6b6145d9da1783cadecd
ÏîÄ¿´úÂë/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,7 +33,7 @@
              @input="handleOutboundInput"
              @keyup.enter="validateOutboundOrder"
              ref="outboundInputRef"
              :disabled="loading"
              :disabled="loading || submitLoading"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购单据:" name="purchaseOrderNo">
@@ -37,6 +45,7 @@
              @input="handlePurchaseInput"
              readonly
              ref="purchaseInputRef"
              :disabled="submitLoading"
            ></el-input>
          </el-form-item>
        </el-form>
@@ -62,7 +71,7 @@
              @keydown.enter="debouncedHandleScan" 
              autofocus
              class="custom-input"
              :disabled="!orderForm.outboundOrderNo || loading"
              :disabled="!orderForm.outboundOrderNo || loading || submitLoading"
            ></el-input>
          </el-form-item>
          <el-form-item>
@@ -71,7 +80,7 @@
              size="small" 
              @click="handleScan" 
              class="custom-button"
              :disabled="!orderForm.outboundOrderNo || loading"
              :disabled="!orderForm.outboundOrderNo || loading || submitLoading"
            >
              <Search /> ç¡®è®¤æ‰«æ
            </el-button>
@@ -123,7 +132,7 @@
                      @click="removeItem(index, item.barcode)"
                      icon="Delete"
                      circle
                      :disabled="loading"
                      :disabled="loading || submitLoading"
                    ></el-button>
                  </div>
                </transition-group>
@@ -142,7 +151,7 @@
            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 /> æäº¤å‡ºåº“
@@ -156,7 +165,7 @@
              showDetailBox = false;
            }" 
            class="cancel-btn" 
            :disabled="loading"
            :disabled="loading || submitLoading"
          >
            å–消
          </el-button>
@@ -185,6 +194,8 @@
});
const scannedBarcodes = ref([]);
const loading = ref(false);
// æ–°å¢žï¼šæäº¤ä¸“属loading状态,控制遮罩层显示
const submitLoading = ref(false);
// æ¨¡æ¿å¼•用
const formRef = ref(null);
@@ -217,6 +228,7 @@
  formData.barcode = "";
  orderForm.outboundOrderNo = "";
  orderForm.purchaseOrderNo = "";
  submitLoading.value = false; // æ‰“开弹窗时重置提交loading
  nextTick(() => {
    outboundInputRef.value?.focus(); // æ‰“开弹窗仍聚焦出库单输入框
  });
@@ -435,7 +447,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(',') || '',
@@ -455,6 +468,8 @@
    ElMessage.error("出库提交异常:" + error.message);
    nextTick(() => barcodeInputRef.value?.focus()); // å¼‚常聚焦条码框
  } finally {
    // å…³é—­æäº¤loading,隐藏遮罩层
    submitLoading.value = false;
    loading.value = false;
  }
};
@@ -483,6 +498,33 @@
  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%;
}