236 lines
6.2 KiB
Vue
236 lines
6.2 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>
|
|||
|
|
<printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, nextTick } from 'vue'
|
|||
|
|
import JsBarcode from 'jsbarcode'
|
|||
|
|
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
let clauseId = null;
|
|||
|
|
const startPageNum = ref(0);
|
|||
|
|
const endPageNum = ref(0);
|
|||
|
|
const printref = ref()
|
|||
|
|
const onPrint = () => {
|
|||
|
|
printref.value.open(cnenList.value)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 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 {
|
|||
|
|
// width: 100%;
|
|||
|
|
// margin-bottom: 2mm;
|
|||
|
|
// position: relative;
|
|||
|
|
// }
|
|||
|
|
// .code-line span {
|
|||
|
|
// display: inline-block;
|
|||
|
|
// width: 100%;
|
|||
|
|
// border-bottom: 1px solid white;
|
|||
|
|
// padding-bottom: 0.2mm;
|
|||
|
|
// margin-bottom: 0.5mm;
|
|||
|
|
// }
|
|||
|
|
// .barcode-container {
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// margin: 1mm 0;
|
|||
|
|
// }
|
|||
|
|
// .barcode {
|
|||
|
|
// width: 20mm;
|
|||
|
|
// height: 7mm;
|
|||
|
|
// }
|
|||
|
|
// .spec-line, .name-line, .location-line {
|
|||
|
|
// margin-bottom: 1mm;
|
|||
|
|
// font-size: 11px;
|
|||
|
|
// }
|
|||
|
|
// .location-line {
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
// }
|
|||
|
|
// </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 (vals) => {
|
|||
|
|
cnenList.value = vals;
|
|||
|
|
specarr.value = []
|
|||
|
|
console.log(vals)
|
|||
|
|
datavals.value = []
|
|||
|
|
printCodeName.value = []
|
|||
|
|
|
|||
|
|
vals.forEach((item) => {
|
|||
|
|
const row1 = {
|
|||
|
|
code: item.matCode,
|
|||
|
|
name: item.matName == null ? '' : item.matName,
|
|||
|
|
spec: item.spec == null ? '' : item.spec,
|
|||
|
|
rg: item.rgName == null ? '' : item.rgName,
|
|||
|
|
pg: item.pnName == null ? '' : item.pnName,
|
|||
|
|
//amount: item.amount == null ? '' : item.amount
|
|||
|
|
}
|
|||
|
|
printCodeName.value.push(row1)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
|
|||
|
|
// 使用nextTick确保DOM更新完成
|
|||
|
|
await nextTick()
|
|||
|
|
|
|||
|
|
const qrCodeElement = document.getElementById('qrCodeContainer1')
|
|||
|
|
if (!qrCodeElement) return
|
|||
|
|
|
|||
|
|
// 清空容器
|
|||
|
|
qrCodeElement.innerHTML = ''
|
|||
|
|
var i = 0;
|
|||
|
|
// 生成打印内容
|
|||
|
|
printCodeName.value.forEach((item) => {
|
|||
|
|
// 创建canvas元素用于生成条形码
|
|||
|
|
const canvas = document.createElement('canvas')
|
|||
|
|
JsBarcode(canvas, item.code, {
|
|||
|
|
width: 2,
|
|||
|
|
height: 40,
|
|||
|
|
displayValue: false,
|
|||
|
|
fontSize: 10
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const barcodeSrc = canvas.toDataURL('image/png')
|
|||
|
|
|
|||
|
|
qrCodeElement.innerHTML +=
|
|||
|
|
`<div class="page qr-page">
|
|||
|
|
<div class="code-line">
|
|||
|
|
<span>物料编码：${item.code}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="barcode-container">
|
|||
|
|
<img class="barcode" src="${barcodeSrc}" alt="Barcode">
|
|||
|
|
</div>
|
|||
|
|
<div class="spec-line">规格: ${item.spec}</div>
|
|||
|
|
<div class="name-line">简称：${item.name}</div>
|
|||
|
|
<div class="location-line">
|
|||
|
|
<span>库区：${item.rg}</span>
|
|||
|
|
<span>库位：${item.pg}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>`
|
|||
|
|
if(vals.length > 1 && i<=vals.length - 1){
|
|||
|
|
qrCodeElement.innerHTML +=
|
|||
|
|
`<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
|
|||
|
|
|
|||
|
|
</div>`
|
|||
|
|
}
|
|||
|
|
i++;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({ open })
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
/* 预览样式 - 仅用于屏幕显示 */
|
|||
|
|
.page {
|
|||
|
|
width: 60mm;
|
|||
|
|
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 {
|
|||
|
|
border-bottom: 1px solid transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 确保打印样式优先 */
|
|||
|
|
@media print {
|
|||
|
|
.page {
|
|||
|
|
background-color: black !important;
|
|||
|
|
color: white !important;
|
|||
|
|
|
|||
|
|
.code-line span {
|
|||
|
|
border-bottom: 1px solid white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|