88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
||
<el-dialog :model-value="props.showes" @close="closeFun" width="600">
|
||
<div id="printTemplate" class="print-hide">
|
||
<div class="typefaceBox" ref="typefaceBoxRef">
|
||
<VueQr :text="props.data.tiaoMa" :size="200"></VueQr>
|
||
<div class="titleList">
|
||
<div class="itemText">供应商：{{ props.data.supplierName }}</div>
|
||
<div class="itemText">物料编码：{{ props.data.materialCode }}</div>
|
||
<div class="itemText">包装数量：{{ props.data.qty }}</div>
|
||
<div class="itemText">美塞斯批号：{{ props.data.mssSupplierLot }}</div>
|
||
<div class="itemText">供应商批号：{{ props.data.fSupplierLot }}</div>
|
||
<div class="itemText">采购订单号：</div>
|
||
<div class="itemText">送货日期：{{ props.data.deliveryDate }}</div>
|
||
<div class="itemText">收料通知单单号：{{ props.data.fBillNo }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btnList">
|
||
<el-button type="primary" @click="handlePrint">打印</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { defineProps, reactive, ref, defineEmits } from 'vue';
|
||
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
|
||
import printJS from 'print-js';
|
||
import html2canvas from "html2canvas";
|
||
const typefaceBoxRef = ref();
|
||
const emits = defineEmits(['close']);
|
||
const props = defineProps({
|
||
showes: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
});
|
||
const state = reactive({
|
||
snapshotUrl: '',
|
||
});
|
||
const handlePrint = async () => {
|
||
const canvas = await html2canvas(typefaceBoxRef.value, {
|
||
allowTaint: true, // 允许跨域图片
|
||
useCORS: true, // 使用 CORS 加载图片
|
||
scale: 2, // 提高截图分辨率
|
||
width: typefaceBoxRef.value.clientWidth,
|
||
height: typefaceBoxRef.value.clientHeight,
|
||
});
|
||
state.snapshotUrl = canvas.toDataURL('image/png');
|
||
// 获取打印模板的DOM元素
|
||
const printElement = document.getElementById('printTemplate');
|
||
if (printElement) {
|
||
printJS({
|
||
printable: state.snapshotUrl,
|
||
type: 'image',
|
||
style: `
|
||
@page { size: 100mm 50mm landscapes; margin: 0; }
|
||
`,
|
||
});
|
||
}
|
||
};
|
||
|
||
const closeFun = () => {
|
||
emits('close');
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.typefaceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 64px 0;
|
||
.titleList {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
margin-top: 26px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style>
|