【优化】-打印页面样式的调整和内容的增加

src/views/mailManagement/PrintPage.vue

@@ -2,7 +2,6 @@
   <div>
     <div id="needPrint">
       <div class="sheet-box">
-
         <div class="sendName">{{ userInfo.realname }}</div>
         <div class="sendPhone">{{ userInfo.phone }}</div>
 
@@ -27,6 +26,13 @@
 
         <div class="arriveCity"></div>
         <div class="arrivePostNo">{{ mailDetail.postalCode }}</div>
+        <!-- 增加寄件人签署的签名功能-->
+        <div class="other-send-name">{{ userInfo.realname }}</div>
+        <div class="send-time">{{ currentTime }}</div>
+
+        <div class="inner-info-name">{{isContract ? '合同' : '发票'}}</div>
+
+        <div class="remark">如无法投出，请退收寄局，不要退原址</div>
       </div>
     </div>
   </div>
@@ -36,15 +42,19 @@
 import Vue from 'vue'
 import { USER_INFO } from '../../store/mutation-types'
 import { getPrintPostContactByMailId } from '../../api/incomePaymentsApi'
+import AImg from './bg.jpg'
 
 export default {
   name: 'PrintPage',
   data() {
     return {
+      AImg,
       // 邮寄项目信息
       mailDetail: {},
       // 用户信息
       userInfo: {},
+      // 当前时间 8 寄件人签署 处需要
+      currentTime: `${new Date().getFullYear()}     ${new Date().getMonth() + 1}     ${new Date().getDate()}`,
       sendCompanyName: '',
       sendAddress: '',
       sendPostCode: '',
@@ -94,17 +104,19 @@ export default {
       // 将整体dom替换为需要打印的部分
       window.document.body.innerHTML = printDom
       // 调用页面的打印方法打印整个页面
-      window.print()
+      // window.print()
       // 恢复原页面显示
-      window.document.body.innerHTML = oldDom
+      // window.document.body.innerHTML = oldDom
       // 关闭本标签页
-      window.close()
+      // window.close()
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+@page-top: 12pt;
+@page-left: 5pt;
 .sheet-box {
   position: relative;
   font-size: 10px;
@@ -123,32 +135,34 @@ export default {
 
 .sendName {
   position: absolute;
-  left: 57pt;
-  top: 74pt;
+  left: calc(57pt + @page-left);
+  top: calc(74pt + @page-top);
 }
 
 .sendPhone {
   position: absolute;
-  top: 74pt;
-  left: 181pt;
+  left: calc(181pt + @page-left);
+  top: calc(74pt + @page-top);
 }
 
 .sendCompanyName {
   position: absolute;
-  left: 65pt;
-  top: 94pt;
+  left: calc(65pt + @page-left);
+  top: calc(94pt + @page-top);
 }
 
 .sendCode {
   position: absolute;
-  left: 236pt;
-  top: 96pt;
+  left: calc(236pt + @page-left);
+  top: calc(96pt + @page-top);
 }
 
 .sendAddress {
   position: absolute;
-  left: 48pt;
-  top: 110pt;
+  //left: 48pt;
+  //top: 110pt;
+  left: calc(60pt + @page-left);
+  top: calc(110pt + @page-top);
   width: 236pt;
   word-break: break-all;
   white-space: pre-wrap;
@@ -156,22 +170,29 @@ export default {
 
 .sendPostNo {
   position: absolute;
-  left: 64pt;
-  top: 135pt;
+  //left: 64pt;
+  //top: 135pt;
+  left: calc(64pt + @page-left);
+  top: calc(135pt + @page-top);
+
 }
 
 .sendPostCode {
   position: absolute;
-  left: 218pt;
-  top: 137pt;
+  //left: 218pt;
+  //top: 137pt;
+  left: calc(218pt + @page-left);
+  top: calc(137pt + @page-top);
   font-size: 16px;
   letter-spacing: 8.3pt;
 }
 
 .arriveName {
   position: absolute;
-  left: 53pt;
-  top: 163pt;
+  //left: 53pt;
+  //top: 163pt;
+  left: calc(53pt + @page-left);
+  top: calc(163pt + @page-top);
   word-break: break-all;
   white-space: pre-wrap;
   width: 97pt;
@@ -179,14 +200,18 @@ export default {
 
 .arrivePhone {
   position: absolute;
-  top: 163pt;
-  left: 183pt;
+  //top: 163pt;
+  //left: 183pt;
+  left: calc(183pt + @page-left);
+  top: calc(163pt + @page-top);
 }
 
 .arriveCompanyName {
   position: absolute;
-  left: 66pt;
-  top: 180pt;
+  //left: 66pt;
+  //top: 180pt;
+  left: calc(66pt + @page-left);
+  top: calc(180pt + @page-top);
   width: 138pt;
   word-break: break-all;
   white-space: pre-wrap;
@@ -194,14 +219,18 @@ export default {
 
 .arriveCode {
   position: absolute;
-  left: 240pt;
-  top: 180pt;
+  //left: 240pt;
+  //top: 180pt;
+  left: calc(240pt + @page-left);
+  top: calc(180pt + @page-top);
 }
 
 .arriveAddress {
   position: absolute;
-  left: 48pt;
-  top: 195pt;
+  //left: 48pt;
+  //top: 195pt;
+  left: calc(58pt + @page-left);
+  top: calc(195pt + @page-top);
   width: 270pt;
   word-break: break-all;
   white-space: pre-wrap;
@@ -209,15 +238,52 @@ export default {
 
 .arriveCity {
   position: absolute;
-  left: 69pt;
-  top: 243pt;
+  //left: 69pt;
+  //top: 243pt;
+  left: calc(69pt + @page-left);
+  top: calc(243pt + @page-top);
 }
 
 .arrivePostNo {
   position: absolute;
-  left: 218pt;
-  top: 243pt;
+  //left: 218pt;
+  //top: 243pt;
+  left: calc(218pt + @page-left);
+  top: calc(243pt + @page-top);
   font-size: 16px;
   letter-spacing: 8.3pt;
 }
+
+// 备注
+.remark{
+  position: absolute;
+  left: calc(460pt + @page-left);
+  top: calc(273pt + @page-top);
+  font-size: 14px;
+  line-height: 20px;
+  //letter-spacing: 0pt;
+  width: 120pt;
+}
+// 内部品名
+.inner-info-name{
+  position: absolute;
+  left: calc(63pt + @page-left);
+  top: calc(292pt + @page-top);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+// 寄件人签署 - 签名
+.other-send-name{
+  position: absolute;
+  font-size: 14px;
+  left: calc(475pt + @page-left);
+  top: calc(148pt + @page-top);
+}
+.send-time{
+  position: absolute;
+  font-size: 14px;
+  left: calc(450pt + @page-left);
+  top: calc(168pt + @page-top);
+  white-space: pre;
+}
 </style>