<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="300px"
|
: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">
|
<VueQrcode id="qrcode" :value="Code" :size="200"></VueQrcode>
|
</div>
|
</div>
|
<div id="palletcode">
|
<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>
|
</template>
|
</vol-box>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import VueQrcode from "vue-qrcode";
|
import QRCode from "qrcode";
|
export default {
|
components: { VolBox, VueQrcode },
|
data() {
|
return {
|
showDetialBox: false,
|
row: null,
|
qrcodeDataURL: "",
|
Code: "",
|
materielCode: "",
|
lotNo: "",
|
purchaseOrderNo: "",
|
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.productionDate = formatDate(row.productionDate);
|
this.effectiveDate = formatDate(row.effectiveDate);
|
// 赋值decimal类型物料长度，直接取后端值（null/undefined/数值都兼容）
|
this.materielLength = row.materielLength;
|
}
|
// 核心：拼接二维码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() {
|
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();
|
},
|
// 重置表单，避免多次打开弹窗缓存上一次数据
|
resetForm() {
|
this.materielCode = "";
|
this.lotNo = "";
|
this.purchaseOrderNo = "";
|
this.quantity = "";
|
this.productionDate = "";
|
this.effectiveDate = "";
|
this.materielLength = null;
|
this.Code = "";
|
},
|
},
|
};
|
// 日期格式化工具函数，加空值判断避免报错
|
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")}`;
|
}
|
</script>
|
|
<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>
|
.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>
|
