no message

src/views/secondHandMall/components/preview.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :show-close="false"
+    :maskClosable="false"
+    :close-on-click-modal="false"
+    @cancel="hideModal"
+    :width="350 + 'mm'"
+  >
+    <div v-loading="spinning" style="min-height: 100px">
+      <div id="preview_content" ref="printDom"></div>
+    </div>
+    <template slot="title">
+      <div>
+        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
+      </div>
+    </template>
+    <template slot="footer">
+      <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'PrintPreview',
+  props: {
+    addPrint: {
+      type: Function,
+      default: null
+    },
+  },
+ 
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    hideModal() {
+      this.visible = false
+      this.waitShowPrinter = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      setTimeout(() => {
+        $('#preview_content').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.hiprintTemplate.print()
+      setTimeout(() => {
+        this.hideModal()
+        this.$emit('refreshList')
+      }, 2000)
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+
+::v-deep tr {
+  height: 40px !important;
+}
+
+::v-deep .hiprint-printPaper {
+  margin: 0 auto;
+}
+
+::v-deep .hiprint-paperNumber {
+  display: none;
+}
+
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/secondHandMall/orderManagement/details.vue

@@ -276,7 +276,6 @@ export default {
         esOrderId: this.detailsId
       }).then(res=>{
         this.orderPayPriceList = res.data
-        console.log(this.orderPayPriceList)
       })
     },
     lookkuaidi(){

src/views/secondHandMall/orderManagement/index.vue

@@ -157,7 +157,7 @@
                                 <el-button v-if="~['SAVE'].indexOf(order.status)" @click="viewDetails(order, 1)" type="text" size="small">确认收款</el-button>
                                 <el-button v-if="~['SEND','OVER'].indexOf(order.status)" @click="viewDetails(order, 2)" type="text" size="small">发起退货</el-button>
                                 <el-button v-if="~['PAID'].indexOf(order.status)" type="text" @click="gofahuo(order)" size="small">发货</el-button>
-                                <el-button v-if="~['PAID','SEND'].indexOf(order.status)" type="text" size="small">打印</el-button>
+                                <el-button v-if="~['PAID','SEND'].indexOf(order.status)" type="text" size="small" @click="toPrint(order)">打印</el-button>
                               </div>
                             </div>
                           </el-col>
@@ -206,20 +206,22 @@
         </template>
       </zj-tab-page>
     </zj-page-fill>
+    <print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList" />
   </zj-page-container>
-
 </template>
 
 <script>
-import { esOrderList, esOrderListExcel, esOrderPayOk, esOrderCancel } from "@/api/orderManagement";
+import { esOrderList, esOrderListExcel, esOrderPayOk, esOrderCancel, esOrderDetail } from "@/api/orderManagement";
 import add from "./add.vue"
 import detailsV from "./details.vue"
 import materialFlow from "./materialFlow.vue"
 import deliverGoods from "./deliverGoods.vue"
 import '@/styles/order-list.scss'
 import { downloadFiles } from '@/utils/util'
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
+import printPreview from '../components/preview.vue'
 export default {
-  components: {add, detailsV, materialFlow, deliverGoods},
+  components: {add, detailsV, materialFlow, deliverGoods, printPreview},
   data() {
     return {
       pageType:this?.$route?.params?.pageType,
@@ -423,6 +425,131 @@ export default {
       };
       downloadFiles('esOrder/listExcel', params);
     },
+    // 点击打印
+		async toPrint(row) {
+			const { data } = await esOrderDetail({
+        esOrderId: row.esOrderId
+      })
+			// 初始化模板，否则生成的模板叠加
+			hiprint.init()
+			this.hiprintTemplate = new hiprint.PrintTemplate()
+			// 使用 i-- 提升for效率
+			this.$startLoading()
+      try {
+        let num = data.num
+        let totalAmount = Number(data.num) * Number(data.goodsPrice)
+        let html = `
+          <tr align="center">
+          <td>${data.esGoodsName || ''}</td>
+          <td>${data.unit||''}</td>
+          <td>${data.num}</td>
+          <td>${data.goodsPrice}</td>
+          <td>${totalAmount}</td>
+          <td>${data.remark || ''}</td>
+          </tr>
+        `
+        // 模板基础配置
+        this.panel = this.hiprintTemplate.addPrintPanel({
+          height: 140,
+          width: 241,
+          fontFamily: '黑体',
+          fontSize: 13,
+          paperFooter: 340,
+          paperHeader: 10,
+          paperNumberDisabled: true
+        })
+        // 获取收款单模板和基础配置
+        this.panel.addPrintHtml({
+          options: {
+            width: 633,
+            top: 30,
+            left: 20,
+            fontFamily: '黑体',
+            fontSize: 13,
+            content: this.setTableDom(data, html, totalAmount, num, 1, 0)
+          }
+        })
+      } catch (error) {
+        this.$endLoading()
+        return
+      }
+			this.$endLoading()
+			// 预览打印内容
+			this.$refs.preView.show(this.hiprintTemplate, this.panel)
+		},
+		// 打印模板
+		setTableDom(data, html, totalAmount, num, length, page) {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1; // 月份是从 0 开始计数的，所以要加 1
+      let day = now.getDate();
+      let hours = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      let nowTime = `${year}-${month < 10 ? '0'+month : month}-${day < 10 ? '0'+day : day} ${hours < 10 ? '0'+hours : hours}:${minutes < 10 ? '0'+minutes : minutes}:${seconds < 10 ? '0'+seconds : seconds}`
+      let showpPrintCount = `打印日期: ${nowTime}`;
+			return `
+	    <div style="font-family:'黑体';font-size: 16px;">
+        <div style="display: flex;justify-content: center;align-items: center;position: relative;">
+          <h1 style="text-align:center;margin: 10px 0;">${JSON.parse(localStorage.getItem('greemall_user'))?.billTitle || data.companyWechatName}销售单</h1>
+          <div style="position: absolute;right:0;">共 ${length}页 第 ${page + 1} 页</div>
+        </div>
+        <div style="display: flex;justify-content: space-between;">
+          <div>${showpPrintCount}</div>
+          <div>单据日期: ${data.createTime}</div>
+          <div>单据编号: ${data.esOrderId}</div>
+        </div>
+        <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
+          <div>客户: ${data.userName}</div>
+          <div>摘要: ${({TRANSFER:"在线支付",WECHAT:"在线支付",CASH:"到店支付"})[data.payType]}</div>
+        </div>
+        <div style="display: flex;font-size: 16px;margin-bottom: 10px;">
+          <div style="flex-shrink: 0;">联系电话: ${data.userMobile}</div>
+          <div style="margin-left: 50px;">收货地址: ${data.province}${data.city}${data.area}${data.street}${data.receAddress}</div>
+        </div>
+        <div >
+          <table border=".5" cellspacing="0" width="856" style="border-color: rgb(0,0,0);border-collapse: collapse;border-style: none;border: 1px solid rgb(0,0,0);font-weight: normal;text-decoration: none;vertical-align: middle;box-sizing: border-box;word-wrap: break-word;word-break: break-all;">
+            <tr align="center">
+              <td>商品名称</td>
+              <td>单位</td>
+              <td>数量</td>
+              <td>单价</td>
+              <td>金额</td>
+              <td>备注</td>
+            </tr>
+            ${html}
+            <tr align="center" align="center">
+              <td>小计: </td>
+              <td></td>
+              <td>${num}</td>
+              <td>${totalAmount}</td>
+              <td>金额总计: ${totalAmount}</td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+        <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
+          <div>制单人: ${data.createBy || ''}</div>
+          <div>审核人: ${JSON.parse(localStorage.getItem('greemall_user'))?.nickName || ''}</div>
+          <div>业务员: ${data.saleName || ''}</div>
+          <div>签收人: </div>
+        </div>
+        <div style="display: flex;justify-content: flex-end;">
+        </div>
+        <div style="margin:100px 0 0 0">
+          <div></div>
+        </div>
+	   </div>
+	  `
+		},
+    handleRefreshList() {
+      this.getList();
+		},
+		handleInitPrint() {
+			this.$nextTick(() => {
+				this?.initPrint()
+			})
+		},
   }
 }