<template>
|
<div id="goods-template" class="print-hide">
|
<div v-for="i in goods" :key="i.id" style="width:370px;height: 200px; display: flex;">
|
<div style="width: 250px;">
|
<div style="line-height: 30px;">物料编号：{{ i.goodsCode }}</div>
|
<div style="line-height: 30px;">物料名称：{{ i.goodsName }}</div>
|
<div style="line-height: 30px;">物料型号：{{ i.goodsSpec }}</div>
|
<div style="line-height: 30px;">物料来源：{{ i.goodsSource }}</div>
|
<div style="line-height: 30px;">物料类型：{{ i.goodsType }}</div>
|
</div>
|
<div style="width:120px;">
|
<qrcode-vue :size="120" :margin="0" :auto-color="true" :dot-scale="1" :text="i.qrCodeNo" />
|
<div style="text-align: center;line-height: 40px;">{{ i.qrCodeNo }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import printJS from "print-js";
|
import QrcodeVue from 'vue-qr/src/packages/vue-qr.vue'
|
|
export default {
|
components: {
|
QrcodeVue,
|
},
|
props: {
|
goods: {
|
type: Object,
|
default: () => ([]),
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.handlePrint();
|
}, 500);
|
},
|
beforeUnmount() {
|
clearTimeout()
|
},
|
methods: {
|
handlePrint() {
|
// 获取打印模板的DOM元素
|
const printElement = document.getElementById("goods-template");
|
console.log(printElement);
|
if (printElement) {
|
// 显示打印模板，以便能够打印
|
printElement.classList.remove("print-hide");
|
// 使用vue-printjs打印模板内容
|
printJS({
|
printable: printElement,
|
type: "html",
|
scanStyles:false,
|
error: (err) => {
|
console.log("err", err);
|
},
|
});
|
// 打印完成后隐藏打印模板
|
printElement.classList.add("print-hide");
|
//向父组件发送打印完成事件
|
this.$emit("print-complete");
|
}
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.print-hide {
|
display: block;
|
/* 在屏幕上隐藏打印模板 */
|
}
|
</style>
|
