| <template>  | 
|     <view class="has-foot">  | 
|         <form>  | 
|             <view class="cu-form-group margin-top">  | 
|                 <view class="title">容器编号</view>  | 
|                 <input placeholder="请扫容器编号" v-model="barcode"></input>  | 
|                 <text class='cuIcon-search text-blue' @click="search"></text>  | 
|             </view>  | 
|   | 
|             <view class="cu-form-group ">  | 
|                 <view class="title">目标库区</view>  | 
|                 <input placeholder="请扫描目标库区" v-model="areaName" ></input>  | 
|             </view>  | 
|   | 
|             <view class="cu-form-group ">  | 
|                 <view class="title">目标库位</view>  | 
|                 <input placeholder="请选择目标库位" v-model="curCode"></input>  | 
|                 <text class='cu-btn  bg-red tj' @click="open">推荐</text>  | 
|             </view>  | 
|         </form>  | 
|   | 
|   | 
|   | 
|         <view class="cu-list det menu sm-border  padding">  | 
|             <block v-for="(item, index) in list" :key="index">  | 
|                 <view class="cu-bar bg-white solid-bottom margin-top-sm">  | 
|                     <view class="action">  | 
|                         <view class="index">  | 
|                             {{index+1}}  | 
|                         </view>  | 
|                         <view class="text-blue">  | 
|                             {{`${item.maktx}`}}  | 
|                         </view>  | 
|                     </view>  | 
|                     <!--     <view class="action" >  | 
|                         <text @click="remove(index)" class="cuIcon-close text-red" style="font-size: 24px;"></text>  | 
|                     </view> -->  | 
|                 </view>  | 
|   | 
|                 <view class="cu-item">  | 
|                     <view class="content">  | 
|                         <text class="text-black">ASN:</text>  | 
|                     </view>  | 
|                     <view class="action">  | 
|                         <text class="text-grey ">{{item.asnCode}}</text>  | 
|                     </view>  | 
|                 </view>  | 
|   | 
|                 <view class="cu-item">  | 
|                     <view class="content">  | 
|                         <text class="text-black">供应商批次:</text>  | 
|                     </view>  | 
|                     <view class="action">  | 
|                         <text class="text-grey">{{item.splrBatch}}</text>  | 
|                     </view>  | 
|                 </view>  | 
|   | 
|                 <view class="cu-item">  | 
|                     <view class="content">  | 
|                         <text class="text-black">库存批次:</text>  | 
|                     </view>  | 
|                     <view class="action">  | 
|                         <text class="text-grey ">{{item.batch}}</text>  | 
|                     </view>  | 
|                 </view>  | 
|   | 
|   | 
|                 <view class="cu-item">  | 
|                     <view class="content">  | 
|                         <text class="text-black">收货数量:</text>  | 
|                     </view>  | 
|                     <view class="action">  | 
|                         <text class="text-grey ">{{item.anfme}}</text>  | 
|                     </view>  | 
|                 </view>  | 
|   | 
|             </block>  | 
|         </view>  | 
|   | 
|   | 
|         <view class="cu-bar btn-group foot">  | 
|             <button class="cu-btn text-blue line-blue shadow" @click="clear">清空</button>  | 
|             <button class="cu-btn bg-blue shadow-blur" @click="confirm">上架</button>  | 
|         </view>  | 
|   | 
|         <uni-popup ref="popup" class="cu-popup">  | 
|             <view class="popup-content">  | 
|                 <view class="head">  | 
|                     <text>推荐</text>  | 
|                     <text class='cuIcon-close text-red close' @click="close"></text>  | 
|                 </view>  | 
|   | 
|                 <div class="body">  | 
|                     <view class="cu-list grid col-3 no-border">  | 
|                         <view class="item" v-for="el in range">  | 
|                             <view class="cu-btn round  sm" :class="[el===curCode?'bg-blue':'line-blue']"  | 
|                                 @click="itemChange(el)">{{el}}</view>  | 
|                         </view>  | 
|                     </view>  | 
|                 </div>  | 
|   | 
|                 <view class="cu-bar btn-group ">  | 
|                     <button class="cu-btn bg-blue shadow-blur" @click="popupSubmit">提交</button>  | 
|                 </view>  | 
|             </view>  | 
|         </uni-popup>  | 
|   | 
|     </view>  | 
| </template>  | 
|   | 
| <script>  | 
|     import {  | 
|         request  | 
|     } from '../../common/request.js'  | 
|     import {  | 
|         mapState,  | 
|         mapMutations,  | 
|         mapActions,  | 
|         mapGetters  | 
|     } from 'vuex';  | 
|     export default {  | 
|         data() {  | 
|             return {  | 
|                 barcode: '',  | 
|                 areaName: '',  | 
|                 locCode: '',  | 
|                 container: '',  | 
|                 list: [],  | 
|                 range: [],  | 
|                 curCode: ''  | 
|             }  | 
|         },  | 
|         computed: {  | 
|             ...mapState('user', ['dynamicFields']),  | 
|         },  | 
|         mounted() {},  | 
|         methods: {  | 
|             async search() {  | 
|                 const {  | 
|                     code,  | 
|                     data,  | 
|                     msg  | 
|                 } = await request(`/task/stock/${this.barcode}`)  | 
|                 if (code === 200) {  | 
|                     this.list = data.taskItems;  | 
|                     this.range = data.locArea.locs.map(el => el.code)  | 
|                     this.curCode = this.range[0]  | 
|                     this.areaName = data.locArea.areaName  | 
|                 } else {  | 
|                     uni.showToast({  | 
|                         title: msg,  | 
|                         icon: "none",  | 
|                     })  | 
|                 }  | 
|             },  | 
|   | 
|             remove(index) {  | 
|                 this.list.splice(index, 1);  | 
|             },  | 
|             clear() {  | 
|                 this.list = []  | 
|                 this.range = []  | 
|                 this.curCode = ''  | 
|                 this.areaName = ''  | 
|                 this.barcode = ''  | 
|             },  | 
|   | 
|             open() {  | 
|                 this.$refs.popup.open()  | 
|             },  | 
|   | 
|             close() {  | 
|                 this.$refs.popup.close()  | 
|             },  | 
|   | 
|             popupSubmit() {  | 
|                 this.$refs.popup.close()  | 
|             },  | 
|             itemChange(el) {  | 
|                 this.curCode = el  | 
|             },  | 
|   | 
|             async confirm() {  | 
|                 const {  | 
|                     code,  | 
|                     data,  | 
|                     msg  | 
|                 } = await request(`/task/public/${this.barcode}`  | 
|                     // , {  | 
|                     //     curCode: this.curCode,  | 
|                     //     barcode: this.barcode  | 
|                     // },  | 
|                 )  | 
|                 if (code === 200) {  | 
|                     uni.showToast({  | 
|                         title: '上架成功'  | 
|                     })  | 
|                     this.clear()  | 
|                 } else {  | 
|                     uni.showToast({  | 
|                         title: msg,  | 
|                         icon: "none",  | 
|                     })  | 
|                 }  | 
|   | 
|   | 
|   | 
|             },  | 
|   | 
|         }  | 
|     }  | 
| </script>  | 
|   | 
| <style>  | 
|     .index {  | 
|         border: 1px solid #e54d42;  | 
|         color: #e54d42;  | 
|         border-radius: 50%;  | 
|         display: block;  | 
|         width: 50rpx;  | 
|         height: 50rpx;  | 
|         line-height: 48rpx;  | 
|         text-align: center;  | 
|         margin-right: 20rpx;  | 
|         font-size: 30rpx;  | 
|     }  | 
|   | 
|     .text-blue {  | 
|         color: #0081ff !important;  | 
|   | 
|     }  | 
|   | 
|     .item {  | 
|         position: relative;  | 
|         display: flex;  | 
|         min-height: 80upx;  | 
|         align-items: center;  | 
|     }  | 
|   | 
|     .uni-file-picker {  | 
|         width: 100%;  | 
|         margin-bottom: 10px;  | 
|     }  | 
|   | 
|     .uni-select__selector {  | 
|         z-index: 999;  | 
|     }  | 
|   | 
|     .tj {  | 
|         height: auto;  | 
|         padding: 6px 8px;  | 
|         display: inline-block;  | 
|         border-radius: 6px;  | 
|     }  | 
|   | 
|     .item {  | 
|         display: flex;  | 
|         justify-content: center;  | 
|     }  | 
|   | 
|     .item .cu-btn {  | 
|         font-size: 26upx;  | 
|     }  | 
| </style> |