82 lines
2.0 KiB
Vue
82 lines
2.0 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, nextTick, defineEmits } from 'vue';
|
|||
|
|
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
|
|||
|
|
import printJS from 'print-js';
|
|||
|
|
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 = () => {
|
|||
|
|
// 获取打印模板的DOM元素
|
|||
|
|
const printElement = document.getElementById('printTemplate');
|
|||
|
|
if (printElement) {
|
|||
|
|
printJS({
|
|||
|
|
printable: printElement,
|
|||
|
|
type: 'html',
|
|||
|
|
targetStyles: ['*'],
|
|||
|
|
style: `
|
|||
|
|
@page { size: 100mm 52mm 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>
|