代码优化

647556386

2026-01-27 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f

 ÏîÄ¿´úÂë/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,6 +197,10 @@
});
const scannedBarcodes = ref([]);
const loading = ref(false);
// æ–°å¢žï¼šæäº¤ä¸“属loading状态，控制遮罩层显示
const submitLoading = ref(false);
// æ ¸å¿ƒæ–°å¢žï¼šå‡ºåº“单验证状态标识
const isOutboundVerified = ref(false);

// æ¨¡æ¿å¼•ç”¨
const formRef = ref(null);
@@ -217,6 +233,8 @@
  formData.barcode = "";
  orderForm.outboundOrderNo = "";
  orderForm.purchaseOrderNo = "";
  submitLoading.value = false; // æ‰“开弹窗时重置提交loading
  isOutboundVerified.value = false; // æ‰“开弹窗时重置出库单验证状态
  nextTick(() => {
    outboundInputRef.value?.focus(); // æ‰“开弹窗仍聚焦出库单输入框
  });
@@ -224,11 +242,12 @@

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

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

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

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

@@ -282,10 +305,13 @@

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

@@ -311,6 +337,15 @@

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

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

@@ -335,8 +370,8 @@
      orderForm.purchaseOrderNo = purchaseOrderNo;
    } else {
      ElMessage.info("未查询到该条码对应的采购单号，继续验证条码有效性");
      formData.barcode = ""; // æ–°å¢žï¼šéªŒè¯å¤±è´¥æ—¶æ¸…空输入框
      nextTick(() => barcodeInputRef.value?.focus()); // æ–°å¢žï¼šèšç„¦æ¡ç è¾“入框
      formData.barcode = "";
      nextTick(() => barcodeInputRef.value?.focus());
    }

    // æ­¥éª¤2：验证条码并获取物料信息
@@ -349,8 +384,8 @@
    if (validateRes.status === true) {
      if (!Array.isArray(validateRes.data) || validateRes.data.length === 0) {
        ElMessage.warning("该条码验证成功，但未返回物料信息");
        formData.barcode = ""; // æ–°å¢žï¼šæ— ç‰©æ–™ä¿¡æ¯æ—¶ä¹Ÿæ¸…空输入框
        nextTick(() => barcodeInputRef.value?.focus()); // æ–°å¢žï¼šèšç„¦æ¡ç æ¡†
        formData.barcode = "";
        nextTick(() => barcodeInputRef.value?.focus());
      } else {
        const newItems = validateRes.data.map(item => ({
          barcode: item.barcode || '',
@@ -367,13 +402,12 @@
      }
    } else {
      ElMessage.error("扫描失败：" + (validateRes.message || '条码验证失败'));
      formData.barcode = ""; // æ–°å¢žï¼šéªŒè¯å¤±è´¥æ—¶æ¸…空输入框
      nextTick(() => barcodeInputRef.value?.focus()); // æ–°å¢žï¼šèšç„¦æ¡ç è¾“入框
      formData.barcode = "";
      nextTick(() => barcodeInputRef.value?.focus());
    }
  } catch (error) {
    ElMessage.error(error.message);
    formData.barcode = ""; // ä¿ç•™ï¼šæŽ¥å£å¼‚常时清空
    // æ–°å¢žï¼šå¼‚常时也强制聚焦条码框
    formData.barcode = "";
    nextTick(() => barcodeInputRef.value?.focus());
  } finally {
    loading.value = false;
@@ -425,9 +459,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;
  }

@@ -435,7 +478,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(',') || '',
@@ -447,14 +491,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;
  }
};
@@ -483,6 +530,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%;
}