printTag.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <view class="printTag">
  3. <view class="print-nums flex flex_column align_center justify_center">
  4. <view>打印数量</view>
  5. <view class="u-ninput">
  6. <u-number-box :min="1" v-model="printNum" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="100"></u-number-box>
  7. </view>
  8. </view>
  9. <view class="shelf-info">
  10. <view class="shelf-info-title">
  11. <view>{{infoData&&infoData.shelfName || '--'}}</view>
  12. </view>
  13. <view>产品编码:{{fromPage == 'smdy'?infoData.productCode : infoData.productEntity&&infoData.productEntity.code}}</view>
  14. <view>产品名称:{{fromPage == 'smdy'?infoData.productName : infoData.productEntity&&infoData.productEntity.productName}}</view>
  15. <view>{{fromPage == 'smdy'?'实发':'库存'}}数量:{{fromPage == 'smdy'?infoData.confirmQty : infoData.qty}}</view>
  16. </view>
  17. <view class="buttons flex align_center justify_center">
  18. <view v-if="fromPage == 'bdtq'"><u-button @click="cansel" shape="circle" plain>返回列表</u-button></view>
  19. <view v-if="fromPage == 'smdy'"><u-button @click="cansel" shape="circle" plain>重新扫描</u-button></view>
  20. <view>
  21. <kk-printer ref="kkprinter" @startPrint="startPrint"></kk-printer>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import { shelfDetail } from '@/api/shelf'
  28. import kkPrinter from '@/components/kk-printer/index.vue';
  29. export default {
  30. components:{
  31. kkPrinter
  32. },
  33. data() {
  34. return {
  35. infoData: null,
  36. fromPage: '',
  37. printInfo: null,
  38. printNum: 0
  39. }
  40. },
  41. onLoad(options) {
  42. const _this = this
  43. _this.fromPage = options.page
  44. _this.infoData = options.data ? JSON.parse(options.data) : {},
  45. _this.printNum = _this.fromPage == 'smdy' ? _this.infoData.confirmQty : _this.infoData.qty
  46. console.log(_this.infoData)
  47. var myDate = new Date()
  48. if(_this.fromPage == 'bdtq'){
  49. _this.printInfo = {
  50. dealerName: _this.$store.state.vuex_userData.orgName,
  51. shelfName: _this.infoData.shelfName || '',
  52. productCode: _this.infoData.productEntity&&_this.infoData.productEntity.code || '',
  53. productName: _this.infoData.productEntity&&_this.infoData.productEntity.productName || '',
  54. shelfPlaceCode: _this.infoData.shelfPlaceCode || '',
  55. currentInven: _this.printNum,
  56. printDate: myDate.toLocaleDateString() +' '+myDate.getHours() +':'+myDate.getMinutes() +':'+myDate.getSeconds(),
  57. printUser: _this.$store.state.vuex_userData.username,
  58. barCode: `dealerSn=${_this.$store.state.vuex_userData.orgSn}&shelfSn=${_this.infoData.shelfSn}&productCode=${_this.infoData.productEntity&&_this.infoData.productEntity.code}&shelfPlaceCode=${_this.infoData.shelfPlaceCode}&shelfPlaceSn=${_this.infoData.shelfPlaceSn}`
  59. }
  60. }else if(_this.fromPage == 'smdy'){
  61. _this.printInfo = {
  62. dealerName: _this.$store.state.vuex_userData.orgName,
  63. shelfName: _this.infoData.shelfName || '',
  64. productCode: _this.infoData.productCode || '',
  65. productName: _this.infoData.productName || '',
  66. shelfPlaceCode: _this.infoData.shelfPlaceCode || '',
  67. currentInven: _this.printNum,
  68. printDate: myDate.toLocaleDateString() +' '+myDate.getHours() +':'+myDate.getMinutes() +':'+myDate.getSeconds(),
  69. printUser: _this.$store.state.vuex_userData.username,
  70. barCode: `dealerSn=${_this.$store.state.vuex_userData.orgSn}&shelfSn=${_this.infoData.shelfSn}&productSn=${_this.infoData.productSn}&productCode=${_this.infoData.productCode}&shelfPlaceCode=${_this.infoData.shelfPlaceCode}&shelfPlaceSn=${_this.infoData.shelfPlaceSn}&replenishBillDetailSn=${_this.infoData.replenishBillDetailSn}`
  71. }
  72. }
  73. console.log('printInfo-----------',_this.printInfo)
  74. },
  75. onUnload() {
  76. this.$refs.kkprinter.closeConnect()
  77. },
  78. methods: {
  79. cansel(){
  80. uni.$emit('refreshBL')
  81. uni.navigateBack()
  82. },
  83. textFormat(command,text,maxFontNums,left,top,lightHeight){
  84. const textLen = text.length
  85. console.log(textLen,maxFontNums)
  86. if(textLen > maxFontNums){
  87. const rows = Math.ceil(textLen/maxFontNums)
  88. for(let i=0;i<rows;i++){
  89. top = top+i*lightHeight
  90. console.log(top)
  91. // 最后一行
  92. if(i==rows-1){
  93. const ltxt = text.substring(i*maxFontNums)
  94. const ltlen = ltxt.length
  95. command.setText(left+((maxFontNums-ltlen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, ltxt)
  96. }else{
  97. command.setText(left, top, "TSS24.BF2", 1, 1, text.substring(i*maxFontNums,maxFontNums))
  98. }
  99. }
  100. }else{
  101. command.setText(left+((maxFontNums-textLen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, text)
  102. }
  103. return top
  104. },
  105. // 打印
  106. startPrint(opt,tsc,blesdk){
  107. console.log(opt,'opt')
  108. let top = 10 // 距离顶部10点像素
  109. const left = 10 // 距离左边10点
  110. const lightHeight = 24 // 行高3mm,1mm = 8点
  111. const pageW = 40 // 页签宽度mm
  112. const pageH = 30 // 页签高度mm
  113. const maxFontNums = Math.floor((pageW*8-left*2)/lightHeight) // 每行最多字体数
  114. // 初始化打印机
  115. const command = tsc.jpPrinter.createNew()
  116. command.init()
  117. command.setSize(pageW, pageH) // 标签纸张宽高,单位mm
  118. command.setGap(2) // 标签上下间距,单位mm
  119. command.setCls() // 清除缓冲区数据
  120. // 经销商文字高度,是否换行
  121. top = this.textFormat(command,this.printInfo.dealerName,maxFontNums,left,top,lightHeight)
  122. // 数字货架名称文字
  123. top = top+lightHeight
  124. top = this.textFormat(command,this.printInfo.shelfName,Math.floor(maxFontNums*0.6),left,top,lightHeight)
  125. // 产品编码
  126. top = top+lightHeight+15
  127. command.setText(left, top, "TSS24.BF2", 1, 1, this.printInfo.productCode)
  128. // 产品名称
  129. top = top+lightHeight
  130. this.textFormat(command,this.printInfo.productName,Math.floor(maxFontNums*0.6),left,top,lightHeight)
  131. // command.setQR(50, 50, "L", 5, "A", "https://www.baidu.com")
  132. // command.setBox(5, 5, 795, 595, 1)
  133. command.setPagePrint(1,1) // 打印分数1,每个标签重发打印2次
  134. console.log("开始打印了",command.getData())
  135. blesdk.senBlData(opt.deviceId, opt.serviceId, opt.writeId, command.getData(), this.onPrintSuccess);
  136. },
  137. // 打印成功
  138. onPrintSuccess(){
  139. // uni.navigateBack()
  140. this.$refs.kkprinter.onPrintSuccess()
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .printTag{
  147. background-color: #fff;
  148. width: 100vh;
  149. padding: 50rpx 30rpx;
  150. .print-nums{
  151. padding: 50rpx 30rpx;
  152. color: #999;
  153. font-size: 32rpx;
  154. > view{
  155. padding: 20rpx 0;
  156. }
  157. .u-ninput{
  158. border: 2rpx solid #eee;
  159. border-radius: 50rpx;
  160. padding: 0 12rpx;
  161. }
  162. /deep/ .u-icon-disabled{
  163. background: #fff!important;
  164. }
  165. /deep/ .u-number-input{
  166. margin: 0 2rpx;
  167. border: 2rpx solid #eee;
  168. border-top: 0;
  169. border-bottom: 0;
  170. }
  171. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  172. border-radius: 50rpx;
  173. }
  174. }
  175. .shelf-info{
  176. background-color: #f8f8f8;
  177. padding: 30rpx;
  178. border-radius: 12rpx;
  179. color: #707070;
  180. .shelf-info-title{
  181. font-size: 32rpx;
  182. color: #222222;
  183. display: flex;
  184. justify-content: space-between;
  185. margin-bottom: 10rpx;
  186. .pno{
  187. background: rgba(3, 54, 146, 0.15);
  188. border-radius: 100rpx;
  189. padding: 6rpx 20rpx;
  190. color: #033692;
  191. font-size: 24rpx;
  192. }
  193. }
  194. }
  195. .buttons{
  196. padding: 50rpx 0;
  197. > view{
  198. width: 36%;
  199. margin: 0 2%;
  200. }
  201. }
  202. }
  203. </style>