<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="300px"
|
:padding="15"
|
title="打印"
|
>
|
<!-- 条形码容器 -->
|
<div id="printContent" style="text-align: center;">
|
<div id="barcodeContainer" style="width: 200px; margin: 0 auto;"></div>
|
</div>
|
|
<!-- 编码文本 -->
|
<div id="palletcode" style="text-align: center; margin-top: 15px; font-size: 16px;">
|
{{ palletCode }}
|
</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 JsBarcode from "jsbarcode";
|
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
showDetialBox: false,
|
palletCode: "",
|
row: null
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
if (row && row.palletCode) {
|
this.palletCode = row.palletCode;
|
// 等待DOM渲染完成后生成条形码
|
this.$nextTick(() => {
|
this.generateBarcode();
|
});
|
}
|
},
|
|
generateBarcode() {
|
const container = document.getElementById('barcodeContainer');
|
if (!container) {
|
this.$message.error("条形码容器不存在");
|
return;
|
}
|
|
// 清空容器并生成新的条形码
|
container.innerHTML = '';
|
const canvas = document.createElement('canvas');
|
container.appendChild(canvas);
|
|
try {
|
JsBarcode(canvas, this.palletCode, {
|
format: 'CODE128',
|
width: 2,
|
height: 100,
|
displayValue: false,
|
margin: 10,
|
renderer: 'canvas'
|
});
|
} catch (error) {
|
this.$message.error(`条形码生成失败：${error.message}`);
|
}
|
},
|
|
print() {
|
// 获取条形码Canvas元素
|
const barcodeCanvas = document.querySelector('#barcodeContainer canvas');
|
if (!barcodeCanvas) {
|
this.$message.error("未找到条形码图像，请重试");
|
return;
|
}
|
|
// 将Canvas转换为图片URL（关键修复：解决打印窗口中Canvas渲染问题）
|
const barcodeDataUrl = barcodeCanvas.toDataURL('image/png');
|
|
// 获取文本内容
|
const palletcodeText = document.getElementById("palletcode").innerText;
|
|
// 打开打印窗口并写入内容
|
const printWindow = window.open("", "_blank");
|
printWindow.document.write(`
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>打印条形码</title>
|
<style>
|
body {
|
margin: 0;
|
padding: 20px;
|
text-align: center;
|
}
|
.barcode-image {
|
max-width: 100%;
|
height: auto;
|
margin: 0 auto;
|
}
|
.code-text {
|
margin-top: 15px;
|
font-size: 16px;
|
font-family: Arial, sans-serif;
|
}
|
</style>
|
</head>
|
<body>
|
<!-- 使用图片代替Canvas，确保打印兼容性 -->
|
<img src="${barcodeDataUrl}" class="barcode-image" alt="条形码">
|
<div class="code-text">${palletcodeText}</div>
|
</body>
|
</html>
|
`);
|
|
printWindow.document.close();
|
printWindow.focus();
|
|
// 等待图像加载完成后再打印（关键修复：解决图像未加载的问题）
|
const imgElement = printWindow.document.querySelector('.barcode-image');
|
imgElement.onload = () => {
|
setTimeout(() => {
|
printWindow.print();
|
printWindow.close();
|
|
|
// 调用API更新打印状态
|
this.updatePrintStatus();
|
}, 200); // 增加延迟确保图像完全渲染
|
};
|
},
|
|
updatePrintStatus() {
|
console.log(this.palletCode)
|
this.http
|
.post("api/Dt_PalletInfo/PrintStatusUp?printCode="+this.palletCode , null, "数据处理中")
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("打印成功");
|
this.$parent.refresh();
|
this.showDetialBox = false;
|
})
|
.catch(() => {
|
this.$message.error("更新打印状态失败");
|
});
|
}
|
}
|
};
|
</script>
|
