heshaofeng
2026-01-13 d741e7a7ad7de5045e5c6b6145d9da1783cadecd
ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/inbound/extend/TakeStockSelect.vue
@@ -1,81 +1,30 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    title="杂收杂发平账"
    width="1000px"
    title="杂发平账"
    width="600px"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @closed="handleDialogClosed"
  >
    <div class="reconciliation-container">
      <!-- å•据基本信息 -->
      <div class="order-info">
        <div class="info-row">
          <span class="label">单据ID:</span>
          <span class="value">{{ currentRow.id || "-" }}</span>
        </div>
        <div class="info-row" v-if="selectedItem">
          <span class="label">已选订单:</span>
          <span class="value selected-order">{{ selectedItem.id }}</span>
        </div>
      <!-- ç§»é™¤å•据ID展示,仅保留条码输入框 -->
      <!-- æ¡ç è¾“入框 -->
      <div class="barcode-input-container">
        <el-input
          v-model="barcode"
          placeholder="请输入/扫描条码后平账"
          clearable
          @keyup.enter="handleEnterConfirm"
          class="barcode-input"
          :disabled="loading"
        />
      </div>
      <!-- æ•°æ®åˆ—表展示 -->
      <el-scrollbar height="400px" class="custom-scrollbar">
        <transition-group name="data-item-transition">
          <div
            class="data-item"
            v-for="(item, index) in displayData"
            :key="`${item.orderId}-${index}`"
          >
            <div class="radio-container">
              <el-radio
                v-model="selectedItem"
                :label="item"
                :value="item"
                @change="handleRadioChange(item)"
              ></el-radio>
            </div>
            <div class="data-detail">
              <div class="detail-row">
                <span class="label">订单ID:</span>
                <span class="value">{{ item.id || "-" }}</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 || 0 }}</span>
              </div>
              <div class="detail-row">
                <span class="label">单位:</span>
                <span class="value">{{ item.unit || "-" }}</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.warehouseCode || "-" }}</span>
              </div>
            </div>
          </div>
        </transition-group>
        <div class="empty-tip" v-if="displayData.length === 0">
          <span>暂无相关数据</span>
        </div>
      </el-scrollbar>
      <!-- ç©ºæç¤ºï¼ˆä»…条码为空时显示) -->
      <div class="empty-tip" v-if="!barcode && !loading">
        <span>请输入条码后进行平账操作</span>
      </div>
    </div>
    <template #footer>
@@ -83,7 +32,7 @@
      <el-button
        type="primary"
        @click="handleConfirm"
        :disabled="!selectedItem"
        :disabled="!barcode || loading"
        :loading="loading"
      >
        {{ loading ? "平账中..." : "确认平账" }}
@@ -91,7 +40,7 @@
    </template>
  </el-dialog>
  
  <!-- æ‰“印组件(必须在模板中声明,才能通过ref获取) -->
  <!-- æ‰“印组件(保留原有逻辑) -->
  <printView ref="printViewRef" @parentcall="parentcall"></printView>
</template>
@@ -103,52 +52,50 @@
// å¼¹çª—显示状态
const dialogVisible = ref(false);
// å½“前选中的行数据
const currentRow = ref({});
// è¦å±•示的数据列表
const displayData = ref([]);
// é€‰ä¸­çš„æ•°æ®é¡¹
const selectedItem = ref(null);
// æ¡ç è¾“入框值
const barcode = ref("");
// åŠ è½½çŠ¶æ€
const loading = ref(false);
// å£°æ˜Žæ‰“印组件的ref引用(关键:替代this.$refs.printView)
// æ‰“印组件ref引用
const printViewRef = ref(null);
// æ‰“开弹窗方法(供父组件调用)
const open = (row, data) => {
  currentRow.value = row;
  displayData.value = data;
  selectedItem.value = null; // é‡ç½®é€‰æ‹©
// æ‰“开弹窗方法(无参数,供父组件直接调用)
const open = () => {
  barcode.value = ""; // æ¯æ¬¡æ‰“开弹窗重置条码
  dialogVisible.value = true;
};
// å¤„理单选按钮变化
const handleRadioChange = (item) => {
  selectedItem.value = item;
};
// å¼¹çª—关闭时的处理
const handleDialogClosed = () => {
  selectedItem.value = null;
  barcode.value = "";
  loading.value = false;
};
// çˆ¶ç»„件调用的回调(如果printView需要)
// çˆ¶ç»„件调用的回调(保留原有逻辑)
const parentcall = (params) => {
  console.log("printView回调参数:", params);
};
// ç¡®è®¤å¹³è´¦æ“ä½œ
// å›žè½¦è§¦å‘平账(扫码枪自动回车时调用)
const handleEnterConfirm = async () => {
  if (!barcode.value) {
    ElMessage.warning("请输入条码后再操作");
    return;
  }
  await handleConfirm();
};
// ç¡®è®¤å¹³è´¦æ“ä½œï¼ˆæ ¸å¿ƒé€»è¾‘)
const handleConfirm = async () => {
  if (!selectedItem.value) {
    ElMessage.warning("请选择一条数据进行平账处理");
  if (!barcode.value) {
    ElMessage.warning("请输入条码进行平账处理");
    return;
  }
  try {
    // ç¡®è®¤æç¤º
    await ElMessageBox.confirm(
      `确定要对订单 ${selectedItem.value.id} è¿›è¡Œå¹³è´¦å¤„理吗?`,
      `确定要对条码 ${barcode.value} è¿›è¡Œå¹³è´¦å¤„理吗?`,
      "平账确认",
      {
        confirmButtonText: "确定",
@@ -159,10 +106,9 @@
    loading.value = true;
    // è°ƒç”¨å¹³è´¦æŽ¥å£
    // è°ƒç”¨å¹³è´¦æŽ¥å£ï¼ˆä»…传递barcode参数)
    const params = {
      id: currentRow.value.id, // è¡ŒID
      orderId: selectedItem.value.id, // é€‰æ‹©çš„单据orderId
      barcode: barcode.value,
    };
    const response = await axios.get(
@@ -172,21 +118,20 @@
      }
    );
    console.log("接口完整返回值:", response); // è°ƒè¯•用:打印完整返回
    // ç¬¬ä¸€æ­¥ï¼šæ ¡éªŒæœ€å¤–层状态
    console.log("接口完整返回值:", response); // è°ƒè¯•用
    // æ ¡éªŒæŽ¥å£è¿”回状态
    if (response.data?.status) {
      ElMessage.success("平账操作成功");
      
      // ç¬¬äºŒæ­¥ï¼šè§£æžæ­£ç¡®çš„scannedDetail层级(三层data)
      const thirdLayerData = response.data.data?.data; // å…³é”®ä¿®å¤ï¼šå–第三层data
      // è§£æžè¿”回数据(保留原有打印逻辑)
      const thirdLayerData = response.data.data?.data;
      const scannedDetail = thirdLayerData?.scannedDetail;
      
      console.log("解析后的scannedDetail:", scannedDetail); // è°ƒè¯•用:打印目标数据
      console.log("解析后的scannedDetail:", scannedDetail);
      
      // ç¬¬ä¸‰æ­¥ï¼šåˆ¤æ–­æ‰“印条件
      // åˆ¤æ–­æ‰“印条件并触发打印
      if (scannedDetail?.isUnpacked && scannedDetail?.materialCodes?.length > 0) {
        // ç¡®ä¿æ‰“印组件实例存在
        if (printViewRef.value) {
          console.log("触发打印方法,参数:", scannedDetail.materialCodes);
          printViewRef.value.open(scannedDetail.materialCodes);
@@ -197,21 +142,20 @@
        ElMessage.info("无需打印:未满足拆包条件或无物料编码数据");
      }
      
      dialogVisible.value = false;
      dialogVisible.value = false; // å¹³è´¦æˆåŠŸåŽå…³é—­å¼¹çª—
    } else {
      ElMessage.error(response.data?.message || "平账操作失败");
    }
  } catch (error) {
    // å®Œå–„错误处理:区分用户取消和真实错误
    // åŒºåˆ†ç”¨æˆ·å–消和真实错误
    if (error === "cancel" || error === "close") {
      ElMessage.info("已取消平账操作");
      return;
    }
    // æ‰“印错误日志,方便排查
    console.error("平账接口调用失败:", error);
    ElMessage.error(`平账操作失败:${error.message || "网络异常"}`);
  } finally {
    loading.value = false;
    loading.value = false; // æ— è®ºæˆåŠŸå¤±è´¥ï¼Œç»“æŸåŠ è½½çŠ¶æ€
  }
};
@@ -222,103 +166,24 @@
</script>
<style scoped>
/* æ ·å¼éƒ¨åˆ†ä¸å˜ï¼Œçœç•¥é‡å¤ä»£ç  */
.reconciliation-container {
  padding: 10px 0;
}
.order-info {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
/* æ¡ç è¾“入框样式 */
.barcode-input-container {
  margin: 20px 0;
}
.info-row {
  display: flex;
  align-items: center;
}
.label {
  font-weight: 600;
  color: #606266;
  margin-right: 5px;
  min-width: 80px;
  text-align: right;
}
.value {
  color: #303133;
}
.selected-order {
  color: #409eff;
  font-weight: 600;
}
.custom-scrollbar {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.data-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  margin: 10px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  transition: all 0.3s;
}
.data-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.data-item.selected {
  border-color: #409eff;
  background-color: #f0f7ff;
}
.radio-container {
  margin-right: 12px;
  margin-top: 4px;
}
.data-detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
}
.detail-row {
  display: flex;
  align-items: center;
.barcode-input {
  width: 100%;
  font-size: 16px;
  height: 48px;
}
.empty-tip {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}
.data-item-transition-enter-from,
.data-item-transition-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
.data-item-transition-enter-active,
.data-item-transition-leave-active {
  transition: all 0.3s ease;
}
:deep(.el-radio__label) {
  display: none;
}
</style>