<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="500px"
|
:padding="15"
|
title="打印"
|
>
|
<!-- 打印专用容器 -->
|
<div id="printContainer" style="display:none">
|
<div style="text-align:center;margin-bottom:15px">
|
<VueQrcode :value="palletCode" :size="400" />
|
</div>
|
<div style="text-align:center;font-size:18px;font-weight:bold">
|
{{ palletCode }}
|
</div>
|
</div>
|
|
<!-- 预览区域 -->
|
<div id="previewContent">
|
<div style="text-align:center;margin-bottom:15px">
|
<VueQrcode :value="palletCode" :size="200" />
|
</div>
|
<div style="text-align:center;font-size:18px;font-weight:bold">
|
{{ palletCode }}
|
</div>
|
</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";
|
|
export default {
|
components: { VolBox, VueQrcode },
|
data() {
|
return {
|
showDetialBox: false,
|
palletCode: "",
|
};
|
},
|
methods: {
|
open(row) {
|
this.showDetialBox = true;
|
if (row?.palletCode) {
|
this.palletCode = row.palletCode;
|
}
|
},
|
async print() {
|
// 创建打印窗口
|
const printWindow = window.open("", "打印", "width=1200,height=800");
|
|
// 构建打印内容
|
const printContent = `
|
<html>
|
<head>
|
<style>
|
@media print {
|
body { margin: 0; padding: 20px; text-align: center; }
|
canvas { display: block; margin: 0 auto; }
|
div { margin-bottom: 15px; }
|
}
|
</style>
|
</head>
|
<body>
|
${document.getElementById("printContainer").innerHTML}
|
</body>
|
</html>
|
`;
|
|
printWindow.document.write(printContent);
|
printWindow.document.close();
|
|
// 延迟确保内容加载完成
|
setTimeout(() => {
|
printWindow.focus();
|
printWindow.print();
|
|
// 打印完成后关闭窗口并更新状态
|
printWindow.onafterprint = () => {
|
this.updatePrintStatus();
|
printWindow.close();
|
};
|
}, 500);
|
},
|
async updatePrintStatus() {
|
try {
|
const response = await this.http.post(
|
"api/palletCodeInfo/PrintStatusUp",
|
{ printCode: this.palletCode },
|
{ loadingText: "数据处理中" }
|
);
|
|
if (response.status) {
|
this.$message.success("操作成功");
|
this.$parent.refresh();
|
} else {
|
this.$message.error(response.message || "操作失败");
|
}
|
} catch (error) {
|
this.$message.error("请求失败");
|
} finally {
|
this.showDetialBox = false;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 预览区域样式 */
|
#previewContent {
|
text-align: center;
|
padding: 20px;
|
}
|
|
#previewContent canvas {
|
display: block;
|
margin: 0 auto;
|
}
|
</style>
|
|
<style>
|
/* 打印样式 */
|
@media print {
|
body {
|
margin: 0;
|
padding: 15px;
|
-webkit-print-color-adjust: exact;
|
}
|
}
|
</style>
|
