baoshi-was/resources/views/store/handInStorage/putaway.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  bg-transparent" id="header_title">
                <span class="font-weight-bold h3">上架</span>
            </div>
            <div>
                <div class="form-group row m-1">
                        <span class="text-right">
                            <h5 for="trackNumber" class="text-right mt-2 font-weight-bold">容器号:</h5>
                        </span>
                    <input type="text" class="form-control col-8 font-weight-bold" id="trackNumber" autocomplete="off"
                           placeholder="支持货主,asn,跟踪号或不填"
                           :class="errors.trackNumber ? 'is-invalid' : ''" @keydown.enter="enterVal($event)"
                           v-model="info.trackNumber">
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.trackNumber">
                            <strong>@{{ errors.trackNumber[0] }}</strong>
                    </span>
                    <button class="btn btn-sm btn-info" @click="getPaTaskByTraceInOrCustomerOrAsnOrNull()">搜索</button>
                </div>
                <div class="form-group row m-1">
                        <span class="text-right">
                            <h5 for="barCode" class="text-right mt-2 font-weight-bold">商品条码:</h5>
                        </span>
                    <input type="text" class="form-control  col-8 font-weight-bold" id="barCode" autocomplete="off"
                           :class="errors.barCode ? 'is-invalid' : ''" @keydown.enter="enterVal($event)"
                           v-model="info.barCode" @blur="getTsk()" >
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.barCode">
                            <strong>@{{ errors.barCode[0] }}</strong>
                    </span>
                </div>
                <div class="">
                    <div>
                        <div class="form-group row m-1">
                            <h5 for="name" class="text-right mt-2 font-weight-bold">商品品名:</h5>
                            <span id="name">@{{ info.name }}</span>
                        </div>
                        <div class="form-group row m-1">
                            <h5 for="amount" class="text-right mt-2 font-weight-bold">上架总数:</h5>
                            <input type="text" class="form-control  col-4 font-weight-bold" style="width: 10px"
                                   id="amount" autocomplete="off"
                                   :class="errors.amount ? 'is-invalid' : ''"
                                   @keydown.enter="enterVal($event)" v-model="info.amount"><span id="paTotal"
                                                                                                 v-if="info.paTotal">&nbsp;&nbsp;<span class="font-weight-bold">/&nbsp;&nbsp;@{{ info.paTotal }}</span></span>
                            <span class="invalid-feedback offset-3" role="alert" v-if="errors.amount">
                            <strong>@{{ errors.amount[0] }}</strong>
                    </span>
                        </div>
                        <div class="form-group row m-1">
                            <h5 for="location" class="text-right mt-2 font-weight-bold">目标库位:</h5>
                            <input type="text" class="form-control  col-8 font-weight-bold" id="location"
                                   autocomplete="off"
                                   :class="errors.location ? 'is-invalid' : ''"
                                   @keydown.enter="enterVal($event)" v-model="info.location">
                            <span class="invalid-feedback offset-3" role="alert" v-if="errors.location">
                            <strong>@{{ errors.location[0] }}</strong>
                    </span>
                        </div>
                    </div>
                </div>
                <div style="overflow: auto;overflow-x: hidden" id="cardTable" v-show="tasks.length>0 && !info.barCode">
                    <table class="table-sm table-striped table-bordered table-hover mb-3"
                           style="background: rgb(255, 255, 255);">
                        <tr v-for="(task,i) in tasks">
                            <td style="filter:grayscale(30%);">
                                <div>
                                    <div style="transform:scale(1)" class="pl-0">
                                        <span><span class="text-black h5">ASN:</span><span class="text-black font-weight-bold h5">@{{ task.docno }}</span></span>
                                        <span><span class="text-black h5">货主:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.customerid }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span><span class="text-black h5">sku:</span><span
                                                class="text-black h5">@{{ task.sku }}</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span class="text-right float-right" v-show="info.barCode">选中:<input type="checkbox" :id="'task_'+i"
                                                                                       @click="checked($event,task)"></span>
                                        <span><span class="text-lowercase h5">待上架/总量:</span><span
                                                class="text-lowercase text-info font-weight-bold h5">@{{ task.qty}}/@{{ task.receivedqty?task.receivedqty:task.receivedqty_each }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span><span class="h5">容器号:</span><span class="h5">@{{ task.plantoid }} </span></span>

                                        <span v-if="task.lotatt01"><span class="text-black h5">生产日期:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt01 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span v-if="task.lotatt02"><span class="text-black h5">失效日期:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt02 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span v-if="task.lotatt03"><span class="text-black h5">入库日期:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt03 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span v-if="task.lotatt04"><span class="text-black h5">批号:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt04 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span v-if="task.lotatt05"><span class="text-black h5">属性仓:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt05 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                                        <span v-if="task.lotatt08"><span class="text-black h5">质量状态:</span><span
                                                class="text-black font-weight-bold h5">@{{ task.lotatt08 }}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>

                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                    <div style="overflow: auto;overflow-x: hidden" class="bg-secondary" v-if="invLots.length>0">
                        <span class="font-weight-bold ml-1 text-white">库存余量</span>
                        <table class="table-sm table-striped table-bordered table-hover mb-3"
                               style="background: rgb(255, 255, 255);">
                            <tr v-for="(invLot,i) in invLots" @click="selectTrOne(i,invLot.locationid)" :class="selectTr===i+1?'focusing' : ''">
                                <td style="filter:grayscale(30%);">
                                    <div>
                                        <div style="transform:scale(1)" class="pl-0">
                                        <span v-if="invLot.customerid">
                                            <span class="text-black">货主:</span>
                                            <span class="text-black font-weight-bold">@{{ invLot.customerid }}</span>
                                        </span>
                                            <span v-if="invLot.alternate_sku1">
                                            <span class="text-black">条码:</span>
                                            <span class="text-danger">@{{ invLot.alternate_sku1 }}</span></span>
                                            <span v-if="invLot.locationid">
                                            <span>库位:</span>
                                            <span class="font-weight-bold">@{{ invLot.locationid }} </span>
                                        </span>
                                            <span v-if="invLot.qty">
                                            <span class="text-lowercase">数量:</span>
                                            <span class="text-lowercase font-weight-bold">@{{ invLot.qty }} </span><span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt01">
                                            <span class="text-black">生产日期:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt01 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt02">
                                            <span class="text-black">失效日期:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt02 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt03">
                                            <span class="text-black">入库日期:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt03 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt04">
                                            <span class="text-black">批号:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt04 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt05">
                                            <span class="text-black">属性仓:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt05 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                            <span v-if="invLot.lotatt08">
                                            <span class="text-black">质量状态:</span><span class="text-black font-weight-bold">@{{ invLot.lotatt08 }}</span>
                                            <span>&nbsp;&nbsp;</span>
                                        </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <span v-if="mes" class="text-danger font-weight-bold" >@{{ mes }}</span>


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

        @section('lastScript')
            <script type="text/javascript">
                new Vue({
                    el: "#container",
                    data: {
                        height: 0,//屏幕高度
                        info: {},
                        errors: {},
                        tasks: [],
                        invLots: [],
                        checkData: [],
                        selectTr: '',
                        isAndroid: false,
                        element: [
                            "trackNumber","barCode", "amount", "location",
                        ],
                        mes:'',
                    },
                    mounted() {
                        if (navigator.userAgent.indexOf("Android") !== -1) this.isAndroid = true;
                        this.pageInit();
                        $("#container").removeClass("d-none");
                        document.getElementById("trackNumber").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();
                            document.getElementById('app').firstElementChild.style.display = 'none';
                        },
                        clearData(){
                          this.info.name='';
                          this.tasks=[];
                          this.invLots=[];
                          this.checkData=[];
                          this.$forceUpdate();
                        },
                        selectTrOne(i,location){
                            if (this.selectTr===i+1){
                                this.selectTr=0
                            }else {
                                this.selectTr=i+1;
                                this.info.location=location;
                            }
                        },
                        checked(e, task, element = undefined) {
                            if (!element)element = e.target;
                            let _this = this;
                            if (element.checked) {
                                if (_this.checkData.length === 0) {
                                    _this.checkData.push(task);
                                    _this.fillInfo(task);
                                } else if (_this.checkData.length > 0) {
                                    this.checkData.some(function (item, i) {
                                        if (item.customerid == task.customerid
                                            && item.plantolotnum == task.plantolotnum
                                            && item.sku == task.sku) {
                                            _this.checkData.push(task)
                                            _this.fillInfo(task);
                                            return true;
                                        } else {
                                            $('#'+element.id).prop('checked', false);
                                            window.tempTip.setDuration(3000);
                                            window.tempTip.show('货主,批次不同,不可同时上架');
                                            window.tempTip.showErrorAudio();
                                        }
                                    });
                                }
                            }else {
                                _this.checkData.some(function (item, i) {
                                    if (item.taskid == task.taskid
                                    && item.taskid_sequence == task.taskid_sequence) {
                                        _this.checkData.splice(i, 1);
                                        _this.updateInfo(task);
                                        return true;
                                    }
                                });
                            }
                            _this.$forceUpdate();
                        },
                        fillInfo(task){
                            this.info.name=task.skudescrc;
                            if (this.info.paTotal==''||this.info.paTotal==null||this.info.paTotal==undefined){this.info.paTotal=0;}
                            this.info.paTotal+=Number(task.qty);
                            // this.info.location=task.plantolocation;
                        },
                        updateInfo(task){
                            this.info.name=task.skudescrc;
                            this.info.paTotal-=Number(task.qty);
                            // this.info.location=task.plantolocation;
                        },
                        getPaTaskByTraceInOrCustomerOrAsnOrNull() {
                            let _this=this;
                            _this.clearData();
                            let url = '{{url('store/handInStorage/getPaTaskByTraceInOrCustomerOrAsnOrNull')}}';
                            window.axios.post(url, {trackNumber:this.info.trackNumber,barCode:null})
                                .then(res => {
                                    if (res.data.success) {
                                        this.tasks = res.data.data;
                                        this.$forceUpdate();
                                        setTimeout(function (){
                                            this.height=window.screen.availHeight;
                                            document.getElementById('cardTable').style.height=this.height*0.35+'px';
                                        },10)
                                        return;
                                    }
                                    this.tasks=[];
                                    window.tempTip.setDuration(3000);
                                    window.tempTip.show(res.data.data);
                                    window.tempTip.showErrorAudio();
                                }).catch(err => {
                                this.tasks=[];
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("网络错误：" + err);
                                window.tempTip.showErrorAudio();
                            })
                        },
                        getTsk() {
                            let _this=this;
                            _this.clearChecked();
                            _this.clearData();
                            if (!this.info.barCode)return;
                            if (!this.info.trackNumber){
                                window.tempTip.setDuration(3000);
                                window.tempTip.show('容器号必填');
                                return;
                            }
                            let url = '{{url('store/handInStorage/getTsk')}}';
                            window.axios.post(url, {trackNumber:this.info.trackNumber,barCode: this.info.barCode})
                                .then(res => {
                                    if (res.data.success) {
                                        this.tasks = res.data.data;
                                        this.invLots = res.data.inv;
                                        if (this.invLots.length==0)this.mes='库内暂无该商品库存信息,请自行选定上架库位';
                                        this.$forceUpdate();
                                        setTimeout(function () {
                                            document.getElementById("task_0").checked=true;
                                            let element={};
                                            element.checked=true;
                                            _this.checked(1,_this.tasks[0],element)
                                            _this.tasks.forEach(function (task,i){
                                                if (i==0)return;
                                                if (task.customerid == _this.tasks[0].customerid
                                                    && task.plantolotnum == _this.tasks[0].plantolotnum
                                                    && task.sku == _this.tasks[0].sku){
                                                    document.getElementById("task_"+i).checked=true;
                                                    _this.checked(1,_this.tasks[i],element);
                                                }
                                            })
                                            // document.getElementById('cardTable').remove();
                                            document.getElementById('cardTable').style.height=null;
                                        }, 100);
                                        return;
                                    }
                                    this.tasks=[];
                                    this.info.barCode='';
                                    document.getElementById("barCode").focus();
                                    window.tempTip.setDuration(3000);
                                    window.tempTip.show(res.data.data);
                                    window.tempTip.showErrorAudio();
                                }).catch(err => {
                                this.tasks=[];
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("网络错误：" + err);
                                window.tempTip.showErrorAudio();
                            })
                        },
                        clearChecked(){
                            this.checkData=[];
                            this.info.paTotal=0;//设置上架总数
                            $('input[type=checkbox]').each(function() {
                                let self = $(this);
                                self.prop('checked', false);
                            });
                        },
                        clearInfo(){
                            this.info.name='';
                            this.info.amount='';
                            this.info.barCode='';
                            this.info.location='';
                            this.info.paTotal='';
                        },
                        ensure() {
                            this.errors={};//初始errors状态
                            this.verifyInfoAndCheckData();
                            if (JSON.stringify(this.errors) !== '{}')return;
                            this.ensureSubmit();

                        },
                        ensureSubmit() {
                            tempTip.setDuration(99999);
                            tempTip.waitingTip('提交中');
                            let url = '{{url('store/handInStorage/handFluxPa')}}';
                            if (JSON.stringify(this.errors)==='{}') window.axios.post(url,{info:this.info,checkData:this.checkData})
                                .then(res=>{
                                    if (res.data.success){
                                        tempTip.setDuration(3000);
                                        tempTip.cancelWaitingTip();
                                        tempTip.showSuccess(res.data.data);
                                        // this.info={};
                                        this.clearInfo();
                                        this.checkData=[];
                                        this.tasks=[];
                                        this.invLots=[];
                                        this.$forceUpdate()
                                        document.getElementById("trackNumber").select();
                                        return;
                                    }
                                    tempTip.setDuration(3000);
                                    tempTip.cancelWaitingTip();
                                    tempTip.show(res.data.data);
                                    tempTip.showErrorAudio();
                                }).catch(err=>{
                                    tempTip.setDuration(3000);
                                    tempTip.cancelWaitingTip();
                                    tempTip.show("网络错误："+err);
                                    tempTip.showErrorAudio();
                                })
                        },
                        cancel() {
                            setTimeout(function () {
                                window.location.reload();
                                document.getElementById("trackNumber").focus();
                            }, 100);
                        },
                        enterVal(e) {
                            let index = this.element.indexOf(e.target.id) + 1;
                            let element = document.getElementById(this.element[index]);
                            if (element) element.focus();
                            e.preventDefault();
                            return false;
                        },
                        verifyInfoAndCheckData(){
                            let error = {};
                            // if (!this.info.trackNumber) error.trackNumber = ["容器号必填"];
                            if (!this.info.barCode) error.barCode = ["条码必填"];
                            if (!this.info.amount) error.amount = ["上架数量必填"];
                            if (Number(this.info.paTotal)!==0 && Number(this.info.amount)>Number(this.info.paTotal)) error.amount = ["上架数量不能超过上架总数必填"];
                            if (!this.info.location) error.location = ["目标库位必填"];
                            if (JSON.stringify(error) !== '{}') {this.errors = error;}
                        },
                    },
                });
            </script>
@stop