| <template> | 
|     <view> | 
|         <!-- 搜索框 --> | 
|         <view class="square-1"> | 
|             <view class="searchBox"> | 
|                 <view class="searchIcon"><uni-icons type="search" size="20" color="#dadada"></uni-icons></view> | 
|                 <view class="searchArea"> | 
|                     <input v-model="locNo" type="text" placeholder=" 库位号" @input="searchByLoc" placeholder-style="line-height:  85rpx;"></view> | 
|                 <view class="closeIcon"><uni-icons type="closeempty" size="20" color="#dadada" @click="removeLocNo"></uni-icons></view> | 
|             </view> | 
|         </view> | 
|         <!-- 搜索框 --> | 
|         <view class="square-1"> | 
|             <view class="searchBox"> | 
|                 <view class="searchIcon"><uni-icons type="search" size="20" color="#dadada"></uni-icons></view> | 
|                 <view class="searchArea"> | 
|                     <input v-model="matnr" type="text" placeholder=" 商品编码" @input="searchByMatnr" placeholder-style="line-height:  85rpx;"></view> | 
|                 <view class="closeIcon"><uni-icons type="closeempty" size="20" color="#dadada" @click="removeMatnr"></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> | 
|         <!-- 商品列表 --> | 
|         <!-- <checkbox-group @change="checkbox"> | 
|             <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"><text style="width: 400rpx;">编码:{{item.matnr}}</text></view> | 
|                     <view><text style="width: 400rpx;">品名:{{item.maktx}}</text></view> | 
|                     <view><text style="width: 400rpx;">批号:{{item.batch}}</text></view> | 
|                     <view> | 
|                         <text style="width: 400rpx;">数量:{{item.anfme}}</text> | 
|                     </view> | 
|                 </view> | 
|                 <view class="data-list-right"> | 
|                     <label><uni-icons type="compose" size="20" color="#a5a5a5" @click="revise(item,index)"></uni-icons></label> | 
|                     <label><uni-icons type="trash" size="25" color="#a5a5a5" @click="remove(item,index)"></uni-icons></label> | 
|                 </view> | 
|             </view> | 
|         </checkbox-group> --> | 
|         <checkbox-group @change="checkbox"> | 
|             <view v-for="(item,index) in matList" :key="index" class="data-list bg-false" :class="'bg-'+item.checked" > | 
|                 <label class="left-check-box"> | 
|                     <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" /> | 
|                 </label> | 
|                 <view class="data-list-left"> | 
|                     <view class="matnr"><text style="width: 700rpx;">编码:{{item.matnr}}</text></view> | 
|                     <view><text style="width: 700rpx;">品名:{{item.maktx}}</text></view> | 
|                     <view><text style="width: 700rpx;">批号:{{item.batch}}</text></view> | 
|                     <view> | 
|                         <text style="width: 700rpx;">数量:{{item.anfme}}</text> | 
|                     </view> | 
|                 </view> | 
|                 <view class="data-list-right"> | 
|                     <label><uni-icons type="compose" size="20" color="#a5a5a5" @click="revise(item,index)"></uni-icons></label> | 
|                     <!-- list中删除键 --> | 
|                     <!-- <label><uni-icons type="trash" size="25" color="#a5a5a5" @click="remove(item,index)"></uni-icons></label> --> | 
|                 </view> | 
|             </view> | 
|         </checkbox-group> | 
|         <!-- 无数据显示 --> | 
|         <view class="square-none"  v-show="matList.length === 0"> | 
|             <view class="v-show">暂无更多数据...</view> | 
|         </view> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     export default { | 
|         data () { | 
|             return { | 
|                 matList: [], | 
|                 locNo: null, | 
|                 matnr: null | 
|                  | 
|             } | 
|         }, | 
|         mounted() { | 
|             const UIP = uni.getStorageSync('UIP'); | 
|             this.baseIP = UIP; | 
|             const UPORT = uni.getStorageSync('UPORT'); | 
|             this.basePORT = UPORT | 
|         }, | 
|         methods: { | 
|             checkbox: function () { | 
|                  | 
|             }, | 
|             // 清空库位号搜索框 | 
|             removeLocNo() { | 
|                 this.locNo = null | 
|             }, | 
|             // 清空商品编码 | 
|             removeMatnr() { | 
|                 this.matnr = null | 
|             }, | 
|             request() { | 
|                 let that = this | 
|                 uni.request({ | 
|                     url:that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + '/locDetl/list/auth', | 
|                     header:{'token':uni.getStorageSync('token')}, | 
|                     data: { | 
|                         curr: 1, | 
|                         limit: 100, | 
|                         loc_no: that.locNo, | 
|                         matnr: that.matnr | 
|                     }, | 
|                     method:"GET", | 
|                     success(result) { | 
|                         console.log(result) | 
|                         let res = result.data | 
|                         let records = res.data.records | 
|                         if (res.code == 200) { | 
|                             if (records) { | 
|                                 that.matList = records | 
|                                 console.log(that.matList) | 
|                             } else { | 
|                                 uni.showToast({ | 
|                                     title: "暂无更多数据", | 
|                                     position: 'top', | 
|                                     duration: 1000 | 
|                                 }); | 
|                             } | 
|                         } 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'}) | 
|                         } | 
|                     } | 
|                 }) | 
|             }, | 
|             // 根据库位号搜索 | 
|             searchByLoc() { | 
|                 let that = this | 
|                 that.request() | 
|             }, | 
|             // 根据商品编码搜索 | 
|             searchByMatnr() { | 
|                 let that = this | 
|                 that.request() | 
|             } | 
|         }, | 
|     } | 
| </script> | 
|   | 
| <style> | 
|     .bg-false { | 
|         background-color: #FFFFFF; | 
|     } | 
|     .bg-true { | 
|         background-color: #ebebeb; | 
|     } | 
|     .data-list { | 
|         border-bottom: 1px solid #d8d8d8; | 
|         height: 180rpx; | 
|         margin: 15rpx; | 
|         border-radius: 20rpx; | 
|     } | 
|     .data-list:first-child { | 
|         margin-top: 20rpx; | 
|     } | 
|     .data-list:last-child { | 
|         margin-bottom: 160rpx; | 
|     } | 
|     /* .data-list-left { | 
|         display: inline-block; | 
|         float: left; | 
|         text-align: center; | 
|         width: 100rpx; | 
|         height: 180rpx; | 
|         line-height: 180rpx; | 
|     } */  | 
|     .left-check-box { | 
|         display: inline-block; | 
|         /* background-color: #1E9FFF; */ | 
|         float: left; | 
|         height: 100%; | 
|         width: 100rpx; | 
|         text-align: center; | 
|         line-height: 170rpx; | 
|     } | 
|     .data-list-left { | 
|         /* background-color: #ffff7f; */ | 
|         display: inline-block; | 
|         float: left; | 
|         height: 180rpx; | 
|         width: 500rpx; | 
|         color: #676767; | 
|     } | 
|     .matnr { | 
|         padding-top: 10rpx; | 
|     } | 
|     .data-list-right { | 
|         /* background-color: #55ffff; */ | 
|         display: inline-block; | 
|         float: right; | 
|         width: 100rpx; | 
|         height: 180rpx; | 
|         line-height: 180rpx; | 
|     } | 
|     .data-list-right label { | 
|         display: inline-block; | 
|         float: left; | 
|         width: 100rpx; | 
|         height: 180rpx; | 
|     } | 
|     .revise-box { | 
|         width: 500rpx; | 
|         height: 500rpx; | 
|     } | 
|     .revise-box-top { | 
|         width: 100%; | 
|         height: 100rpx; | 
|         background-color: #fff; | 
|         padding: 10rpx; | 
|     } | 
|     .changeBox { | 
|         width: 100%; | 
|         height: 100rpx; | 
|         line-height: 120rpx; | 
|         text-align: center; | 
|         background-color: #FFF; | 
|         margin-top: 20rpx; | 
|         border-bottom: 1px solid #e3e3e3; | 
|     } | 
|     .text-box { | 
|         width: 100%; | 
|         height: 100rpx; | 
|         line-height: 120rpx; | 
|         text-align: center; | 
|         /* padding-left: 120rpx; */ | 
|         background-color: #FFF; | 
|         margin-top: 20rpx; | 
|         border-bottom: 1px solid #e3e3e3; | 
|     } | 
|     .changeBox .num-box { | 
|         display:  inline-block; | 
|         float: left; | 
|     } | 
|     .changeBox button { | 
|         float: left; | 
|     } | 
|     .revise-box-buttom { | 
|         position: absolute; | 
|         width: 100%; | 
|         height: 100rpx; | 
|         line-height: 100rpx; | 
|         background-color: #FFFFFF; | 
|         bottom: 0; | 
|         text-align: center; | 
|     } | 
| </style> |