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

@extends('layouts.app')
@section('title')料箱绑定货架-入库管理@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div class="row h-100">
            <div class="col-4 border border-dark bg-white text-center p-0"
                 v-for="(location,key) in locations" :class="selected===location ? 'box-shadow-dark' : ''"
                 @click="selectedLocation(key)">
                <div class="h-25 small">@{{ location }}</div>
                <div class="w-100 h-75 center row align-items-center justify-content-center p-0">
                    <div contentEditable='true' :id="'box-'+key" class="w-75 h-50 ml-4 text-success" @keydown.enter="submitBind(key)"></div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                element:[
                    "asn","ide","barCode","amount","submit"
                ],
                before:{},
                isAndroid:false,
                locations:[
                    "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",
                ],
                selected:"",
            },
            mounted(){
                if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
                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.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();
                    document.getElementById("container").style.height = (window.innerHeight-100)+"px";
                },
                createBefore(){
                    this.before.ide = 'IDE000000';
                },
                selectedLocation(index){
                    this.selected = this.locations[index];
                    let element = document.getElementById("box-"+index);
                    element.innerText = "";
                    element.focus();
                },
                submitBind(index){
                    event.preventDefault();
                    let val = event.target.innerText;
                    if (!val)return;
                    if (val.length<10){
                        val = this.before.ide.substr(0,10-val.length)+val;
                        event.target.innerText = val;
                    }
                    window.tempTip.postBasicRequest("{{url('store/inStorage/bindBox')}}",{location:this.locations[index],ide:val},()=>{
                        if (index!==this.locations.length-1)this.selectedLocation(index+1);
                        return "绑定成功";
                    },true)
                },
            },
        });
    </script>
@stop