<template> 
 | 
    <view class="has-foot"> 
 | 
        <view> 
 | 
         
 | 
        <form> 
 | 
            <view class="cu-form-group margin-top"> 
 | 
                <view class="title">容器号</view> 
 | 
                <input placeholder="请扫描容器号" v-model="container" focus></input> 
 | 
                <text class='cuIcon-search text-blue' @click="getList"></text> 
 | 
            </view>             
 | 
            <view class="cu-form-group"> 
 | 
                <view class="title">物料编码</view> 
 | 
                <input placeholder="请扫描物料编码" v-model="matnrCode"></input> 
 | 
                <text class='cuIcon-search text-blue' @click="search"></text> 
 | 
            </view> 
 | 
            <view class="cu-form-group"> 
 | 
                <view class="title">ASN单号</view> 
 | 
                <input placeholder="请输入ASN单号" v-model="asnCode"></input> 
 | 
            </view> 
 | 
        </form> 
 | 
  
 | 
        <view class="flex solid-bottom padding-sm justify-between"> 
 | 
            <view class="text-blue">物料总类:{{list.length}}</view> 
 | 
            <view class="text-blue">组盘总数:{{allCount}}</view> 
 | 
        </view> 
 | 
         
 | 
        </view> 
 | 
  
 | 
        <view class="padding-lr margin-top-sm"> 
 | 
            <block v-for="(item, index) in list" :key="index"> 
 | 
                <view class="cu-list det menu sm-border margin-bottom-sm " :class="[item.trackCode===barcode&&'act']" 
 | 
                    :ref="item.trackCode+'ref'"> 
 | 
                    <view class="cu-bar bg-white solid-bottom "> 
 | 
                        <view class="action"> 
 | 
                            <view class="index"> 
 | 
                                {{index+1}} 
 | 
                            </view> 
 | 
                            <view class="text-blue"> 
 | 
                                编码: 
 | 
                                {{`${item.matnrCode}`}} 
 | 
                            </view> 
 | 
                        </view> 
 | 
                        <view class="action" v-if="!isconfirm"> 
 | 
                            <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">物料编码:</text> 
 | 
                            <text class="text-grey ">{{item.maktx}}</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 class="text-grey ">{{item.inspect}}</text></text> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                    <!-- <view class="cu-item"> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">平台行号: <text class="text-grey ">{{item.platformId}}</text></text> 
 | 
                        </view> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">质检结果: <text class="text-grey ">{{item.inspect}}</text></text> 
 | 
                        </view> 
 | 
                    </view> --> 
 | 
  
 | 
                    <view class="cu-item"> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">库存单位: <text class="text-grey ">{{item.stockUnit}}</text></text> 
 | 
                        </view> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">收货数量: <text class="text-grey ">{{item.anfme}}</text></text> 
 | 
                        </view> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">已上架数量: <text 
 | 
                                    class="text-grey ">{{item.workQty + item.qty}}</text></text> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                    <view class="cu-item"> 
 | 
                        <view class="content"> 
 | 
                            <text class="text-black">可组盘数量: <text 
 | 
                                    class="text-grey ">{{item.anfme - item.workQty}}</text></text> 
 | 
                        </view> 
 | 
                         
 | 
                    </view> 
 | 
                    <view class="cu-item">                         
 | 
                        <view class="content"> 
 | 
                            <view class="cu-form-group padding-lr-0"> 
 | 
                                <view class="title text-blue"><text 
 | 
                                        class="text-red text-xl vertical-middle">*</text>组盘数量: 
 | 
                                </view> 
 | 
                                <uni-number-box style="width: 70%;" :min="0" :max="max" :decimal="2" :step="0.01" v-model="item.receiptQty" 
 | 
                                    ></uni-number-box> 
 | 
                            </view> 
 | 
                        </view> 
 | 
                    </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" :disabled="repeatClick" @click="confirm">组盘</button> 
 | 
        </view> 
 | 
    </view> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import { 
 | 
        request 
 | 
    } from '../../common/request.js' 
 | 
    import { 
 | 
        mapState, 
 | 
        mapMutations, 
 | 
        mapActions, 
 | 
        mapGetters 
 | 
    } from 'vuex'; 
 | 
    export default { 
 | 
        data() { 
 | 
            return { 
 | 
                barcode: '', 
 | 
                container: '', 
 | 
                megreQty: '', 
 | 
                list: [], 
 | 
                range: [], 
 | 
                asnCode: '', 
 | 
                repeatClick: false, 
 | 
                isconfirm: false,                 
 | 
                matnrCode:'', 
 | 
                max: 99999999, 
 | 
            } 
 | 
        }, 
 | 
        computed: { 
 | 
            ...mapState('user', ['dynamicFields']), 
 | 
            allCount() { 
 | 
                return this.list.reduce((acc, row) => +row.anfme + acc, 0) || 0 
 | 
            } 
 | 
        }, 
 | 
        mounted() {}, 
 | 
        methods: {             
 | 
            async search() { 
 | 
                const find = this.list.find(el => el.trackCode === this.barcode); 
 | 
                find ? this.scrollTo() : this.getDet(); 
 | 
  
 | 
            }, 
 | 
            getDet() { 
 | 
                let that = this; 
 | 
                uni.navigateTo({ 
 | 
                    url: "../listing/itemSelect", 
 | 
                    success: function(res) { 
 | 
                        // 通过eventChannel向被打开页面传送数据   向另外一个页面传递值的 
 | 
                        res.eventChannel.emit('data', { 
 | 
                            matnrCode: that.matnrCode, 
 | 
                            asnCode: that.asnCode 
 | 
                        }) 
 | 
                    }, 
 | 
                    events: { 
 | 
                        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据  另外一个页面传过来的 
 | 
                        backData: function(data) {                                     
 | 
                            that.showBackData(data.data) 
 | 
                        }, 
 | 
                    }, 
 | 
                 
 | 
                 
 | 
                }); 
 | 
            }, 
 | 
            // async getDet() { 
 | 
            //     let that = this; 
 | 
            //     const { 
 | 
            //         code, 
 | 
            //         data, 
 | 
            //         msg 
 | 
            //     } = await request('/asnOrderItem/trackCode', { 
 | 
            //         matnrCode: that.matnrCode, 
 | 
            //         asnCode: that.asnCode 
 | 
            //     }, "post") 
 | 
            //     if (code === 200) { 
 | 
            //         data.map(item => { 
 | 
            //             item.receiptQty = 0; 
 | 
            //             item.selected = false; 
 | 
            //         }) 
 | 
            //         // for (var i = 0; i < data.length; i++) { 
 | 
            //         //     data[i].receiptQty =1; 
 | 
            //         //     data[i].selected = false;                             
 | 
            //         // } 
 | 
            //         if(data !== [] || data !== null){                     
 | 
            //         uni.navigateTo({ 
 | 
            //                 url: "../listing/itemSelect", 
 | 
            //                 success: function(res) { 
 | 
            //                     // 通过eventChannel向被打开页面传送数据   向另外一个页面传递值的 
 | 
            //                     res.eventChannel.emit('data', { 
 | 
            //                         item: data 
 | 
            //                     }) 
 | 
            //                 }, 
 | 
            //                 events: { 
 | 
            //                     // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据  另外一个页面传过来的 
 | 
            //                     backData: function(data) {                                     
 | 
            //                         that.showBackData(data.data) 
 | 
            //                     }, 
 | 
            //                 }, 
 | 
                         
 | 
                         
 | 
            //             }); 
 | 
                         
 | 
            //         } 
 | 
                         
 | 
            //         // this.list = data 
 | 
            //     } else { 
 | 
            //         uni.showToast({ 
 | 
            //             title: msg, 
 | 
            //             icon: "none", 
 | 
            //             position: 'top' 
 | 
            //         }) 
 | 
            //     } 
 | 
            // }, 
 | 
            async getList() { 
 | 
                if(this.container === '' || this.container === null){ 
 | 
                    uni.showToast({ 
 | 
                        title: "容器码为空", 
 | 
                        icon: "none", 
 | 
                        position: 'top' 
 | 
                    }) 
 | 
                    return ; 
 | 
                } 
 | 
                const { 
 | 
                    code, 
 | 
                    data, 
 | 
                    msg 
 | 
                } = await request('/asnOrderItem/container', { 
 | 
                    barcode: this.container 
 | 
                }) 
 | 
                if (code === 200) { 
 | 
                    this.list = data 
 | 
                } else { 
 | 
                    uni.showToast({ 
 | 
                        title: msg, 
 | 
                        icon: "none", 
 | 
                        position: 'top' 
 | 
                    }) 
 | 
                } 
 | 
            }, 
 | 
            showBackData(data){                 
 | 
                let status ; 
 | 
                data.map(item => {                     
 | 
                    this.list.push(item) 
 | 
                })     
 | 
                let oldLength = this.list.length 
 | 
                this.list = this.list.filter((item, index, self) => 
 | 
                    self.findIndex(i => ( 
 | 
                        i.id === item.id // 根据id去重 
 | 
                    )) === index && item.isptResult === self[0].isptResult 
 | 
                ); 
 | 
                let newLength = this.list.length 
 | 
                 
 | 
                if(oldLength > newLength){     
 | 
                    this.showMsg("新明细被过滤,请检查状态") 
 | 
                     
 | 
                } 
 | 
                                 
 | 
            }, 
 | 
            showMsg(msg){                 
 | 
                setTimeout(function() { 
 | 
                 uni.showToast({ 
 | 
                     icon: "none", 
 | 
                     position: 'top', 
 | 
                     title: msg, 
 | 
                     duration:2000,                      
 | 
                 }) 
 | 
                }, 200); 
 | 
                 
 | 
            }, 
 | 
            scrollTo() { 
 | 
                const ref = this.$refs[`${this.barcode}ref`][0]; 
 | 
                uni.pageScrollTo({ 
 | 
                    scrollTop: ref.$el.offsetTop, 
 | 
                    duration: 300 
 | 
                }) 
 | 
            }, 
 | 
            remove(index) { 
 | 
                this.list.splice(index, 1); 
 | 
            }, 
 | 
            clear() { 
 | 
                this.list = [] 
 | 
                this.barcode = '' 
 | 
            }, 
 | 
            next() { 
 | 
                if (this.list.length) { 
 | 
                    this.isconfirm = true 
 | 
                } else { 
 | 
                    uni.showToast({ 
 | 
                        icon: "none", 
 | 
                        title: '未选物料标签' 
 | 
                    }) 
 | 
                } 
 | 
            }, 
 | 
            prev() { 
 | 
                this.isconfirm = false 
 | 
            }, 
 | 
            async confirm() { 
 | 
                if(this.container === '' || this.container === null){ 
 | 
                    uni.showToast({ 
 | 
                        title: "容器码为空", 
 | 
                        icon: "none", 
 | 
                        position: 'top' 
 | 
                    }) 
 | 
                    return ; 
 | 
                } 
 | 
                if(this.list.length ===0 || this.list === null){ 
 | 
                    uni.showToast({ 
 | 
                        title: "未添加明细", 
 | 
                        icon: "none", 
 | 
                        position: 'top' 
 | 
                    }) 
 | 
                    return ; 
 | 
                } 
 | 
                this.repeatClick = true                 
 | 
                const newArr = this.list.map(item => { 
 | 
                     
 | 
                    return { 
 | 
                        ...item, 
 | 
                        anfme: item.anfme === null ? 0 : +item.anfme,                         
 | 
                    }; 
 | 
                }); 
 | 
  
 | 
                const { 
 | 
                    code, 
 | 
                    data, 
 | 
                    msg 
 | 
                } = await request('/waitPakin/merge', { 
 | 
                    items: newArr, 
 | 
                    barcode: this.container,                     
 | 
                }) 
 | 
                if (code === 200) { 
 | 
                    uni.showToast({ 
 | 
                        title: '组盘成功' 
 | 
                    }) 
 | 
                    this.list = [] 
 | 
                    this.barcode = '' 
 | 
                    this.container = '' 
 | 
                    this.isconfirm = false 
 | 
                } else { 
 | 
                    uni.showToast({ 
 | 
                        title: msg, 
 | 
                        icon: "none", 
 | 
                        position: 'top' 
 | 
                    }) 
 | 
                } 
 | 
                this.repeatClick = false 
 | 
            }, 
 | 
        } 
 | 
    } 
 | 
</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; 
 | 
  
 | 
    } 
 | 
  
 | 
    .act { 
 | 
        border: 1px solid #e54d42; 
 | 
    } 
 | 
  
 | 
    .item { 
 | 
        position: relative; 
 | 
        display: flex; 
 | 
        min-height: 80upx; 
 | 
        align-items: center; 
 | 
    } 
 | 
</style> 
 |