<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="400px"
|
: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"
|
>
|
<!-- 使用 SVG 来显示条形码 -->
|
<svg id="barcode"></svg>
|
</div>
|
</div>
|
<div id="palletcode">
|
<span
|
style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
|
>
|
<!-- <div>物料编号：{{ materielCode }}</div>
|
<div>物料名称：{{ materielName }}</div> -->
|
</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 JsBarcode from "jsbarcode";
|
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
showDetialBox: false,
|
row: null,
|
materielCode: "",
|
materielName: "",
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
|
// 使用 $nextTick 确保 DOM 已经更新
|
this.$nextTick(() => {
|
if (row && row.materielCode) {
|
this.materielCode = row.materielCode;
|
this.materielName = row.materielName;
|
|
// 生成条形码
|
this.generateBarcode(row.materielCode);
|
}
|
});
|
},
|
|
generateBarcode(code) {
|
try {
|
JsBarcode("#barcode", code, {
|
format: "CODE128", // 条形码格式
|
width: 2, // 条码宽度
|
height: 80, // 条码高度
|
displayValue: true, // 是否显示文字
|
text: code, // 显示的文字
|
fontOptions: "bold",
|
fontSize: 14,
|
margin: 10,
|
background: "#ffffff",
|
lineColor: "#000000"
|
});
|
} catch (error) {
|
console.error("生成条形码失败:", error);
|
}
|
},
|
|
print() {
|
let printContent = document.getElementById("printContent");
|
let palletcode = document.getElementById("palletcode");
|
|
var printWindow = window.open("", "_blank");
|
|
// 构建打印内容
|
let printHTML = `
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>打印条形码</title>
|
<style>
|
body {
|
margin: 0;
|
padding: 20px;
|
font-family: Arial, sans-serif;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.barcode-container {
|
margin-bottom: 20px;
|
}
|
.text-info {
|
text-align: center;
|
font-size: 14px;
|
line-height: 1.5;
|
}
|
svg {
|
display: block;
|
margin: 0 auto;
|
}
|
@media print {
|
body { margin: 0; padding: 10px; }
|
}
|
</style>
|
</head>
|
<body>
|
<div class="barcode-container">${printContent.innerHTML}</div>
|
<div class="text-info">${palletcode.innerHTML}</div>
|
</body>
|
</html>
|
`;
|
|
printWindow.document.write(printHTML);
|
printWindow.document.close();
|
|
// 等待内容加载完成后打印
|
printWindow.onload = function() {
|
printWindow.focus();
|
printWindow.print();
|
// 打印后自动关闭窗口（可选）
|
printWindow.close();
|
};
|
},
|
},
|
};
|
</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;
|
}
|
|
#barcode {
|
display: block;
|
margin: auto;
|
}
|
</style>
|
