baoshi-was/resources/views/inventory/stockInventory/blindReceive.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="mt-3">
            <span>
                <button class="btn btn-sm btn-outline-dark" @click="正常盘点(inventory.id)" >正常盘点</button>
            </span>


            <span class="form-group  mb-5">
            <label class="text-muted">货主:</label><span class="font-weight-bold">@{{ inventory.owner.name }}</span>
        </span>
            <span class="form-group  p-2 mb-5">
            <label >盘点单号:</label><span>@{{ inventory.id }}</span>
        </span>
            <span class="form-group p-2 mb-5">
            <label class="text-muted">时间范围:</label><span>@{{ inventory.start_at }} 至 @{{ inventory.end_at }}</span>
        </span>
        </div>

        <div class="mt-3">
        <span class="h5">
            <span class="form-group mb-5" v-if="inventory.status==='盘点中' || inventory.status==='待盘点'">
                <label class=" font-weight-bold">已盘点:</label><span>@{{ inventory.processed }}/总数:@{{ inventory.total }}</span>
            </span>
            <span class="form-group mb-5" v-if="inventory.status==='盘点中' || inventory.status==='待盘点'">
                <label class=" font-weight-bold">剩余数:</label><span>@{{ inventory.surplus }}</span>
            </span>
            <span class="form-group mb-5" v-if="inventory.status==='复盘中'&&未复盘有差异列">
                <label class=" font-weight-bold">有差异未复盘数:</label><span>@{{ 未复盘有差异列.length }}</span>
            </span>
            <span class="form-group mb-5" v-if="inventory.status==='复盘中'&&未盘列">
                <label class=" font-weight-bold">未盘点数:</label><span>@{{ 未盘列.length }}</span>
            </span>
            <span class="form-group mb-5" v-if="inventory.status==='复盘中'">
                <label class=" font-weight-bold">总数:</label><span>@{{ inventory.total }}</span>
            </span>
            </span>
        </div>


        {{--    <div class="mt-3" >--}}
        {{--        <span  class="btn  col-md-2 font-weight-bold"  style="cursor: default;max-width: 160px" :class="inventory.status=='盘点中' ||inventory.status=='待盘点'?'bg-info':'btn-outline-info disabled'">--}}
        {{--            @{{ inventory.type }}--}}
        {{--        </span>--}}
        {{--        <span >--}}
        {{--                 @can('库存管理-盘点-结束初盘')--}}
        {{--                <span v-if="inventory.status==='盘点中' ||inventory.status=='待盘点'" class="btn  col-md-2 font-weight-bold btn-outline-secondary" style="max-width: 160px" @click="stockInventoryEnd(inventory.id)">结束</span>--}}
        {{--            @endcan--}}
        {{--            <span v-if="inventory.status==='复盘中'" class="btn  col-md-2 font-weight-bold" style="cursor: default;max-width: 160px" :class="inventory.status=='盘点中' ||inventory.status=='待盘点'?'btn-outline-info disabled':'bg-info'">复盘</span>--}}
        {{--        </span>--}}
        {{--    </div>--}}

        <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="row mt-2">
            <div class="col-12" id="scanColumn">
                <div class="card" :class="borderByMode">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='regular'">常规：可输入效期，相同条码记录不会合并</p>
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='increasing'">逐一扫描：处理单一重复商品，每扫一次对应隔口总数量自动递增，扫到不同条码会提示</p>
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='multiIncreasing'">边扫边分：处理多种商品，自动将扫到的不同条码数量递增到各自隔口号</p>
                                <ul class="nav nav-tabs mb-4 mt-n3">
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='regular'?'active':''"
                                                            @click="inputMode='regular';changeToManualInputAmount();cleanInputs();inputting.fromIncreasing=false">常规</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='increasing'?'active':''"
                                                            @click="inputMode='increasing';changeToScanInputAmount();cleanInputs();inputting.fromIncreasing=true;">逐一扫描</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='multiIncreasing'?'active':''"
                                                            @click="inputMode='multiIncreasing';changeToScanInputAmount();cleanInputs();inputting.fromIncreasing=true">边扫边分</a></li>
                                </ul>
                            </div>
                            <div class="col-6">
                                <div v-if="inputMode=='regular'">
                                    <div class="btn btn-sm btn-outline-primary"
                                         v-if="!isManualInputtingBarcode" @click="changeToManualInputBarcode">手动输入</div>
                                    <div class="btn btn-sm btn-outline-danger"
                                         @click="changeToScanInputBarcode" v-if="isManualInputtingBarcode">扫描输入</div>
                                </div>
                                <input type="text" id="barcode" class="form-control" :disabled="status.barcodeDisable" placeholder="扫入条码" @focusin="focusOutDocument" @focusout="focusDocument" v-model="inputting.barcode">
                                <div >
                                    <div >
                                        库位：
                                    </div>
                                    <input type="text" class="form-control mb-2" v-model="location" @focusin="focusOutDocument"  @focusout="focusDocument" @keyup="oninputEnter">
                                </div>
                                <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>
                                <div v-if="inputMode=='regular'">
                                    <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" class="form-control" placeholder="" :disabled="status.amountDisable"
                                           v-model="inputting.amount" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"
                                           style='height: 40px;font-size: 1.6em;color:blue;font-weight: bolder;padding: 3px;text-align: center'>
                                </div>
                                <div class="card-title">
                                    格口号：
                                </div>
                                <input type="number" id="bin" class="form-control mt-n2 mb-2"
                                       v-model="inputting.bin"
                                       :disabled="status.binDisable" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"
                                       style='height: 80px;font-size: 5em;color:red;font-weight: bolder;padding: 3px;text-align: center'>
                                <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="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-dark btn form-control" style="cursor: pointer" @click="submitStockInventory">结束并生成盘点</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el: '#app',
            data:{
                inventory:{!! $inventoryAccount!!},
                focusing:'document',
                commitButtonVisible:false,
                isManualInputtingBarcode:false,
                isManualInputtingAmount:true,
                lastScannedBarcode:'',
                inputMode:'regular',//regular,increasing,multiIncreasing
                location:'',
                inputting:{
                    barcode:'',amount:'',bin:'',produce_date:'',valid_date:'',batch_number:'',fromIncreasing:false
                },
                status:{
                    scanEndInputted:false,binDisable:false,barcodeDisable:true,amountDisable:false,
                },
                goodses:[],//{barcode,amount,bin,produce_date,valid_date,batch_number}
            },
            mounted() {
                this.scanListening();
            },
            methods: {
                正常盘点(id){
                    window.location.href='{{url('inventory/stockInventory/enterStockInventory')}}/'+id;
                },
                changeToManualInputAmount:function(){
                    this.status.amountDisable=false;
                    this.isManualInputtingAmount=true;
                    $('#amountLabel').text('输入数量：');
                },
                changeToScanInputAmount:function(){
                    this.status.amountDisable=true;
                    this.isManualInputtingAmount=false;
                    $('#amountLabel').text('自动扫入数量：');
                },
                changeToManualInputBarcode:function(){
                    this.status.barcodeDisable=false;
                    this.isManualInputtingBarcode=true;
                    $('#barcode').attr('placeholder','手工输入条码');
                },
                changeToScanInputBarcode:function(){
                    let data = this;
                    this.isManualInputtingBarcode=false;
                    this.inputting.barcode='';

                    let $barcode = $('#barcode');
                    this.status.barcodeDisable=false;
                    setTimeout(function () {
                        $barcode.focus();
                        data.status.barcodeDisable=true;
                    },20);
                    $barcode.attr('placeholder','扫入条码');
                },
                oninputEnter:function(e){
                    if (e.key === 'Enter') {
                        this.focusDocument();
                    }
                },
                focusDocument: function () {
                    this.focusing = 'document';
                    this.showCommitButton();
                },
                focusOutDocument: function () {
                    this.focusing = '';
                    this.autoFillBin();
                },
                scanListening: function () {
                    let data = this;
                    $(document).on('keypress', function (e) {
                        if(data.focusing!=='document'){return}
                        if(data.isManualInputtingBarcode){return}
                        if (e.keyCode !== 13) {
                            if(data.status.scanEndInputted){
                                data.lastScannedBarcode=data.inputting.barcode;
                                data.inputting.barcode='';
                                data.status.scanEndInputted=false;
                            }
                            data.inputting.barcode += String.fromCharCode(e.keyCode);
                        } else {
                            if(data.inputting.barcode.length<=1){
                                window.tempTip.setDuration(4500);
                                window.tempTip.show('未扫入条码，请检查扫码枪设置，尝试调至“直接键盘输出”模式');
                                return;
                            }
                            data.status.scanEndInputted = true;
                            data.showCommitButton();
                            data.autoFillBin();
                            switch(data.inputMode){
                                case 'increasing': data.commitGoodsOnIncreasingMode();break;
                                case 'multiIncreasing': data.commitGoodsOnMultiIncreasingMode();break;
                            }
                        }
                    });
                },
                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();
                    }
                },
                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);
                },
                alertVibrate: function () {
                    function startVibrate(duration) {
                        if (navigator.vibrate) {
                            navigator.vibrate(duration);
                        } else if (navigator.webkitVibrate) {
                            navigator.webkitVibrate(duration);
                        }
                    }
                    let vibrateInterval = setInterval(function() {
                        startVibrate(150);
                    }, 50);
                    setTimeout(function() {
                        clearInterval(vibrateInterval)
                    }, 2000);
                },
                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;
                    }
                },
                repeatedIncreasingBarcodeFromSaved: function () {
                    let data = this;
                    let repeatedGoods=null;
                    data.goodses.every(function(goods){
                        if(goods.barcode===data.inputting.barcode && goods.fromIncreasing){
                            repeatedGoods=goods;
                            return false;
                        }
                        return true;
                    });
                    return repeatedGoods;
                },
                commitGoods: function () {
                    let data = this;
                    window.tempTip.setDuration(3500);
                    if(!data.inputting.barcode){window.tempTip.show('请扫入条码');return;}
                    else if(!data.inputting.amount){window.tempTip.show('请输入数量');return;}
                    else if(!data.inputting.bin){window.tempTip.show('请输入隔口号');return;}
                    data.recordOrPlusGoods();
                    window.tempTip.setDuration(1500);
                    window.tempTip.showSuccess('成功提交：' + data.inputting.barcode);
                    data.cleanInputs();
                    data.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.commitButtonVisible=false;
                    this.status.binDisable=false;
                    this.lastScannedBarcode='';
                },
                recordOrPlusGoods: function () {
                    let data = this;
                    if(this.inputMode==='regular'){
                        data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                        return;
                    }
                    let isNotRepeating=data.goodses.every(function(goods){
                        if(goods.barcode===data.inputting.barcode){
                            goods.amount=parseInt(goods.amount)+parseInt(data.inputting.amount);
                            return false;
                        }
                        return true;
                    });
                    if(isNotRepeating){
                        data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                    }
                },
                removeGoods: function ($e,barcode) {
                    if(!confirm('确定要删除条码为'+barcode+'的记录吗'))return;
                    let data = this;
                    data.goodses.every(function(goods,i){
                        if(goods.barcode===barcode){
                            data.goodses.splice(i,1)
                            return false;
                        }
                        return true;
                    })
                },
                showCommitButton: function () {
                    let data = this;
                    if(data.inputting.barcode && data.inputting.amount && data.inputting.bin){
                        data.commitButtonVisible=true;
                    }
                },
                submitStockInventory: function () {
                    let data = this;
                    data.focusOutDocument();
                    if(data.goodses.length===0){
                        window.tempTip.show('请先录入数据再提交盘点');return;
                    }
                    if(!data.location){
                        window.tempTip.setDuration(1500);
                        window.tempTip.show('库位为必填项');
                        return;
                    }
                    window.tempTip.confirm('请检查表格，确定全部完成。提交后数据将全部清空，不能后退',
                        function () {
                                let url='{{url("inventory/stockInventory/baseOnBlindReceive")}}';
                                axios.post(url,{'location':data.location,'goodses':data.goodses,'inventoryId':data.inventory.id,'owner_code':data.inventory.owner.code})
                                    .then(function(response){
                                        if(response.data.success){
                                            data.goodses=[];
                                            data.cleanInputs();
                                            window.tempTip.cancelWaitingTip();
                                            window.tempTip.setDuration(1500);
                                            window.tempTip.showSuccess('盲收盘点成功，可返回盘点页面查看');
                                            data.location='';
                                            data.focusDocument();
                                        }else{
                                            window.tempTip.setDuration(1500);
                                            window.tempTip.show('盲收盘点失败：'+response.data.fail_info);
                                            console.log(response);
                                            data.focusDocument();
                                            data.alertVibrate()
                                        }
                                    })
                                    .catch(function (err) {
                                        window.tempTip.setDuration(3500);
                                        window.tempTip.show('网络或系统错误，请将以下信息提交给开发者：'+err);
                                        data.alertVibrate();
                                    });
                        },function () {
                            data.focusDocument();
                        })
                }
            },
            computed: {
                borderByMode: function () {
                    return {
                        // 'border-info':this.inputMode==='regular',
                        'border-success':this.inputMode==='increasing',
                        'border-danger':this.inputMode==='multiIncreasing'
                    }
                }
            }

        });
    </script>
@endsection