printTag.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <view class="printTag">
  3. <u-alert-tips :show="show" @close="show = false" type="warning" description="正在打印中,请勿息屏或退出应用!"></u-alert-tips>
  4. <view class="print-nums flex flex_column align_center justify_center">
  5. <view>打印数量</view>
  6. <view class="u-ninput">
  7. <u-number-box :min="1" v-model="printNum" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="100"></u-number-box>
  8. </view>
  9. </view>
  10. <view class="print-radio" v-if="fromPage == 'bdtq'">
  11. <u-radio-group v-model="printNum" @change="qtyChange">
  12. <u-radio :name="infoData.qty">按当前库存打印</u-radio>
  13. <u-radio :name="infoData.maxQty">按最大库容打印</u-radio>
  14. </u-radio-group>
  15. </view>
  16. <view class="shelf-info">
  17. <view class="shelf-info-title">
  18. <view class="shelf-name">{{infoData&&infoData.shelfName || '--'}}</view>
  19. <view class="pno">{{infoData&&infoData.shelfPlaceCode}}</view>
  20. </view>
  21. <view class="shelf-info-body">
  22. <view>产品编码:{{fromPage == 'smdy'?infoData.productCode : infoData.productEntity&&infoData.productEntity.code}}</view>
  23. <view>产品名称:{{fromPage == 'smdy'?infoData.productName : infoData.productEntity&&infoData.productEntity.productName}}</view>
  24. <view>{{fromPage == 'smdy'?'实发数量':'当前库存'}}:{{fromPage == 'smdy'?infoData.confirmQty : infoData.qty}}{{infoData.productEntity&&infoData.productEntity.unit}}</view>
  25. <view v-if="fromPage == 'bdtq'">最大库容:{{infoData.maxQty}}{{infoData.productEntity&&infoData.productEntity.unit}}</view>
  26. </view>
  27. </view>
  28. <view class="buttons flex align_center justify_center">
  29. <view v-if="fromPage == 'bdtq'"><u-button @click="cancel" shape="circle" plain>返回列表</u-button></view>
  30. <view v-if="fromPage == 'smdy'"><u-button @click="cancel" shape="circle" plain>重新扫描</u-button></view>
  31. <view>
  32. <kk-printer ref="kkprinter" @startPrint="startPrint"></kk-printer>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import { shelfDetail } from '@/api/shelf'
  39. import kkPrinter from '@/components/kk-printer/index.vue';
  40. import {printTempl} from '@/libs/printTools.js'
  41. import moment from 'moment'
  42. export default {
  43. components:{
  44. kkPrinter
  45. },
  46. data() {
  47. return {
  48. show: false,
  49. infoData: null,
  50. fromPage: '',
  51. printInfo: null,
  52. printNum: 0,
  53. isParinting: false
  54. }
  55. },
  56. onLoad(options) {
  57. const _this = this
  58. _this.fromPage = options.page
  59. _this.infoData = options.data ? JSON.parse(options.data) : {},
  60. _this.printNum = _this.fromPage == 'smdy' ? _this.infoData.confirmQty : _this.infoData.qty
  61. _this.printNum = _this.printNum||1
  62. console.log(_this.infoData)
  63. // 保持屏幕常亮
  64. uni.setKeepScreenOn({
  65. keepScreenOn: true
  66. });
  67. },
  68. onUnload() {
  69. // this.$refs.kkprinter.closeConnect()
  70. this.printNum = 1
  71. this.infoData = null
  72. this.printInfo = null
  73. this.fromPage = ''
  74. // 保持屏幕常亮
  75. uni.setKeepScreenOn({
  76. keepScreenOn: false
  77. });
  78. },
  79. // 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack
  80. onBackPress(event){
  81. if(event.from == 'backbutton'){
  82. if(this.isParinting){
  83. uni.showToast({
  84. icon:'none',
  85. title: '正在打印中...'
  86. })
  87. }else{
  88. this.cancel()
  89. }
  90. return true // 阻止默认返回行为(会导致无限循环)
  91. }
  92. },
  93. methods: {
  94. qtyChange(v){
  95. this.printNum = v
  96. },
  97. cancel(){
  98. if(this.fromPage == 'bdtq'){ // 补打贴签
  99. uni.navigateBack({delta: 1})
  100. }else if(this.fromPage == 'smdy'){ // 扫码打印
  101. uni.$emit('refreshBL')
  102. uni.navigateBack({delta: 1})
  103. }
  104. },
  105. // 获取打印内容
  106. getPrintContent(){
  107. const _this = this
  108. const nowDate = moment().format('YYYY-MM-DD HH:mm')
  109. if(_this.fromPage == 'bdtq'){
  110. _this.printInfo = {
  111. dealerName: _this.$store.state.vuex_userData.orgName,
  112. shelfName: _this.infoData.shelfName || '',
  113. productCode: _this.infoData.productEntity&&_this.infoData.productEntity.code || '',
  114. productName: _this.infoData.productEntity&&_this.infoData.productEntity.productName || '',
  115. shelfPlaceCode: _this.infoData.shelfPlaceCode || '',
  116. currentInven: _this.printNum,
  117. printDate: nowDate,
  118. printUser: _this.$store.state.vuex_userData.userNameCN,
  119. barCode: `${_this.infoData.shelfSn}&${_this.infoData.productEntity&&_this.infoData.productEntity.code}&${_this.infoData.productEntity&&_this.infoData.productEntity.productSn}&${_this.infoData.shelfPlaceSn}`
  120. // 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}`
  121. }
  122. }else if(_this.fromPage == 'smdy'){
  123. _this.printInfo = {
  124. dealerName: _this.$store.state.vuex_userData.orgName,
  125. shelfName: _this.infoData.shelfName || '',
  126. productCode: _this.infoData.productCode || '',
  127. productName: _this.infoData.productName || '',
  128. shelfPlaceCode: _this.infoData.shelfPlaceCode || '',
  129. currentInven: _this.printNum,
  130. printDate: nowDate,
  131. printUser: _this.$store.state.vuex_userData.userNameCN,
  132. barCode: `${_this.infoData.shelfSn}&${_this.infoData.productCode}&${_this.infoData.productSn}&${_this.infoData.shelfPlaceSn}`
  133. // 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}`
  134. }
  135. }
  136. console.log('printInfo-----------',_this.printInfo)
  137. },
  138. // 打印
  139. startPrint(opt,tsc,blesdk){
  140. console.log(opt,'opt')
  141. this.getPrintContent()
  142. if(this.printInfo.currentInven<=0){
  143. uni.showToast({
  144. icon:"none",
  145. title: "请选择打印数量"
  146. })
  147. this.$refs.kkprinter.onPrintFail()
  148. return
  149. }
  150. if(this.isParinting){
  151. return
  152. }
  153. this.isParinting = true
  154. this.show = true
  155. const command = printTempl(tsc,this.printInfo)
  156. blesdk.senBlData(opt.deviceId, opt.serviceId, opt.writeId, command.getData(), this.onPrintSuccess);
  157. },
  158. // 打印成功
  159. onPrintSuccess(){
  160. this.$refs.kkprinter.onPrintSuccess()
  161. this.isParinting = false
  162. this.show = false
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="less">
  168. .printTag{
  169. background-color: #fff;
  170. width: 100vh;
  171. padding: 50rpx 30rpx;
  172. .print-nums{
  173. padding: 50rpx 30rpx 10rpx;
  174. color: #999;
  175. font-size: 32rpx;
  176. > view{
  177. padding: 20rpx 0;
  178. }
  179. .u-ninput{
  180. border: 2rpx solid #eee;
  181. border-radius: 50rpx;
  182. padding: 0 12rpx;
  183. }
  184. /deep/ .u-icon-disabled{
  185. background: #fff!important;
  186. }
  187. /deep/ .u-number-input{
  188. margin: 0 2rpx;
  189. border: 2rpx solid #eee;
  190. border-top: 0;
  191. border-bottom: 0;
  192. }
  193. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  194. border-radius: 50rpx;
  195. }
  196. }
  197. .print-radio{
  198. padding: 20rpx 20rpx 50rpx;
  199. text-align: center;
  200. }
  201. .shelf-info{
  202. background-color: #f8f8f8;
  203. border-radius: 12rpx;
  204. color: #707070;
  205. .shelf-info-title{
  206. font-size: 30rpx;
  207. color: #222222;
  208. display: flex;
  209. justify-content: space-between;
  210. border-bottom: 0.1rpx solid #eee;
  211. padding: 15rpx 30rpx;
  212. font-weight: bold;
  213. .shelf-name{
  214. flex:1;
  215. margin-right: 10rpx;
  216. }
  217. .pno{
  218. background: rgba(3, 54, 146, 0.15);
  219. border-radius: 100rpx;
  220. padding: 0 20rpx;
  221. color: #033692;
  222. font-size: 26rpx;
  223. height: 40rpx;
  224. margin-top:5rpx;
  225. }
  226. }
  227. .shelf-info-body{
  228. padding: 15rpx 30rpx;
  229. > view{
  230. padding: 5rpx 0;
  231. }
  232. }
  233. }
  234. .buttons{
  235. padding: 50rpx 0;
  236. > view{
  237. width: 36%;
  238. margin: 0 2%;
  239. }
  240. }
  241. }
  242. </style>