计划、实时库存、打印排版调整

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

View File

@ -31,9 +31,9 @@ const endPageNum = ref(0);
const printref = ref()
const onPrint = () => {
printref.value.open(cnenList.value)
}
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen()
}
@ -60,7 +60,7 @@ const open = async ( vals) => {
console.log(vals)
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
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')}`
var i = 0;
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer')
if (qrCodeElement) {
(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;">
<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 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>
<span style="white-space: nowrap;margin-left: 2mm "> </span>
<span style="flex-grow: 1; border-bottom: 1px solid black; 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: 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;">
@ -103,9 +103,9 @@ const open = async ( vals) => {
</div>
</div>`)
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>`
}
}
@ -123,11 +123,11 @@ defineExpose({ open })
min-height: 60mm;
margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black;
color: white;
background-color: white;
color: black;
padding: 2mm;
box-sizing: border-box;
/* 临时隐藏下划线,打印时会显示 */
.code-line span, .name-underline {
display: none;
@ -137,9 +137,9 @@ defineExpose({ open })
/* 确保打印样式优先 */
@media print {
.page {
background-color: black !important;
color: white !important;
background-color: white !important;
color: black !important;
.code-line span, .name-underline {
display: inline-block;
}

View File

@ -31,14 +31,14 @@ 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(`
@ -47,38 +47,46 @@ const onPrint = () => {
<head>
<style>
@page {
size: 45mm 30mm;
size: 60mm 40mm;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: black !important;
color: white !important;
background-color: white;
color: black;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.qr-page {
width: 45mm;
height: 30mm;
width: 60mm;
height: 40mm;
padding: 2mm;
box-sizing: border-box;
font-family: monospace;
position: relative;
background-color: black !important;
color: white !important;
background-color: white;
color: black;
}
.code-line, .name-line {
font-size: 11px;
margin-bottom: 1mm;
.code-line {
font-size: 14px;
margin-bottom: 1.4mm;
margin-left: 0.8mm;
}
.code-line span {
display: inline-block;
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;
font-weight: bold !important; /* 仅此处加粗 item.code */
color: black;
}
.name-line {
font-size: 14px;
margin-bottom: 1mm;
display: flex;
align-items: center;
}
@ -88,9 +96,9 @@ const onPrint = () => {
}
.name-underline {
flex-grow: 1;
border-bottom: 1px solid white;
border-bottom: 1px solid black;
height: 1em;
margin-left: 1mm;
margin-left: -1mm;
}
.bottom-section {
display: flex;
@ -98,11 +106,11 @@ const onPrint = () => {
bottom: 2mm;
left: 2mm;
right: 2mm;
height: 17mm;
height: 22mm;
}
.qr-container {
width: 17mm;
height: 17mm;
width: 22mm;
height: 22mm;
margin-left: auto;
display: flex;
align-items: flex-end;
@ -121,16 +129,17 @@ const onPrint = () => {
margin-right: 1mm;
}
.quantity {
font-size: 11px;
font-size: 14px;
margin-bottom: 0.5mm;
margin-top:2mm;
white-space: nowrap;
margin-top: 2mm;
white-space: nowrap;
}
.timestamp {
font-size: 5px;
font-size: 10px;
line-height: 1;
margin-left: 0.5mm;
margin-top: auto;
white-space: nowrap;
white-space: nowrap;
}
</style>
</head>
@ -167,7 +176,7 @@ const open = async ( vals) => {
console.log(vals)
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
const row1 = {
@ -185,7 +194,7 @@ const open = async ( vals) => {
await Promise.all(
printCodeName.value.map(async (item) => {
const qrCodeData = await QRCode.toDataURL(item.name,{
errorCorrectionLevel: 'H'
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) {
@ -195,12 +204,12 @@ const open = async ( vals) => {
<span>${item.code}</span>
</div>
<div class="name-line">
<span class="name-label">:</span>
<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="quantity"> ${item.amount}</span>
<span class="timestamp">${formattedDate}</span>
</div>
<div class="qr-container">
@ -221,15 +230,15 @@ defineExpose({ open })
<style scoped lang="scss">
/* 预览样式 - 仅用于屏幕显示 */
.page {
width: 45mm;
min-height: 30mm;
width: 60mm;
min-height: 40mm;
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;
@ -239,12 +248,12 @@ defineExpose({ open })
/* 确保打印样式优先 */
@media print {
.page {
background-color: black !important;
color: white !important;
background-color: white !important;
color: black !important;
.code-line span, .name-underline {
display: inline-block;
}
}
}
</style>
</style>

View File

@ -108,15 +108,15 @@ const open = async (bomCode, vals) => {
(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="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 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>
</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: 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;">

View File

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

View File

@ -31,9 +31,9 @@ const endPageNum = ref(0);
const printref = ref()
const onPrint = () => {
printref.value.open(cnenList.value)
}
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen()
}
@ -57,7 +57,7 @@ const open = async (vals) => {
cnenList.value = sortedVals;
datavals.value = []
printCodeName.value = []
sortedVals.forEach((item) => {
console.log(item.id)
const row1 = {
@ -76,27 +76,52 @@ const open = async (vals) => {
var i = 0;
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'
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="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;">
<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 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>
<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>
</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>
<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; 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 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">
@ -104,9 +129,9 @@ const open = async (vals) => {
</div>
</div>`)
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>`
}
}
@ -124,11 +149,11 @@ defineExpose({ open })
min-height: 60mm;
margin: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: black;
background-color: white;
color: white;
padding: 2mm;
box-sizing: border-box;
/* 临时隐藏下划线,打印时会显示 */
.code-line span, .name-underline {
display: none;
@ -140,10 +165,10 @@ defineExpose({ open })
.page {
background-color: black !important;
color: white !important;
.code-line span, .name-underline {
display: inline-block;
}
}
}
</style>
</style>

View File

@ -31,14 +31,14 @@ 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(`
@ -46,39 +46,47 @@ const onPrint = () => {
<html>
<head>
<style>
@page {
size: 45mm 30mm;
@page {
size: 60mm 40mm;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: black !important;
color: white !important;
background-color: white;
color: black;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.qr-page {
width: 45mm;
height: 30mm;
width: 60mm;
height: 40mm;
padding: 2mm;
box-sizing: border-box;
font-family: monospace;
position: relative;
background-color: black !important;
color: white !important;
background-color: white;
color: black;
}
.code-line, .name-line {
font-size: 11px;
margin-bottom: 1mm;
.code-line {
font-size: 14px;
margin-bottom: 1.4mm;
margin-left: 0.4mm;
}
.code-line span {
display: inline-block;
width: 100%;
border-bottom: 1px solid white;
border-bottom: 1px solid black;
padding-bottom: 0.2mm;
font-weight: bold !important; /* 仅此处加粗 item.code */
color: black;
}
.name-line {
font-size: 14px;
margin-bottom: 1mm;
display: flex;
align-items: center;
}
@ -88,9 +96,9 @@ const onPrint = () => {
}
.name-underline {
flex-grow: 1;
border-bottom: 1px solid white;
border-bottom: 1px solid black;
height: 1em;
margin-left: 1mm;
margin-left: -1mm;
}
.bottom-section {
display: flex;
@ -98,11 +106,11 @@ const onPrint = () => {
bottom: 2mm;
left: 2mm;
right: 2mm;
height: 17mm;
height: 22mm;
}
.qr-container {
width: 14mm;
height: 14mm;
width: 22mm;
height: 22mm;
margin-left: auto;
display: flex;
align-items: flex-end;
@ -120,17 +128,34 @@ const onPrint = () => {
width: 13mm;
margin-right: 1mm;
}
.quantity {
font-size: 11px;
margin-bottom: 0.5mm;
margin-top:2mm;
.spec {
min-height: calc(14px * 1.2 * 2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rg, .pg {
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 {
font-size: 5px;
font-size: 10px;
line-height: 1;
margin-left: 0.5mm;
margin-top: auto;
white-space: nowrap;
white-space: nowrap;
}
</style>
</head>
@ -166,7 +191,7 @@ const open = async (vals) => {
cnenList.value = vals;
datavals.value = []
printCodeName.value = []
vals.forEach((item) => {
console.log(item)
const row1 = {
@ -185,7 +210,7 @@ const open = async (vals) => {
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'
errorCorrectionLevel: 'H'
})
const qrCodeElement = document.getElementById('qrCodeContainer1')
if (qrCodeElement) {
@ -195,14 +220,14 @@ const open = async (vals) => {
<span>物料编码${item.code}</span>
</div>
<div class="name-line">
<span class="name-label">:</span>
<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>
<span class="quantity spec"> : ${item.spec}</span>
<span class="quantity rg"> : ${item.rg}</span>
<span class="quantity pg"> : ${item.pg}</span>
</div>
<div class="qr-container">
<img class="qr-code" src="${qrCodeData}" alt="QR Code">
@ -230,7 +255,7 @@ defineExpose({ open })
color: white;
padding: 2mm;
box-sizing: border-box;
/* 临时隐藏下划线,打印时会显示 */
.code-line span, .name-underline {
display: none;
@ -242,10 +267,10 @@ defineExpose({ open })
.page {
background-color: black !important;
color: white !important;
.code-line span, .name-underline {
display: inline-block;
}
}
}
</style>
</style>