二维码生成
This commit is contained in:
Ledo
parent
2db6477093
commit
0b4d4d8cad
@ -51,6 +51,7 @@
|
||||
"element-plus": "2.4.2",
|
||||
"fast-xml-parser": "^4.3.2",
|
||||
"highlight.js": "^11.9.0",
|
||||
"jsbarcode": "^3.12.1",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"min-dash": "^4.1.1",
|
||||
|
||||
@ -6,156 +6,138 @@
|
||||
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>
|
||||
<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>
|
||||
<printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
|
||||
</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) // 弹窗的是否展示
|
||||
import printFinalDialog from './printFinalDialog.vue';
|
||||
const dialogVisible = ref(false)
|
||||
let clauseId = null;
|
||||
const startPageNum=ref(0);
|
||||
const endPageNum=ref(0);
|
||||
const startPageNum = ref(0);
|
||||
const endPageNum = ref(0);
|
||||
const printref = ref()
|
||||
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;
|
||||
printref.value.open(cnenList.value)
|
||||
|
||||
}
|
||||
@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 (vals) => {
|
||||
console.log("打印预览传输的信息")
|
||||
console.log(vals)
|
||||
const specarr = ref([])
|
||||
const cnenList = ref([])
|
||||
const bomCodes = ref('')
|
||||
|
||||
|
||||
|
||||
const open = async ( vals) => {
|
||||
cnenList.value = vals;
|
||||
specarr.value = []
|
||||
//获取中英文对照表
|
||||
// cnenList.value = await ProjectOrderApi.getcnenList()
|
||||
console.log(vals)
|
||||
datavals.value = []
|
||||
printCodeName.value = []
|
||||
|
||||
vals.forEach((item) => {
|
||||
const row = {
|
||||
projectSubShortName: item.projectSubShortName ,
|
||||
}
|
||||
const newName = `${item.projectSubShortName}`
|
||||
|
||||
const row1 = {
|
||||
name: newName
|
||||
code: item.projectSubCode,
|
||||
name: item.name == null ? '' : item.name,
|
||||
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')}`
|
||||
var i = 0;
|
||||
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>
|
||||
(qrCodeElement.innerHTML +=
|
||||
`<div style="width: 90mm; height: 60mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;">
|
||||
<div style="font-size: 11px; margin-bottom: 1mm;">
|
||||
<span style="display: inline-block; width: 100%; border-bottom: 1px solid white; padding-bottom: 0.2mm;">${item.code}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="white-space: nowrap; margin-right: 1mm;">名称:</span>
|
||||
<span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span>
|
||||
</div>
|
||||
<div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
|
||||
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">数量: ${item.amount}</span>
|
||||
<span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
|
||||
</div>
|
||||
<div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
|
||||
<img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
|
||||
qrCodeElement.innerHTML +=
|
||||
`<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
|
||||
|
||||
</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 方法，用于打开弹窗
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 预览样式 - 仅用于屏幕显示 */
|
||||
.page {
|
||||
width: 70mm;
|
||||
min-height: 200mm;
|
||||
width: 100mm;
|
||||
min-height: 60mm;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
A4的大小：21cm*29.7cm（width:794px;）。
|
||||
单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
|
||||
/* 确保打印样式优先 */
|
||||
@media print {
|
||||
.page {
|
||||
background-color: black !important;
|
||||
color: white !important;
|
||||
|
||||
.code-line span, .name-underline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -0,0 +1,248 @@
|
||||
<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 ( vals) => {
|
||||
cnenList.value = vals;
|
||||
specarr.value = []
|
||||
console.log(vals)
|
||||
datavals.value = []
|
||||
printCodeName.value = []
|
||||
|
||||
vals.forEach((item) => {
|
||||
|
||||
const row1 = {
|
||||
code: item.projectSubCode,
|
||||
name: item.name == null ? '' : item.name,
|
||||
amount: item.amount == null ? '' : item.amount
|
||||
}
|
||||
printCodeName.value.push(row1)
|
||||
})
|
||||
|
||||
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>
|
||||
@ -6,155 +6,141 @@
|
||||
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>
|
||||
<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>
|
||||
<printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
|
||||
</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) // 弹窗的是否展示
|
||||
import printFinalDialog from './printFinalDialog.vue';
|
||||
const dialogVisible = ref(false)
|
||||
let clauseId = null;
|
||||
const startPageNum=ref(0);
|
||||
const endPageNum=ref(0);
|
||||
const startPageNum = ref(0);
|
||||
const endPageNum = ref(0);
|
||||
const printref = ref()
|
||||
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;
|
||||
printref.value.open(bomCodes.value,cnenList.value)
|
||||
|
||||
}
|
||||
@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("打印预览传输的信息")
|
||||
const specarr = ref([])
|
||||
const cnenList = ref([])
|
||||
const bomCodes = ref('')
|
||||
|
||||
|
||||
|
||||
const open = async (bomCode, vals) => {
|
||||
cnenList.value = vals;
|
||||
bomCodes.value = bomCode;
|
||||
specarr.value = []
|
||||
//获取中英文对照表
|
||||
// cnenList.value = await ProjectOrderApi.getcnenList()
|
||||
console.log(vals)
|
||||
datavals.value = []
|
||||
printCodeName.value = []
|
||||
|
||||
vals.forEach((item) => {
|
||||
const row = {
|
||||
blueprintNo: item.blueprintNo ,
|
||||
blueprintNo: item.blueprintNo,
|
||||
}
|
||||
const newName = `${bomCode}-${item.blueprintNo}`
|
||||
const row1 = {
|
||||
name: newName
|
||||
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')}`
|
||||
var i = 0;
|
||||
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>
|
||||
(qrCodeElement.innerHTML +=
|
||||
`<div style="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;">
|
||||
<div style="font-size: 11px; margin-bottom: 1mm;">
|
||||
<span style="display: inline-block; width: 100%; border-bottom: 1px solid white; padding-bottom: 0.2mm;">${item.code}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="white-space: nowrap; margin-right: 1mm;">名称:</span>
|
||||
<span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span>
|
||||
</div>
|
||||
<div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 13mm; margin-right: 1mm;">
|
||||
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">数量: ${item.amount}</span>
|
||||
<span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
|
||||
</div>
|
||||
<div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
|
||||
<img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
|
||||
qrCodeElement.innerHTML +=
|
||||
`<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
|
||||
|
||||
</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 方法，用于打开弹窗
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 预览样式 - 仅用于屏幕显示 */
|
||||
.page {
|
||||
width: 70mm;
|
||||
min-height: 200mm;
|
||||
width: 100mm;
|
||||
min-height: 60mm;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
A4的大小：21cm*29.7cm（width:794px;）。
|
||||
单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
|
||||
/* 确保打印样式优先 */
|
||||
@media print {
|
||||
.page {
|
||||
background-color: black !important;
|
||||
color: white !important;
|
||||
|
||||
.code-line span, .name-underline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,252 @@
|
||||
<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>
|
||||
@ -7,16 +7,19 @@
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="108px">
|
||||
<el-form-item label="物料编码" prop="matCode">
|
||||
<el-input v-model="queryParams.matCode" placeholder="物料编码" clearable @keyup.enter="handleQuery"
|
||||
<el-input
|
||||
v-model="queryParams.matCode" placeholder="物料编码" clearable @keyup.enter="handleQuery"
|
||||
class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="matName">
|
||||
<el-input v-model="queryParams.matName" placeholder="物料名称" clearable @keyup.enter="handleQuery"
|
||||
<el-input
|
||||
v-model="queryParams.matName" placeholder="物料名称" clearable @keyup.enter="handleQuery"
|
||||
class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料类型" prop="matType">
|
||||
<el-select v-model="queryParams.matType" placeholder="下拉选择" clearable class="!w-240px">
|
||||
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_MATERIAL_TYPE)" :key="dict.label" :label="dict.label"
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HELI_MATERIAL_TYPE)" :key="dict.label" :label="dict.label"
|
||||
:value="dict.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -25,19 +28,22 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="whId">
|
||||
<el-select v-model="queryParams.whId" placeholder="下拉选择" clearable class="!w-240px" @change="handleWh">
|
||||
<el-option v-for="dict in whList" :key="dict.id" :label="dict.wh_name"
|
||||
<el-option
|
||||
v-for="dict in whList" :key="dict.id" :label="dict.wh_name"
|
||||
:value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区" prop="rgId">
|
||||
<el-select v-model="queryParams.rgId" placeholder="下拉选择" clearable class="!w-240px" @change="handleRg">
|
||||
<el-option v-for="dict in rgCurrentList" :key="dict.id" :label="dict.rg_name"
|
||||
<el-option
|
||||
v-for="dict in rgCurrentList" :key="dict.id" :label="dict.rg_name"
|
||||
:value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位" prop="pnId">
|
||||
<el-select v-model="queryParams.pnId" placeholder="下拉选择" clearable class="!w-240px">
|
||||
<el-option v-for="dict in pnCurrentList" :key="dict.id" :label="dict.pn_name"
|
||||
<el-option
|
||||
v-for="dict in pnCurrentList" :key="dict.id" :label="dict.pn_name"
|
||||
:value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -49,14 +55,20 @@
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||
</el-button>
|
||||
<el-button type="warning" size="mini" @click="printfClick">
|
||||
<Icon icon="ep:printer" class="mr-5px"/>
|
||||
打印</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" class="hl-table">
|
||||
<el-table-column type="index" width="100" fixed label="序号" align="center" />
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange" :show-overflow-tooltip="true" class="hl-table">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"/>
|
||||
<el-table-column type="index" width="100" fixed label="序号" align="center" />
|
||||
<el-table-column label="物料编码" align="center" prop="matCode" fixed min-width="120" />
|
||||
<el-table-column label="物料名称" align="center" prop="matName" fixed min-width="120"/>
|
||||
<el-table-column label="物料类型" align="center" prop="matType" min-width="120"/>
|
||||
@ -72,10 +84,12 @@
|
||||
<el-table-column label="库存单位" align="center" prop="matUnit" min-width="120"/>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||
<Pagination
|
||||
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</ContentWrap>
|
||||
</el-card>
|
||||
<printDialog ref="printref" :minAmount="minAmount" :formData="formData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -87,9 +101,9 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import * as WarehouseApi from '@/api/heli/warehouse'
|
||||
import * as RgApi from '@/api/heli/rg'
|
||||
import * as PnApi from '@/api/heli/pn'
|
||||
|
||||
import printDialog from './printDialog.vue'
|
||||
defineOptions({ name: 'StorageLog' })
|
||||
|
||||
const printref = ref()
|
||||
const whList = ref([])
|
||||
const rgList = ref([])
|
||||
const pnList = ref([])
|
||||
@ -128,13 +142,22 @@ const getList = async () => {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const clickItem = ref([])
|
||||
const handleSelectionChange = (val) => {
|
||||
clickItem.value = val;
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const printfClick = () =>{
|
||||
if(clickItem.value == null || clickItem.value.length == 0){
|
||||
message.error("至少选择一项后，打印!")
|
||||
return
|
||||
}
|
||||
printref.value.open(clickItem.value)
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
|
||||
@ -0,0 +1,236 @@
|
||||
<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>
|
||||
@ -0,0 +1,224 @@
|
||||
<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-wrap2 page" ref="print">
|
||||
<div id="qrCodeContainer2"></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 { onMounted, nextTick } from 'vue'
|
||||
import JsBarcode from 'jsbarcode'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
let clauseId = null;
|
||||
const startPageNum = ref(0);
|
||||
const endPageNum = ref(0);
|
||||
|
||||
const onPrint = () => {
|
||||
const printNode = document.querySelector('.print-wrap2')
|
||||
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('qrCodeContainer2')
|
||||
if (!qrCodeElement) return
|
||||
|
||||
// 清空容器
|
||||
qrCodeElement.innerHTML = ''
|
||||
// 生成打印内容
|
||||
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>`
|
||||
})
|
||||
onPrint()
|
||||
}
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user