baoshi-was/resources/views/store/inStorage/cacheRackStorage.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 font-weight-bold h4 mt-2" id="header_title">
                        入库信息
                    </div>
                    <div class="form-group row">
                        <label for="asn" class="col-sm-2 col-3 text-right">ASN号:</label>
                        <div tabindex="0" @focus="()=>{this.focus='asn'}" @keydown="enterVal($event,'asn')" class="form-control col-8 overflow-hidden" :contenteditable="!isOnlyKeyboardEnter" :class="errors.asn ? 'is-invalid' : ''"
                             id="asn" @blur="checkAsn($event,'asn')"><span>@{{ info.asn ? info.asn : (focus=='asn' ? '' : '只需填写后几位，自动补充') }}</span></div>
                        <span class="invalid-feedback offset-2" role="alert" v-if="errors.asn">
                            <strong>@{{ errors.asn[0] }}</strong>
                        </span>
                    </div>
                    <div class="form-group row">
                        <label for="ide" class="col-sm-2 col-3 text-right">料箱号:</label>
                        <div tabindex="0" @focus="()=>{this.focus='ide'}" @keydown="enterVal($event,'ide')" class="form-control col-8 overflow-hidden" :contenteditable="!isOnlyKeyboardEnter" :class="errors.ide ? 'is-invalid' : ''"
                             id="ide" @blur="checkIde($event,'ide')"><span>@{{ info.ide ? info.ide : (focus=='ide' ? '' : '只需填写后几位，自动补充') }}</span></div>
                        <span class="invalid-feedback offset-2" role="alert" v-if="errors.ide">
                            <strong>@{{ errors.ide[0] }}</strong>
                        </span>
                    </div>
                    <div class="form-group row">
                        <label for="barCode" class="col-sm-2 col-3 text-right">条码:</label>
                        <div tabindex="0" @keydown="enterVal($event,'barCode')" class="form-control col-8 overflow-hidden" :contenteditable="!isOnlyKeyboardEnter" :class="errors.barCode ? 'is-invalid' : ''"
                             id="barCode" @blur="changeInfo($event,'barCode')"><span>@{{ info.barCode }}</span></div>
                        <span class="invalid-feedback offset-2" 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>
                        <div tabindex="0" @keydown="enterVal($event,'amount')" class="form-control col-8 overflow-hidden"
                             :class="errors.amount ? 'is-invalid' : ''" @blur="changeInfo($event,'amount')" id="amount" type="number"
                             :contenteditable="!isOnlyKeyboardEnter" ><span>@{{ info.amount }}</span></div>
                        <span class="invalid-feedback offset-2" role="alert" v-if="errors.amount">
                            <strong>@{{ errors.amount[0] }}</strong>
                        </span>
                    </div>
                    <div class="input-group row mt-5">
                        <button type="submit" class="btn btn-success offset-2 col-8" @click="checkInfo()">提交</button>
                    </div>
                    <div class="row offset-2 col-8">
                        <div class="custom-control custom-checkbox mt-2 d-sm-none">
                            <input type="checkbox" class="custom-control-input" id="customCheck" v-model="isOnlyKeyboardEnter">
                            <label class="custom-control-label" for="customCheck">隐藏虚拟键盘</label>
                        </div>
                    </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 h-100 text-center" style="cursor: pointer">
                            <div class="row" style="height: 33.3%">
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-03-03'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-03-03'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-03-03')">HAIB1-03-03</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-02-03'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-02-03'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-02-03')">HAIB1-02-03</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-01-03'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-01-03'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-01-03')">HAIB1-01-03</div>
                            </div>
                            <div class="row" style="height: 33.3%">
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-03-02'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-03-02'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-03-02')">HAIB1-03-02</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-02-02'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-02-02'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-02-02')">HAIB1-02-02</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-01-02'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-01-02'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-01-02')">HAIB1-01-02</div>
                            </div>
                            <div class="row" style="height: 33.3%">
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-03-01'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-03-01'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-03-01')">HAIB1-03-01</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-02-01'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-02-01'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-02-01')">HAIB1-02-01</div>
                                <div class="col-4 border border-dark" :class="[shelfOccupy['HAIB1-01-01'] ? 'bg-danger' : 'bg-success',selectedBox['HAIB1-01-01'] ? 'box-shadow-dark' : '']"
                                     @click="fillingBox('HAIB1-01-01')">HAIB1-01-01</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                permissionList:[ //允许聚焦许可列表
                    "asn","ide","amount"
                ],
                info:{},
                mount:false,
                before:{
                    asn:"",
                    ide:"",
                },
                focus:"",
                errors:{},
                shelfOccupy:{},
                selectedBox:{},
                isAndroid:false,
                isOnlyKeyboardEnter:true,
            },
            mounted(){
                if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
                @foreach($storages as $storage)this.$set(this.shelfOccupy,"{{$storage->station->code}}",true);@endforeach
                //this.codeFocus();
                //this.globalClick();
                this.createBefore();
                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.innerHTML = element.children[0].outerHTML;
                    document.getElementById("header_title").className += " col-5";
                    element.append(document.getElementById("header_title"));
                    let e1 = document.getElementById("menu");
                    let e2 = document.getElementById("demand-div");
                    if (e1)e1.remove();
                    if (e2)e2.remove();
                },
                //选中填充料箱
                fillingBox(ideCode){
                    this.$set(this.selectedBox,ideCode,this.selectedBox[ideCode] ? !this.selectedBox[ideCode] : true);
                },
                //提交填充料箱
                submitBox(){
                    window.tempTip.setDuration(3000);
                    if (JSON.stringify(this.selectedBox)==='{}'){window.tempTip.show("未选中格口");return;}
                    window.tempTip.confirm("确定选中格口已无料箱存在？",()=>{
                        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=>{
                            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);
                    })
                },
                //聚焦 白名单
                codeFocus(){
                    if (!this.permissionList.includes(document.activeElement.id)) document.getElementById("barCode").focus();
                },
                //全局点击聚焦
                globalClick(turn = true){
                    if (turn===this.mount)return;
                    this.mount = turn;//防止重复挂载事件
                    if (turn) window.addEventListener("click",this.codeFocus);
                    else window.removeEventListener("click",this.codeFocus);
                },
                codeBlur(){
                    if (this.info.asn && this.info.ide && !this.info.amount){
                        //this.globalClick(false);
                        window.tempTip.inputVal('请输入数量：',(amount)=>{
                            this.$set(this.info,'amount',amount);
                            if (this.info.asn && this.info.ide && this.info.barCode && this.info.amount)this.checkInfo();
                            //this.globalClick();
                        });
                    }
                },
                changeInfo(e,type){
                    if (this.isOnlyKeyboardEnter)return;
                    let str = e.target.innerText;
                    if (e.target.firstChild.nodeType===3)e.target.firstChild.remove();
                    this.$set(this.info,type,str);
                },
                checkInfo(){
                    let error = {};
                    if (!this.info.asn)error.asn = ["ASN号必填"];
                    if (this.info.asn && this.info.asn.length!==13)error.asn = ["非法ASN号"];
                    if (!this.info.ide)error.ide = ["料箱号必填"];
                    if (this.info.ide && this.info.ide.length!==10)error.ide = ["非法料箱号"];
                    if (!this.info.barCode)error.barCode = ["商品条码必填"];
                    if (!this.info.amount)error.amount = ["数量必填"];
                    if (JSON.stringify(error)!=='{}'){this.errors = error;return;}
                    this._exeTask();
                },
                _exeTask(){
                    window.tempTip.postBasicRequest("{{url('store/inStorage/putShelf')}}",this.info,res=>{
                        if (!res.maximum){
                            window.tempTip.inputVal('商品首入，请输入预估最大可放入数：',(maximum)=>{
                                res.maximum = maximum;
                                window.tempTip.postBasicRequest("{{url('store/inStorage/setMaximum')}}",res,()=>{});
                            });
                        }
                        this.info = {};
                        this.errors = {};
                        return "缓存架上架成功！";
                    });
                },
                createBefore(){
                    let now = new Date();
                    let yy = now.getFullYear().toString().substr(2, 2);
                    let mm = now.getMonth() + 1;
                    mm = mm <10 ? '0'+mm : mm.toString();
                    let dd = now.getDate();
                    dd = dd <10 ? '0'+dd : dd.toString();
                    this.before.asn = 'ASN'+yy+mm+dd+'000';
                    this.before.ide = 'IDE000000';
                },
                checkAsn(e,type){
                    this.focus = "";
                    this.changeInfo(e,type);
                    if(!this.info.asn)return;
                    let len = this.info.asn.length;
                    if (len<13)this.info.asn = this.before.asn.substr(0,13-len)+this.info.asn;
                    if (!this.info.ide)document.getElementById("ide").focus();
                },
                checkIde(e,type){
                    this.focus = "";
                    this.changeInfo(e,type);
                    if(!this.info.ide)return;
                    let len = this.info.ide.length;
                    if (len<10)this.info.ide = this.before.ide.substr(0,10-len)+this.info.ide;
                },
                reverse(){
                    let ides = [
                        "HAIB1-01-01","HAIB1-01-02","HAIB1-01-03",
                        "HAIB1-02-01","HAIB1-02-02","HAIB1-02-03",
                        "HAIB1-03-01","HAIB1-03-02","HAIB1-03-03",
                    ];
                    ides.forEach((ideCode)=>{
                        this.$set(this.selectedBox,ideCode,this.selectedBox[ideCode] ? !this.selectedBox[ideCode] : true);
                    });
                },
                enterVal(e,type){
                    /*if (e.keyCode === 8 && this.info[type] && this.isOnlyKeyboardEnter){this.$set(this.info,type,this.info[type].slice(0,-1));return;}
                    if (type === 'amount'){
                        if((e.keyCode>=48 && e.keyCode<=57) || (e.keyCode>=96 && e.keyCode<=105)){
                            if (!this.isOnlyKeyboardEnter)return;
                            if (this.info[type])this.$set(this.info,type,this.info[type] += e.key);
                            else this.$set(this.info,type,e.key);
                        }else e.preventDefault();
                        return;
                    }
                    if (!this.isOnlyKeyboardEnter)return;
                    if ((e.keyCode<48 || e.keyCode>105) || (e.keyCode>57 && e.keyCode<65) || (e.keyCode>90 && e.keyCode<96))return;
                    if (this.info[type])this.$set(this.info,type,this.info[type] += e.key);
                    else this.$set(this.info,type,e.key);*/
                    if (!this.isOnlyKeyboardEnter)return;
                    if (e.keyCode === 8 && this.info[type]){this.$set(this.info,type,this.info[type].slice(0,-1));return;}
                    if (e.key.length>1)return;
                    if (e.key.match(/[a-zA-Z0-9\-]/g)===null)return;
                    if (type === 'amount'){
                        if (e.key.match(/[0-9]/g)===null)return;
                        if (this.info.maximum && Number((this.info[type] ? this.info[type] : '0')+e.key)>this.info.maximum) return;
                    }
                    if (this.info[type])this.$set(this.info,type,this.info[type] += e.key);
                    else this.$set(this.info,type,e.key);
                    this.downSign();
                }
            },
        });
    </script>
@stop