BOM零件打印背景颜色修改

This commit is contained in:
Ledo 2025-08-04 14:30:14 +08:00
parent f5195b96c6
commit 762641d122
2 changed files with 33 additions and 32 deletions

View File

@ -31,9 +31,9 @@ const endPageNum = ref(0);
const printref = ref() const printref = ref()
const onPrint = () => { const onPrint = () => {
printref.value.open(bomCodes.value,cnenList.value) printref.value.open(bomCodes.value,cnenList.value)
} }
function beforeDialogClose(doClose: (shouldClose: boolean) => void): void { function beforeDialogClose(doClose: (shouldClose: boolean) => void): void {
outopen() outopen()
} }
@ -63,7 +63,7 @@ const open = async (bomCode, vals) => {
// //
if (typeof aPart === 'number' && typeof bPart === 'number') { if (typeof aPart === 'number' && typeof bPart === 'number') {
if (aPart !== bPart) return aPart - bPart; if (aPart !== bPart) return aPart - bPart;
} }
// //
else { else {
if (aPart !== bPart) return String(aPart).localeCompare(String(bPart)); if (aPart !== bPart) return String(aPart).localeCompare(String(bPart));
@ -79,7 +79,7 @@ const open = async (bomCode, vals) => {
specarr.value = [] specarr.value = []
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
sortedVals.forEach((item) => { sortedVals.forEach((item) => {
const row = { const row = {
blueprintNo: item.blueprintNo, blueprintNo: item.blueprintNo,
@ -101,18 +101,18 @@ const open = async (bomCode, 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('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;">
@ -125,9 +125,9 @@ const open = async (bomCode, 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>`
} }
} }
@ -145,11 +145,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;
@ -159,12 +159,12 @@ defineExpose({ open })
/* 确保打印样式优先 */ /* 确保打印样式优先 */
@media print { @media print {
.page { .page {
background-color: black !important; background-color: white !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>

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(`
@ -53,8 +53,8 @@ const onPrint = () => {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: black !important; background-color: white !important;
color: white !important; color: black !important;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
@ -65,17 +65,18 @@ const onPrint = () => {
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 !important;
color: white !important; color: black !important;
} }
.code-line, .name-line { .code-line, .name-line {
font-size: 11px; font-size: 11px;
margin-bottom: 1mm; margin-bottom: 1mm;
} }
.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;
} }
.name-line { .name-line {
@ -88,7 +89,7 @@ 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;
} }
@ -167,7 +168,7 @@ const open = async (bomCode, vals) => {
console.log(vals) console.log(vals)
datavals.value = [] datavals.value = []
printCodeName.value = [] printCodeName.value = []
vals.forEach((item) => { vals.forEach((item) => {
const row = { const row = {
blueprintNo: item.blueprintNo, blueprintNo: item.blueprintNo,
@ -189,7 +190,7 @@ const open = async (bomCode, 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) {
@ -229,11 +230,11 @@ defineExpose({ open })
min-height: 30mm; min-height: 30mm;
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;
@ -243,12 +244,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>