BOM零件打印背景颜色修改
This commit is contained in:
parent
f5195b96c6
commit
762641d122
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user