<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
width="400px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<div style="display: flex;flex-direction: column;align-items: flex-end">
|
<el-button type="primary" style="margin-bottom: 5px" @click="printCode">打印</el-button>
|
</div>
|
<el-card style="max-width: 480px">
|
<div :id="state.form.code">
|
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
<div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{title}}</div>
|
<vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code"></vue-qr>
|
<div style="font-size:10px;margin-top: 2px">{{state.form.code}}</div>
|
</div>
|
</div>
|
<!-- <div :id="state.form.code">-->
|
<!-- <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">-->
|
<!-- <span style="font-size:14px;margin-bottom: 2px">{{title}}</span>-->
|
<!-- <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code" ></vue-qr>-->
|
<!-- <span style="font-size:10px;margin-top: 2px">{{state.form.code}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</el-card>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from 'vue'
|
import {ElMessage} from "element-plus";
|
import VueQr from "vue-qr/src/packages/vue-qr.vue";
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
|
const state = reactive({
|
})
|
|
|
const openDialog = async (type,value) => {
|
if(type == 'pro'){
|
title.value = value.productBasic.name + '—' + value.productBasic.productSn
|
}else {
|
title.value = value.hazmatBasic.name + '—' + value.hazmatBasic.productSn
|
}
|
|
state.form = JSON.parse(JSON.stringify(value));
|
dialogVisible.value = true;
|
}
|
const handleClose = () => {
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const printCode = () => {
|
let data = []
|
data = [state.form]
|
let qrCodes=''
|
for(let index in data){
|
console.log(index,'index')
|
qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
|
}
|
const printContent=document.createElement('div')
|
printContent.innerHTML=qrCodes
|
|
//创建一个新的隐藏的iframe元素
|
const printFrame =document.createElement('iframe')
|
printFrame.style.display='none'
|
document.body.appendChild(printFrame)
|
|
const printDocument=printFrame.contentWindow.document
|
printDocument.open()
|
printDocument.write(`
|
<html>
|
<head>
|
<title>Print</title>
|
<style>
|
@media print {
|
.page-break { page-break-after:always;} /* 定义分页符格式*/
|
.centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
|
@page { size:50mm 40mm;margin:0mm; }
|
.changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
|
}
|
</style>
|
</head>
|
<body style='margin:0;padding:0;'>${printContent.innerHTML}</body>
|
</html>
|
`)
|
printDocument.close()
|
let ct = document.getElementById('codeTitle').offsetWidth
|
console.log('ct',ct)
|
//在打印窗口中调用打印功能
|
// debugger
|
// if(ct >= 180) {
|
|
// }else {
|
//
|
// printFrame.contentWindow.document.body.style.zoom = '100%'
|
// }
|
|
|
printFrame.contentWindow.print()
|
//移除隐藏的iframe元素
|
document.body.removeChild(printFrame)
|
// handleClose()
|
}
|
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
