baoshi-was/resources/views/store/inStorage/halfChestStorage.blade.php

@extends('layouts.app')
@section('title')缓存架入库-半箱入库@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row">
            <div class="card offset-md-1 col-md-5 col-sm-12">
                <div class="card-body">
                    <div class="form-group text-center mt-2" id="header_title">
                        <span class="font-weight-bold h4">入库信息</span>
                        <a class="small" href="#" @click="openModal()">溢出减量</a>
                    </div>
                    <div class="form-group row">
                        <label for="track" class="col-sm-2 col-3 text-right">跟踪号:</label>
                        <input type="text" class="form-control col-8" id="track" :class="errors.track ? 'is-invalid' : ''" @keydown.enter="enterVal($event)" v-model="info.track" @blur="check()">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.track">
                            <strong>@{{ errors.track[0] }}</strong>
                        </span>
                    </div>
                    <div class="form-group row">
                        <label for="barCode" class="col-sm-2 col-3 text-right">条码:</label>
                        <input type="text" class="form-control col-8" id="barCode" placeholder="扫描商品条码"
                               :class="errors.barCode ? 'is-invalid' : ''" v-model="info.barCode" @blur="check()" @keydown.enter="enterVal($event)">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.barCode">
                            <strong>@{{ errors.barCode[0] }}</strong>
                        </span>
                    </div>
                    <div class="form-group row">
                        <label for="amount" class="col-sm-2 col-3 text-right">数量:</label>
                        <input type="number" class="form-control col-8" id="amount"
                               @keydown.enter="enterVal($event)" :class="errors.amount ? 'is-invalid' : ''" @blur="check()" v-model="info.amount" :placeholder="info.maximum!==undefined ? '最大可上：'+info.maximum : ''" :max="info.maximum" step="1">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.amount">
                            <strong>@{{ errors.amount[0] }}</strong>
                        </span>
                    </div>
                    <div class="form-group row">
                        <label for="call" class="col-sm-2 col-3 text-right">手动呼叫:</label>
                        <input type="checkbox" style="top: 5px" class="switch" id="call" v-model="info.call">
                    </div>
                    <div class="input-group row mt-5">
                        <button type="submit" id="submit" class="btn btn-success offset-3 col-6" @click="checkInfo()">提交</button>
                        <button type="button" class="btn btn-sm btn-info col-2 text-white offset-1" @click="callRobot()">手动呼叫</button>
                    </div>
                </div>
            </div>
            <div class="card col-md-5 col-sm-12">
                <div class="card-body">
                    <div class="mt-1 text-center">
                        <button class="btn btn-primary" @click="submitBox()">为选中格口手动补充料箱</button>
                        <button class="btn btn-sm btn-info text-white" @click="reverse()">全选/反选</button>
                    </div>
                    <div class="mt-2 h-75">
                        <div class="w-100 text-center mt-2" style="cursor: pointer" :style="{height:(100/ides.length)+'%'}" v-for="arr in ides">
                            <div class="row" style="height: 33.3%" v-for="a in arr">
                                <div class="col-4 border border-dark" v-for="ide in a" :class="[shelfOccupy[ide] ? 'bg-danger' : 'bg-success',selectedBox[ide] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox(ide)">@{{ ide }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" tabindex="-1" role="dialog" id="modal">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="font-weight-bold h4">溢出减量</div>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="location">料箱码</label>
                                <input id="location" type="text" v-model="ov.ide" class="form-control" placeholder="料箱码">
                            </div>
                            <div class="form-group">
                                <label for="ov_amount">溢出数量</label>
                                <input id="ov_amount" type="number" v-model="ov.amount" min="1" step="1" class="form-control" placeholder="溢出数量">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" @click="overflowRevision()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            @include("store.inStorage._setMaximum")
            @include("store.inStorage._lotModal")
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                permissionList:[ //允许聚焦许可列表
                    "track","amount","location","ov_amount"
                ],
                info:{},
                mount:false,
                /*before:{},*/
                focus:"",
                errors:{},
                ov:{},//溢出减量数值
                element:[
                    "track","barCode","amount","submit"
                ],
                isAndroid:false,
                shelfOccupy:{},
                selectedBox:{},
                ides:[
                    [
                        ["HAIB2-03-03","HAIB2-02-03","HAIB2-01-03"],
                        ["HAIB2-03-02","HAIB2-02-02","HAIB2-01-02"],
                        ["HAIB2-03-01","HAIB2-02-01","HAIB2-01-01"],
                    ],
                    [
                        ["HAIB1-03-03","HAIB1-02-03","HAIB1-01-03"],
                        ["HAIB1-03-02","HAIB1-02-02","HAIB1-01-02"],
                        ["HAIB1-03-01","HAIB1-02-01","HAIB1-01-01"],
                    ],
                ],
                models:null,
                oldInfo:{},
                lots:[],
                lotMap:{},
            },
            mounted(){
                if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
                @foreach($stations as $station)this.$set(this.shelfOccupy,"{{$station->code}}",!!{{$station->material_box_id}});@endforeach
                this.pageInit();
                $("#container").removeClass("d-none");
            },
            methods:{
                //页面初始化
                pageInit(){
                    if (!this.isAndroid)return;
                    let element = document.getElementById("navbarSupportedContent").parentElement;
                    element.className = "row";
                    element.children[0].className += " col-5";
                    element.children[0].href = "#";
                    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();
                },
                //提交溢出减量
                overflowRevision(){
                    if (!this.ov.ide || !this.ov.amount){
                        window.tempTip.show("信息不完整");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url('store/inStorage/overflowRevision')}}",this.ov,()=>{
                        $("#modal").modal('hide');
                        this.ov = {};
                        return "溢出减量成功!";
                    });
                },
                //打开溢出减量模态框
                openModal(){
                    $("#modal").modal("show");
                    setTimeout(function () {
                        document.getElementById("location").focus();
                    },500);
                },
                checkInfo(){
                    let error = {};
                    if (!this.info.track)error.track = ["跟踪号必填"];
                    if (!this.info.barCode)error.barCode = ["商品条码必填"];
                    if (!this.info.amount && !this.info.maximum)error.amount = ["数量必填"];
                    if (JSON.stringify(error)!=='{}'){this.errors = error;return;}
                    if (!this.info.amount && this.info.maximum)this.info.amount = this.info.maximum;
                    this._exeTask();
                },
                _exeTask(){
                    window.tempTip.postBasicRequest("{{url('store/inStorage/acquireBox')}}",this.info,res=>{
                        if (!res.status){
                            this.info.commodityId = res.commodityId;
                            this.showMaximumModal();
                            return;
                        }
                        this.info = {track:this.info.track,call:this.info.call};
                        this.errors = {};
                        let element = document.getElementById("barCode");
                        if (element)element.focus();
                        return res.amount==0 ? "调取料箱成功！" : "空箱不足，剩余”"+res.amount+"“未上架";
                    });
                },
                check(){
                    if (!this.info.track || !this.info.barCode)return;
                    if (!this.info.lotNum || this.info.track !== this.oldInfo.track || this.info.barCode !== this.oldInfo.barCode){
                        window.tempTip.postBasicRequest("{{url('store/inStorage/checkTask')}}",this.info,res=>{
                            this.oldInfo = {track:this.info.track,barCode:this.info.barCode};
                            this.lotMap = res.lotMap;
                            switch (res.count){
                                case 0:
                                    window.tempTip.show("无此上架信息");
                                    break;
                                case 1:
                                    this.info.lotNum = res.lots;
                                    this.info.maximum = res.lotMap[res.lots];
                                    return "最大可上数量为"+this.info.maximum;
                                default:
                                    this.lots = res.lots;
                                    $("#lotModal").modal("show");
                            }
                        });
                    }
                },
                //回车向下TAB
                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;
                },
                //提交填充料箱
                submitBox(){
                    window.tempTip.setDuration(3000);
                    if (JSON.stringify(this.selectedBox)==='{}'){window.tempTip.show("未选中格口");return;}
                    window.tempTip.confirm("确定选中格口已无料箱存在？",()=>{
                        window.tempTip.setDuration(99999);
                        window.tempTip.waitingTip("调取料箱中，请稍等");
                        let boxes = [];
                        for (let key in this.selectedBox)if (this.selectedBox[key]) boxes.push(key);
                        window.tempTip.postBasicRequest("{{url('store/inStorage/resetCacheShelf')}}",{boxes:boxes},res=>{
                            window.tempTip.cancelWaitingTip();
                            window.tempTip.setDuration(3000);
                            for (let i=0;i<res.boxes.length;i++){
                                this.$set(this.shelfOccupy,res.boxes[i],true);
                                this.$set(this.selectedBox,res.boxes[i],true);
                            }
                            if (res.data){
                                window.tempTip.show(res.data);
                                return;
                            }
                            return "手动补充成功";
                        },true);
                    })
                },
                reverse(){
                    let ides = [];
                    this.ides.forEach(arr=>{
                        arr.forEach(a=>{
                            a.forEach(ide=>{
                                ides.push(ide);
                            })
                        })
                    });
                    ides.forEach((ideCode)=>{
                        this.$set(this.selectedBox,ideCode,this.selectedBox[ideCode] ? !this.selectedBox[ideCode] : true);
                    });
                },
                //选中填充料箱
                fillingBox(ideCode){
                    this.$set(this.selectedBox,ideCode,this.selectedBox[ideCode] ? !this.selectedBox[ideCode] : true);
                },
                showMaximumModal(){
                    if (this.models){
                        $("#maximumModal").modal("show");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url("store/inStorage/getModels")}}",{},res=>{
                        this.models = res;
                        $("#maximumModal").modal("show");
                    })
                },
                settingModelMaximum(){
                    let models = [];
                    this.models.forEach(model=>{
                       if (model.maximum)models.push(model);
                    });
                    if (models.length<1){
                        window.tempTip.setDuration(3000);
                        window.tempTip.setIndex(1099);
                        window.tempTip.show("请至少设定一个上限型号");
                        return;
                    }
                    window.tempTip.postBasicRequest("{{url('store/inStorage/setMaximum')}}",
                        {models:models,commodityId:this.info.commodityId},()=>{
                            $("#maximumModal").modal("hide");
                            this._exeTask();
                    },true);
                },
                selectedLot(index){
                    this.info.lotNum = this.lots[index].lotnum;
                    this.info.maximum = this.lotMap[this.lots[index].lotnum];
                    $("#lotModal").modal("hide");
                },
                callRobot(){
                    window.tempTip.postBasicRequest("{{url('store/inStorage/callRobot')}}",{},()=>{
                        this.info = {call:this.info.call};
                        let element = document.getElementById("track");
                        if (element)element.focus();
                        return '呼叫成功';
                    });
                }
            },
        });
    </script>
@stop