<template>  
 | 
    <view class="has-foot">  
 | 
        <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' </text>  
 | 
            </view>  
 | 
  
 | 
            <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">物料总类:{{list.length}}</view>  
 | 
            <view class="text-blue">物料总数:{{allCount}}</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" 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">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 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">  
 | 
                        <view class="cu-form-group padding-lr-0">  
 | 
                            <view class="title text-blue">收货数量:</view>  
 | 
                            <input type="number" placeholder="请输入收货数量" v-model="item.receiptQty"></input>  
 | 
                        </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" @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: '',  
 | 
                list: [],  
 | 
                range: [],  
 | 
                isconfirm: false  
 | 
            }  
 | 
        },  
 | 
        computed: {  
 | 
            ...mapState('user', ['dynamicFields']),  
 | 
            allCount() {  
 | 
                return this.list.reduce((acc, row) => +row.qty + acc, 0) || 0  
 | 
            }  
 | 
        },  
 | 
        mounted() {},  
 | 
        methods: {  
 | 
            async search() {  
 | 
                const {  
 | 
                    code,  
 | 
                    data,  
 | 
                    msg  
 | 
                } = await request('/asnOrderItem/trackCode/' + this.barcode, {}, "get")  
 | 
                if (code === 200) {  
 | 
                    const find = this.list.find(el => el.id === data.id);  
 | 
                    !find && this.list.push(data)  
 | 
                } else {  
 | 
                    uni.showToast({  
 | 
                        title: msg,  
 | 
                        icon: "none",  
 | 
                        position: 'top'  
 | 
                    })  
 | 
                }  
 | 
            },  
 | 
            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() {  
 | 
                const {  
 | 
                    code,  
 | 
                    data,  
 | 
                    msg  
 | 
                } = await request('/waitPakin/unbind', {  
 | 
                    items: this.list,  
 | 
                    barcode: this.container  
 | 
                })  
 | 
                if (code === 200) {  
 | 
                    uni.showToast({  
 | 
                        title: '解绑成功'  
 | 
                    })  
 | 
                    this.list = []  
 | 
                    this.barcode = ''  
 | 
                    this.isconfirm = false  
 | 
                } else {  
 | 
                    uni.showToast({  
 | 
                        title: msg,  
 | 
                        icon: "none",  
 | 
                        position: 'top'  
 | 
                    })  
 | 
                }  
 | 
  
 | 
  
 | 
            },  
 | 
  
 | 
        }  
 | 
    }  
 | 
</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;  
 | 
    }  
 | 
</style> 
 |