baoshi-was/resources/views/store/checkingReceive/show.blade.php

@extends('layouts.app')
@section('title')盘收一体-任务@endsection

@section('content')
    <div id="container" class="d-none container-fluid">
        <span>
            @component('store.menu')@endcomponent
            @component('store.checkingReceive.menu')
                @can('入库管理-盘收一体-盘收')
                <li class="nav-item">
                    <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('mission',3)}">盘收</a>
                </li>@endcan
            @endcomponent
        </span>
        <div class="row m-2 card">
            <audio src="{{asset('sound/warning_otherBarcode.mp3')}}" controls="controls" preload id="soundWarning" hidden>
            </audio>
            <audio src="{{asset('sound/ding.mp3')}}" controls="controls" preload id="soundDing" hidden>
            </audio>
            <div class="card-body col-12">
                <div class="col-12">
                    <p class="text-muted small" v-if="inputMode=='regular'">常规：可输入效期，相同条码记录不会合并</p>
                    <p class="text-muted small" v-if="inputMode=='increasing'">逐一扫描：处理单一重复商品，每扫一次对应隔口总数量自动递增，扫到不同条码会提示</p>
                    <p class="text-muted small" v-if="inputMode=='multiIncreasing'">边扫边分：处理多种商品，自动将扫到的不同条码数量递增到各自隔口号</p>
                    <ul class="nav nav-tabs mb-4 mt-n3">
                        <li class="nav-item"><a style="cursor: pointer" class="nav-link text-primary" :class="inputMode=='regular'?'active':''"
                            @click="switchMenu('regular')">常规</a></li>
                        <li class="nav-item"><a style="cursor: pointer" class="nav-link text-primary" :class="inputMode=='increasing'?'active':''"
                            @click="switchMenu('increasing')">逐一扫描</a></li>
                        <li class="nav-item"><a style="cursor: pointer" class="nav-link text-primary" :class="inputMode=='multiIncreasing'?'active':''"
                            @click="switchMenu('multiIncreasing')">边扫边分</a></li>
                    </ul>
                </div>
                <div class="col-12 row">
                    <div class="col-6">
                        <div v-if="inputMode=='regular'">
                            <div class="btn btn-sm btn-outline-primary" v-if="status.barcodeDisable" @click="status.barcodeDisable=false">手动输入</div>
                            <div class="btn btn-sm btn-outline-danger" v-if="!status.barcodeDisable" @click="status.barcodeDisable=true">扫描输入</div>
                        </div>
                        <input type="text" id="barcode" class="form-control"
                               :placeholder="status.barcodeDisable ? '扫入条码' : '输入条码'" :disabled="status.barcodeDisable" v-model="inputting.barcode" :class="inputMode=='regular' ? '' : 'mt-4'" {{-- @focusin="focusOutDocument" @focusout="focusDocument" --}}>

                        <div v-if="inputMode=='regular'">
                        <div class="card-title">生产日期：</div>
                        <input type="date" class="form-control mb-2"
                               {{--v-model="inputting.produce_date" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"--}}>

                        <div class="card-title">失效日期：</div>
                        <input type="date" class="form-control mb-2"
                               {{--v-model="inputting.valid_date" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"--}}>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card-title" id="amountLabel">手动输入数量：</div>
                        <div class="input-group mt-n2 mb-2">
                            <input type="number" id="amount" style='height: 40px;font-size: 1.6em;color:blue;font-weight: bolder;padding: 3px;text-align: center' class="form-control" placeholder=""
                                   :disabled="status.amountDisable" v-model="inputting.amount"{{--  @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"--}}>
                        </div>

                        <div class="card-title">格口号：</div>
                        <input type="number" id="bin" class="form-control mt-n2 mb-2" style='height: 80px;font-size: 5em;color:red;font-weight: bolder;padding: 3px;text-align: center'
                               v-model="inputting.bin"{{-- :disabled="status.binDisable" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"--}}>

                        <div v-if="inputMode=='regular'">
                            <div class="card-title">批次号：</div>
                            <input type="text" class="form-control mb-2"
                                   v-model="inputting.batch_number"{{-- @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"--}}>
                        </div>
                    </div>
                    <div class="col-12" v-if="status.commitButtonVisible && inputMode=='regular'" >
                        <button class="btn btn-success btn form-control" @click="commitGoods">确定</button>
                    </div>
                </div>
                <p class="card-text text-muted mt-3 mb-n3 text-center">已完成：</p>
                <hr>
                <table class="table table-sm  table-striped" {{--v-if="goodses.length>0"--}}>
                    <tr>
                        <th>隔口号</th>
                        <th>数量</th>
                        <th>条码</th>
                        <th>生产日期</th>
                        <th>失效日期</th>
                        <th>批次号</th>
                        <th>操作</th>
                    </tr>
                    {{--<tr v-for="goods in goodses">
                        <td>@{{ goods.bin }}</td>
                        <td>@{{ goods.amount }}</td>
                        <td>@{{ goods.barcode }}</td>
                        <td>@{{ goods.produce_date }}</td>
                        <td>@{{ goods.valid_date }}</td>
                        <td>@{{ goods.batch_number }}</td>
                        <td><button class="btn btn-outline-danger btn-sm" @click="removeGoods($event,goods.barcode)">删</button></td>
                    </tr>--}}
                </table>
                <hr>
                <span class="btn btn-outline-success btn form-control" style="cursor: pointer">确定生成该批盘收</span>
            </div>
        </div>
        <div class="ml-2 mt-2">
            <button class="btn btn-sm btn-outline-dark">导出</button>
            <button class="btn btn-sm btn-outline-danger">重新清点</button>
            <button class="btn btn-sm btn-outline-success">匹配ASN单据</button>
        </div>
        <div class="row text-primary ml-1 mr-2 mt-1 mb-1 w-100" style="background-color: #c3e3b5">
            <span class="ml-1">任务ID： <b class="text-dark">@{{ storeCheckingReceive.id }}</b></span>
            <span class="ml-3">货主： <b class="text-dark">@{{ storeCheckingReceive.owner_name }}</b></span>
            <span class="ml-3">创建时间： <b class="text-dark">@{{ storeCheckingReceive.created_at }}</b></span>
            <span class="ml-3">ASN号： <b class="text-dark">@{{ storeCheckingReceive.asn }}</b></span>
        </div>
        <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
        <table class="table table-striped table-sm text-nowrap table-hover mt-1" id="headerParent">
            <tr id="header"></tr>
            <tr v-for="(storeCheckingReceiveItem,i) in storeCheckingReceiveItems">
                <td>@{{ i+1 }}</td>
                <td>@{{ storeCheckingReceiveItem.id }}</td>
                <td>@{{ storeCheckingReceiveItem.bin_number }}</td>
                <td>@{{ storeCheckingReceiveItem.commodity_name }}</td>
                <td>
                    <span v-for="commodity_barcode in storeCheckingReceiveItem.commodity_barcodes">
                        <small>@{{ commodity_barcode.code }}</small><br>
                    </span>
                </td>
                <td>@{{ storeCheckingReceiveItem.imported_amount }}</td>
                <td>@{{ storeCheckingReceiveItem.counted_amount }}</td>
                <td>@{{ storeCheckingReceiveItem.asn_amount }}</td>
                <td>@{{ storeCheckingReceiveItem.imported_diff_amount }}</td>
                <td>@{{ storeCheckingReceiveItem.asn_diff_amount }}</td>
                <td>@{{ storeCheckingReceiveItem.produced_at }}</td>
                <td>@{{ storeCheckingReceiveItem.invalid_at }}</td>
                <td>@{{ storeCheckingReceiveItem.batch_code }}</td>
                <td>@{{ storeCheckingReceiveItem.unique_code }}</td>
            </tr>
        </table>
    </div>
@stop

@section('lastScript')
<script type="text/javascript" src="{{asset('js/queryForm/header200826b.js')}}"></script>
<script>
    new Vue({
        el:"#container",
        data:{
            storeCheckingReceive:{id:'{{$storeCheckingReceive->id}}',owner_name:'{{$storeCheckingReceive->owner ? $storeCheckingReceive->owner->name : ''}}',
                                created_at:'{{$storeCheckingReceive->created_at}}',asn:'{{$storeCheckingReceive->asn}}'},
            storeCheckingReceiveItems:[
                @foreach($storeCheckingReceive->storeCheckingReceiveItems as $storeCheckingReceiveItem)
                {id:'{{$storeCheckingReceiveItem->id}}',bin_number:'{{$storeCheckingReceiveItem->bin_number}}',
                commodity_name:"{{$storeCheckingReceiveItem->commodity ? $storeCheckingReceiveItem->commodity->name : ''}}",
                commodity_barcodes:{!! $storeCheckingReceiveItem->commodity ? ($storeCheckingReceiveItem->commodity->barcodes ? $storeCheckingReceiveItem->commodity->barcodes : []) : [] !!},
                imported_amount:'{{$storeCheckingReceiveItem->imported_amount}}',counted_amount:'{{$storeCheckingReceiveItem->counted_amount}}',
                asn_amount:'{{$storeCheckingReceiveItem->asn_amount}}',imported_diff_amount:'{{$storeCheckingReceiveItem->imported_diff_amount}}',
                asn_diff_amount:'{{$storeCheckingReceiveItem->asn_diff_amount}}',produced_at:'{{$storeCheckingReceiveItem->produced_at}}',
                invalid_at:'{{$storeCheckingReceiveItem->invalid_at}}',batch_code:'{{$storeCheckingReceiveItem->batch_code}}',
                unique_code:'{{$storeCheckingReceiveItem->unique_code}}'}
                @endforeach
            ],
            inputMode : 'regular',
            status:{
                barcodeDisable : true,
                commitButtonVisible:false,
                scanEndInputted:false,
                amountDisable : false,
            },
            focusing : 'document',
            inputting:{
                barcode : '',
                amount : '',
                bin : '',
                batch_number : '',
            },
            goodses : [],
        },
        mounted(){
            $('#container').removeClass('d-none');
            $(".tooltipTarget").tooltip({'trigger':'hover'});
            let column = [
                {name:'index',value: '序号', neglect: true},
                {name:'id',value: 'ID', neglect: true},
                {name:'bin_number',value: '格口号'},
                {name:'commodity_name',value: '商品名'},
                {name:'commodity_barcode',value: '商品条码'},
                {name:'imported_amount',value: '导入数量', neglect: true},
                {name:'counted_amount',value: '实盘数量', neglect: true},
                {name:'asn_amount',value: 'ASN数量', neglect: true},
                {name:'imported_diff_amount',value: '导入差异数', neglect: true},
                {name:'asn_diff_amount',value: 'ASN差异数', neglect: true},
                {name:'produced_at',value: '生产日期'},
                {name:'invalid_at',value: '有效期'},
                {name:'batch_code',value: '批次号'},
                {name:'unique_code',value: '唯一码'},
            ];
            let header = new Header({
                el: "#header",
                column: column,
                data: this.storeCheckingReceiveItems,
                restorationColumn: 'id',
            });
            header.init();
            this.scanListening();
        },
        methods:{
            switchMenu(menuName){
                this.inputMode = menuName;
                this.inputting.barcode='';
                if (menuName === 'regular') {
                    this.status.amountDisable = false;
                    $('#amountLabel').text('输入数量：');
                }else {
                    this.status.amountDisable = true;
                    $('#amountLabel').text('自动扫入数量：');
                }
            },
            scanListening: function () {
                let _this = this;
                $(document).on('keypress', function (e) {
                    if(_this.focusing!=='document'){return}
                    if(!_this.status.barcodeDisable){return}
                    if (e.keyCode !== 13) {
                        if(_this.status.scanEndInputted){
                            _this.inputting.barcode='';
                            _this.status.scanEndInputted=false;
                        }
                        _this.inputting.barcode += String.fromCharCode(e.keyCode);
                    } else {
                        if(_this.inputting.barcode.length<=1){
                            window.tempTip.setDuration(4500);
                            window.tempTip.show('未扫入条码，请检查扫码枪设置，尝试调至“直接键盘输出”模式');
                            return;
                        }
                        _this.status.scanEndInputted = true;
                        _this.showCommitButton();
                        _this.autoFillBin();
                        switch(_this.inputMode){
                            case 'increasing': _this.commitGoodsOnIncreasingMode();break;
                            case 'multiIncreasing': _this.commitGoodsOnMultiIncreasingMode();break;
                        }
                    }
                });
            },
            showCommitButton: function () {
                if(this.inputting.barcode && this.inputting.amount && this.inputting.bin){
                    if (this.status.commitButtonVisible){
                        this.commitGoods();
                        this.status.commitButtonVisible=false;
                    }else this.status.commitButtonVisible=true;
                }
            },
            commitGoods: function () {
                window.tempTip.setDuration(3500);
                if(!this.inputting.barcode){window.tempTip.show('请扫入条码');return;}
                else if(!this.inputting.amount){window.tempTip.show('请输入数量');return;}
                else if(!this.inputting.bin){window.tempTip.show('请输入隔口号');return;}
                this.recordOrPlusGoods();
                window.tempTip.setDuration(1500);
                window.tempTip.showSuccess('成功提交：' + data.inputting.barcode);
                this.cleanInputs();
                this.audioDing();
            },
            cleanInputs: function () {
                this.changeToScanInputBarcode();
                this.inputting.barcode='';
                this.inputting.amount='';
                this.inputting.bin='';
                this.inputting.produce_date='';
                this.inputting.valid_date='';
                this.inputting.batch_number='';
                this.status.commitButtonVisible=false;
                this.status.binDisable=false;
            },
            autoFillBin: function () {
                let data = this;
                let isNotRepeatingBarcode=this.goodses.every(function(goods){
                    if(goods.barcode===data.inputting.barcode){
                        data.inputting.bin=goods.bin;
                        data.status.binDisable=true;
                        return false;
                    }
                    return true;
                });
                if(isNotRepeatingBarcode){
                    data.status.binDisable=false;
                }
            },
            commitGoodsOnIncreasingMode: function () {
                let data = this;

                function doIt() {
                    let repeatedBarcode = data.repeatedIncreasingBarcodeFromSaved();

                    function increase() {
                        data.inputting.bin = repeatedBarcode.bin;
                        repeatedBarcode.amount++;
                        data.inputting.amount = repeatedBarcode.amount;
                        window.tempTip.setDuration(500);
                        window.tempTip.showSuccess(repeatedBarcode.amount);
                        data.focusDocument();
                        data.audioDing();
                    }

                    if (!repeatedBarcode) {
                        data.focusOutDocument();
                        data.alertVibrate();
                        window.tempTip.setInputType('number');
                        window.tempTip.inputVal('该商品第一件递增请输入隔口号：', function (bin) {
                            if (bin === '') {
                                window.tempTip.setDuration(1500);
                                window.tempTip.show('未输入隔口号，请重新扫描');
                                data.alertVibrate();
                                data.focusDocument();
                                return
                            }
                            data.inputting.bin = bin;
                            data.inputting.amount = 1;
                            data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                            data.status.binDisable = true;
                            window.tempTip.setDuration(500);
                            window.tempTip.showSuccess('保存成功');
                            data.focusDocument();
                            data.audioDing();
                        })
                    } else {
                        increase();
                    }
                }

                if (data.lastScannedBarcode !== data.inputting.barcode && data.lastScannedBarcode) {
                    data.audioWarning_otherBarcode();
                    data.focusOutDocument();
                    window.tempTip.confirm('扫到其它条码，是否切换至新条码并记录？', doIt, function () {
                        data.inputting.barcode = data.lastScannedBarcode;
                        data.focusDocument();
                    })
                } else {
                    doIt()
                }
            },
            commitGoodsOnMultiIncreasingMode: function () {
                let data = this;
                let repeatedBarcode=this.repeatedIncreasingBarcodeFromSaved();
                function increase(){
                    data.inputting.bin=repeatedBarcode.bin;
                    repeatedBarcode.amount++;
                    data.inputting.amount=repeatedBarcode.amount;
                    window.tempTip.setDuration(500);
                    window.tempTip.showSuccess(repeatedBarcode.amount);
                    data.focusDocument();
                    data.audioDing();
                }
                if(!repeatedBarcode){
                    data.focusOutDocument();
                    data.alertVibrate();
                    window.tempTip.setInputType('number');
                    window.tempTip.inputVal('该商品第一件递增请输入隔口号：',function(bin){
                        if(bin===''){
                            window.tempTip.setDuration(1500);
                            window.tempTip.show('未输入隔口号，请重新扫描');
                            data.alertVibrate();
                            data.focusDocument();return}
                        data.inputting.bin=bin;
                        data.inputting.amount=1;
                        data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                        data.status.binDisable=true;
                        window.tempTip.setDuration(500);
                        window.tempTip.showSuccess('保存成功');
                        data.focusDocument();
                        data.audioDing();
                    })
                }else{
                    increase();
                }
            },
            oninputEnter:function(e){
                if (e.key === 'Enter') {
                    this.focusDocument();
                }
            },
            focusDocument: function () {
                this.focusing = 'document';
                this.showCommitButton();
            },
            focusOutDocument: function () {
                this.focusing = '';
                this.autoFillBin();
            },
            audioWarning_otherBarcode: function () {
                let audio = document.getElementById('soundWarning');
                audio.currentTime = 0;//重新播放
                if(audio.paused){
                    audio.play();// 播放
                }
                this.alertVibrate();

            },
            audioDing: function () {
                let audio = document.getElementById('soundDing');
                audio.currentTime = 0;//重新播放
                audio.play();// 播放
                //手机震动
                function startVibrate(duration) {
                    if (navigator.vibrate) {
                        navigator.vibrate(duration);
                    } else if (navigator.webkitVibrate) {
                        navigator.webkitVibrate(duration);
                    }
                }
                startVibrate(500);
            },
            recordOrPlusGoods: function () {
                if(this.inputMode==='regular'){
                    this.addGoods();
                    return;
                }
                let isNotRepeating=this.goodses.every(goods => {
                    if(goods.barcode===this.inputting.barcode){
                        goods.amount=parseInt(goods.amount)+parseInt(this.inputting.amount);
                        return false;
                    }
                    return true;
                });
                if(isNotRepeating)this.addGoods();
            },
            addGoods(){
                this.goodses.unshift(JSON.parse(JSON.stringify(this.inputting)));
            }
        },
    });
</script>
@stop