码单管理打印尺寸调整

zkqy-ui/src/utils/print/codeListPrint.js

@@ -1,11 +1,14 @@
 import moment from 'moment'
 import QRCode from 'qrcodejs2'
 import { v4 as uuidv4 } from "uuid";
+
+let width = 480
+let w = width / 8
 function codeListPrint(data, domId) {
   if (data.length == 0) {
     return
   }
-  let preHtml = ` <div style="width: 800px;position: relative;">
+  let preHtml = ` <div style="width: 480px;position: relative;">
 
     <div style="width: 100%;position: relative;text-align: center;">
       <span style="font-size: 24px;font-weight: 500;">诸暨市新丝维化纤有限公司</span>
@@ -59,7 +62,7 @@ function codeListPrint(data, domId) {
         uuidList.push({
           id: uuid + '' + theNumber,
           qrCodeData: resStr,//id uuid 筒数 净重 毛重 批次 品种 规格 色号 等级 码单号 箱号 
-          size: 150,
+          size: 180,
         })
         res = printEN(uuid + '' + theNumber, item, res)
       } else {//打印中文版
@@ -132,41 +135,41 @@ function printCN(uuid, item, res) {
     </div>
     <table style="width: 100%;border-collapse:collapse;" cellpadding="10" border="1">
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">品种</td>
-        <td style="width: 300px;">${productName}</td>
-        <td style="width: 100px;" colspan="1">规格</td>
-        <td style="width: 300px;" colspan="2">${productSpecifications}</td>
+        <td style="width: ${w}px;" colspan="1">品种</td>
+        <td style="width: ${w * 3}px;">${productName}</td>
+        <td style="width: ${w}px;" colspan="1">规格</td>
+        <td style="width: ${w * 3}px;" colspan="2">${productSpecifications}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">批号</td>
-        <td style="width: 300px;">${lotNum}</td>
-        <td style="width: 100px;" colspan="1">色号</td>
-        <td style="width: 300px;" colspan="2">${productColor}</td>
+        <td style="width: ${w}px;" colspan="1">批号</td>
+        <td style="width: ${w * 3}px;">${lotNum}</td>
+        <td style="width: ${w}px;" colspan="1">色号</td>
+        <td style="width: ${w * 3}px;" colspan="2">${productColor}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">等级</td>
-        <td style="width: 300px;">${levels}</td>
-        <td style="width: 100px;" colspan="1">箱号</td>
-        <td style="width: 250px;" colspan="1">${qrCode}</td>
-        <td style="width: 50px;" colspan="1">${boxNum}</td>
+        <td style="width: ${w}px;" colspan="1">等级</td>
+        <td style="width: ${w * 3}px;">${levels}</td>
+        <td style="width: ${w}px;" colspan="1">箱号</td>
+        <td style="width: ${w * 2 + w / 2}px;" colspan="1">${qrCode}</td>
+        <td style="width: ${w / 2}px;" colspan="1">${boxNum}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">筒数</td>
-        <td style="width: 300px;">${canisterNum}&ensp;&ensp;&ensp;${tubeColor}</td>
-        <td style="width: 100px;" colspan="1">捻向</td>
-        <td style="width: 300px;" colspan="2">${directionOfTwist}</td>
+        <td style="width: ${w}px;" colspan="1">筒数</td>
+        <td style="width: ${w * 3}px;">${canisterNum}&ensp;&ensp;&ensp;${tubeColor}</td>
+        <td style="width: ${w}px;" colspan="1">捻向</td>
+        <td style="width: ${w * 3}px;" colspan="2">${directionOfTwist}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">班次</td>
-        <td style="width: 300px;">${workShifts}&ensp;&ensp;&ensp;${machineTool}</td>
-        <td style="width: 100px;" colspan="1">日期</td>
-        <td style="width: 300px;" colspan="2">${moment(new Date(productionDate)).format('YYYY-MM-DD')}</td>
+        <td style="width: ${w}px;" colspan="1">班次</td>
+        <td style="width: ${w * 3}px;">${workShifts}&ensp;&ensp;&ensp;${machineTool}</td>
+        <td style="width: ${w}px;" colspan="1">日期</td>
+        <td style="width: ${w * 3}px;" colspan="2">${moment(new Date(productionDate)).format('YYYY-MM-DD')}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">毛重</td>
-        <td style="width: 300px;">${grossWeight}</td>
-        <td style="width: 100px;" colspan="1">净重</td>
-        <td style="width: 300px;font-size: 20px;font-weight: 500;" colspan="2">${suttle}</td>
+        <td style="width: ${w}px;" colspan="1">毛重</td>
+        <td style="width: ${w * 3}px;">${grossWeight}</td>
+        <td style="width: ${w}px;" colspan="1">净重</td>
+        <td style="width: ${w * 3}px;font-size: 20px;font-weight: 500;" colspan="2">${suttle}</td>
       </tr>
     </table>`
 
@@ -197,42 +200,41 @@ function printEN(uuid, item, res) {
     boxNum,//箱号
     packaging
   } = item
-  res += `<div style="width: 800px;position: relative;">
+  res += `<div style="width: 480px;position: relative;">
     <table style="width: 100%;border-collapse:collapse;" cellpadding="10" border="1">
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">GRADE：</td>
-        <td style="width: 700px; font-size: 20px;font-weight: 600;" colspan="2">${levels}&ensp;&ensp;&ensp;${productSpecifications}</td>
+        <td style="width: ${w}px;" colspan="1">GRADE：</td>
+        <td style="width: ${w * 7}px; font-size: 20px;font-weight: 600;" colspan="2">${levels}&ensp;&ensp;&ensp;${productSpecifications}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">LOT NO.：</td>
-        <td style="width: 700px;" colspan="2">${qrCode}YL</td>
+        <td style="width: ${w}px;" colspan="1">LOT NO.：</td>
+        <td style="width: ${w * 7}px;" colspan="2">${qrCode}YL</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">COLOR NO.：</td>
-        <td style="width: 700px;font-size: 20px;font-weight: 600;" colspan="2">${productColor}&ensp;&ensp;&ensp;${lotNum}</td>
+        <td style="width: ${w}px;" colspan="1">COLOR NO.：</td>
+        <td style="width: ${w * 7}px;font-size: 20px;font-weight: 600;" colspan="2">${productColor}&ensp;&ensp;&ensp;${lotNum}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">CONE NO.:</td>
-        <td style="width: 550px;">${canisterNum}</td>
-        <td style="width: 150px;" rowspan="3">
+        <td style="width: ${w}px;" colspan="1">CONE NO.:</td>
+        <td style="width: ${w * 4}px;">${canisterNum}</td>
+        <td style="width: ${w * 3}px;" rowspan="3">
           <div style="width: 100%;display: flex;justify-content: center;margin:5px 0;">
-            <div id="${uuid}" style="width: 150px;height: 150px;background-color: aqua;"></div>
+            <div id="${uuid}" style="width: ${w * 3}px;height: ${w * 3}px;background-color: aqua;"></div>
           </div>
         </td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">NET WEIGHT：</td>
-        <td style="width: 550px;font-size: 20px;font-weight: 600;">${suttle}</td>
-        <!-- <td style="width: 150px;"></td> -->
+        <td style="width: ${w}px;" colspan="1">NET WEIGHT：</td>
+        <td style="width: ${w * 4}px;font-size: 20px;font-weight: 600;">${suttle}</td>
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">GROSS WEIGHT：</td>
-        <td style="width: 550px;font-size: 20px;font-weight: 600;">${grossWeight}</td>
-        <!-- <td style="width: 150px;"></td> -->
+        <td style="width: ${w}px;" colspan="1">GROSS WEIGHT：</td>
+        <td style="width: ${w * 4}px;font-size: 20px;font-weight: 600;">${grossWeight}</td>
+
       </tr>
       <tr style="text-align: center;">
-        <td style="width: 100px;" colspan="1">CARTON NO：</td>
-        <td style="width: 700px;" colspan="2">${boxNum}</td>
+        <td style="width: ${w}px;" colspan="1">CARTON NO：</td>
+        <td style="width: ${w * 7}px;" colspan="2">${boxNum}</td>
       </tr>
     </table>
   </div>`