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

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

@section('content')
    <div class="container-fluid" id="container">
        <div class="row">
            <div class="card offset-md-3 col-md-6 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="asn" class="col-sm-2 col-3 text-right">ASN号:</label>
                        <div tabindex="0" @keydown="enterVal($event,'asn')" class="form-control col-8 overflow-hidden"
                             :contenteditable="!isOnlyKeyboardEnter" :class="errors.asn ? 'is-invalid' : ''"
                             id="asn" @blur="checkAsn()">@{{ info.asn ? info.asn : '只需填写后几位，自动补充' }}</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="station" class="col-sm-2 col-3 text-right">库位:</label>
                        <div tabindex="0" @keydown="enterVal($event,'station')" class="form-control col-8 overflow-hidden"
                             :contenteditable="!isOnlyKeyboardEnter" :class="errors.station ? 'is-invalid' : ''"
                             id="station" @blur="checkMaximum()">@{{ info.station ? info.station : '扫描货架条码' }}</div>
                        <span class="invalid-feedback offset-2" role="alert" v-if="errors.station">
                            <strong>@{{ errors.station[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="checkMaximum()">@{{ info.barCode ? info.barCode : '扫描商品条码' }}</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"
                             :contenteditable="!isOnlyKeyboardEnter" :class="errors.amount ? 'is-invalid' : ''"
                             id="amount" @blur="checkMaximum()">@{{ info.amount ? info.amount : (info.maximum!==undefined ? '最大可上：'+info.maximum : '') }}</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-6 col-sm-8" @click="checkInfo()">提交</button>
                        <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="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.station" 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>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                permissionList:[ //允许聚焦许可列表
                    "asn","station","amount","location","ov_amount"
                ],
                info:{},
                mount:false,
                before:{
                    asn:"",
                },
                errors:{},
                ov:{},//溢出减量数值
                checkSign:false,
                isAndroid:true,
                isOnlyKeyboardEnter:true,
            },
            mounted(){
                //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("menu").remove();
                    document.getElementById("demand-div").remove();
                },
                //提交溢出减量
                overflowRevision(){
                    if (!this.ov.station || !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);
                },
                //聚焦 白名单
                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);
                },

                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.barCode)error.barCode = ["商品条码必填"];
                    if (!this.info.station)error.station = ["库位必填"];
                    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,()=>{
                        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';
                },
                checkAsn(){
                    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("station").focus();
                    if (!this.checkSign)this.checkMaximum();
                },
                downSign(){
                    this.checkSign = false;
                },
                checkMaximum(){
                    if (!this.info.asn || !this.info.barCode || this.checkSign)return;
                    window.tempTip.postBasicRequest("{{url('store/inStorage/checkMaximum')}}",this.info,res=>{
                        this.info.maximum = res.maximum;
                        this.info.material_box_id = res.material_box_id;
                        this.info.material_box_model_id = res.material_box_model_id;
                        this.info.commodity_id = res.commodity_id;
                        this.checkSign = true;
                        if(!this.info.amount)this.info.amount = res.maximum;
                        return "该库位最大可上数为"+res.maximum;
                    });
                },
                enterVal(e,type){
                    if (e.keyCode === 229){e.preventDefault();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