[bug] 票据打印

public/development_address_config.js

@@ -13,8 +13,14 @@ window._CONFIG["casPrefixUrl"] = "http://cas.example.org:8443/cas";
 window._CONFIG["onlinePreviewDomainURL"] = "http://localhost:8012/onlinePreview";
 
 // 会议管理报名二维码地址
-window._CONFIG['singUpQRCodeURL'] = 'http://localhost:3000/signupentrance'
+window._CONFIG["singUpQRCodeURL"] = "http://localhost:3000/signupentrance"
 
 // 签到二维码url
-window._CONFIG['signInUrl'] = '/meeting/payMeetingSituation/getSignInPage'
+window._CONFIG["signInUrl"] = "/meeting/payMeetingSituation/getSignInPage"
 
+// 票据打印--寄件人单位名称
+window._CONFIG["sendCompanyName"] = "中汽标准所"
+// 票据打印--寄件人地址
+window._CONFIG["sendAddress"] = "天津市东丽区先锋东路68号"
+// 票据打印--寄件人邮编
+window._CONFIG["sendPostCode"] = "300000"

public/production_address_config.js

@@ -12,5 +12,11 @@ window._CONFIG["casPrefixUrl"] = "http://cas.example.org:8443/cas";
 window._CONFIG["onlinePreviewDomainURL"] = "http://10.10.10.46:8012/onlinePreview";
 
 // 会议管理报名二维码地址
-window._CONFIG['singUpQRCodeURL'] = 'http://10.10.10.46:8055/signupentrance'
+window._CONFIG["singUpQRCodeURL"] = "http://10.10.10.46:8055/signupentrance"
 
+// 票据打印--寄件人单位名称
+window._CONFIG["sendCompanyName"] = "中汽标准所"
+// 票据打印--寄件人地址
+window._CONFIG["sendAddress"] = "天津市东丽区先锋东路68号"
+// 票据打印--寄件人邮编
+window._CONFIG["sendPostCode"] = "300000"

src/views/mailManagement/BillMail.vue

@@ -87,7 +87,7 @@
           </template>
 
           <span slot="print" slot-scope="text, record" class="action-span-cell">
-            <a-button type="primary" :disabled="record.sendMethod === 2 || record.postStatus === 0">打印</a-button>
+            <a-button type="primary" :disabled="record.sendMethod === 2 || record.postStatus === 0" @click="goPrint(record)">打印</a-button>
           </span>
           <span slot="action" slot-scope="text, record" class="action-span-cell">
             <a @click="handleAdd(record)" v-if="record.postStatus === 0" v-has="'billMail:mail'">邮寄</a>
@@ -233,6 +233,20 @@ export default {
       const com = Number(record.sendMethod) === 1 && 'ems' || 'shunfeng'
       window.open(`https://www.kuaidi100.com/chaxun?com=${ com }&nu=${ record.postNo }`)
     },
+    /**
+     * 打印，新标签打开页面，打印页面
+     * @param record
+     */
+    goPrint(record) {
+      console.log(record)
+      let routerUrl = this.$router.resolve({
+        path: '/mailManagement/PrintPage',
+        query: {
+          record: JSON.stringify(record)
+        }
+      })
+      window.open(routerUrl.href, '_blank')
+    },
     handleAdd: function (record) {
       this.$refs.modalForm.add(record, 1)
       this.$refs.modalForm.title = '邮寄'

src/views/mailManagement/PrintPage.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <div id="needPrint">
+      <div class="sheet-box">
+
+        <div class="sendName">{{ userInfo.realname }}</div>
+        <div class="sendPhone">{{ userInfo.phone }}</div>
+
+        <div class="sendCompanyName">{{ sendCompanyName }}</div>
+        <div class="sendCode"></div>
+
+        <div class="sendAddress">{{ sendAddress }}</div>
+
+        <div class="sendPostNo">{{ mailDetail.billNo }}</div>
+        <div class="sendPostCode">{{ sendPostCode }}</div>
+
+
+        <div class="arriveName">{{ mailDetail.contactName }}</div>
+        <div class="arrivePhone">{{ mailDetail.contactMobile }}</div>
+
+        <div class="arriveCompanyName">{{ mailDetail.chargeCompanyName }}</div>
+        <div class="arriveCode"></div>
+
+        <div class="arriveAddress">{{ mailDetail.chargeCompanyName }}</div>
+
+        <div class="arriveCity"></div>
+        <div class="arrivePostNo">{{ mailDetail.postNo }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { USER_INFO } from '../../store/mutation-types'
+
+export default {
+  name: 'PrintPage',
+  data() {
+    return {
+      // 邮寄项目信息
+      mailDetail: {},
+      // 用户信息
+      userInfo: {},
+      sendCompanyName: '',
+      sendAddress: '',
+      sendPostCode: ''
+    }
+  },
+  created() {
+    this.sendCompanyName = window._CONFIG['sendCompanyName']
+    this.sendAddress = window._CONFIG['sendAddress']
+    this.sendPostCode = window._CONFIG['sendPostCode']
+    this.userInfo = Vue.ls.get(USER_INFO)
+    // 从路由参数获取项目信息
+    this.mailDetail = JSON.parse(this.$route.query.record)
+    console.log(this.mailDetail)
+  },
+  mounted() {
+    // 打印
+    this.print()
+  },
+  methods: {
+    /**
+     * 打印
+     */
+    print() {
+      // 获取需要打印部分的dom元素
+      let printDom = document.getElementById('needPrint').innerHTML
+      // 保留原始页面dom，打印后可以恢复页面展示（更换为路由跳转新页面后就不用了）
+      let oldDom = window.document.body.innerHTML
+      // 将整体dom替换为需要打印的部分
+      window.document.body.innerHTML = printDom
+      // 调用页面的打印方法打印整个页面
+      window.print()
+      // 恢复原页面显示
+      window.document.body.innerHTML = oldDom
+      // 关闭本标签页
+      window.close()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.sheet-box {
+  position: relative;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+#needPrint {
+  border: black 1px solid;
+}
+
+.mail-content {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.sendName {
+  position: absolute;
+  left: 57pt;
+  top: 74pt;
+}
+
+.sendPhone {
+  position: absolute;
+  top: 74pt;
+  left: 181pt;
+}
+
+.sendCompanyName {
+  position: absolute;
+  left: 65pt;
+  top: 94pt;
+}
+
+.sendCode {
+  position: absolute;
+  left: 236pt;
+  top: 96pt;
+}
+
+.sendAddress {
+  position: absolute;
+  left: 48pt;
+  top: 110pt;
+  width: 236pt;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.sendPostNo {
+  position: absolute;
+  left: 64pt;
+  top: 135pt;
+}
+
+.sendPostCode {
+  position: absolute;
+  left: 218pt;
+  top: 134pt;
+  font-size: 16px;
+  letter-spacing: 9pt;
+}
+
+.arriveName {
+  position: absolute;
+  left: 53pt;
+  top: 163pt;
+  word-break: break-all;
+  white-space: pre-wrap;
+  width: 97pt;
+}
+
+.arrivePhone {
+  position: absolute;
+  top: 163pt;
+  left: 183pt;
+}
+
+.arriveCompanyName {
+  position: absolute;
+  left: 66pt;
+  top: 180pt;
+  width: 138pt;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.arriveCode {
+  position: absolute;
+  left: 240pt;
+  top: 180pt;
+}
+
+.arriveAddress {
+  position: absolute;
+  left: 48pt;
+  top: 195pt;
+  width: 270pt;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.arriveCity {
+  position: absolute;
+  left: 69pt;
+  top: 247pt;
+}
+
+.arrivePostNo {
+  position: absolute;
+  left: 218pt;
+  top: 246pt;
+  font-size: 16px;
+  letter-spacing: 9pt;
+}
+</style>