调整打印页面布局和样式

mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/print.vue

@@ -1,29 +1,31 @@
 <template>
-  <el-dialog v-model="dialogVisible" title="" width="900px" append-to-body>
+  <el-dialog v-model="dialogVisible" title="" width="1200px" append-to-body>
     <div class="print-wrap">
       <div class="header header-grid">
-        <div class="cell company">杭州合立模具有限公司</div>
+        <div class="cell company-title">
-        <div class="cell title">委外加工清单及送货单</div>
+          <span class="company">杭州合立模具有限公司</span>
-        <div class="cell audit">审核：</div>
+          <span class="title">委外工单及送货单</span>
-        <div class="cell handler">委外加工经手人：</div>
+        </div>
-        <div class="cell receiver">收货人：</div>
+        <div class="cell audit"> 审核：<span class="sign-space"></span> </div>
+        <div class="cell handler"> 委外加工经手人：<span class="sign-space"></span> </div>
+        <div class="cell receiver"> 收货人：<span class="sign-space"></span> </div>
       </div>
 
       <table class="sheet" border="1" cellspacing="0" cellpadding="0">
         <!-- 固定列宽，总计 100% -->
         <colgroup>
           <col style="width: 4%" />
-          <col style="width: 8%" />
-          <col style="width: 9%" />
-          <col style="width: 11%" />
           <col style="width: 9%" />
+          <col style="width: 7.5%" />
+          <col style="width: 15%" />
+          <col style="width: 5.5%" />
           <col style="width: 14%" />
           <col style="width: 6%" />
-          <col style="width: 12%" />
+          <col style="width: 13.5%" />
-          <col style="width: 6%" />
+          <col style="width: 5%" />
-          <col style="width: 6%" />
+          <col style="width: 5%" />
           <col style="width: 7%" />
-          <col style="width: 8%" />
+          <col style="width: 8.5%" />
         </colgroup>
         <thead>
           <tr>
@@ -56,8 +58,6 @@
             <td class="num">{{ row['总价格'] }}</td>
             <td>{{ fmtDate(row['要求日期']) }}</td>
           </tr>
-        </tbody>
-        <tfoot>
           <tr class="sum-row">
             <td colspan="8" class="sum-label">合计</td>
             <td class="num sum-value">{{ sumQuantity }}</td>
@@ -65,13 +65,16 @@
             <td class="num sum-value">{{ sumTotal }}</td>
             <td></td>
           </tr>
-        </tfoot>
+        </tbody>
       </table>
 
       <div class="footer-sign sign-row">
-        <div>合立经手人：{{ duEmpName }}</div>
+        <div class="sign-item">
-        <div>审核人：</div>
+          <span class="label">合立经手人：</span>
-        <div>委外加工经手人：</div>
+          <span class="name">{{ duEmpName }}</span>
+        </div>
+        <div class="sign-item"> 审核人：<span class="sign-space"></span> </div>
+        <div class="sign-item"> 委外加工经手人：<span class="sign-space"></span> </div>
       </div>
     </div>
 
@@ -129,20 +132,62 @@ const onPrint = () => {
       .print-wrap { width: calc(222mm - 12mm); min-height: calc(140mm - 12mm); }
 
       .header.header-grid {
-        display: grid;
+        display: flex;
-        grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
+        justify-content: flex-start;
         align-items: center;
         column-gap: 12px;
         margin-bottom: 8px;
       }
-      .header.header-grid .company { font-size: 12px; text-align: left; }
+      .header.header-grid .company-title { 
-      .header.header-grid .title,
+        font-size: 12px; 
+        text-align: left; 
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
       .header.header-grid .audit,
       .header.header-grid .handler,
-      .header.header-grid .receiver { font-size: 12px; text-align: right; }
+      .header.header-grid .receiver { 
+        font-size: 12px; 
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+        
+        /* 合计行样式 */
+        .sum-row {
+          border-top: 2px solid #000;
+          font-weight: bold;
+        }
+        .sum-label {
+          text-align: right;
+          font-weight: bold;
+        }
+        .sum-value {
+           font-weight: bold;
+         }
+        /* 合计行样式 */
+        .sum-row {
+          border-top: 2px solid #000;
+          font-weight: bold;
+        }
+        .sum-label {
+          text-align: right;
+          font-weight: bold;
+        }
+        .sum-value {
+          font-weight: bold;
+        }
+        .sign-space {
+          display: inline-block;
+          width: 50px;
+          height: 18px; 
+          margin-left: 4px;
+        }
 
       .sheet { width:100%; border-collapse:collapse; font-size:12px; table-layout: fixed; }
-      .sheet th, .sheet td { border:1px solid #333; padding:6px 4px; text-align:center; line-height:1.3; vertical-align: middle; }
+      .sheet th, .sheet td { border:1px solid #333; padding:4px 0px; text-align:center; line-height:1; vertical-align: middle; }
       .sheet thead th { background:#f5f7fa; font-weight:600; }
       .sheet .text-left { text-align:left; padding-left:6px; }
       .sheet .spec { word-break: break-word; white-space: normal; }
@@ -150,7 +195,9 @@ const onPrint = () => {
       .sheet tfoot .sum-label, .sheet tfoot .sum-value { font-weight:700; }
       .sheet tfoot .sum-row td { border-top: 2px solid #000; }
 
-      .sign-row { display:flex; justify-content:space-between; margin-top:12px; font-size:12px; }
+      .sign-row { display:flex; justify-content:flex-start; margin-top:12px; font-size:12px;gap:30px }
+      .sign-item { display: flex; align-items: center; }
+      .sign-item .label { margin-right: 4px; } 
     </style>
   `)
   doc.write(printNode.outerHTML)
@@ -165,26 +212,47 @@ const onPrint = () => {
 <style scoped lang="less">
 .print-wrap {
   /* 预览时也按目标纸张尺寸展示，便于校对 */
-  width: 222mm;
+  width: 100%;
   min-height: 140mm;
   background: #fff;
 }
+
 .header.header-grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
+  justify-content: flex-start;
   align-items: center;
   column-gap: 12px;
 }
+
+.header.header-grid .company-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .header.header-grid .company {
+  font-weight: bold;
 }
+
 .header.header-grid .title {
-  text-align: center;
+  font-weight: bold;
 }
+
 .header.header-grid .audit,
 .header.header-grid .handler,
 .header.header-grid .receiver {
-  font-size: 12px;
+  display: flex;
-  text-align: right;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* 签字空间样式 */
+.sign-space {
+  display: inline-block;
+  width: 70px;
+  height: 18px;
+
+  margin-left: 4px;
 }
 
 .sheet {
@@ -193,37 +261,57 @@ const onPrint = () => {
   border-collapse: collapse;
   font-size: 12px;
   width: 100%;
+
   th,
   td {
-    border: 1px solid #333;
     padding: 6px 4px;
     text-align: center;
     line-height: 1.3;
     vertical-align: middle;
   }
+
   thead th {
     background: #f5f7fa;
     font-weight: 600;
   }
+
   .text-left {
     text-align: left;
     padding-left: 6px;
   }
+
   .spec {
     word-break: break-word;
     white-space: normal;
   }
+
   .num {
     text-align: right;
     padding-right: 6px;
   }
+
   tfoot .sum-row td {
     border-top: 2px solid #000;
   }
 }
+
 .footer-sign.sign-row {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   margin-top: 12px;
+  gap: 30px;
+}
+
+.sign-item {
+  display: flex;
+  align-items: center;
+}
+
+.sign-item .label {
+  margin-right: 4px;
+}
+
+.sign-item .name {
+  // font-weight: bold;
 }
 </style>