【采购订单维护】优化drp采购订单打印模板样式

src/views/purchase/purchase-order/print/index.vue

@@ -36,43 +36,43 @@
       id="PurchaseOrderPdf"
       style="
         position: relative;
-        width: 210mm;
         font-size: 12px;
-        line-height: 1.0;
+        line-height: 1;
         font-family: '宋体';
         z-index: -1;
       "
     >
+      <!-- width: 210mm; -->
       <img
         :src="src"
         :alt="company"
-        style="position: absolute; top: 10px; left: 10px; z-index: 1"
+        style="position: absolute; top: 10px; left: 10px; z-index: 2"
       />
       <div style="position: absolute; top: 0; left: 0; z-index: 2">
         <h1>湖南德荣医疗集团 - 采购订单</h1>
         <p style="display: flex">
-          <span style="width: 60%">甲方（购货方）：{{ params.puOrgName }}</span>
+          <span style="width: 50%">甲方（购货方）：{{ params.puOrgName }}</span>
-          <span style="width: 40%">签订日期：{{ params.billDate }}</span>
+          <span style="width: 25%">订单编号：{{ params.code }}</span>
+          <span style="width: 25%">签订日期：{{ params.billDate }}</span>
         </p>
         <p style="display: flex">
-          <span style="width: 60%">订单编号：{{ params.code }}</span>
+          <!-- <span style="width: 50%">采购部门：{{ params.puDeptName }}</span> -->
-          <span style="width: 40%">采购部门：{{ params.puDeptName }}</span>
+          <span style="width: 50%">甲方收票地址：{{ params.address }}</span>
+          <span style="width: 25%">采购员：{{ params.buyerName }}</span>
+          <!-- <span style="width: 25%">联系方式：{{ params.contactsPhone }}</span> -->
+          <span style="width: 25%">E-mail：</span>
         </p>
+        <div style="border-bottom: 1px dashed black"></div>
         <p style="display: flex">
-          <span style="width: 60%">采购员：{{ params.buyerName }}</span>
+          <span style="width: 50%"
-          <span style="width: 40%"> 采购项目： </span>
+            >乙方（供货方）：{{ params.supplierName }}</span
+          >
+          <span style="width: 25%">ATTN：</span>
+          <span style="width: 25%">E-mail：</span>
         </p>
         <p style="display: flex">
-          <span style="width: 60%">E-mail：</span>
+          <span>甲方收货地址及联系人：</span>
-          <span style="width: 40%">联系方式：{{ params.contactsPhone }}</span>
         </p>
-        <P style="color: #ff4949"> 甲方收票地址：{{ params.address }} </P>
-        <div style="border-bottom: 1px dashed black"></div>
-        <p>乙方（供货方）：{{ params.supplierName }}</p>
-        <p>ATTN：</p>
-        <p>E-MAIL：</p>
-        <p>收货地址：</p>
-        <p>收货联系人：</p>
 
         <el-table
           show-summary
@@ -163,20 +163,21 @@ export default {
       type: [String, Number],
       require: true,
     },
-    value:{
+    value: {
-      type:Object,
+      type: Object,
-      require:true
+      require: true,
-    }
+    },
   },
   data() {
-    console.log(this.value,'this.value');
+    console.log(this.value, "this.value");
     return {
+      size: "mini",
       visible: false,
       disabled: false,
       company: "湖南德荣医疗器械有限公司",
       print: {
         id: "PurchaseOrderPdf",
-        popTitle: "配置页眉标题", // 打印配置页上方的标题
+        popTitle: "&nbsp;", // 打印配置页上方的标题
         extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
         preview: false, // 是否启动预览模式，默认是false
         previewTitle: "预览的标题", // 打印预览的标题
@@ -221,11 +222,11 @@ export default {
       },
       set: function () {},
     },
-    params:{
+    params: {
-      get:function(){
+      get: function () {
         return this.value;
-      }
+      },
-    }
+    },
   },
   watch: {},
   methods: {
@@ -276,4 +277,40 @@ export default {
   destroyed() {},
 };
 </script>
-<style scoped></style>
+<style lang="scss" media="print">
+@media print {
+  #PurchaseOrderPdf {
+    width: 100%;
+  }
+  p {
+    margin: 4px 0;
+  }
+  .el-table > .el-table__header-wrapper > .el-table__header > thead > tr > th,
+  .el-table
+    > .el-table__body-wrapper
+    > .el-table__body
+    > tbody
+    > .el-table__row
+    > td {
+    padding: 0;
+  }
+  table {
+    table-layout: auto !important;
+  }
+  .el-table__header,
+  .el-table__body,
+  .el-table__footer {
+    width: 100% !important;
+    color: #000 !important;
+  }
+  .el-table .cell,
+  .el-table th.el-table__cell > .cell {
+    line-height: 18px !important;
+  }
+  .el-table__footer-wrapper tbody td.el-table__cell,
+  .el-table__header-wrapper tbody td.el-table__cell,
+  .el-table th.el-table__cell > .cell {
+    color: #000 !important;
+  }
+}
+</style>