printView.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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.outStockPersonName }}
  20. </div>
  21. <div style="overflow: hidden;">
  22. <div style="padding-right: 3pt;float: left;">
  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. <!-- <span>王明</span> -->
  31. </div>
  32. </div>
  33. <div style="float: right;">
  34. <div class="productSno" style="font-size: 15pt;text-align: center;">{{ item.shelfPlaceCode }}</div>
  35. <div class="qrcode" ref="qrCodeUrl">
  36. <vue-qr text="dealerSn=1033242&shelfSn=342326735950757888&productCode=RPF2340&shelfPlaceCode=A01&shelfPlaceSn=123213" :margin="0" :size="60"></vue-qr>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="btn-cont">
  43. <a-button type="primary" id="replenishmentManagement-printSticker-modal-save" @click="handleSave">确定打印</a-button>
  44. <a-button id="replenishmentManagement-printSticker-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  45. </div>
  46. </a-modal>
  47. </template>
  48. <script>
  49. import { commonMixin } from '@/utils/mixin'
  50. import moment from 'moment'
  51. import vueQr from 'vue-qr'
  52. import { JGPrintTag } from '@/libs/JGPrint'
  53. import { STable, VSelect } from '@/components'
  54. export default {
  55. name: 'PrintStickerModal',
  56. components: { STable, VSelect, vueQr },
  57. mixins: [commonMixin],
  58. props: {
  59. openModal: { // 弹框显示状态
  60. type: Boolean,
  61. default: false
  62. }
  63. },
  64. data () {
  65. return {
  66. isShow: false,
  67. nowData: null,
  68. list: []
  69. }
  70. },
  71. methods: {
  72. moment: moment,
  73. // 开始打印
  74. handleSave () {
  75. const printBox = document.querySelectorAll('.print-pages')
  76. console.log(printBox)
  77. for (let i = 0; i < printBox.length; i++) {
  78. JGPrintTag(printBox[i].outerHTML, '40mm', '30mm', this.list[i].printQty)
  79. }
  80. },
  81. setData (nowData, list) {
  82. this.nowData = nowData
  83. this.list = list
  84. }
  85. },
  86. watch: {
  87. // 父页面传过来的弹框状态
  88. openModal (newValue, oldValue) {
  89. this.isShow = newValue
  90. },
  91. // 重定义的弹框状态
  92. isShow (newValue, oldValue) {
  93. if (!newValue) {
  94. this.$emit('close')
  95. }
  96. }
  97. }
  98. }
  99. </script>
  100. <style lang="less">
  101. .replenishmentManagement-printSticker-modal {
  102. .btn-cont {
  103. text-align: center;
  104. margin: 35px 0 10px;
  105. }
  106. }
  107. </style>