| <template> | 
|     <view > | 
|         <scroll-view scroll-y catch:touchmove="touchmove"> | 
|             <view class="square-2"> | 
|                 <view class="square-title"> | 
|                     <view class="title-sign"><view class="sign"></view></view> | 
|                     <view class="title-text"><text>托盘条码</text></view> | 
|                 </view> | 
|                 <view class="square-content"> | 
|                     <view class="content-input"> | 
|                         <input readonly="value" v-model="barcode" type="text" placeholder="扫码 / 输入" maxlength="8" | 
|                         :focus="barcodeFocus" @input="nextInput"> | 
|                         <uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode()"></uni-icons> | 
|                     </view> | 
|                 </view> | 
|             </view> | 
|             <view class="square-2"> | 
|                 <view class="square-title"> | 
|                     <view class="title-sign"><view class="sign"></view></view> | 
|                     <view class="title-text"><text>检索商品</text></view> | 
|                 </view> | 
|                 <view class="square-content"> | 
|                     <view class="content-input"> | 
|                         <input v-model="matnrId" type="text" placeholder="扫码 / 输入" @input="findMat()" | 
|                         :focus="focus"@focus="empty()"> | 
|                          <!-- :focus="focus" @blur="clear "> --> | 
|                         <!-- @focus="focuss" --> | 
|                         <uni-icons type="closeempty" size="20" color="#dadada" @click="foucss()"></uni-icons> | 
|                     </view> | 
|                 </view> | 
|             </view> | 
|             <view class="square-1"> | 
|                 <view class="square-title"> | 
|                     <view class="title-sign"><view class="sign"></view></view> | 
|                     <view class="title-text"><text>商品列表</text></view> | 
|                 </view> | 
|             </view> | 
|             <view class="square-none"  v-show="matList.length === 0"> | 
|                 <view class="v-show">暂无更多数据...</view> | 
|             </view> | 
|             <checkbox-group > | 
|                 <view v-for="(item,index) in matList" :key="index" class="data-list bg-false" :class="'bg-'+item.checked" > | 
|                     <view class="data-list-left"> | 
|                         <view class="matnr">No:{{listLen-index}}</view> | 
|                         <view class="matnr">{{item.matnr}}-{{item.batch}}</view> | 
|                     </view> | 
|                     <view class="data-list-right"> | 
|                         <uni-icons type="trash" size="20" color="#a5a5a5" @click="remove(item,index)"></uni-icons> | 
|                     </view> | 
|                 </view> | 
|             </checkbox-group> | 
|         </scroll-view> | 
|         <view class="footer flex justify-around"> | 
|             <view> | 
|                 <button class="cu-btn lg" @click="resst()">重置</button> | 
|             </view> | 
|             <view> | 
|                 <button class="cu-btn lg pakin-btn bg-blue" @click="comb()">组托</button> | 
|             </view> | 
|         </view> | 
|         <view> | 
|             <!-- 提示信息弹窗 --> | 
|             <uni-popup ref="message" type="message"> | 
|                 <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message> | 
|             </uni-popup> | 
|         </view> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     import permision from "@/common/permission.js" | 
|     export default { | 
|         data() { | 
|             return { | 
|                 barcode: '', | 
|                 barcodeFocus:true, | 
|                 focus:false, | 
|                 type: 'center', | 
|                 searchBox: 'hide', | 
|                 pick:'hide', | 
|                 matnrId:'', | 
|                 // matList:[{matnr:'1101842-10000',batch:'22047515999'}], | 
|                 matList:[], | 
|                 result: '', | 
|                 listLen:0, | 
|                 msgType: 'success', | 
|                 messageText: '这是一条成功提示', | 
|             } | 
|         }, | 
|         mounted(){ | 
|             const UIP = uni.getStorageSync('UIP'); | 
|             this.baseIP = UIP; | 
|             const UPORT = uni.getStorageSync('UPORT'); | 
|             this.basePORT = UPORT | 
|         }, | 
|         onLoad() { | 
|             // #ifdef APP | 
|             setInterval(()=>{ | 
|                 uni.hideKeyboard() | 
|             },20) | 
|             // #endif | 
|         }, | 
|         methods: { | 
|             nextInput() { | 
|                 if (this.barcode.length == 8) { | 
|                     this.foucss() | 
|                 } | 
|             }, | 
|             empty() { | 
|                 return this.inputValue=''; | 
|             }, | 
|             barcodeFocuss() { | 
|                 // #ifdef APP | 
|                 let that = this; | 
|                 that.barcodeFocus = false; | 
|                 setTimeout(()=>{ | 
|                     that.matnrId = ''; | 
|                     that.barcodeFocus = true; | 
|                 }, 100); | 
|                 // #endif | 
|                  | 
|             }, | 
|             foucss() { | 
|                 // #ifdef APP | 
|                 let that = this; | 
|                 that.focus = false; | 
|                 setTimeout(()=>{ | 
|                     that.matnrId = ''; | 
|                     that.focus = true; | 
|                 }, 100); | 
|                 // #endif | 
|             }, | 
|             clear() { | 
|                 this.matnrId = '' | 
|             }, | 
|             messageToggle(type) { | 
|                 this.msgType = type | 
|                 this.messageText = `这是一条${type}消息提示` | 
|                 this.$refs.message.open() | 
|             }, | 
|             resst() { | 
|                 this.matnrId = ''; | 
|                 this.matList = []; | 
|                 this.barcode = ''; | 
|                 this.barcodeFocuss(); | 
|             }, | 
|             removeBarcode() { | 
|                 this.barcode = '' | 
|                 this.barcodeFocus = false; | 
|                 this.$nextTick(function() { | 
|                     this.barcodeFocus = true; | 
|                 }); | 
|             }, | 
|             remove(item,index) { | 
|                 this.matnrId = '' | 
|                 this.matList.splice(index,1) | 
|                 this.listLen = this.matList.length | 
|                 this.messageToggle('success') | 
|                 this.messageText = '删除成功' | 
|             }, | 
|             comb() { | 
|                 let that = this; | 
|                 if (that.barcode === '') { | 
|                     uni.showToast({title: '请扫描托盘条码', icon: "none", position: 'top'}); | 
|                     return; | 
|                 } | 
|                 if (that.matList.length === 0) { | 
|                     uni.showToast({title: '请添加商品列表', icon: "none", position: 'top'}); | 
|                     return; | 
|                 } | 
|                 uni.showLoading(); | 
|                 uni.request({ | 
|                     url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + '/mobile/comb/auth', | 
|                     data: JSON.stringify({ | 
|                         barcode: that.barcode, | 
|                         combMats: that.matList | 
|                     }), | 
|                     method: 'POST', | 
|                     header: { | 
|                         'token':uni.getStorageSync('token') | 
|                     }, | 
|                     success(result) { | 
|                         uni.showLoading(); | 
|                         var res = result.data | 
|                         if (res.code === 200) { | 
|                             uni.showToast({ | 
|                                 title: res.msg, | 
|                                 position: 'bottom', | 
|                                 duration: 1000 | 
|                             }); | 
|                             that.resst(); | 
|                         } else if (res.code == 403) { | 
|                             uni.showToast({title: res.msg, icon: "none", position: 'top'}) | 
|                             setTimeout(() => { | 
|                                 uni.reLaunch({ | 
|                                     url: '../login/login' | 
|                                 }); | 
|                             }, 1000); | 
|                         } else { | 
|                             uni.showToast({title: res.msg, icon: "none",position: 'top'}) | 
|                         } | 
|                     } | 
|                 }); | 
|             }, | 
|             findMat() { | 
|                 let that = this | 
|                 if (that.matnrId.length > 25){ | 
|                     that.messageToggle('warn'); | 
|                     that.messageText = '商品编码超长,请重试'; | 
|                     that.foucss(); | 
|                     return; | 
|                 } | 
|                 let str = that.matnrId.split('-') | 
|                 let matnr = str[0] + '-' + str[1] | 
|                 for (let k = 0; k < that.matList.length;k++) { | 
|                     if (that.matList[k].matnr != matnr) { | 
|                         that.messageToggle('warn'); | 
|                         that.messageText = '商品种类不一致,请重试!'; | 
|                         that.foucss(); | 
|                         return; | 
|                     } | 
|                 } | 
|                 uni.showLoading(); | 
|                 uni.request({ | 
|                     url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + '/mat/auth', | 
|                     data: { | 
|                         matnr:matnr | 
|                     }, | 
|                     header: { | 
|                         'token':uni.getStorageSync('token') | 
|                     }, | 
|                     success(result) { | 
|                         uni.hideLoading(); | 
|                         // uni.vibrateShort(); | 
|                         let res = result.data | 
|                         if (res.code === 200 && res.data) { | 
|                             let add = true; | 
|                             let mat = res.data; | 
|                             mat['batch'] = str[2]; | 
|                             mat['anfme'] = 1 | 
|                             for(let i = 0;i < that.matList.length;i++) { | 
|                                 if(that.matList[i].batch == str[2]) { | 
|                                     that.messageToggle('warn'); | 
|                                     that.messageText = '重复扫描'; | 
|                                     that.foucss(); | 
|                                     add = false; | 
|                                 } | 
|                             } | 
|                             if(add) { | 
|                                 that.messageToggle('success'); | 
|                                 that.messageText = '检索成功'; | 
|                                 that.matList.unshift(res.data) | 
|                                 that.foucss(); | 
|                             }  | 
|                             that.listLen = that.matList.length; | 
|                         } else if (res.code == 403) { | 
|                             that.messageToggle('error') | 
|                             that.messageText = res.msg | 
|                             setTimeout(() => { | 
|                                 uni.reLaunch({ | 
|                                     url: '../login/login' | 
|                                 }); | 
|                             }, 1000); | 
|                             uni.hideLoading(); | 
|                         } else { | 
|                             that.messageToggle('error') | 
|                             that.messageText = res.msg | 
|                             uni.hideLoading(); | 
|                             // uni.showToast({title: res.msg, icon: "none",position: 'top'}) | 
|                         } | 
|                     } | 
|                          | 
|                 }); | 
|             }, | 
|          | 
|             change(e) { | 
|                 console.log('当前模式:' + e.type + ',状态:' + e.show); | 
|             }, | 
|              | 
|         } | 
|     } | 
| </script> | 
|   | 
|   | 
|   | 
| <style> | 
|     /* @import "../../colorui/main.css"; | 
|     @import "../../colorui/icon.css"; */ | 
|     /*  | 
|     1101842-10000-220475159999 | 
|     1101842-10000-22047518494 | 
|     1101842-10000-22047518532 | 
|     1101842-10000-22047515990 | 
|     1101842-12345-22047515990 | 
|     1101842-10000-22047515997 | 
|     1101842-10000-22047518515 | 
|     1101842-10000-22047515778 | 
|     1101842-10000-22047515938 | 
|     1101842-10000-22047518518 | 
|     1101842-10000-22047518517 | 
|     1101842-10000-22047515967 | 
|     1101842-10000-22047518472 | 
|     1101842-10000-22047518516 | 
|     1101842-10000-22047518511 | 
|     1101842-10000-22047515864 | 
|     1101842-10000-22047515889 | 
|      */ | 
|      | 
|     .pak-seach-box { | 
|         background-color: #FFFFFF; | 
|         margin: 15rpx 15rpx 0rpx 15rpx; | 
|         width: 96%; | 
|         height: 150rpx; | 
|         border-radius: 20rpx; | 
|     } | 
|     .box-top{ | 
|         display: block; | 
|         height: 60rpx; | 
|         width: 720rpx; | 
|     } | 
|     .color-block-blue { | 
|         background-color: #1E9FFF; | 
|         display: inline-block; | 
|         float: left; | 
|         margin: 15rpx 15rpx 0 15rpx; | 
|         width: 12rpx; | 
|         height: 40rpx; | 
|         border: 5rpx solid #1E9FFF; | 
|         border-radius: 20rpx; | 
|     } | 
|     .title { | 
|         display: inline-block; | 
|         float: left; | 
|         font-size: 34rpx; | 
|         font-weight: 700; | 
|         height: 50rpx; | 
|         line-height: 50rpx; | 
|         margin-top: 10rpx; | 
|     } | 
|     .box-buttom { | 
|         display: inline-block; | 
|         background-color: #ededed; | 
|         width: 65%; | 
|         height: 60rpx; | 
|         border-radius: 20rpx; | 
|         margin: 15rpx 15rpx 0rpx 15rpx; | 
|     } | 
|     .box-buttom input { | 
|         width: 75%; | 
|         float: left; | 
|         margin: 8rpx 10rpx 0rpx 25rpx; | 
|     } | 
|     .box-buttom .search-icon{ | 
|         width: 60rpx; | 
|         height: 60rpx; | 
|         float: right; | 
|         margin-top: 5rpx; | 
|         margin-right: 10rpx; | 
|     } | 
|     /* .pak-seach-box input { | 
|         background-color: #ededed; | 
|         border: 1rpx solid #d8d8d8; | 
|         display: inline-block; | 
|         border-radius: 20rpx; | 
|         float: left; | 
|         width: 70%; | 
|         height: 60rpx; | 
|         line-height: 60rpx; | 
|         margin: 15rpx 15rpx 0rpx 15rpx; | 
|         padding-left: 20rpx; | 
|     } */ | 
|     .pak-seach-box button { | 
|         background-color: #1E9FFF; | 
|         color: #ffffff; | 
|         display: inline-block; | 
|         float: right; | 
|         width: 180rpx; | 
|         height: 60rpx; | 
|         margin: 15rpx 15rpx 0rpx 15rpx; | 
|         line-height: 60rpx; | 
|     } | 
|     .pakin-btn { | 
|         background-color: #1E9FFF; | 
|     } | 
|     .pak-data-box { | 
|         background-color: #F1F1F1; | 
|         margin: 15rpx 15rpx 0rpx 15rpx; | 
|         width: 96%; | 
|         height: 70rpx; | 
|         border-radius: 20rpx; | 
|     } | 
|     .pak-data-box .box-top { | 
|         background-color: #FFFFFF; | 
|         height: 70rpx; | 
|         border-radius: 20rpx 20rpx 20rpx 20rpx; | 
|     } | 
|     .bg-false { | 
|         background-color: #FFFFFF; | 
|     } | 
|     .bg-true { | 
|         background-color: #ebebeb; | 
|     } | 
|     .data-list { | 
|         border-bottom: 1px solid #d8d8d8; | 
|         height: 130rpx; | 
|         margin: 15rpx; | 
|         border-radius: 20rpx; | 
|     } | 
|     .data-list:first-child { | 
|         margin-top: 20rpx; | 
|     } | 
|     .data-list:last-child { | 
|         margin-bottom: 200rpx; | 
|     } | 
|     /* .data-list-left { | 
|         display: inline-block; | 
|         float: left; | 
|         text-align: center; | 
|         width: 100rpx; | 
|         height: 180rpx; | 
|         line-height: 180rpx; | 
|     } */ | 
|     .data-list-left { | 
|         display: inline-block; | 
|         float: left; | 
|         margin-left: 6%; | 
|         height: 130rpx; | 
|         /* line-height: 100rpx; */ | 
|         color: #676767; | 
|     } | 
|     .matnr { | 
|         font-size: 14px; | 
|         font-weight: 700; | 
|         /* padding-top: 15rpx; */ | 
|         padding-top: 15rpx; | 
|     } | 
|     .data-list-right { | 
|         display: inline-block; | 
|         float: right; | 
|         height: 130rpx; | 
|         line-height: 130rpx; | 
|         margin-right: 10%; | 
|     } | 
| </style> |