修改样式bug

src/views/batchRecord/print/electrodeBatchRecord/processInspectionRecord.vue

@@ -1,59 +1,82 @@
 <template>
-  <ele-modal :title="`${form.productName || ''}过程检验记录`" :visible.sync="visible" v-if="visible" width="90%" :maxable="true">
+  <ele-modal
+    :title="`${form.productName || ''}过程检验记录`"
+    :visible.sync="visible"
+    v-if="visible"
+    width="90%"
+    :maxable="true"
+  >
     <div id="printSection_processInspectionRecord">
       <div class="report-container">
         <div class="report-header">
           <div class="header-left">
-            <img src="" alt="特瑞精密医疗" class="logo" />
+            <img :src="logoSrc" alt="特瑞精密医疗" class="logo" />
           </div>
-          <div class="header-center">湖 南 特 瑞 精 密 医 疗 器 械 有 限 公 司</div>
+          <div class="header-center"
+            >湖 南 特 瑞 精 密 医 疗 器 械 有 限 公 司</div
+          >
         </div>
-        <div class="report-title">{{ form.productName }}_生产过程检验记录(Ver1.0)</div>
+        <div class="report-title"
+          >{{ form.productName }}_生产过程检验记录(Ver1.0)</div
+        >
         <div class="form-code">表单编号：TR.D-105/ZL &nbsp; 版本：A/0</div>
         <table class="info-table">
+          <colgroup>
+            <col style="width: 8%" />
+            <col style="width: 14.4%" />
+            <col style="width: 9.6%" />
+            <col style="width: 19.6%" />
+            <col style="width: 15.4%" />
+            <col style="width: 33%" />
+          </colgroup>
           <tr>
-            <td style="width:20%;">生产批号</td>
-            <td style="width:30%;">{{ form.batchNo }}</td>
-            <td style="width:20%;">生产日期</td>
-            <td style="width:10%;">{{ form.productionDate }}</td>
-            <td style="width:10%;">型号规格</td>
-            <td style="width:10%;">{{ form.specification }}</td>
+            <td>生产批号</td>
+            <td>{{ form.batchNo }}</td>
+            <td>生产日期</td>
+            <td>{{ form.productionDate }}</td>
+            <td>型号规格</td>
+            <td>{{ form.specification }}</td>
           </tr>
         </table>
-        <div class="inspection-basis">检验依据：TR.C-267/ZL《一次性射频消融电极过程检验操作规程》</div>
+        <div class="inspection-basis"
+          >检验依据：TR.C-267/ZL《一次性射频消融电极过程检验操作规程》</div
+        >
         <table class="main-table">
+          <colgroup>
+            <col style="width: 8%" />
+            <col style="width: 7%" />
+            <col style="width: 7.4%" />
+            <col style="width: 29.2%" />
+            <col style="width: 4.3%" />
+            <col style="width: 6.5%" />
+            <col style="width: 4.6%" />
+            <col style="width: 20.7%" />
+            <col style="width: 12.3%" />
+          </colgroup>
           <thead>
             <tr>
-              <th style="width:70px;">工序名称</th>
-              <th style="width:80px;">检验项目</th>
-              <th style="width:70px;">检验方法</th>
+              <th>工序名称</th>
+              <th>检验项目</th>
+              <th>检验方法</th>
               <th>质量标准</th>
-              <th style="width:40px;">检验时机</th>
-              <th style="width:60px;">检验时间</th>
-              <th style="width:40px;">检验数量</th>
-              <th style="width:100px;">检验结果</th>
-              <th style="width:90px;">批量判定</th>
+              <th>检验时机</th>
+              <th>检验时间</th>
+              <th>检验数量</th>
+              <th>检验结果</th>
+              <th>批量判定</th>
             </tr>
           </thead>
           <tbody>
             <!-- 领料 -->
             <tr>
               <td>领料</td>
-              <td colspan="3">领料品名、规格、数量等与物料一致</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td colspan="7">领料品名、规格、数量等与物料一致</td>
               <td>□符合 □不符合</td>
             </tr>
             <!-- 生产前清场 -->
             <tr>
               <td>生产前清场</td>
-              <td colspan="3">TR.C-009/ZL《清场管理规定》</td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
+              <td colspan="7">TR.C-009/ZL《清场管理规定》</td>
               <td>□符合 □不符合</td>
             </tr>
             <!-- 中外包 - 外观 目测 row1 -->
@@ -61,7 +84,9 @@
               <td rowspan="8">中外包</td>
               <td rowspan="8">外观</td>
               <td rowspan="8">目测</td>
-              <td>标签信息应符合法规要求，包装的数量和标签上一致。产品的标识要整齐、清晰，箱外的标识与箱内的产品一致。</td>
+              <td rowspan="2"
+                >标签信息应符合法规要求，包装的数量和标签上一致。产品的标识要整齐、清晰，箱外的标识与箱内的产品一致。</td
+              >
               <td></td>
               <td></td>
               <td></td>
@@ -73,11 +98,10 @@
               <td></td>
               <td></td>
               <td></td>
-              <td></td>
               <td>□合格 □不合格</td>
             </tr>
             <tr>
-              <td>应附使用说明书、合格证。</td>
+              <td rowspan="2">应附使用说明书、合格证。</td>
               <td></td>
               <td></td>
               <td></td>
@@ -89,11 +113,10 @@
               <td></td>
               <td></td>
               <td></td>
-              <td></td>
               <td>□合格 □不合格</td>
             </tr>
             <tr>
-              <td>粘合结实，美观得体。</td>
+              <td rowspan="2">粘合结实，美观得体。</td>
               <td></td>
               <td></td>
               <td></td>
@@ -105,11 +128,10 @@
               <td></td>
               <td></td>
               <td></td>
-              <td></td>
               <td>□合格 □不合格</td>
             </tr>
             <tr>
-              <td>产品的摆放要符合装箱要求。</td>
+              <td rowspan="2">产品的摆放要符合装箱要求。</td>
               <td></td>
               <td></td>
               <td></td>
@@ -121,7 +143,6 @@
               <td></td>
               <td></td>
               <td></td>
-              <td></td>
               <td>□合格 □不合格</td>
             </tr>
             <!-- 灭菌(委外) - 关键工艺参数 -->
@@ -129,7 +150,9 @@
               <td rowspan="2">灭菌(委外)</td>
               <td>关键工艺参数</td>
               <td>核对灭菌报告及生物指示物监测原始记录</td>
-              <td>①预处理：时间≥720min，温度45℃～55℃，湿度30%～80%RH。②灭菌：EO注入量450mg/L～710mg/L；EO暴露时间480min±5min；EO暴露温度50℃±3℃；EO暴露湿度30%～80%RH；氮气清洗次数0～3次；空气清洗次数0～1次。</td>
+              <td
+                >①预处理：时间≥720min，温度45℃～55℃，湿度30%～80%RH。②灭菌：EO注入量450mg/L～710mg/L；EO暴露时间480min±5min；EO暴露温度50℃±3℃；EO暴露湿度30%～80%RH；氮气清洗次数0～3次；空气清洗次数0～1次。</td
+              >
               <td>批检</td>
               <td></td>
               <td></td>
@@ -161,7 +184,9 @@
             <!-- 物料平衡 -->
             <tr>
               <td>物料平衡</td>
-              <td colspan="6">产品物料、包装材料及标签的物料平衡率应为100%，物料平衡率偏差应不大于5%</td>
+              <td colspan="6"
+                >产品物料、包装材料及标签的物料平衡率应为100%，物料平衡率偏差应不大于5%</td
+              >
               <td></td>
               <td>□符合 □不符合</td>
             </tr>
@@ -173,13 +198,15 @@
               <td>□符合 □不符合</td>
             </tr>
             <!-- 综合判定 -->
-            <tr>
+            <tr class="judgement-row">
               <td>综合判定</td>
-              <td colspan="2"></td>
-              <td style="text-align:center;">□合格</td>
-              <td colspan="2" style="text-align:center;">□返工</td>
-              <td colspan="2" style="text-align:center;">□报废</td>
-              <td></td>
+              <td colspan="8">
+                <div class="judgement-options">
+                  <span>□合格</span>
+                  <span>□返工</span>
+                  <span>□报废</span>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -193,12 +220,15 @@
 </template>
 
 <script>
+  import logoImg from '@/assets/logo.png';
+
   export default {
     name: 'ProcessInspectionRecord',
     data() {
       return {
         visible: false,
-        form: {}
+        form: {},
+        logoSrc: logoImg
       };
     },
     methods: {
@@ -207,29 +237,65 @@
         this.visible = true;
       },
       print() {
-        const el = document.getElementById('printSection_processInspectionRecord');
+        const el = document.getElementById(
+          'printSection_processInspectionRecord'
+        );
         const win = window.open('', '_blank');
         win.document.open();
         win.document.write('<html><head><title>生产过程检验记录</title>');
         win.document.write('<style>');
-        win.document.write('body{margin:0;padding:20px;font-family:SimSun,serif;font-size:12px;}');
-        win.document.write('.report-container{padding:20px;background:#fff;}');
-        win.document.write('.report-header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:5px;}');
-        win.document.write('.header-center{font-size:22px;letter-spacing:4px;}');
-        win.document.write('.report-title{text-align:center;font-size:18px;font-weight:bold;margin-bottom:5px;text-decoration:underline;}');
-        win.document.write('.form-code{text-align:right;font-size:12px;margin-bottom:5px;}');
-        win.document.write('.info-table{width:100%;border-collapse:collapse;margin-bottom:5px;}');
-        win.document.write('.info-table td{border:1px solid #000;padding:5px 8px;font-size:12px;}');
-        win.document.write('.inspection-basis{margin-bottom:5px;font-size:12px;}');
-        win.document.write('.main-table{width:100%;border-collapse:collapse;}');
-        win.document.write('.main-table th,.main-table td{border:1px solid #000;padding:4px 6px;font-size:11px;text-align:left;vertical-align:middle;}');
-        win.document.write('.main-table th{text-align:center;font-weight:bold;}');
+        win.document.write('@page{size:A4 landscape;margin:8mm;}');
+        win.document.write('*{box-sizing:border-box;}');
+        win.document.write(
+          'body{margin:0;padding:0;color:#000;font-family:SimSun,serif;font-size:12px;}'
+        );
+        win.document.write(
+          '.report-container{width:100%;padding:0;background:#fff;}'
+        );
+        win.document.write(
+          '.report-header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:5px;}'
+        );
+        win.document.write(
+          '.header-left{position:absolute;left:0;}.header-left .logo{width:115px;height:45px;object-fit:contain;}'
+        );
+        win.document.write(
+          '.header-center{font-size:22px;letter-spacing:4px;}'
+        );
+        win.document.write(
+          '.report-title{text-align:center;font-size:18px;font-weight:bold;margin-bottom:5px;text-decoration:underline;}'
+        );
+        win.document.write(
+          '.form-code{text-align:right;font-size:12px;margin-bottom:5px;}'
+        );
+        win.document.write(
+          '.info-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:5px;}'
+        );
+        win.document.write(
+          '.info-table td{border:1px solid #000;padding:5px 8px;font-size:12px;}'
+        );
+        win.document.write(
+          '.inspection-basis{margin-bottom:5px;font-size:12px;}'
+        );
+        win.document.write(
+          '.main-table{width:100%;table-layout:fixed;border-collapse:collapse;}'
+        );
+        win.document.write(
+          '.main-table th,.main-table td{border:1px solid #000;padding:4px 6px;color:#000;font-size:11px;line-height:1.35;text-align:left;vertical-align:middle;overflow-wrap:anywhere;}'
+        );
+        win.document.write(
+          '.main-table th{text-align:center;font-weight:bold;}'
+        );
+        win.document.write(
+          '.judgement-row{height:32px;}.judgement-row td{text-align:center;white-space:nowrap;}.judgement-options{display:flex;align-items:center;justify-content:space-around;width:100%;}'
+        );
         win.document.write('</style>');
         win.document.write('</head><body>');
         win.document.write(el.innerHTML);
         win.document.write('</body></html>');
         win.document.close();
-        win.onload = function() { win.print(); };
+        win.onload = function () {
+          win.print();
+        };
       }
     }
   };
@@ -240,7 +306,9 @@
     font-family: 'SimSun', serif;
     padding: 20px;
     background: #fff;
+    color: #000;
     font-size: 12px;
+    box-sizing: border-box;
   }
   .report-header {
     display: flex;
@@ -254,7 +322,9 @@
     left: 0;
   }
   .header-left .logo {
-    height: 40px;
+    width: 115px;
+    height: 45px;
+    object-fit: contain;
   }
   .header-center {
     font-size: 22px;
@@ -274,6 +344,7 @@
   }
   .info-table {
     width: 100%;
+    table-layout: fixed;
     border-collapse: collapse;
     margin-bottom: 5px;
   }
@@ -286,18 +357,35 @@
   }
   .main-table {
     width: 100%;
+    table-layout: fixed;
     border-collapse: collapse;
   }
   .main-table th,
   .main-table td {
     border: 1px solid #000;
     padding: 4px 6px;
+    color: #000;
     font-size: 11px;
+    line-height: 1.35;
     text-align: left;
     vertical-align: middle;
+    overflow-wrap: anywhere;
   }
   .main-table th {
     text-align: center;
     font-weight: bold;
   }
+  .judgement-row {
+    height: 32px;
+  }
+  .judgement-row td {
+    text-align: center;
+    white-space: nowrap;
+  }
+  .judgement-options {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+  }
 </style>