feat(打印模板): 改进打印功能并优化表格样式

src/views/warehouseManagement/inventoryAllocation/components/print-template-bs-car.vue

@@ -4,6 +4,7 @@
     :visible.sync="QRvisible"
     v-if="QRvisible"
     width="90%"
+    destroy-on-close
   >
     <div
       id="printSection"
@@ -69,6 +70,7 @@
       </div>
       <table
         cellspacing="0"
+        class="print-table"
         border
         style="
           width: 100%;
@@ -83,19 +85,30 @@
             <td style="padding: 5px; width: 35px"> 序号 </td>
             <td style="padding: 5px; width: 10%;"> 车型 </td>
             <td style="padding: 5px; width: 12%;"> 料号 </td>
-            <td style="padding: 5px; width: 18%;"> 零件名 </td>
+            <td style="padding: 5px; width: 14%;"> 零件名 </td>
             <td style="padding: 5px; width: 8%;"> 单位</td>
             <td style="padding: 5px; width: 8%;"> 交货数</td>
             <td style="padding: 5px; width: 8%;"> 实收数量</td>
-            <td style="padding: 5px; width: 15%"> 客户订单号</td>
+            <td style="padding: 5px; width: 11%"> 客户订单号</td>
             <td style="padding: 5px; width: 8%;"> 重量</td>
-            <td style="padding: 5px; width: 10%;"> 工艺</td>
+            <td style="padding: 5px; width: 14%;"> 工艺</td>
             <td style="padding: 5px; width: 12%;"> 备注</td>
           </tr>
 
           <tr align="center" v-for="(item, index) in detailList">
             <td style="padding: 5px"> {{ index + 1 }} </td>
-            <td style="padding: 5px">  </td>
+            <td style="padding: 5px"> 
+              <span v-if="isPrint">{{ item.car }}</span>
+              <el-input
+                v-else
+                type="textarea"
+                style="width: 100%; border: none;"
+                placeholder=""
+                v-model="item.car"
+                class="input-with-select"
+                autosize
+              ></el-input> 
+            </td>
             <td style="padding: 5px"> {{ item.categoryCode }} </td>
             <td style="padding: 5px">
               {{ item.categoryName }}
@@ -105,7 +118,18 @@
             <td style="padding: 5px"> </td>
             <td style="padding: 5px"> {{ item.saleOrderNo }}</td>
             <td style="padding: 5px"> {{ item.weight }}</td>
-            <td style="padding: 5px">{{ item.produceRoutingName }} </td>
+            <td style="padding: 5px">
+              <span v-if="isPrint">{{ item.produceRoutingName }}</span>
+              <el-input
+                v-else
+                type="textarea"
+                style="width: 100%; border: none;"
+                placeholder=""
+                v-model="item.produceRoutingName"
+                class="input-with-select"
+                autosize
+              ></el-input>
+            </td>
             <td style="padding: 5px"> {{ item.remark }} </td>
           </tr>
           <tr style="height: 40px;">
@@ -120,7 +144,9 @@
               <div style="display: flex; align-items: center;" class="foot">
                 <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                   <span style="width: 50px;">铁框：</span>
+                  <span v-if="isPrint">{{ query.tk }}</span>
                   <el-input
+                    v-else
                     style="width: calc(100% - 50px); border: none;"
                     placeholder=""
                     v-model="query.tk"
@@ -130,8 +156,10 @@
                 </div>
                 <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                   <span style="width: 50px;">托盘：</span>
+                  <span v-if="isPrint">{{ query.tp }}</span>
                   <el-input
-                    style="width: calc(100% - 50px); border: none;"
+                    v-else
+                    style="width: 100%; border: none;"
                     placeholder=""
                     v-model="query.tp"
                     class="input-with-select"
@@ -139,7 +167,9 @@
                 </div>
                 <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                   <span style="width: 50px;">工装：</span>
+                  <span v-if="isPrint">{{ query.gz }}</span>
                   <el-input
+                    v-else
                     style="width: calc(100% - 50px); border: none;"
                     placeholder=""
                     v-model="query.gz"
@@ -148,7 +178,9 @@
                 </div>
                 <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                   <span style="width: 50px;">胶框：</span>
+                  <span v-if="isPrint">{{ query.jk }}</span>
                   <el-input
+                    v-else
                     style="width: calc(100% - 50px); border: none;"
                     placeholder=""
                     v-model="query.jk"
@@ -172,7 +204,7 @@
           <div>发货人：{{ infoData.allotName }}</div>
         </div>
         <div style="flex: 1">
-          <div>承运人：</div>
+          <div>承运人：{{ infoData.carNo }}</div>
         </div>
         <div style="flex: 1"> 收货人: </div>
         <!-- <div style="flex: 1"> 托盘:{{   infoData.trayNum }} </div> -->
@@ -204,6 +236,7 @@
     },
     data() {
       return {
+        isPrint: false,
         checked: '',
         QRvisible: false,
         isPrintPrice: false,
@@ -221,9 +254,14 @@
 
     methods: {
       print() {
+        this.isPrint = true;
+        // 等待 DOM 更新完成后再打印，确保输入框变成不可编辑的 span
+        this.$nextTick(() => {
           // 如果 ref 是组件可以用 this.$refs.printRef.$el
-          printElement(this.$refs.printRef);
+          // printElement(this.$refs.printRef);
           //printElement(this.$refs.printRef, { });  // 参数二加更多参数同 printThis 方法
+          this.print1();
+        });
       },
       async open(row) {
         this.row = row;
@@ -263,6 +301,7 @@
 
       print1() {
         const printSection = document.getElementById('printSection');
+        const self = this;
         // 创建打印任务
         const printWindow = window.open('', '_blank');
         printWindow.document.open();
@@ -274,6 +313,20 @@
         printWindow.document.write(printSection.innerHTML);
         printWindow.document.write('</body></html>');
         printWindow.document.close();
+        
+        // 监听打印窗口关闭事件，恢复输入框
+        printWindow.onbeforeunload = function() {
+          self.isPrint = false;
+        };
+        
+        printWindow.onunload = function() {
+          self.isPrint = false;
+        };
+        
+        printWindow.onafterprint = function() {
+          self.isPrint = false;
+        };
+        
         printWindow.onload = function () {
           printWindow.print();
         };
@@ -283,11 +336,24 @@
 </script>
 
 <style lang="scss" scoped>
- :deep(.foot) {
-    .el-input--medium .el-input__inner {
+:deep(.print-table) {
+  .el-input--medium {
+    font-size: 12px !important;
+    .el-textarea__inner {
       border: none;
       padding-left: 0;
       padding-right: 0;
     }
+  }
+}
+ :deep(.foot) {
+    .el-input--medium {
+      font-size: 12px !important;
+      .el-input__inner {
+        border: none;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
  }
 </style>