baoshi-was/resources/views/store/handInStorage/receive.blade.php

@extends('layouts.app')
@section('title')手持入库-收货@endsection

@section('content')
    <div class="d-none" id="container">
        <div class="card offset-md-3 col-md-6">
            <div class="card-header text-center mt-2 bg-transparent" id="header_title">
                <span class="font-weight-bold h4">收货</span>
            </div>
            <div class="card-body" >
                <div class="offset-1">
                    <span class="font-weight-bold">ASN号:</span><br>
                    <p class="small font-weight-light">可输入条码,ASN号,货主编号(如:YOUWU)_搜索</p>
                    <div class="form-group row mt-2">
                        <label for="asn"></label>
                        <input type="text" class="form-control col-8" id="asn" autocomplete="off"
                               :class="errors.asnno ? 'is-invalid' : ''" v-model="info.asnno">
                        <span class="ml-2">
                             <button type="button" id="select" class="btn btn-info" @click="selectAsn()">搜索</button>
                        </span>
                        <span class="invalid-feedback" role="alert" v-if="errors.asnno">
                            <strong>@{{ errors.asnno[0] }}</strong>
                        </span>
                    </div>
                </div>
                <div style="overflow: auto;overflow-x: hidden" id="cardTable">
                    <table class="table-sm table-striped table-bordered table-hover mb-3"
                           style="background: rgb(255, 255, 255);">
                        <tr v-for="(asn,i) in asns" @click="selectTrOne(i,asn)" :class="selectTr===i+1?'focusing' : ''">
                            <td style="filter:grayscale(30%);">
                                <div>
                                    <div style="transform:scale(1)" class="pl-0">
                                        <span><span class="text-danger">ASN编号:</span><span class="text-black font-weight-bold">@{{ asn.asnno }}</span></span><br>
                                        <span>
                                            <span >状态:</span>
                                            <span class="text-lowercase small" v-if="asn.asnstatus==='00'">订单创建</span>
                                            <span class="text-lowercase small" v-if="asn.asnstatus==='30'">部分收货</span>
                                        </span>
                                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span><span>货主:</span><span class="text-black font-weight-bold small">@{{ asn.customerid }}</span></span><br>
                                        <span><span class="text-lowercase">客户订单号1:</span><span class="text-lowercase">@{{ asn.asnreference1 }} </span></span>
                                        <span><span class="text-black">创建时间:</span><span class="text-black-50">@{{ asn.addtime }}</span></span>
                                        <span>
                                            <span class="btn btn-success btn-sm" v-if="!asn.up"  @click.stop="getAsnDetails(asn)">明细</span>
                                            <span class="btn btn-secondary btn-sm" v-if="asn.up" @click.stop="closeDetail(asn)">收起</span>
                                        </span>
                                        <table class="table-sm table-borderless" v-if="asns.length>0 && asn.asnDetails && asn.up">
                                            <tr  v-for="(asnDetail,i) in asn.asnDetails">
                                                <td>
                                                    <span><span class="small">产品:</span><span class="text-black small">@{{ asnDetail.sku }}</span></span>
                                                    <span><span class="small">条码:</span><span class="text-black font-weight-bold small">@{{ asnDetail.alternate_sku1 }}</span></span>
                                                    <span><span class="small">品名:</span><span class="text-black small">@{{ asnDetail.skudescrc }}</span></span>
                                                    <span><span class="small">预期数量:</span><span class="text-black font-weight-bold small">@{{ asnDetail.expectedqty }}</span></span>
                                                    <span><span class="small">已收数量:</span><span class="text-black font-weight-bold small">@{{ asnDetail.receivedqty }}</span></span>
                                                <td/>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card-footer bg-transparent">
                <button type="button" id="confirm" class="btn btn-sm btn-outline-success float-right" @click="ensure()">确定</button>
                <button type="button" id="cancel" class="btn btn-sm btn-outline-info float-left" @click="cancel()">取消</button>
            </div>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                height:0,//屏幕高度
                info:{},
                errors:{},
                asns:[],
                selectTr:'',
                isAndroid:false,
                asnno:'',
                customerid:'',
            },
            mounted(){
                if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
                this.pageInit();
                $("#container").removeClass("d-none");
                this.height=window.screen.availHeight;
                document.getElementById('cardTable').style.height=this.height*0.35+'px';
                document.getElementById("asn").focus();
            },
            methods:{
                //页面初始化
                pageInit(){
                    if (!this.isAndroid)return;
                    let element = document.getElementById("navbarSupportedContent").parentElement;
                    element.className = "row";
                    element.children[0].className += " col-5";
                    element.innerHTML = element.children[0].outerHTML;
                    let e1 = document.getElementById("menu");
                    let e2 = document.getElementById("demand-div");
                    if (e1)e1.remove();
                    if (e2)e2.remove();
                },
                selectAsn(){
                    this.selectTr='';
                    let url = '{{url('store/handInStorage/selectAsn')}}';
                    window.axios.post(url,{asnno:this.info.asnno})
                        .then(res=>{
                            if (res.data.success){
                                this.asns=res.data.data;
                                this.$forceUpdate()
                                return;
                            }
                            window.tempTip.setDuration(2000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("网络错误："+err);
                    })
                },
                getAsnDetails(asn){
                    if (!asn)return;
                    let url = '{{url('store/handInStorage/selectAsnDetails')}}';
                    window.axios.post(url,{asnno:asn.asnno})
                        .then(res=>{
                            if (res.data.success){
                                this.asns.forEach(function (Asn){
                                    if (Asn.asnno==asn.asnno){
                                        Asn.up=true;
                                        Asn.asnDetails=res.data.data;
                                    }
                                })
                                this.$forceUpdate()
                                return;
                            }
                            window.tempTip.setDuration(2000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("网络错误："+err);
                    })
                },
                closeDetail(asn){
                    this.asns.forEach(function (Asn){
                        if (Asn.asnno==asn.asnno){
                            Asn.up=false;
                        }
                    })
                    this.$forceUpdate()
                },
                selectTrOne(i,asn){
                    if (this.selectTr===i+1){
                        this.selectTr=0
                    }else {
                        this.selectTr=i+1;
                        this.info.asnno=asn.asnno;
                        this.info.customerid=asn.customerid;
                        this.info.asntype=asn.asntype;
                    }
                },
                onfocus(){
                    document.getElementById("asn").focus();
                },
                ensure(){
                    let error = {};
                    if (!this.info.asnno)error.asnno = ["ASN号必填"];
                    if (this.info.asnno && this.info.asnno.indexOf('ASN')===-1)error.asnno = ["无效ASN号"];
                    if (JSON.stringify(error)!=='{}'){this.errors = error;return;}
                    if (!this.info.customerid||!this.info.asntype){this.info.customerid='';this.info.asntype='';}
                    this.checkAsnOperation();
                },
                checkAsnOperation(){
                    let url = '{{url('store/handInStorage/checkAsnOperation')}}';
                    window.axios.post(url,{info:this.info})
                        .then(res=>{
                            if (res.data.success){
                                window.location.href="{{url('store/handInStorage/receiveDetailPage')}}/" + res.data.data.asnno+'/'+ res.data.data.customerid;
                            }else {
                                window.tempTip.setDuration(2000);
                                window.tempTip.show(res.data.data);
                            }
                        }).catch(err=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("网络错误："+err);
                    })
                },
                cancel(){
                    setTimeout(function () {
                        window.location.reload();
                        this.onfocus();
                    },100);
                },
            },
        });
    </script>
@stop