printTag.vue 7.3 KB

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