PP平库功能上线，PDA优化，部分问题点优化

helongyang

2026-03-31 8fcd7a67e4391a5f1fbdb590c2a3f913aeb2a0a0

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/extension/basic/extend/materielcodeprintView.vue

@@ -7,38 +7,35 @@
      :padding="15"
      title="打印"
    >
      <div
        id="printContent"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
      <div id="printContent" style="display: flex; justify-content: center; align-items: center">
        <div style="display: flex; justify-content: center; align-items: center">
          <VueQrcode id="qrcode" :value="Code" :size="200"></VueQrcode>
        </div>
      </div>
      <div id="palletcode">
        <span
          style="display: flex; justify-content: center; align-items: center"
        <span style="display: flex; justify-content: center; align-items: center"
          >物料编码:{{ materielCode }}</span
        >
        <!-- decimal有值才显示物料长度，无值则隐藏 -->
        <span
          v-if="isHasMaterielLength"
          style="display: flex; justify-content: center; align-items: center; margin-top: 8px"
          >物料长度:{{ materielLength }}</span
        >
      </div>

      <template #footer>
        <el-button type="primary" size="small" @click="print()">打印</el-button>
        <el-button type="danger" size="small" @click="showDetialBox = false"
          >关闭</el-button
        >
        <el-button type="danger" size="small" @click="showDetialBox = false">关闭</el-button>
      </template>
    </vol-box>
  </div>
</template>
  
  <script>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VueQrcode from "vue-qrcode";
import QRCode from "qrcode";
import { da } from "element-plus/es/locales.mjs";
export default {
  components: { VolBox, VueQrcode },
  data() {
@@ -53,102 +50,131 @@
      quantity: "",
      productionDate: "",
      effectiveDate: "",
      materielLength: null, // decimal类型初始化为null，匹配后端数值类型
    };
  },
  computed: {
    // è®¡ç®—属性：统一判断是否有物料长度（decimal有有效数值），模板和逻辑复用
    isHasMaterielLength() {
      return this.materielLength !== null && this.materielLength !== undefined&& this.materielLength !== 0;
    },
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      // æ¯æ¬¡æ‰“开重置所有值，避免缓存
      this.resetForm();
      if (row && row.materielCode) {
        this.materielCode = row.materielCode;
        this.lotNo = row.lotNo;
        this.purchaseOrderNo = row.purchaseOrderNo;
        this.quantity = row.quantity;
        // èµ‹å€¼åŸºç¡€å­—段
        this.materielCode = row.materielCode || "";
        this.lotNo = row.lotNo || "";
        this.purchaseOrderNo = row.purchaseOrderNo || "";
        this.quantity = row.quantity || "";
        this.productionDate = formatDate(row.productionDate);
        this.effectiveDate = formatDate(row.effectiveDate);
        // èµ‹å€¼decimal类型物料长度，直接取后端值（null/undefined/数值都兼容）
        this.materielLength = row.materielLength;
      }
      this.Code =
        "M:" +
        this.materielCode +
        ",BS:" +
        this.lotNo +
        ",DM:" +
        this.productionDate +
        ",DE:" +
        this.effectiveDate +
        ",Q:" +
        this.quantity +
        ",PO:" +
        this.purchaseOrderNo;
      // æ ¸å¿ƒï¼šæ‹¼æŽ¥äºŒç»´ç Code，无长度则完全不出现,ML
      this.Code = this.spliceQrCode();
    },
    // æŠ½ç¦»äºŒç»´ç æ‹¼æŽ¥é€»è¾‘，代码更清晰
    spliceQrCode() {
      // åŸºç¡€å›ºå®šæ‹¼æŽ¥éƒ¨åˆ†
      let baseStr = [
        `M:${this.materielCode}`,
        `BS:${this.lotNo}`,
        `DM:${this.productionDate}`,
        `DE:${this.effectiveDate}`,
        `Q:${this.quantity}`,
        `PO:${this.purchaseOrderNo}`,
      ].join(",");
      // ä»…当有物料长度时，追加,ML:数值；无值则直接返回基础串
      if (this.isHasMaterielLength) {
        baseStr += `,ML:${this.materielLength}`;
      }
      return baseStr;
    },
    print() {
      let printContent = document.getElementById("printContent");
      let palletcode = document.getElementById("palletcode");
      var printWindow = window.open("", "");
      printWindow.document.write(printContent.innerHTML);
      printWindow.document.write(palletcode.innerHTML);
      const printContent = document.getElementById("printContent");
      const palletcode = document.getElementById("palletcode");
      const printWindow = window.open("", "");
      // å®Œå–„打印页面结构，避免样式错乱
      printWindow.document.write(`
        <html>
          <head><meta charset="utf-8"><title>打印</title></head>
          <body style="text-align: center; padding: 20px;">
            ${printContent.innerHTML}
            ${palletcode.innerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },
    formatDate(dateStr) {
      let date = new Date(dateStr);
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, "0");
      let day = String(date.getDate()).padStart(2, "0");
      return year + "-" + month + "-" + day;
    // é‡ç½®è¡¨å•ï¼Œé¿å…å¤šæ¬¡æ‰“开弹窗缓存上一次数据
    resetForm() {
      this.materielCode = "";
      this.lotNo = "";
      this.purchaseOrderNo = "";
      this.quantity = "";
      this.productionDate = "";
      this.effectiveDate = "";
      this.materielLength = null;
      this.Code = "";
    },
  },

  created() {},
};
// æ—¥æœŸæ ¼å¼åŒ–工具函数，加空值判断避免报错
function formatDate(dateStr) {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")}`;
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
}
</script>
  
  <style scoped>

<style scoped>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.content-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
  <style>

<style>
.el-table .warning-row {
  background: #e6a23c;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .error-row {
  background: #f56c6c;
}

canvas {
  display: block;
  margin: auto;
}
/* æ‰“印样式优化，适配打印机 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
}
</style>