quickReplenish.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="head-info">
  4. <view class="p-title flex align_center">
  5. <view class="shelfName flex align_center"><text></text>{{basicInfoData.shelfName}}</view>
  6. </view>
  7. <view>系统检测到以下产品缺货,请选择需要补货的产品</view>
  8. </view>
  9. <view class="partlist">
  10. <quickProductList :list="partList" ref="productList" noDataText="暂无产品" @allChecked="allCheckedCallback"></quickProductList>
  11. </view>
  12. <view class="part-footer flex align_item justify_between">
  13. <view>
  14. <u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
  15. </view>
  16. <view class="btns flex align_item justify_end">
  17. <kk-printer ref="kkprinter" @hasProduct="hasProduct" printBtnStyle="default-mid" defaultText="打印贴签" @startPrint="startPrint"></kk-printer>
  18. <view style="padding: 0 10rpx;"></view>
  19. <view>
  20. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="replenish()">快速补货</u-button>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import quickProductList from './quickProductList.vue'
  28. import kkPrinter from '@/components/kk-printer/index.vue';
  29. import {printTempl} from '@/libs/printTools.js'
  30. export default {
  31. components: { quickProductList, kkPrinter },
  32. data() {
  33. return {
  34. show: false,
  35. basicInfoData:null,
  36. partList: [],
  37. allChecked: false,
  38. printIndex: 0,
  39. isParinting: false,
  40. customBtnStyle: { // 自定义按钮样式
  41. borderColor: this.$config('primaryColor'),
  42. backgroundColor: this.$config('primaryColor'),
  43. color: '#fff'
  44. },
  45. }
  46. },
  47. onReady() {
  48. uni.setNavigationBarColor({
  49. frontColor: '#ffffff',
  50. backgroundColor: this.$config('primaryColor')
  51. })
  52. this.$refs.productList.setData(this.partList)
  53. },
  54. onLoad(option) {
  55. this.basicInfoData = JSON.parse(decodeURIComponent(option.data));
  56. this.partList = this.basicInfoData.list
  57. // 保持屏幕常亮
  58. uni.setKeepScreenOn({
  59. keepScreenOn: true
  60. });
  61. },
  62. onUnload() {
  63. this.partList = []
  64. // 保持屏幕常亮
  65. uni.setKeepScreenOn({
  66. keepScreenOn: false
  67. });
  68. },
  69. onBackPress(event){
  70. if(event.from == 'backbutton'){
  71. if(this.isParinting){
  72. uni.showToast({
  73. icon:'none',
  74. title: '正在打印中...'
  75. })
  76. }else{
  77. uni.navigateBack({delta: 1})
  78. }
  79. return true // 阻止默认返回行为(会导致无限循环)
  80. }
  81. },
  82. methods: {
  83. // 全选
  84. allCheckeChange(e){
  85. this.$refs.productList.allSelect(e.value)
  86. },
  87. allCheckedCallback(val){
  88. this.allChecked = val
  89. },
  90. hasProduct(){
  91. const result =this.$refs.productList.getAllChecked()
  92. if(!result.length){
  93. this.toashMsg("请选择产品!")
  94. }
  95. },
  96. // 补货
  97. replenish(){
  98. const result =this.$refs.productList.getAllChecked()
  99. if(result.length){
  100. }else{
  101. this.toashMsg("请选择产品!")
  102. }
  103. },
  104. printOnce(opt,tsc,blesdk,data){
  105. const _this = this
  106. const dealer = this.$store.state.vuex_userData
  107. // 60*40 打印模板
  108. const command = printTempl(tsc,{
  109. dealerName: dealer.orgName,
  110. shelfName: data.shelfName || '',
  111. productCode: data.productCode || '',
  112. productName: data.productName || '',
  113. shelfPlaceCode: data.shelfPlaceCode || '',
  114. currentInven: data.printQty,
  115. printDate: this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:MM'),
  116. printUser: dealer.userNameCN,
  117. barCode: `${data.shelfSn}&${data.productCode}&${data.productSn}&${data.shelfPlaceSn}`
  118. })
  119. // 开始批量打印
  120. blesdk.senBlData(
  121. opt.deviceId,
  122. opt.serviceId,
  123. opt.writeId,
  124. command.getData(),
  125. function(){
  126. const result =_this.$refs.productList.getAllChecked()
  127. _this.printIndex = _this.printIndex + 1
  128. if(_this.printIndex < result.length){
  129. _this.printOnce(opt,tsc,blesdk,result[_this.printIndex])
  130. }else{
  131. _this.printIndex = 0
  132. _this.$refs.kkprinter.onPrintSuccess()
  133. _this.isParinting = false
  134. _this.show = false
  135. }
  136. });
  137. },
  138. // 批量打印
  139. startPrint(opt,tsc,blesdk){
  140. const result =this.$refs.productList.getAllChecked()
  141. console.log(result,result.length)
  142. if(result.length){
  143. if(this.isParinting){
  144. return
  145. }
  146. this.isParinting = true
  147. this.show = true
  148. this.printOnce(opt,tsc,blesdk,result[this.printIndex])
  149. }else{
  150. this.toashMsg("请选择产品!")
  151. this.$refs.kkprinter.onPrintFail()
  152. }
  153. },
  154. }
  155. }
  156. </script>
  157. <style lang="less">
  158. .content{
  159. width: 100%;
  160. height: 100vh;
  161. background: #fff;
  162. .head-info{
  163. padding: 10rpx;
  164. border-bottom: 2rpx solid #eee;
  165. > view{
  166. padding: 5rpx 10rpx;
  167. }
  168. .p-title{
  169. padding: 0 20rpx;
  170. display: flex;
  171. align-items: center;
  172. color: #222;
  173. font-size: 32rpx;
  174. .shelfName{
  175. flex-grow: 1;
  176. font-weight: bold;
  177. text{
  178. display: block;
  179. height: 30rpx;
  180. width: 6rpx;
  181. background: #0485F6;
  182. margin-right: 10rpx;
  183. border-radius: 10rpx;
  184. }
  185. }
  186. }
  187. }
  188. .partlist{
  189. flex-grow: 1;
  190. padding: 0 30rpx;
  191. overflow: auto;
  192. }
  193. .part-footer{
  194. padding: 15rpx 30rpx;
  195. border-top: 2rpx solid #eee;
  196. > view{
  197. &:first-child{
  198. width: 30%;
  199. text-align: left;
  200. padding-top: 10rpx;
  201. }
  202. text-align: right;
  203. }
  204. .btns{
  205. flex-grow: 1;
  206. button{
  207. width: 200rpx;
  208. }
  209. }
  210. }
  211. }
  212. </style>