<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> 
 |