计划、实时库存、打印排版调整
This commit is contained in:
parent
371f55f1b9
commit
d9e402035b
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user