lilei há 3 anos atrás
pai
commit
f6aa6df353

+ 2 - 2
src/libs/JGPrint.js

@@ -3,7 +3,7 @@ import notification from 'ant-design-vue/es/notification'
 import { getLodop } from '@/libs/LodopFuncs'
 import moment from 'moment'
 // 打印页签,支持批量打印
-export const JGPrintTag = function(html,width,height,nums){
+export const JGPrintTag = function (html, width, height, nums) {
   const LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'))
   if (!LODOP) {
     confirm({
@@ -20,8 +20,8 @@ export const JGPrintTag = function(html,width,height,nums){
   }
   LODOP.SET_SHOW_MODE('HIDE_PAPER_BOARD', 1) //  隐藏底图上有模拟走纸板的条纹线
   LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true) // 可使输出以纸张边缘为基点
-  LODOP.SET_PRINT_COPIES(nums);//指定份数
   LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', html)
+  LODOP.SET_PRINT_COPIES(nums)// 指定份数
   LODOP.SET_PRINT_PAGESIZE(1, width, height)
   LODOP.PRINT()
 }

+ 9 - 37
src/views/numsGoodsShelves/replenishmentManagement/printStickerModal.vue

@@ -48,19 +48,20 @@
         <a-button id="replenishmentManagement-printSticker-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
       </div>
     </a-spin>
+
+    <!-- 打印预览弹框 -->
+    <printView ref="printView" :openModal="showView" @close="showView=false"></printView>
   </a-modal>
 </template>
 
 <script>
 import { commonMixin } from '@/utils/mixin'
-import moment from 'moment'
-import QRCode from 'qrcodejs2'
-import { JGPrintTag } from '@/libs/JGPrint'
+import printView from './printView.vue'
 import { STable, VSelect } from '@/components'
 import { shelfReplenishDetailList, shelfReplenishDetail, shelfReplenishPrintSign } from '@/api/shelfReplenish'
 export default {
   name: 'PrintStickerModal',
-  components: { STable, VSelect },
+  components: { STable, VSelect, printView },
   mixins: [commonMixin],
   props: {
     openModal: { //  弹框显示状态
@@ -78,6 +79,7 @@ export default {
     return {
       spinning: false,
       isShow: this.openModal, //  是否打开弹框
+      showView: false,
       columns: [
         { title: '产品编码', dataIndex: 'product.code', width: '22%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '产品名称', dataIndex: 'product.name', width: '30%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
@@ -90,7 +92,7 @@ export default {
       loadData: parameter => {
         this.disabled = true
         this.spinning = true
-        return shelfReplenishDetailList(Object.assign(parameter, this.queryParam)).then(res => {
+        return shelfReplenishDetailList({ replenishBillSn: this.nowData && this.nowData.replenishBillSn }).then(res => {
           let data
           if (res.status == 200) {
             data = res.data
@@ -126,40 +128,10 @@ export default {
       if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRows.length < 1)) {
         this.$message.warning('请至少选择一个产品')
       } else {
-        // const qrcode = new QRCode(this.$refs.qrCodeUrl, {
-        //   text: 'dealerSn=1033242&shelfSn=342326735950757888&productCode=RPF2340&shelfPlaceCode=A01&shelfPlaceSn=123213', // 需要转换为二维码的内容
-        //   width: 40,
-        //   height: 40,
-        //   colorDark: '#000000',
-        //   colorLight: '#ffffff',
-        //   correctLevel: QRCode.CorrectLevel.H
-        // })
         const nowData = this.nowData
         const list = this.rowSelectionInfo.selectedRows
-        let htmlStr = ''
-        for (let i = 0; i < list.length; i++) {
-          htmlStr = htmlStr + '<div class="print-pages" style="font-size: 9px;padding:3pt 0 3pt 6pt;">'
-          htmlStr = htmlStr + '<div class="storeName" style="text-align: center;font-weight: bold;margin: 2pt 0;">' + nowData.outStockPersonName + '</div>'
-          htmlStr = htmlStr + '<div style="overflow: hidden;display: flex;justify-content: space-between;">'
-          htmlStr = htmlStr + '<div style="padding-right: 3pt;">'
-          htmlStr = htmlStr + '<div class="shelfName" style="margin-bottom: 2pt;">'
-          htmlStr = htmlStr + nowData.shelfInfo.shelfName
-          htmlStr = htmlStr + '</div>'
-          htmlStr = htmlStr + '<div class="productCode" style="font-weight: bold;">' + list[i].productCode + '</div>'
-          htmlStr = htmlStr + '<div class="productName">' + list[i].product.name + '</div>'
-          htmlStr = htmlStr + '<div class="userName" style="margin-top: 2pt;font-size: 8px;">'
-          htmlStr = htmlStr + '<span style="margin: 0 5pt 0 0;">' + moment().format('YYYY-MM-DD HH:mm') + '</span>'
-          htmlStr = htmlStr + '<span>王明</span>'
-          htmlStr = htmlStr + '</div>'
-          htmlStr = htmlStr + '</div>'
-          htmlStr = htmlStr + '<div>'
-          htmlStr = htmlStr + '<div class="productSno" style="font-size: 16pt;text-align: center;">A08</div>'
-          htmlStr = htmlStr + '<div class="qrcode" ref="qrCodeUrl" style="width: 40px;height: 40px;overflow: hidden;"></div>'
-          htmlStr = htmlStr + '</div>'
-          htmlStr = htmlStr + '</div>'
-          htmlStr = htmlStr + '</div>'
-          JGPrintTag(htmlStr, '40mm', '30mm', list[i].printQty)
-        }
+        this.showView = true
+        this.$refs.printView.setData(nowData, list)
       }
     },
     // 基本信息

+ 109 - 0
src/views/numsGoodsShelves/replenishmentManagement/printView.vue

@@ -0,0 +1,109 @@
+<template>
+  <a-modal
+    centered
+    class="replenishmentManagement-printSticker-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="打印预览"
+    v-model="isShow"
+    @cancle="isShow = false"
+    :width="400">
+    <!-- 列表 -->
+    <div id="print">
+      <div
+        v-for="(item,index) in list"
+        :key="index"
+        class="print-pages"
+        style="font-size: 9px;padding:3pt 0 3pt 6pt;">
+        <div class="storeName" style="text-align: center;font-weight: bold;margin: 2pt 0;">
+          {{ nowData.outStockPersonName }}
+        </div>
+        <div style="overflow: hidden;">
+          <div style="padding-right: 3pt;float: left;">
+            <div class="shelfName" style="margin-bottom: 2pt;">
+              {{ nowData.shelfInfo.shelfName }}
+            </div>
+            <div class="productCode" style="font-weight: bold;">{{ item.productCode }}</div>
+            <div class="productName">{{ item.product.name }}</div>
+            <div class="userName" style="margin-top: 2pt;font-size: 8px;">
+              <span style="margin: 0 5pt 0 0;">{{ moment().format('YYYY-MM-DD HH:mm') }}</span>
+              <!-- <span>王明</span> -->
+            </div>
+          </div>
+          <div style="float: right;">
+            <div class="productSno" style="font-size: 15pt;text-align: center;">{{ item.shelfPlaceCode }}</div>
+            <div class="qrcode" ref="qrCodeUrl">
+              <vue-qr text="dealerSn=1033242&shelfSn=342326735950757888&productCode=RPF2340&shelfPlaceCode=A01&shelfPlaceSn=123213" :margin="0" :size="60"></vue-qr>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn-cont">
+      <a-button type="primary" id="replenishmentManagement-printSticker-modal-save" @click="handleSave">确定打印</a-button>
+      <a-button id="replenishmentManagement-printSticker-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import moment from 'moment'
+import vueQr from 'vue-qr'
+import { JGPrintTag } from '@/libs/JGPrint'
+import { STable, VSelect } from '@/components'
+export default {
+  name: 'PrintStickerModal',
+  components: { STable, VSelect, vueQr },
+  mixins: [commonMixin],
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: false,
+      nowData: null,
+      list: []
+    }
+  },
+  methods: {
+    moment: moment,
+    //  开始打印
+    handleSave () {
+      const printBox = document.querySelectorAll('.print-pages')
+      console.log(printBox)
+      for (let i = 0; i < printBox.length; i++) {
+        JGPrintTag(printBox[i].outerHTML, '40mm', '30mm', this.list[i].printQty)
+      }
+    },
+    setData (nowData, list) {
+      this.nowData = nowData
+      this.list = list
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.replenishmentManagement-printSticker-modal {
+	.btn-cont {
+		text-align: center;
+		margin: 35px 0 10px;
+	}
+}
+</style>