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

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

@ -84,17 +84,17 @@ const open = async ( vals) => {
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;">
@ -123,8 +123,8 @@ 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;
@ -137,8 +137,8 @@ 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

@ -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,14 +129,15 @@ const onPrint = () => {
margin-right: 1mm;
}
.quantity {
font-size: 11px;
font-size: 14px;
margin-bottom: 0.5mm;
margin-top:2mm;
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;
}
@ -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,8 +230,8 @@ 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;
@ -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>

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,12 +126,13 @@ const onPrint = () => {
.quantity {
font-size: 14px;
margin-bottom: 0.5mm;
margin-top:2mm;
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;
}
@ -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

@ -84,19 +84,44 @@ const open = async (vals) => {
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">
@ -124,7 +149,7 @@ 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;

View File

@ -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.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,15 +128,32 @@ 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;
}
@ -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">