From 983a84024ffba5a42184d19306e7f81889e7ef73 Mon Sep 17 00:00:00 2001
From: qiuhongwu <Qhw0227@163.com>
Date: Mon, 19 Aug 2024 15:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=8F=98=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/biz/Packaging/printDialog.vue   | 96 ++++---------------
 1 file changed, 19 insertions(+), 77 deletions(-)

diff --git a/mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue b/mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue
index 848767c3..5b32e2aa 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue
@@ -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*/