licq/heli-mes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

二维码样式更改

Browse Source
This commit is contained in:
Ledo 2025-07-07 23:04:40 +08:00
parent 4194f5e9ee
commit 4577472af4
6 changed files with 196 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
mes-ui/mes-ui-admin-vue3/src/views/heli/plan/printDialog.vue
View File

@ -51,7 +51,11 @@ const bomCodes = ref('')
const open = async ( vals) => {
cnenList.value = vals;
const sortedVals = [...vals].sort((a, b) => {
return a.id - b.id;
});
cnenList.value = sortedVals;
specarr.value = []
console.log(vals)
datavals.value = []
@ -74,7 +78,9 @@ const open = async ( vals) => {
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name)
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) {
(qrCodeElement.innerHTML +=

4
mes-ui/mes-ui-admin-vue3/src/views/heli/plan/printFinalDialog.vue
View File

@ -184,7 +184,9 @@ const open = async ( vals) => {
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name)
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) {
(qrCodeElement.innerHTML +=

32
mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/printDialog.vue
View File

@ -51,14 +51,36 @@ const bomCodes = ref('')
const open = async (bomCode, vals) => {
cnenList.value = vals;
const sortedVals = [...vals].sort((a, b) => {
const aParts = a.blueprintNo.split('-').map(part => parseInt(part) || part);
const bParts = b.blueprintNo.split('-').map(part => parseInt(part) || part);
// 逐段比较
for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
const aPart = aParts[i] || 0; // 如果某段不存在，视为 0
const bPart = bParts[i] || 0;
// 如果当前段是数字，按数字比较
if (typeof aPart === 'number' && typeof bPart === 'number') {
if (aPart !== bPart) return aPart - bPart;
}
// 如果当前段是字符串，按字典序比较
else {
if (aPart !== bPart) return String(aPart).localeCompare(String(bPart));
}
}
// 如果所有段都相同，按原始字符串比较
return a.blueprintNo.localeCompare(b.blueprintNo);
})
cnenList.value = sortedVals;
bomCodes.value = bomCode;
specarr.value = []
console.log(vals)
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
sortedVals.forEach((item) => {
const row = {
blueprintNo: item.blueprintNo,
}
@ -78,7 +100,9 @@ const open = async (bomCode, vals) => {
var i = 0;
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name)
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) {
(qrCodeElement.innerHTML +=

4
mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/printFinalDialog.vue
View File

@ -188,7 +188,9 @@ const open = async (bomCode, vals) => {
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name)
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) {
(qrCodeElement.innerHTML +=

204
mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/printDialog.vue
View File

@ -10,20 +10,19 @@
<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 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" />
<printFinalDialog ref="printref" :minAmount="minAmount" :formData="formData" />
</template>
<script setup lang="ts">
import { onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'
import QRCode from 'qrcode'
import printFinalDialog from './printFinalDialog.vue';
const dialogVisible = ref(false)
let clauseId = null;
@ -34,92 +33,7 @@ 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()
}
@ -130,21 +44,26 @@ const outopen = () => {
const printCodeName = ref([])
const datavals = ref([])
const specarr = ref([])
const cnenList = ref([])
const bomCodes = ref('')
const open = async (vals) => {
cnenList.value = vals;
specarr.value = []
console.log(vals)
const sortedVals = [...vals].sort((a, b) => {
return b.id - a.id;
});
cnenList.value = sortedVals;
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
sortedVals.forEach((item) => {
console.log(item.id)
const row1 = {
code: item.matCode,
name: item.matName == null ? '' : item.matName,
spec: item.spec == null ? '' : item.spec,
spec: item.matSpec == null ? '' : item.matSpec,
rg: item.rgName == null ? '' : item.rgName,
pg: item.pnName == null ? '' : item.pnName,
//amount: item.amount == null ? '' : item.amount
@ -153,53 +72,46 @@ const open = async (vals) => {
})
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, {
format: "CODE128",
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">
await Promise.all(
printCodeName.value.map(async (item) => {
const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
const qrCodeData = await QRCode.toDataURL(formattedDate ,{
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) {
(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.spec}</span>
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库区：${item.rg}</span>
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库位：${item.pg}</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>`
}
}
i++;
})
})
)
}
defineExpose({ open })
@ -208,8 +120,8 @@ defineExpose({ open })
<style scoped lang="scss">
/* 预览样式 - 仅用于屏幕显示 */
.page {
width: 60mm;
min-height: 30mm;
width: 100mm;
min-height: 60mm;
margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black;
@ -218,8 +130,8 @@ defineExpose({ open })
box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */
.code-line span {
border-bottom: 1px solid transparent;
.code-line span, .name-underline {
display: none;
}
}
@ -229,8 +141,8 @@ defineExpose({ open })
background-color: black !important;
color: white !important;
.code-line span {
border-bottom: 1px solid white;
.code-line span, .name-underline {
display: inline-block;
}
}
}

166
mes-ui/mes-ui-admin-vue3/src/views/heli/storagelog/printFinalDialog.vue
View File

@ -10,8 +10,8 @@
<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 class="print-wrap1 page" ref="print">
<div id="qrCodeContainer1"></div>
</div>
<template #footer>
<el-button @click="onPrint" type="primary">打印</el-button>
@ -21,8 +21,7 @@
</template>
<script setup lang="ts">
import { onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'
import QRCode from 'qrcode'
const dialogVisible = ref(false)
let clauseId = null;
@ -30,7 +29,7 @@ const startPageNum = ref(0);
const endPageNum = ref(0);
const onPrint = () => {
const printNode = document.querySelector('.print-wrap2')
const printNode = document.querySelector('.print-wrap1')
if (!printNode) return
const newIframe: any = document.createElement('iframe')
@ -69,34 +68,69 @@ const onPrint = () => {
background-color: black !important;
color: white !important;
}
.code-line {
width: 100%;
margin-bottom: 2mm;
position: relative;
.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;
margin-bottom: 0.5mm;
}
.barcode-container {
.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: 14mm;
height: 14mm;
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;
margin: 1mm 0;
align-items: flex-start;
width: 13mm;
margin-right: 1mm;
}
.barcode {
width: 20mm;
height: 7mm;
}
.spec-line, .name-line, .location-line {
margin-bottom: 1mm;
.quantity {
font-size: 11px;
margin-bottom: 0.5mm;
margin-top:2mm;
white-space: nowrap;
}
.location-line {
display: flex;
justify-content: space-between;
.timestamp {
font-size: 5px;
line-height: 1;
margin-top: auto;
white-space: nowrap;
}
</style>
</head>
@ -106,7 +140,7 @@ const onPrint = () => {
</html>
`)
doc.close()
dialogVisible.value = false
dialogVisible.value = false
setTimeout(() => {
newIframe.contentWindow.focus()
newIframe.contentWindow.print()
@ -129,65 +163,57 @@ const specarr = ref([])
const cnenList = ref([])
const open = async (vals) => {
cnenList.value = vals;
specarr.value = []
console.log(vals)
cnenList.value = vals;
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
console.log(item)
const row1 = {
code: item.matCode,
name: item.matName == null ? '' : item.matName,
spec: item.spec == null ? '' : item.spec,
spec: item.matSpec == null ? '' : item.matSpec,
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, {
format: "CODE128",
width: 2,
height: 40,
displayValue: false,
fontSize: 10
await Promise.all(
printCodeName.value.map(async (item) => {
const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
const qrCodeData = await QRCode.toDataURL(formattedDate ,{
errorCorrectionLevel: 'H'
})
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.spec}</span>
<span class="quantity">库区: ${item.rg}</span>
<span class="quantity">库位: ${item.pg}</span>
</div>
<div class="qr-container">
<img class="qr-code" src="${qrCodeData}" alt="QR Code">
</div>
</div>
</div>`)
}
})
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>`
).then(res => {
onPrint()
})
onPrint()
}
defineExpose({ open })
@ -196,7 +222,7 @@ defineExpose({ open })
<style scoped lang="scss">
/* 预览样式 - 仅用于屏幕显示 */
.page {
width: 60mm;
width: 45mm;
min-height: 30mm;
margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@ -206,8 +232,8 @@ defineExpose({ open })
box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */
.code-line span {
border-bottom: 1px solid transparent;
.code-line span, .name-underline {
display: none;
}
}
@ -217,8 +243,8 @@ defineExpose({ open })
background-color: black !important;
color: white !important;
.code-line span {
border-bottom: 1px solid white;
.code-line span, .name-underline {
display: inline-block;
}
}
}