| <template> | 
|     <view class="has-foot"> | 
|         <form> | 
|             <view class="cu-form-group "> | 
|                 <view class="title">接驳站</view> | 
|                 <input placeholder="请扫描接驳站条码" v-model="barcode" ></input> | 
|                 <text class='cuIcon-search text-blue' @click="search"></text> | 
|             </view>             | 
|         </form> | 
|         <view class="flex solid-bottom padding-sm justify-between"> | 
|             <view class="text-blue">容器码:{{container}}</view> | 
|              | 
|         </view> | 
|   | 
|   | 
|   | 
|         <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.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() { | 
|                 let that = this | 
|                 const { | 
|                     code, | 
|                     data, | 
|                     msg | 
|                 } = await request('/staBind/list', { | 
|                     sta: this.barcode | 
|                 }) | 
|                 if (code === 200) {     | 
|                     if(data.list.length >0){ | 
|                         that.container = data.barcode                         | 
|                         that.list = data.list | 
|                     }                     | 
|                 } else { | 
|                     uni.showToast({ | 
|                         title: msg, | 
|                         icon: "none", | 
|                     }) | 
|                 } | 
|             }, | 
|   | 
|             remove(index) { | 
|                 this.list.splice(index, 1); | 
|             }, | 
|             clear() { | 
|                 this.list = [] | 
|                  | 
|                 this.container = '' | 
|                 this.barcode = '' | 
|             }, | 
|   | 
|             open() { | 
|                 this.$refs.popup.open() | 
|             }, | 
|   | 
|             close() { | 
|                 this.$refs.popup.close() | 
|             }, | 
|   | 
|             popupSubmit() { | 
|                 this.$refs.popup.close() | 
|             }, | 
|             itemChange(el) { | 
|                 this.curCode = el | 
|             }, | 
|   | 
|             async confirm() {                 | 
|                 if(this.barcode === '' || this.barcode ===null){ | 
|                     uni.showToast({ | 
|                         title: "接驳站码不能为空", | 
|                         icon: "none", | 
|                     }) | 
|                     return ; | 
|                 } | 
|                 const { | 
|                     code, | 
|                     data, | 
|                     msg | 
|                 } = await request('/AGV/staUnBind',{                         | 
|                         sta: 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> |