| <template> | 
|     <view> | 
|         <view class="code"> | 
|             <uni-search-bar  v-model="searchValue1"  | 
|                 maxlength="500" ancel="cancel" @confirm="searchValueInput1()" @clear="clear" placeholder="输入 / 扫描 订单号"> | 
|             </uni-search-bar> | 
|             <view class="code-title"> | 
|                 <view></view> | 
|                 <view style="width: 100%;text-align: center;margin: 16rpx 0;"><text style="color: #0055ff;">{{docType}}</text>  总数量:- {{total}} -</view> | 
|                 <view style="width: 100rpx;margin: 16rpx 0;" @click="filter()">筛选</view> | 
|             </view> | 
|         </view> | 
|          | 
|         <view class="list list-font-color" :class="orderDetl.color" v-for="(orderDetl,index) in dataList" :key="index"> | 
|             <view class="list-left"> | 
|                 <view class="detl-threeCode">{{orderDetl.threeCode}}</view> | 
|                 <view>主单号:{{orderDetl.orderNo}}</view> | 
|                 <view>编号:{{orderDetl.matnr}}</view> | 
|                 <view>名称:{{orderDetl.maktx}}</view> | 
|                 <view>类型:{{orderDetl.brand}}</view> | 
|                 <view>订单数量:{{orderDetl.anfme}}</view> | 
|                 <view>库存数量:{{orderDetl.stock}}</view> | 
|                 <view>已出数量:{{orderDetl.qty}}</view> | 
|             </view> | 
|             <view class="list-right" @click="goToLocDetl(orderDetl)"> | 
|                 <uni-icons type="right" size="25"  color="#fff"></uni-icons> | 
|             </view> | 
|         </view> | 
|          | 
|         <!-- 垫高 --> | 
|         <view style="height: 340rpx;text-align: center;color: #b9b9b9;"> | 
|             - 已经到底了 - | 
|         </view> | 
|          | 
|         <!-- <view class="buttom"> | 
|             <view style="width: 150rpx;text-align: center;padding-left: 12rpx;"> | 
|                 名称 | 
|             </view> | 
|             <uni-search-bar v-model="searchValue2" style="width: 100%;" | 
|                 maxlength="500" ancel="cancel" @confirm="searchValueInput2()" @clear="clear2" placeholder="输入 / 扫描 订单号"> | 
|             </uni-search-bar> | 
|         </view> --> | 
|         <!-- 筛选弹窗 --> | 
|         <view> | 
|             <uni-popup ref="filter" type="dialog"> | 
|                 <view class="filter-popup"> | 
|                     <!-- 标题 --> | 
|                     <view class="title">筛选</view> | 
|                     <hr> | 
|                     <view class="popup-item" > | 
|                         <view class="item-cl" > | 
|                             <view>单据类型:</view> | 
|                             <view> | 
|                                 <uni-combox style="height: 30rpx;" :candidates="docTypes" placeholder="类型" v-model="docType"  @input="getDocType"></uni-combox> | 
|                             </view> | 
|                              | 
|                         </view> | 
|                     </view> | 
|                     <view class="popup-item"> | 
|                         <view class="item-cl"> | 
|                             <view>销售订单:</view> | 
|                             <input type="text" v-model="searchValue1"> | 
|                         </view> | 
|                     </view> | 
|                     <view class="popup-item"> | 
|                         <view class="item-cl"> | 
|                             <view>主订单号:</view> | 
|                             <input type="text" v-model="orderNo"> | 
|                         </view> | 
|                     </view> | 
|                     <view class="popup-item"> | 
|                         <view class="item-cl"> | 
|                             <view>商品编号:</view> | 
|                             <input type="text" v-model="matnr"> | 
|                         </view> | 
|                     </view> | 
|                     <view class="popup-item"> | 
|                         <view class="item-cl"> | 
|                             <view>商品名称:</view> | 
|                             <input type="text" v-model="maktx"> | 
|                         </view> | 
|                     </view> | 
|                     <view class="popup-item"> | 
|                         <view class="item-cl"> | 
|                             <view>商品种类:</view> | 
|                             <input type="text" v-model="brand"> | 
|                         </view> | 
|                     </view> | 
|                     <view class="btn filter-btn"> | 
|                         <view class="btn-left" @click="filterClose">重置</view> | 
|                         <view class="btn-right" @click="filterConfirm()">确认</view> | 
|                     </view> | 
|                 </view> | 
|             </uni-popup> | 
|         </view> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     export default { | 
|         data() { | 
|             return { | 
|                 baseUrl: '', | 
|                 token: '', | 
|                 searchValue1: '', | 
|                 searchValue2: '', | 
|                 orderNo: '', | 
|                 matnr: '', | 
|                 maktx: '', | 
|                 brand: '', | 
|                 total: '', | 
|                 dataList: [], | 
|                 orderCarList: [], | 
|                 data: { | 
|                     curr: 1, | 
|                     limit: 100, | 
|                     three_code: '', | 
|                     matnr: '', | 
|                     maktx: '', | 
|                     order_no: '', | 
|                     brand: '', | 
|                     docType: 0 | 
|                 }, | 
|                 docTypes: [], | 
|                 srDocTypes: [], | 
|                 docType: '' | 
|             } | 
|         }, | 
|         onReachBottom() { | 
|             this.status = 'more'; | 
|             this.getOrderDetlList(this.searchValue1,10); | 
|         }, | 
|         onShow() { | 
|             this.baseUrl = uni.getStorageSync('baseUrl'); | 
|             this.token = uni.getStorageSync('token'); | 
|             this.searchValue1 = uni.getStorageSync('threeCodeOut1'); | 
|             this.searchValue2 = uni.getStorageSync('threeCodeOut2'); | 
|             this.getOrderDetlList(this.searchValue1,10) | 
|             this.getDocTypes() | 
|         }, | 
|         methods: { | 
|             getDocTypes() { | 
|                 let _this = this | 
|                 uni.request({ | 
|                     url: `${_this.baseUrl}/doc/type/out/list`, | 
|                     header: {'token': uni.getStorageSync('token')}, | 
|                     method: 'GET', | 
|                     success(res) { | 
|                         res = res.data | 
|                         if (res.code === 200) { | 
|                             for    (let k of res.data) { | 
|                                 _this.docTypes.push(k.docName) | 
|                             } | 
|                             _this.srDocTypes = res.data | 
|                         } | 
|                     } | 
|                 }) | 
|             }, | 
|             getOrderDetlList(threeCode,limit) { | 
|                 uni.showLoading({}) | 
|                 let _this = this | 
|                 _this.mask = true | 
|                 _this.data.three_code = threeCode | 
|                 _this.data.limit = limit | 
|                 for (let k of this.srDocTypes) { | 
|                     if (k.docName == this.docType) { | 
|                         _this.data.docType = k.docId | 
|                     } | 
|                 } | 
|                 uni.request({ | 
|                     url: `${_this.baseUrl}/orderDetl/pakout/list/authV193`, | 
|                     header: {'token': uni.getStorageSync('token')}, | 
|                     data: _this.data, | 
|                     method: 'GET', | 
|                     success(res) { | 
|                         uni.hideLoading({}) | 
|                         res = res.data | 
|                         if (res.code === 200) { | 
|                             for (let k of res.data.records) { | 
|                                 if (k.anfme > k.qty && k.qty == 0) { | 
|                                     k['color'] = 'order-sts-start' | 
|                                 } else if (k.anfme > k.qty && k.qty != 0) { | 
|                                     k['color'] = 'order-sts-working' | 
|                                 } else { | 
|                                     k['color'] = 'order-sts-end' | 
|                                 } | 
|                             } | 
|                             let list = res.data.records | 
|                             _this.dataList =  _this.dataList.concat(list); | 
|                             _this.data.curr = _this.data.curr + 1 | 
|                             _this.total = res.data.total | 
|                             _this.mask = false | 
|                         } else if (res.code == 403) { | 
|                             uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
|                             setTimeout(() => { uni.reLaunch({ url: '../../login/login' }); }, 1000); | 
|                         } else { | 
|                             uni.showToast({ title: res.msg, icon: "error", position: 'top' }) | 
|                         } | 
|                     } | 
|                 }) | 
|             }, | 
|             searchValueInput1() { | 
|                 this.dataList = [] | 
|                 this.data.curr = 1 | 
|                 uni.setStorageSync('threeCodeOut1', this.searchValue1); | 
|                 uni.setStorageSync('threeCodeOut2', this.searchValue2); | 
|                 if (this.searchValue1.length == 0) { | 
|                     this.getOrderDetlList(this.searchValue1,10) | 
|                 } else { | 
|                     this.getOrderDetlList(this.searchValue1,10) | 
|                 } | 
|                  | 
|             }, | 
|             searchValueInput2() { | 
|                 uni.setStorageSync('threeCodeOut1', this.searchValue1); | 
|                 uni.setStorageSync('threeCodeOut2', this.searchValue2); | 
|                 if (this.searchValue1.length == 0) { | 
|                     this.getOrderDetlList(this.searchValue1,10) | 
|                 } else { | 
|                     this.getOrderDetlList(this.searchValue1,10) | 
|                 } | 
|             }, | 
|             clear() { | 
|                 this.dataList = [] | 
|                 this.data.curr = 1 | 
|                 setTimeout(()=> { | 
|                     this.getOrderDetlList(this.searchValue,10) | 
|                 },300) | 
|             }, | 
|             clear2() { | 
|                 setTimeout(()=> { | 
|                     this.searchValue2 = '' | 
|                     this.getOrderDetlList(this.searchValue1,10) | 
|                 },300) | 
|             }, | 
|             goToLocDetl(item) { | 
|                 if (item.qty >= item.anfme) { | 
|                     uni.showToast({ title: '已完成订单作业数量', icon: "error", position: 'top' }) | 
|                     return | 
|                 } | 
|                 let _this = this | 
|                 uni.navigateTo({ | 
|                     url: './checkOut', | 
|                     success(res) { | 
|                         res.eventChannel.emit('item', { | 
|                             item: item | 
|                         }) | 
|                     }, | 
|                     events: { | 
|                         acceptDataFromOpenedPage: function(data) { | 
|                             _this.getOrderDetlList(this.searchValue1,10) | 
|                         } | 
|                     } | 
|                 }) | 
|             }, | 
|             // 筛选 | 
|             filter() { | 
|                 this.$refs.filter.open('bottom') | 
|             }, | 
|             filterConfirm() { | 
|                 this.dataList = [] | 
|                 this.data.curr = 1 | 
|                 this.data.maktx = this.maktx | 
|                 this.data.matnr = this.matnr | 
|                 this.data.order_no = this.orderNo | 
|                 this.data.brand = this.brand | 
|                 this.getOrderDetlList(this.searchValue1,10) | 
|                 this.$refs.filter.close() | 
|             }, | 
|             filterClose() { | 
|                 this.dataList = [] | 
|                 this.data.curr = 1 | 
|                 this.data.maktx = '' | 
|                 this.data.matnr = '' | 
|                 this.data.order_no = '' | 
|                 this.data.brand = '' | 
|                 this.data.docType = 0 | 
|                 this.docType = '' | 
|                 this.searchValue = '' | 
|                 this.maktx = '' | 
|                 this.matnr = '' | 
|                 this.orderNo = '' | 
|                 this.brand = '' | 
|                 this.getOrderDetlList(this.searchValue1,10) | 
|                 this.$refs.filter.close() | 
|             } | 
|              | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style> | 
|     @import url('../../../static/css/common/order.css'); | 
|     .list-font-color { | 
|         color: #fff; | 
|         /* background-color: #33bb44; */ | 
|     } | 
|     .order-sts-start { | 
|         background-color: #3eb689; | 
|     } | 
|     .order-sts-working { | 
|         background-color: #ff9d46; | 
|     } | 
|     .order-sts-end { | 
|         background-color: #ff7356; | 
|     } | 
|     .detl-threeCode { | 
|         font-size: 28px; | 
|         font-weight: bold; | 
|     } | 
|      | 
|     .title { | 
|         height: 100rpx; | 
|         line-height: 100rpx; | 
|         width: 100%; | 
|         color: #606266; | 
|         text-align: center; | 
|         font-size: 16px; | 
|     } | 
|     .popup-item { | 
|         height: 80rpx; | 
|         line-height: 80rpx; | 
|         display: flex; | 
|         align-items: center; | 
|         justify-content: center; | 
|     } | 
|     .popup-item-left { | 
|         width: 16vw; | 
|         padding-right: 20rpx; | 
|         text-align: right; | 
|         color: #606266; | 
|     } | 
|     .popup-item-right { | 
|         display: flex; | 
|         align-items: center; | 
|         width: 50vw; | 
|         height: 50rpx; | 
|         padding: 2px 5px; | 
|         border: 1px solid #E4E7ED; | 
|         border-radius: 5rpx; | 
|     } | 
|     .popup-item-right input{ | 
|         color: #606266; | 
|     } | 
|     .btn { | 
|         display: flex; | 
|         height: 90rpx; | 
|         margin-top: 20rpx; | 
|         border-top: 1px solid #DCDFE6; | 
|         justify-content: center; | 
|         align-items: center; | 
|     } | 
|     .btn-left { | 
|         display: flex; | 
|         flex: 1; | 
|         height: 100%; | 
|         justify-content: center; | 
|         align-items: center; | 
|         color: #606266; | 
|         border-right: 1px solid #DCDFE6; | 
|     } | 
|     .btn-right { | 
|         display: flex; | 
|         flex: 1; | 
|         justify-content: center; | 
|         align-items: center; | 
|         color: #409EFF; | 
|     } | 
|     .filter-popup { | 
|         width: 100%; | 
|         height: 80vh; | 
|         background-color: #FFF; | 
|         position: relative; | 
|         border-radius: 30rpx 30rpx 0rpx 0rpx; | 
|     } | 
|     .filter-popup-item { | 
|         height: 100%; | 
|         width: 100%; | 
|         background-color: #c9cdd5; | 
|     } | 
|     .filter-popup-item-left { | 
|         width: 30%; | 
|         height: 100%; | 
|         background-color: #DCDFE6; | 
|          | 
|     } | 
|     .item-btn { | 
|         width: 100%; | 
|         height: 80rpx; | 
|         line-height: 80rpx; | 
|         background-color: #c9cdd5; | 
|         text-align: center; | 
|     } | 
|     .item-btn:checked { | 
|         background-color: #606266; | 
|     } | 
|     .filter-btn { | 
|         position: absolute; | 
|         left: 0; | 
|         bottom: 0; | 
|         width: 100%; | 
|         background-color: #FFF; | 
|     } | 
|     .item-cl { | 
|         display: flex;align-items: center; | 
|     } | 
|     .item-cl input { | 
|         border-bottom: 1px solid #b9b9b9; | 
|     } | 
| </style> |