baoshi-was/resources/views/order/wave/picking.blade.php

@extends('layouts.app')
@section('title')波次分拣@endsection
@section('content')
    <div id="container" class="d-none container-fluid mt-2">
        <div class="card">
            <div class="card-header">
                <b>波次信息</b>
                <button  class="btn text-white btn-sm btn-info pull-right" @click="isShow=!isShow" data-toggle="collapse" data-target="#body">@{{ isShow ? '隐藏' : '显示' }}</button>
            </div>
            <div class="card-body collapse" id="body">
                <div v-for="(val,index) in waves" class="mt-2">
                    <div class="card-title font-weight-bold mb-0">@{{ batch+'-'+(index+1) }}</div>
                    <div class="card-text text-muted small">
                        <div v-for="(obj,i) in val" class="row m-0" style="border-bottom: RGB(247,247,247) 1px solid">
                            <span class="col-6">@{{ obj.barcode }}</span>
                            <span class="col-6">@{{ obj.qty }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header row m-0">
                    <b class="col-4">分拣信息</b>
                    <input id="barcode" v-model="barcode" @keydown.enter="searchBarcode()" class="form-control form-control-sm rounded-pill col-6 offset-2" placeholder="条码"></input>
                </div>
                <div class="card-body">
                    <div class="row border-info" style="height:60vh;overflow-y: auto">
                        <div class="col-5 m-2 p-0" style="height: 80px;border: 1px solid #aaaaaa;z-index:100;position:relative;" v-for="index in waves.length"
                             :style="[waveQtyMap['_'+(index-1)] && waveQtyMap['_'+(index-1)]>0 ? {boxShadow: '0 0 5px 5px rgba(19,193,137)'} : '']">
                            <div class="text-center small font-weight-bold text-secondary">@{{ batch+'-'+index }}</div>
                            <div style="display:flex;align-items:center;justify-content:center;" class="w-100 h-75 text-primary font-weight-bold">
                                @{{ waveQtyMap['_'+(index-1)] ? waveQtyMap['_'+(index-1)] : '0' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white w-100 row" id="searchBlock" style="position: fixed;top:0;left:0;
            width: 100%; text-align: center; border-radius: 3px;">
            <div class="position-relative offset-2 col-9 mt-3 mb-3">
                <input id="loadBatch" class="form-control form-control-sm w-100 rounded-pill" @keydown.enter="loadBatch()" v-model="batch" type="text" placeholder="波次号"></input>
                <a id="search" @click="loadBatch()"><button type="button" class="border btn btn-sm btn-primary text-white rounded-pill position-absolute" style="top: 0;right: 12px;">开始分拣</button></a>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                batch:"",
                isShow:false,
                waves:[],
                waveQtyMap:{},
            },
            mounted:function(){
                this.pageInit();
                setTimeout(()=>{
                    $("#container").removeClass('d-none');
                },100);
                setTimeout(()=>{
                    $("#loadBatch").focus();
                },200);
            },
            methods:{
                //页面初始化
                pageInit(){
                    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");
                    //let e3 = document.getElementsByClassName("navbar");
                    if (e1)e1.remove();
                    if (e2)e2.remove();
                    //if (e3.length>0)e3[0].remove();
                    element = document.getElementById("container");
                    if (element)element.style.height = (window.innerHeight-100)+"px";
                },
                loadBatch(){
                    window.tempTip.postBasicRequest("{{url('order/wave/loadBatch')}}",{code:this.batch},res=>{
                        this.waves = res;
                        $("#barcode").focus();
                    })
                },
                searchBarcode(){
                    let waveQtyMap = {};
                    this.waves.forEach((wave,i)=>{
                        wave.forEach(order=>{
                            if (order.barcode === this.barcode){
                                if (waveQtyMap['_'+i]===undefined)waveQtyMap['_'+i] = 1;
                                else waveQtyMap['_'+i]++;
                            }
                        })
                    })
                    this.waveQtyMap = waveQtyMap;
                    this.barcode = "";
                    $("#barcode").focus();
                },
            }
        });

    </script>
@endsection