|
|
|
@ -43,39 +43,21 @@ const onPrint = () => {
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
/* 浏览器打印基本样式 */
|
|
|
|
|
@page {
|
|
|
|
|
size: 200mm 200mm;
|
|
|
|
|
size: 70mm 200mm;
|
|
|
|
|
margin: 0;
|
|
|
|
|
orientation: portrait; /* 或 portrait 根据实际情况 */
|
|
|
|
|
}
|
|
|
|
|
@media print {
|
|
|
|
|
.page {
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: initial;
|
|
|
|
|
border-radius: initial;
|
|
|
|
|
width: initial;
|
|
|
|
|
min-height: initial;
|
|
|
|
|
box-shadow: initial;
|
|
|
|
|
background: initial;
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.qr-page {
|
|
|
|
|
width: 70mm;
|
|
|
|
|
height: 200mm;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.qr-page {
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
position: relative; /* 添加 position: relative; 以便使用 top 和 left */
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
transform-origin: left bottom; /* 设置旋转原点为左下角 */
|
|
|
|
|
top:-50mm; /* 调整 top 以确保元素位置正确 */
|
|
|
|
|
left: 0; /* 调整 left 以确保元素位置正确 */
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.qr-code-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<div>
|
|
|
|
|
${printNode.innerHTML}
|
|
|
|
@ -165,18 +147,20 @@ const open = async (Fdata, vals, val, allSorts) => {
|
|
|
|
|
}),
|
|
|
|
|
(qrCodeElement.innerHTML +=
|
|
|
|
|
`<div class="page qr-page">
|
|
|
|
|
<div class="qr-code-container" style=" padding:0 5mm; border:1px #d3d3d3 solid;display:flex; justify-content: flex-start; font-size:16px;font-weight:700;">
|
|
|
|
|
<img src="${qrCodeData}" width="30%" alt="QR Code"/>
|
|
|
|
|
<div style="margin-left:5mm;text-align:left;width:70%;" >
|
|
|
|
|
<p style="line-height:20px;position: relative;width:100%;">订单名称(Order name):${Fdata.code} <span style="position:absolute;right:0;bottom:0; border:1px solid #999;width:25px;height:25px;line-height:25px; text-align: center;border-radius: 50%;font-weight:500 !important;font-size:12px !important;color:#999;"> ${item.index}</span></p>
|
|
|
|
|
<div class="qr-code-container" style="padding:0mm;font-size:14px !important;font-weight:700;position: relative; height: 200mm">
|
|
|
|
|
<div style="text-align:center;"> <img src="${qrCodeData}" width="80%" alt="QR Code"/></div>
|
|
|
|
|
<div style="margin:0 2mm;text-align:left;" >
|
|
|
|
|
<p style="line-height:16px;">订单名称(Order name):</p>
|
|
|
|
|
<p>${Fdata.code} </p>
|
|
|
|
|
<hr style="margin: -10px 0;"/>
|
|
|
|
|
<p style="line-height:20px">序号(Serial number):${specarr.value}- ${allSorts}</p>
|
|
|
|
|
<p style="line-height:16px;">序号(Serial number):</p>
|
|
|
|
|
<p>${specarr.value}- ${allSorts} </p>
|
|
|
|
|
<hr style="margin: -10px 0;"/>
|
|
|
|
|
<p style="line-height:20px">产品清单(Product list):</p>` +
|
|
|
|
|
<p style="line-height:16px">产品清单(Product list):</p>` +
|
|
|
|
|
tempString +
|
|
|
|
|
` </div>
|
|
|
|
|
<span style="position:absolute;right:0;bottom:0; border:1px solid #999;width:25px;height:25px;line-height:25px; text-align: center;border-radius: 50%;font-weight:500 !important;font-size:12px !important;color:#999;"> ${item.index}</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>`)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
@ -189,55 +173,13 @@ defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.page {
|
|
|
|
|
width: 200mm;
|
|
|
|
|
min-height: 70mm;
|
|
|
|
|
width: 70mm;
|
|
|
|
|
min-height: 200mm;
|
|
|
|
|
margin: auto;
|
|
|
|
|
border: 1px #d3d3d3 solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: white;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
.qrCodeContainer {
|
|
|
|
|
width: 200mm;
|
|
|
|
|
height: 70mm;
|
|
|
|
|
border: 1px #d3d3d3 solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: white;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@page {
|
|
|
|
|
size: 200mm 70mm;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
@media print {
|
|
|
|
|
.page {
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: initial;
|
|
|
|
|
border-radius: initial;
|
|
|
|
|
width: initial;
|
|
|
|
|
min-height: initial;
|
|
|
|
|
box-shadow: initial;
|
|
|
|
|
background: initial;
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.qr-page {
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
}
|
|
|
|
|
.qr-code-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px #d3d3d3 solid;
|
|
|
|
|
width: 200mm;
|
|
|
|
|
height: 69mm;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-container-item {
|
|
|
|
|
width: 100mm;
|
|
|
|
|
height: 69mm;
|
|
|
|
|
}
|
|
|
|
|
/*
|
|
|
|
|
A4的大小:21cm*29.7cm(width:794px;)。
|
|
|
|
|
单位换算:1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
|
|
|
|
|