161 lines
4.6 KiB
Vue
161 lines
4.6 KiB
Vue
<template>
|
||
<Dialog
|
||
title="打印预览"
|
||
v-model="dialogVisible"
|
||
width="1000"
|
||
top="0%"
|
||
:before-close="(doClose) => beforeDialogClose(doClose)"
|
||
>
|
||
<el-button @click="outopen" style="float: right;margin-right: 0.5%;">取消</el-button>
|
||
<el-button @click="onPrint" type="primary" style="float: right;margin-right: 1%;">打印</el-button>
|
||
|
||
<!-- 打印预览 -->
|
||
<div class="print-wrap page" ref="print">
|
||
<div id="qrCodeContainer"></div>
|
||
</div>
|
||
<template #footer>
|
||
<!-- 【打印】 -->
|
||
<el-button @click="onPrint" type="primary">打印</el-button>
|
||
<el-button @click="outopen">取消</el-button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
// import { ref, reactive } from 'vue'
|
||
// import { betweenDay, dateFormatter, formatDate } from '@/utils/formatTime'
|
||
import QRCode from 'qrcode'
|
||
// import * as ProjectOrderApi from '@/api/biz/projectorder'
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
let clauseId = null;
|
||
const startPageNum=ref(0);
|
||
const endPageNum=ref(0);
|
||
const onPrint = () => {
|
||
// 拿到打印页面dom节点
|
||
const printNode = document.querySelector('.print-wrap')
|
||
if (!printNode) return
|
||
// 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
|
||
const newIframe: any = document.createElement('iframe')
|
||
newIframe.setAttribute(
|
||
'style',
|
||
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
|
||
)
|
||
newIframe.setAttribute('align', 'center')
|
||
document.body.appendChild(newIframe)
|
||
// 将打印页面设置为内框架内容
|
||
let doc: any = null
|
||
doc = newIframe.contentWindow.document
|
||
doc.write(`
|
||
<style type="text/css">
|
||
/* 浏览器打印基本样式 */
|
||
@page {
|
||
size: 70mm 200mm;
|
||
margin: 0;
|
||
height: 200mm;
|
||
|
||
}
|
||
@media print {
|
||
.page {
|
||
margin: 0;
|
||
display: block;
|
||
|
||
}
|
||
.qr-page {
|
||
width: 70mm;
|
||
height: 200mm;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
<div>
|
||
${printNode.innerHTML}
|
||
</div>`)
|
||
|
||
console.log(clauseId)
|
||
|
||
doc.close()
|
||
// 浏览器打印页面打开渲染
|
||
setTimeout(() => {
|
||
newIframe.contentWindow.focus()
|
||
newIframe.contentWindow.print()
|
||
document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
|
||
dialogVisible.value = false
|
||
}, 100)
|
||
// ProjectOrderApi.updatePrintStatus({clauseId:clauseId,printEmp:'',startPageNum:startPageNum.value,endPageNum:endPageNum.value})
|
||
|
||
}
|
||
// / 关闭 Dialog 前的处理逻辑
|
||
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
|
||
outopen()
|
||
}
|
||
|
||
// 页面关闭重置
|
||
const outopen = () => {
|
||
dialogVisible.value = false
|
||
}
|
||
|
||
const printCodeName = ref([])
|
||
|
||
const datavals = ref([])
|
||
/** 打开弹窗 */
|
||
const specarr: any = ref([])
|
||
const cnenList: any = ref([])
|
||
const open = async (bomCode,vals) => {
|
||
console.log("打印预览传输的信息")
|
||
specarr.value = []
|
||
//获取中英文对照表
|
||
// cnenList.value = await ProjectOrderApi.getcnenList()
|
||
console.log(vals)
|
||
datavals.value = []
|
||
printCodeName.value = []
|
||
vals.forEach((item) => {
|
||
const row = {
|
||
blueprintNo: item.blueprintNo ,
|
||
}
|
||
const newName = `${bomCode}-${item.blueprintNo}`
|
||
const row1 = {
|
||
name: newName
|
||
}
|
||
printCodeName.value.push(row1)
|
||
datavals.value.push(row)
|
||
})
|
||
|
||
dialogVisible.value = true
|
||
await Promise.all(
|
||
printCodeName.value.map(async (item) => {
|
||
const qrCodeData = await QRCode.toDataURL(item.name)
|
||
const qrCodeElement = document.getElementById('qrCodeContainer')
|
||
if (qrCodeElement) {
|
||
(qrCodeElement.innerHTML +=
|
||
`<div class="page qr-page">
|
||
<div class="qr-code-container" style="padding:0mm;font-size:15px !important;font-weight:700;position: relative; height: 200mm">
|
||
<div style="text-align:center;"> <img src="${qrCodeData}" width="100%" alt="QR Code"/></div>
|
||
<div style="margin:0 2mm;text-align:left;font-size:19px !important;" >
|
||
<span style="display:block;font-size:17px !important;">图纸编号：${item.name}</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>`)
|
||
}
|
||
})
|
||
)
|
||
}
|
||
// <p>${datavals.value[0]?.projectSubName},${datavals.value[0].spec},${datavals.value[0].sort},${datavals.value[0].amount}</p>
|
||
// <div class="qr-code-name">${item}</div>
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page {
|
||
width: 70mm;
|
||
min-height: 200mm;
|
||
margin: auto;
|
||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/*
|
||
A4的大小：21cm*29.7cm（width:794px;）。
|
||
单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
|
||
</style>
|