252 lines
6.6 KiB
Vue
252 lines
6.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-wrap1 page" ref="print">
|
||
|
|
<div id="qrCodeContainer1"></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 QRCode from 'qrcode'
|
||
|
|
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
let clauseId = null;
|
||
|
|
const startPageNum = ref(0);
|
||
|
|
const endPageNum = ref(0);
|
||
|
|
|
||
|
|
const onPrint = () => {
|
||
|
|
const printNode = document.querySelector('.print-wrap1')
|
||
|
|
if (!printNode) return
|
||
|
|
|
||
|
|
const newIframe: any = document.createElement('iframe')
|
||
|
|
newIframe.setAttribute(
|
||
|
|
'style',
|
||
|
|
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
|
||
|
|
)
|
||
|
|
document.body.appendChild(newIframe)
|
||
|
|
|
||
|
|
const doc = newIframe.contentWindow.document
|
||
|
|
// 添加基础样式
|
||
|
|
doc.write(`
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
@page {
|
||
|
|
size: 45mm 30mm;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: black !important;
|
||
|
|
color: white !important;
|
||
|
|
-webkit-print-color-adjust: exact;
|
||
|
|
print-color-adjust: exact;
|
||
|
|
}
|
||
|
|
.qr-page {
|
||
|
|
width: 45mm;
|
||
|
|
height: 30mm;
|
||
|
|
padding: 2mm;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-family: monospace;
|
||
|
|
position: relative;
|
||
|
|
background-color: black !important;
|
||
|
|
color: white !important;
|
||
|
|
}
|
||
|
|
.code-line, .name-line {
|
||
|
|
font-size: 11px;
|
||
|
|
margin-bottom: 1mm;
|
||
|
|
}
|
||
|
|
.code-line span {
|
||
|
|
display: inline-block;
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid white;
|
||
|
|
padding-bottom: 0.2mm;
|
||
|
|
}
|
||
|
|
.name-line {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.name-label {
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-right: 1mm;
|
||
|
|
}
|
||
|
|
.name-underline {
|
||
|
|
flex-grow: 1;
|
||
|
|
border-bottom: 1px solid white;
|
||
|
|
height: 1em;
|
||
|
|
margin-left: 1mm;
|
||
|
|
}
|
||
|
|
.bottom-section {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2mm;
|
||
|
|
left: 2mm;
|
||
|
|
right: 2mm;
|
||
|
|
height: 17mm;
|
||
|
|
}
|
||
|
|
.qr-container {
|
||
|
|
width: 17mm;
|
||
|
|
height: 17mm;
|
||
|
|
margin-left: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.qr-code {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.quantity-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start;
|
||
|
|
width: 13mm;
|
||
|
|
margin-right: 1mm;
|
||
|
|
}
|
||
|
|
.quantity {
|
||
|
|
font-size: 11px;
|
||
|
|
margin-bottom: 0.5mm;
|
||
|
|
margin-top:2mm;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.timestamp {
|
||
|
|
font-size: 5px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-top: auto;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
${printNode.innerHTML}
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
`)
|
||
|
|
doc.close()
|
||
|
|
dialogVisible.value = false
|
||
|
|
setTimeout(() => {
|
||
|
|
newIframe.contentWindow.focus()
|
||
|
|
newIframe.contentWindow.print()
|
||
|
|
document.body.removeChild(newIframe)
|
||
|
|
dialogVisible.value = false
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
|
||
|
|
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
|
||
|
|
outopen()
|
||
|
|
}
|
||
|
|
|
||
|
|
const outopen = () => {
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const printCodeName = ref([])
|
||
|
|
const datavals = ref([])
|
||
|
|
const specarr = ref([])
|
||
|
|
const cnenList = ref([])
|
||
|
|
|
||
|
|
const open = async (bomCode, vals) => {
|
||
|
|
specarr.value = []
|
||
|
|
console.log(vals)
|
||
|
|
datavals.value = []
|
||
|
|
printCodeName.value = []
|
||
|
|
|
||
|
|
vals.forEach((item) => {
|
||
|
|
const row = {
|
||
|
|
blueprintNo: item.blueprintNo,
|
||
|
|
}
|
||
|
|
const newName = `${bomCode}-${item.blueprintNo}`
|
||
|
|
const row1 = {
|
||
|
|
code: newName,
|
||
|
|
name: item.materialName == null ? '' : item.materialName,
|
||
|
|
amount: item.amount == null ? '' : item.amount
|
||
|
|
}
|
||
|
|
printCodeName.value.push(row1)
|
||
|
|
datavals.value.push(row)
|
||
|
|
})
|
||
|
|
|
||
|
|
dialogVisible.value = true
|
||
|
|
const currentDate = new Date()
|
||
|
|
const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
|
||
|
|
|
||
|
|
await Promise.all(
|
||
|
|
printCodeName.value.map(async (item) => {
|
||
|
|
const qrCodeData = await QRCode.toDataURL(item.name)
|
||
|
|
const qrCodeElement = document.getElementById('qrCodeContainer1')
|
||
|
|
if (qrCodeElement) {
|
||
|
|
(qrCodeElement.innerHTML +=
|
||
|
|
`<div class="page qr-page">
|
||
|
|
<div class="code-line">
|
||
|
|
<span>${item.code}</span>
|
||
|
|
</div>
|
||
|
|
<div class="name-line">
|
||
|
|
<span class="name-label">名称:</span>
|
||
|
|
<span class="name-underline">${item.name}</span>
|
||
|
|
</div>
|
||
|
|
<div class="bottom-section">
|
||
|
|
<div class="quantity-container">
|
||
|
|
<span class="quantity">数量: ${item.amount}</span>
|
||
|
|
<span class="timestamp">${formattedDate}</span>
|
||
|
|
</div>
|
||
|
|
<div class="qr-container">
|
||
|
|
<img class="qr-code" src="${qrCodeData}" alt="QR Code">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
).then(res => {
|
||
|
|
onPrint()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
/* 预览样式 - 仅用于屏幕显示 */
|
||
|
|
.page {
|
||
|
|
width: 45mm;
|
||
|
|
min-height: 30mm;
|
||
|
|
margin: auto;
|
||
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
padding: 2mm;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
/* 临时隐藏下划线，打印时会显示 */
|
||
|
|
.code-line span, .name-underline {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 确保打印样式优先 */
|
||
|
|
@media print {
|
||
|
|
.page {
|
||
|
|
background-color: black !important;
|
||
|
|
color: white !important;
|
||
|
|
|
||
|
|
.code-line span, .name-underline {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|