采购入库增加打印

src/views/salesPurchasing/components/preview.vue

@@ -0,0 +1,119 @@
+<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
+    },
+
+    printOrderId: {
+      type: String,
+      default: ''
+    }
+  },
+ 
+  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
+      // console.log(this.$parent);
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.hiprintTemplate.print()
+      recordPrint({orderId: this.printOrderId})
+      setTimeout(() => {
+        this.hideModal()
+        this.$emit('refreshList')
+      }, 2000)
+
+    }
+    // toPdf() {
+    //   downloadPDF(this.$refs.printDom);
+    //   this.hiprintTemplate.toPdf({}, '打印预览');
+    // },
+  }
+}
+</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 tr td {
+  border: 0 !important;
+
+} */
+
+::v-deep .hiprint-paperNumber {
+  display: none;
+}
+
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/salesPurchasing/goodsPurchasedStored/index.vue

@@ -37,7 +37,7 @@
                 <zj-form-module title="" label-width="100px" :form-data="formData" :form-items="formItems2">
                   <el-tabs slot="header" v-model="activeName">
                     <el-tab-pane label="商品信息" name="goodsInfo"></el-tab-pane>
-                    <el-tab-pane v-if="formDialogType > 0 && joinCode" label="条码信息" name="codeInfo"></el-tab-pane>
+                    <el-tab-pane v-if="formDialogType > 0 && joinCode" label="条码信息" name="codeInfo"></el-tab-pane>                  
                   </el-tabs>
                 </zj-form-module>
                 <zj-form-module
@@ -61,9 +61,13 @@
             >
           </div>
         </zj-page-container>
-      </el-dialog>
+      </el-dialog>     
     </div>
-
+    <print-preview
+      ref="preView"
+      @initPrint="handleInitPrint" 
+      @refreshList="handleRefreshList"
+    /> 
     <el-dialog title="计划单明细" :visible.sync="dialogVisible" width="1000px" :before-close="handleCloseTes">
       <div style="width: 960px; height: 680px">
         <template-page
@@ -111,8 +115,10 @@ import jihuamingxi from '../mixins/jihuamingxi'
 import { delayPerform, firstPerform, intervalPerform, passivePerform, queuePerform } from 'js-perform-lock'
 import { required, diyRequired } from '@/components/template/rules_verify.js'
 import Collapse from '@/components/Common/collapse.vue'
+import printPreview from '../components/preview.vue'
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
 export default {
-  components: { TemplatePage },
+  components: { TemplatePage, printPreview },
   mixins: [import_mixin, operation_mixin, form_ty, storage_table, storage_goods, storage_codes, common, jihuamingxi],
   data() {
     return {
@@ -145,6 +151,7 @@ export default {
       formDialog: false,
       appraise_status: '',
       formData: {
+        id: '',
         companyWechatId: '',
         companyWechatName: '',
         examineBy: '',
@@ -173,7 +180,8 @@ export default {
       joinCode: false,
       joinCodeText: JSON.parse(localStorage.getItem('greemall_user')).joinCode,
       logs: [],
-      tesXuanXiang: []
+      tesXuanXiang: [],
+      printOrderId: ''
     }
   },
   computed: {
@@ -294,7 +302,20 @@ export default {
       } else if (this.pageType == 'codeder') {
         return []
       }
-    }
+    },
+    filterArr() {
+      return function (arr, size) {
+        //判断如果不是数组(就没有length)，或者size没有传值，size小于1，就返回空数组
+        if (!arr.length || !size || size < 1) return []
+        let [start, end, result] = [null, null, []]
+        for (let i = 0; i < Math.ceil(arr.length / size); i++) {
+          start = i * size
+          end = start + size
+          result.push(arr.slice(start, end))
+        }
+        return result
+      }
+    }    
   },
   watch: {
     pageType() {
@@ -502,6 +523,14 @@ export default {
             click: ({ row, index, column }) => {
               this.openDetailForm(row, 3)
             }
+          },
+          print: {
+            conditions: ({ row, index, column }) => {
+              return row.status == 'OK'
+            },
+            click: ({ row, index, column }) => {
+              this.toPrint(row)
+            }
           }
         })
       } else if (this.pageType == 'goodsder') {
@@ -636,7 +665,136 @@ export default {
           });
         });
       }
-    }
+    },
+    handleRefreshList() {
+      this.recordSelected = []
+      this.$refs.pageRef.refreshList()
+    },
+    handleInitPrint() {
+      this.$nextTick(() => {
+        this.initPrint()
+      })
+    },
+    // 点击打印
+    async toPrint(row) { 
+      let pagingData = []
+      const { data } = await goodsPurchaseDetail({
+        id: row.id 
+      })
+      pagingData = this.filterArr(data.items, 30)    
+      console.log(pagingData);
+      // 初始化模板，否则生成的模板叠加 
+      hiprint.init()
+      this.hiprintTemplate = new hiprint.PrintTemplate()
+      // 兼容批量打印
+      let len = pagingData.length
+      let loadingLen = len
+      // 使用 i-- 提升for效率
+      this.$startLoading()    
+      for (let i = 0; i < len; i++) {
+        try {
+          let html = ''
+          let num = 0
+          let totalAmount = 0
+          pagingData[i].forEach(item => {
+            const amount = (Number(item.price || 0) * 100 * item.qty || 0 * 100) / 100
+            totalAmount = (Number(item.amount) * 100 + totalAmount * 100) / 100
+            num += Number(item.qty || 0)
+            html += `
+              <tr align="center">
+              <td>${item.specsName || ''}</td>
+              <td>${item.goodsMaterialName || ''}</td>
+              <td>${amount}</td>
+              <td>${item.price || ''}</td>
+              <td>${item.qty || ''}</td>
+              <td>${data.id}</td>
+              <td>${data.venderName}</td>
+              <td>${data.createBy.split(')').length > 0 ? data.createBy.split(')')[1] : data.createBy}</td>
+              <td>${data.examineBy}</td>
+              <td>${data.examineTime.split(' ')[0]}<br>${data.examineTime.split(' ')[1].split('.')[0]}</td>
+              </tr>
+            `
+          })
+          console.log(num)
+          // 模板基础配置
+          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, len, i)
+            }
+          })
+
+          loadingLen--
+        } catch (error) {
+          console.log(999, error)
+          this.$endLoading()
+          return
+        }
+      }
+      if (loadingLen === 0) {
+        this.$endLoading()
+      }
+      // 预览打印内容
+      this.$refs.preView.show(this.hiprintTemplate, this.panel)        
+    },
+    // 打印模板
+    setTableDom(data, html, totalAmount, num, length, page) {
+      return `
+	   <div class="print-container">
+	      <div class="print-table">
+	        <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>
+              <td style="width: 120px;">型号</td>
+              <td style="width: 200px;">商品名称</td>
+              <td>金额</td>
+              <td>单价</td>
+              <td>数量</td>
+              <td>单据单号</td>
+              <td>供应商</td>
+              <td>仓库制单人</td>
+              <td>审核人</td>
+              <td style="width: 80px;">审核时间</td>
+            </tr>
+	            ${html}
+            <tr>
+              <td>小计: </td>
+              <td></td>
+              <td>${totalAmount}</td>
+              <td></td>
+              <td>${num}</td>
+              <td colspan="5">金额总计: ${totalAmount}</td>
+            </tr>
+	        </table>
+	      </div>
+	   </div>
+	  `
+    },        
   }
 }
 </script>