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-08-04 23:04:32 +08:00
parent 371f55f1b9
commit d9e402035b
6 changed files with 205 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,9 +31,9 @@ const endPageNum = ref(0);
const printref = ref() const printref = ref()
const onPrint = () => { const onPrint = () => {
printref.value.open(cnenList.value) printref.value.open(cnenList.value)
} }
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void { function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen() outopen()
} }
@ -60,7 +60,7 @@ const open = async ( vals) => {
console.log(vals) console.log(vals)
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
vals.forEach((item) => { vals.forEach((item) => {
const row1 = { const row1 = {
@ -76,25 +76,25 @@ const open = async ( vals) => {
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')}` 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; var i = 0;
await Promise.all( await Promise.all(
printCodeName.value.map(async (item) => { printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name,{ const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H' errorCorrectionLevel: 'H'
}) })
const qrCodeElement = document.getElementById('qrCodeContainer') const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) { if (qrCodeElement) {
(qrCodeElement.innerHTML += (qrCodeElement.innerHTML +=
`<div style="width: 90mm; height: 60mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: black; color: white;"> `<div style="width: 90mm; height: 60mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: white; color: black;">
<div style="font-size: 11px; margin-bottom: 1mm;"> <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> <span style="display: inline-block; width: 100%;font-weight: 700; border-bottom: 1px solid black;margin-left: 2mm; padding-bottom: 0.2mm;">${item.code}</span>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span style="white-space: nowrap; margin-right: 1mm;">名称:</span> <span style="white-space: nowrap;margin-left: 2mm ">名 称：</span>
<span style="flex-grow: 1; border-bottom: 1px solid white; height: 2em; margin-left: 1mm;">${item.name}</span> <span style="flex-grow: 1; border-bottom: 1px solid black; height: 2em; margin-left: 1mm;">${item.name}</span>
</div> </div>
<div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;"> <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;"> <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: 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> <span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
</div> </div>
<div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;"> <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">
@ -103,9 +103,9 @@ const open = async ( vals) => {
</div> </div>
</div>`) </div>`)
if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){ if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
qrCodeElement.innerHTML += qrCodeElement.innerHTML +=
`<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm"> `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
</div>` </div>`
} }
} }
@ -123,11 +123,11 @@ defineExpose({ open })
min-height: 60mm; min-height: 60mm;
margin: auto; margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black; background-color: white;
color: white; color: black;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */ /* 临时隐藏下划线，打印时会显示 */
.code-line span, .name-underline { .code-line span, .name-underline {
display: none; display: none;
@ -137,9 +137,9 @@ defineExpose({ open })
/* 确保打印样式优先 */ /* 确保打印样式优先 */
@media print { @media print {
.page { .page {
background-color: black !important; background-color: white !important;
color: white !important; color: black !important;
.code-line span, .name-underline { .code-line span, .name-underline {
display: inline-block; display: inline-block;
} }

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

@ -31,14 +31,14 @@ const endPageNum = ref(0);
const onPrint = () => { const onPrint = () => {
const printNode = document.querySelector('.print-wrap1') const printNode = document.querySelector('.print-wrap1')
if (!printNode) return if (!printNode) return
const newIframe: any = document.createElement('iframe') const newIframe: any = document.createElement('iframe')
newIframe.setAttribute( newIframe.setAttribute(
'style', 'style',
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;' 'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
) )
document.body.appendChild(newIframe) document.body.appendChild(newIframe)
const doc = newIframe.contentWindow.document const doc = newIframe.contentWindow.document
// 添加基础样式 // 添加基础样式
doc.write(` doc.write(`
@ -47,38 +47,46 @@ const onPrint = () => {
<head> <head>
<style> <style>
@page { @page {
size: 45mm 30mm; size: 60mm 40mm;
margin: 0; margin: 0;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: black !important; background-color: white;
color: white !important; color: black;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
.qr-page { .qr-page {
width: 45mm; width: 60mm;
height: 30mm; height: 40mm;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
font-family: monospace; font-family: monospace;
position: relative; position: relative;
background-color: black !important; background-color: white;
color: white !important; color: black;
} }
.code-line, .name-line { .code-line {
font-size: 11px; font-size: 14px;
margin-bottom: 1mm; margin-bottom: 1.4mm;
margin-left: 0.8mm;
} }
.code-line span { .code-line span {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
border-bottom: 1px solid white;
font-family: "SimHei", "Microsoft YaHei", "PingFang SC", sans-serif;
border-bottom: 1px solid black;
padding-bottom: 0.2mm; padding-bottom: 0.2mm;
font-weight: bold !important; /* 仅此处加粗 item.code */
color: black;
} }
.name-line { .name-line {
font-size: 14px;
margin-bottom: 1mm;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -88,9 +96,9 @@ const onPrint = () => {
} }
.name-underline { .name-underline {
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid white; border-bottom: 1px solid black;
height: 1em; height: 1em;
margin-left: 1mm; margin-left: -1mm;
} }
.bottom-section { .bottom-section {
display: flex; display: flex;
@ -98,11 +106,11 @@ const onPrint = () => {
bottom: 2mm; bottom: 2mm;
left: 2mm; left: 2mm;
right: 2mm; right: 2mm;
height: 17mm; height: 22mm;
} }
.qr-container { .qr-container {
width: 17mm; width: 22mm;
height: 17mm; height: 22mm;
margin-left: auto; margin-left: auto;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -121,16 +129,17 @@ const onPrint = () => {
margin-right: 1mm; margin-right: 1mm;
} }
.quantity { .quantity {
font-size: 11px; font-size: 14px;
margin-bottom: 0.5mm; margin-bottom: 0.5mm;
margin-top:2mm; margin-top: 2mm;
white-space: nowrap; white-space: nowrap;
} }
.timestamp { .timestamp {
font-size: 5px; font-size: 10px;
line-height: 1; line-height: 1;
margin-left: 0.5mm;
margin-top: auto; margin-top: auto;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
</head> </head>
@ -167,7 +176,7 @@ const open = async ( vals) => {
console.log(vals) console.log(vals)
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
vals.forEach((item) => { vals.forEach((item) => {
const row1 = { const row1 = {
@ -185,7 +194,7 @@ const open = async ( vals) => {
await Promise.all( await Promise.all(
printCodeName.value.map(async (item) => { printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name,{ const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H' errorCorrectionLevel: 'H'
}) })
const qrCodeElement = document.getElementById('qrCodeContainer1') const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) { if (qrCodeElement) {
@ -195,12 +204,12 @@ const open = async ( vals) => {
<span>${item.code}</span> <span>${item.code}</span>
</div> </div>
<div class="name-line"> <div class="name-line">
<span class="name-label">名称:</span> <span class="name-label">名 称：</span>
<span class="name-underline">${item.name}</span> <span class="name-underline">${item.name}</span>
</div> </div>
<div class="bottom-section"> <div class="bottom-section">
<div class="quantity-container"> <div class="quantity-container">
<span class="quantity">数量: ${item.amount}</span> <span class="quantity">数 量：${item.amount}</span>
<span class="timestamp">${formattedDate}</span> <span class="timestamp">${formattedDate}</span>
</div> </div>
<div class="qr-container"> <div class="qr-container">
@ -221,15 +230,15 @@ defineExpose({ open })
<style scoped lang="scss"> <style scoped lang="scss">
/* 预览样式 - 仅用于屏幕显示 */ /* 预览样式 - 仅用于屏幕显示 */
.page { .page {
width: 45mm; width: 60mm;
min-height: 30mm; min-height: 40mm;
margin: auto; margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black; background-color: black;
color: white; color: white;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */ /* 临时隐藏下划线，打印时会显示 */
.code-line span, .name-underline { .code-line span, .name-underline {
display: none; display: none;
@ -239,12 +248,12 @@ defineExpose({ open })
/* 确保打印样式优先 */ /* 确保打印样式优先 */
@media print { @media print {
.page { .page {
background-color: black !important; background-color: white !important;
color: white !important; color: black !important;
.code-line span, .name-underline { .code-line span, .name-underline {
display: inline-block; display: inline-block;
} }
} }
} }
</style> </style>

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

@ -108,15 +108,15 @@ const open = async (bomCode, vals) => {
(qrCodeElement.innerHTML += (qrCodeElement.innerHTML +=
`<div style="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: white; color: black;"> `<div style="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: white; color: black;">
<div style="font-size: 11px; margin-bottom: 1mm;"> <div style="font-size: 11px; margin-bottom: 1mm;">
<span style="display: inline-block; width: 100%; border-bottom: 1px solid black; padding-bottom: 0.2mm;">${item.code}</span> <span style="display: inline-block; width: 100%;font-weight: 700; border-bottom: 1px solid black; padding-bottom: 0.2mm;">${item.code}</span>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span style="white-space: nowrap; margin-right: 1mm;">名称:</span> <span style="white-space: nowrap; margin-right: 1mm;">名 称：</span>
<span style="flex-grow: 1; border-bottom: 1px solid black; height: 2em; margin-left: 1mm;">${item.name}</span> <span style="flex-grow: 1; border-bottom: 1px solid black; height: 2em; margin-left: 1mm;">${item.name}</span>
</div> </div>
<div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;"> <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;"> <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: 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> <span style="font-size: 5px; line-height: 1; margin-top: auto; white-space: nowrap;">${formattedDate}</span>
</div> </div>
<div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;"> <div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;">

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

@ -27,20 +27,15 @@ const dialogVisible = ref(false)
let clauseId = null; let clauseId = null;
const startPageNum = ref(0); const startPageNum = ref(0);
const endPageNum = ref(0); const endPageNum = ref(0);
const onPrint = () => { const onPrint = () => {
const printNode = document.querySelector('.print-wrap1') const printNode = document.querySelector('.print-wrap1');
if (!printNode) return if (!printNode) return;
const newIframe: any = document.createElement('iframe') const newIframe: any = document.createElement('iframe');
newIframe.setAttribute( newIframe.setAttribute('style', 'width:0; height:0; position:absolute; left:-9999px; top:-9999px;');
'style', document.body.appendChild(newIframe);
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
)
document.body.appendChild(newIframe)
const doc = newIframe.contentWindow.document const doc = newIframe.contentWindow.document;
// 添加基础样式
doc.write(` doc.write(`
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -51,10 +46,11 @@ const onPrint = () => {
margin: 0; margin: 0;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: white !important; background-color: white;
color: black !important; color: black;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
@ -65,21 +61,27 @@ const onPrint = () => {
box-sizing: border-box; box-sizing: border-box;
font-family: monospace; font-family: monospace;
position: relative; position: relative;
background-color: white !important; background-color: white;
color: black !important; color: black;
} }
.code-line, .name-line { .code-line {
font-size: 14px; font-size: 14px;
margin-bottom: 1mm; margin-bottom: 1.4mm;
margin-left: 0.8mm;
} }
.code-line span { .code-line span {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
font-family: "SimHei", "Microsoft YaHei", "PingFang SC", sans-serif;
border-bottom: 1px solid black; border-bottom: 1px solid black;
padding-bottom: 0.2mm; padding-bottom: 0.2mm;
font-weight: bold !important; /* 仅此处加粗 item.code */
color: black;
} }
.name-line { .name-line {
font-size: 14px;
margin-bottom: 1mm;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -91,7 +93,7 @@ const onPrint = () => {
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid black; border-bottom: 1px solid black;
height: 1em; height: 1em;
margin-left: 1mm; margin-left: -1mm;
} }
.bottom-section { .bottom-section {
display: flex; display: flex;
@ -124,14 +126,15 @@ const onPrint = () => {
.quantity { .quantity {
font-size: 14px; font-size: 14px;
margin-bottom: 0.5mm; margin-bottom: 0.5mm;
margin-top:2mm; margin-top: 2mm;
white-space: nowrap; white-space: nowrap;
} }
.timestamp { .timestamp {
font-size: 6px; font-size: 10px;
line-height: 1; line-height: 1;
margin-left: 0.5mm;
margin-top: auto; margin-top: auto;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
</head> </head>
@ -139,16 +142,16 @@ const onPrint = () => {
${printNode.innerHTML} ${printNode.innerHTML}
</body> </body>
</html> </html>
`) `);
doc.close() doc.close();
dialogVisible.value = false
setTimeout(() => { setTimeout(() => {
newIframe.contentWindow.focus() newIframe.contentWindow.focus();
newIframe.contentWindow.print() newIframe.contentWindow.print();
document.body.removeChild(newIframe) document.body.removeChild(newIframe);
dialogVisible.value = false dialogVisible.value = false;
}, 100) }, 100);
} };
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void { function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen() outopen()
@ -197,15 +200,15 @@ const open = async (bomCode, vals) => {
(qrCodeElement.innerHTML += (qrCodeElement.innerHTML +=
`<div class="page qr-page"> `<div class="page qr-page">
<div class="code-line"> <div class="code-line">
<span>${item.code}</span> <span >${item.code}</span>
</div> </div>
<div class="name-line"> <div class="name-line">
<span class="name-label">名称:</span> <span class="name-label">名 称：</span>
<span class="name-underline">${item.name}</span> <span class="name-underline">${item.name}</span>
</div> </div>
<div class="bottom-section"> <div class="bottom-section">
<div class="quantity-container"> <div class="quantity-container">
<span class="quantity">数量: ${item.amount}</span> <span class="quantity">数 量：${item.amount}</span>
<span class="timestamp">${formattedDate}</span> <span class="timestamp">${formattedDate}</span>
</div> </div>
<div class="qr-container"> <div class="qr-container">
@ -246,10 +249,10 @@ defineExpose({ open })
.page { .page {
background-color: white !important; background-color: white !important;
color: black !important; color: black !important;
.code-line span, .name-underline { .code-line span, .name-underline {
display: inline-block; display: inline-block;
} }
} }
} }
</style> </style>

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

@ -31,9 +31,9 @@ const endPageNum = ref(0);
const printref = ref() const printref = ref()
const onPrint = () => { const onPrint = () => {
printref.value.open(cnenList.value) printref.value.open(cnenList.value)
} }
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void { function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen() outopen()
} }
@ -57,7 +57,7 @@ const open = async (vals) => {
cnenList.value = sortedVals; cnenList.value = sortedVals;
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
sortedVals.forEach((item) => { sortedVals.forEach((item) => {
console.log(item.id) console.log(item.id)
const row1 = { const row1 = {
@ -76,27 +76,52 @@ const open = async (vals) => {
var i = 0; var i = 0;
await Promise.all( await Promise.all(
printCodeName.value.map(async (item) => { printCodeName.value.map(async (item) => {
const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`; const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
const qrCodeData = await QRCode.toDataURL(formattedDate ,{ const qrCodeData = await QRCode.toDataURL(formattedDate ,{
errorCorrectionLevel: 'H' errorCorrectionLevel: 'H'
}) })
const qrCodeElement = document.getElementById('qrCodeContainer') const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) { if (qrCodeElement) {
(qrCodeElement.innerHTML += (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="width: 90mm; height: 60mm; padding: 2mm; box-sizing: border-box; font-family: monospace; position: relative; background-color: white; color: black;">
<div style="font-size: 11px; margin-bottom: 1mm;"> <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> <span style="display: inline-block; width: 100%; border-bottom: 1px solid black; padding-bottom: 0.2mm;">物料编码：${item.code}</span>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span style="white-space: nowrap; margin-right: 1mm;">简称:</span> <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> <span style="flex-grow: 1; border-bottom: 1px solid black; height: 2em; margin-left: -1mm;">${item.name}</span>
</div> </div>
<div style="display: flex; position: absolute; bottom: 2mm; left: 2mm; right: 2mm; height: 34mm;"> <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;"> <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=" width: 52mm;
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库区：${item.rg}</span> white-space: pre-wrap;
<span style="font-size: 11px; margin-bottom: 0.5mm; margin-top:2mm; white-space: nowrap;">库位：${item.pg}</span> word-break: break-all;
overflow-wrap: anywhere;
text-indent: -15.8mm;
padding-left: 15.8mm;
font-size: 11px;
line-height: 1.2; min-height: calc(14px * 1.2 * 2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;">规 格：${item.spec}</span>
<span style=" width: 52mm;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: anywhere;
text-indent: -15.8mm;
padding-left: 15.8mm;
font-size: 11px;
line-height: 1.2;">库 区：${item.rg}</span>
<span style=" width: 52mm;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: anywhere;
text-indent: -15.8mm;
padding-left: 15.8mm;
font-size: 11px;
line-height: 1.2;">库 位：${item.pg}</span>
</div> </div>
<div style="width: 34mm; height: 34mm; margin-left: auto; display: flex; align-items: flex-end; justify-content: flex-end;"> <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"> <img style="width: 100%; height: 100%;" src="${qrCodeData}" alt="QR Code">
@ -104,9 +129,9 @@ const open = async (vals) => {
</div> </div>
</div>`) </div>`)
if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){ if(printCodeName.value.length > 1 && i < printCodeName.value.length - 1){
qrCodeElement.innerHTML += qrCodeElement.innerHTML +=
`<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm"> `<div style="height:3mm; background-color: white; color: white;width:103mm;margin-left:-3mm">
</div>` </div>`
} }
} }
@ -124,11 +149,11 @@ defineExpose({ open })
min-height: 60mm; min-height: 60mm;
margin: auto; margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black; background-color: white;
color: white; color: white;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */ /* 临时隐藏下划线，打印时会显示 */
.code-line span, .name-underline { .code-line span, .name-underline {
display: none; display: none;
@ -140,10 +165,10 @@ defineExpose({ open })
.page { .page {
background-color: black !important; background-color: black !important;
color: white !important; color: white !important;
.code-line span, .name-underline { .code-line span, .name-underline {
display: inline-block; display: inline-block;
} }
} }
} }
</style> </style>

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

@ -31,14 +31,14 @@ const endPageNum = ref(0);
const onPrint = () => { const onPrint = () => {
const printNode = document.querySelector('.print-wrap1') const printNode = document.querySelector('.print-wrap1')
if (!printNode) return if (!printNode) return
const newIframe: any = document.createElement('iframe') const newIframe: any = document.createElement('iframe')
newIframe.setAttribute( newIframe.setAttribute(
'style', 'style',
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;' 'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
) )
document.body.appendChild(newIframe) document.body.appendChild(newIframe)
const doc = newIframe.contentWindow.document const doc = newIframe.contentWindow.document
// 添加基础样式 // 添加基础样式
doc.write(` doc.write(`
@ -46,39 +46,47 @@ const onPrint = () => {
<html> <html>
<head> <head>
<style> <style>
@page { @page {
size: 45mm 30mm; size: 60mm 40mm;
margin: 0; margin: 0;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: black !important; background-color: white;
color: white !important; color: black;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
.qr-page { .qr-page {
width: 45mm; width: 60mm;
height: 30mm; height: 40mm;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
font-family: monospace; font-family: monospace;
position: relative; position: relative;
background-color: black !important; background-color: white;
color: white !important; color: black;
} }
.code-line, .name-line { .code-line {
font-size: 11px; font-size: 14px;
margin-bottom: 1mm; margin-bottom: 1.4mm;
margin-left: 0.4mm;
} }
.code-line span { .code-line span {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
border-bottom: 1px solid white;
border-bottom: 1px solid black;
padding-bottom: 0.2mm; padding-bottom: 0.2mm;
font-weight: bold !important; /* 仅此处加粗 item.code */
color: black;
} }
.name-line { .name-line {
font-size: 14px;
margin-bottom: 1mm;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -88,9 +96,9 @@ const onPrint = () => {
} }
.name-underline { .name-underline {
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid white; border-bottom: 1px solid black;
height: 1em; height: 1em;
margin-left: 1mm; margin-left: -1mm;
} }
.bottom-section { .bottom-section {
display: flex; display: flex;
@ -98,11 +106,11 @@ const onPrint = () => {
bottom: 2mm; bottom: 2mm;
left: 2mm; left: 2mm;
right: 2mm; right: 2mm;
height: 17mm; height: 22mm;
} }
.qr-container { .qr-container {
width: 14mm; width: 22mm;
height: 14mm; height: 22mm;
margin-left: auto; margin-left: auto;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -120,17 +128,34 @@ const onPrint = () => {
width: 13mm; width: 13mm;
margin-right: 1mm; margin-right: 1mm;
} }
.quantity { .spec {
font-size: 11px; min-height: calc(14px * 1.2 * 2);
margin-bottom: 0.5mm; display: -webkit-box;
margin-top:2mm; -webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rg, .pg {
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quantity {
width: 22mm;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: anywhere;
text-indent: -13mm;
padding-left: 13mm;
font-size: 14px;
line-height: 1.2;
} }
.timestamp { .timestamp {
font-size: 5px; font-size: 10px;
line-height: 1; line-height: 1;
margin-left: 0.5mm;
margin-top: auto; margin-top: auto;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
</head> </head>
@ -166,7 +191,7 @@ const open = async (vals) => {
cnenList.value = vals; cnenList.value = vals;
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
vals.forEach((item) => { vals.forEach((item) => {
console.log(item) console.log(item)
const row1 = { const row1 = {
@ -185,7 +210,7 @@ const open = async (vals) => {
printCodeName.value.map(async (item) => { printCodeName.value.map(async (item) => {
const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`; const formattedDate = `物料编码：${item.code}，规格：${item.spec}，简称：${item.name}，库区：${item.rg}，库位：${item.pg}`;
const qrCodeData = await QRCode.toDataURL(formattedDate ,{ const qrCodeData = await QRCode.toDataURL(formattedDate ,{
errorCorrectionLevel: 'H' errorCorrectionLevel: 'H'
}) })
const qrCodeElement = document.getElementById('qrCodeContainer1') const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) { if (qrCodeElement) {
@ -195,14 +220,14 @@ const open = async (vals) => {
<span>物料编码：${item.code}</span> <span>物料编码：${item.code}</span>
</div> </div>
<div class="name-line"> <div class="name-line">
<span class="name-label">简称:</span> <span class="name-label">简 称：</span>
<span class="name-underline">${item.name}</span> <span class="name-underline">${item.name}</span>
</div> </div>
<div class="bottom-section"> <div class="bottom-section">
<div class="quantity-container"> <div class="quantity-container">
<span class="quantity">规格: ${item.spec}</span> <span class="quantity spec">规 格: ${item.spec}</span>
<span class="quantity">库区: ${item.rg}</span> <span class="quantity rg">库 区: ${item.rg}</span>
<span class="quantity">库位: ${item.pg}</span> <span class="quantity pg">库 位: ${item.pg}</span>
</div> </div>
<div class="qr-container"> <div class="qr-container">
<img class="qr-code" src="${qrCodeData}" alt="QR Code"> <img class="qr-code" src="${qrCodeData}" alt="QR Code">
@ -230,7 +255,7 @@ defineExpose({ open })
color: white; color: white;
padding: 2mm; padding: 2mm;
box-sizing: border-box; box-sizing: border-box;
/* 临时隐藏下划线，打印时会显示 */ /* 临时隐藏下划线，打印时会显示 */
.code-line span, .name-underline { .code-line span, .name-underline {
display: none; display: none;
@ -242,10 +267,10 @@ defineExpose({ open })
.page { .page {
background-color: black !important; background-color: black !important;
color: white !important; color: white !important;
.code-line span, .name-underline { .code-line span, .name-underline {
display: inline-block; display: inline-block;
} }
} }
} }
</style> </style>