printView.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <a-modal
  3. centered
  4. class="replenishmentManagement-printSticker-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="打印预览"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. :width="400">
  11. <!-- 列表 -->
  12. <div id="print">
  13. <div
  14. v-for="(item,index) in list"
  15. :key="index"
  16. class="print-pages"
  17. style="font-size: 9px;padding:3pt 0 3pt 6pt;">
  18. <div class="storeName" style="text-align: center;font-weight: bold;margin: 2pt 0;">
  19. {{ nowData.dealerName }}
  20. </div>
  21. <div style="overflow: hidden;">
  22. <div style="padding-right: 3pt;float: left;width:80%;">
  23. <div class="shelfName" style="margin-bottom: 2pt;">
  24. {{ nowData.shelfInfo.shelfName }}
  25. </div>
  26. <div class="productCode" style="font-weight: bold;">{{ item.productCode }}</div>
  27. <div class="productName">{{ item.product.name }}</div>
  28. <div class="userName" style="margin-top: 2pt;font-size: 8px;">
  29. <span style="margin: 0 5pt 0 0;">{{ moment().format('YYYY-MM-DD HH:mm') }}</span>
  30. </div>
  31. <div class="userName" style="margin-top: 2pt;font-size: 8px;">
  32. <span>{{ nowData.parintUser }}</span>
  33. </div>
  34. </div>
  35. <div style="float: right;">
  36. <div class="productSno" style="font-size: 15pt;text-align: center;">{{ item.shelfPlaceCode }}</div>
  37. <div class="qrcode" ref="qrCodeUrl">
  38. <vue-qr :text="`dealerSn=${nowData.dealerSn}&shelfSn=${item.shelfSn}&productSn=${item.productSn}&productCode=${item.productCode}&shelfPlaceCode=${item.shelfPlaceCode}&shelfPlaceSn=${item.shelfPlaceSn}`" :margin="0" :size="70"></vue-qr>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="btn-cont">
  45. <a-button type="primary" id="replenishmentManagement-printSticker-modal-save" @click="handleSave">确定打印</a-button>
  46. <a-button id="replenishmentManagement-printSticker-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  47. </div>
  48. </a-modal>
  49. </template>
  50. <script>
  51. import { commonMixin } from '@/utils/mixin'
  52. import moment from 'moment'
  53. import vueQr from 'vue-qr'
  54. import { JGPrintTag } from '@/libs/JGPrint'
  55. import { STable, VSelect } from '@/components'
  56. export default {
  57. name: 'PrintStickerModal',
  58. components: { STable, VSelect, vueQr },
  59. mixins: [commonMixin],
  60. props: {
  61. openModal: { // 弹框显示状态
  62. type: Boolean,
  63. default: false
  64. }
  65. },
  66. data () {
  67. return {
  68. isShow: false,
  69. nowData: null,
  70. list: []
  71. }
  72. },
  73. methods: {
  74. moment: moment,
  75. // 开始打印
  76. handleSave () {
  77. const printBox = document.querySelectorAll('.print-pages')
  78. console.log(printBox)
  79. for (let i = 0; i < printBox.length; i++) {
  80. JGPrintTag(printBox[i].outerHTML, '40mm', '30mm', this.list[i].printQty)
  81. }
  82. },
  83. setData (nowData, list) {
  84. const dearInfo = this.$store.state.user.info
  85. this.nowData = nowData
  86. this.list = list
  87. this.nowData.dealerName = dearInfo.orgName
  88. this.nowData.dealerSn = dearInfo.orgSn
  89. this.nowData.parintUser = dearInfo.userNameCN
  90. console.log(this.list)
  91. }
  92. },
  93. watch: {
  94. // 父页面传过来的弹框状态
  95. openModal (newValue, oldValue) {
  96. this.isShow = newValue
  97. },
  98. // 重定义的弹框状态
  99. isShow (newValue, oldValue) {
  100. if (!newValue) {
  101. this.nowData = null
  102. this.list = []
  103. this.$emit('close')
  104. }
  105. }
  106. }
  107. }
  108. </script>
  109. <style lang="less">
  110. .replenishmentManagement-printSticker-modal {
  111. .btn-cont {
  112. text-align: center;
  113. margin: 35px 0 10px;
  114. }
  115. .print-pages{
  116. border-bottom: 1px solid #eee;
  117. }
  118. }
  119. </style>