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

@extends('layouts.app')
@section('title')盘点-任务-{!! $inventory->id !!}@endsection


@section('content')
    @component('inventory.stockInventory.menu')
        <li class="nav-item">
            <a  class="nav-link" href="{{URL::current()}}" :class="{active:isActive('enterStockInventory',3)}">盘点中({!! $inventory->id !!})</a>
        </li>
    @endcomponent
    <div id="list" class="container-fluid" style="min-width: 1500px">
        <div class="mt-3 pl-5">
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">货主:</label><span>@{{ inventory.owner.name }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">盘点单号:</label><span>@{{ inventory.id }}</span>
        </span>
        </div>
        <div class="mt-3 pl-5">
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">时间范围:</label><span>@{{ inventory.start_at }}——@{{ inventory.end_at }}</span>
        </span>
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded" v-if="inventory.surplus!=0">
            <label class="col-1 font-weight-bold">已盘点:</label><span>@{{ inventory.processed }}/总数:@{{ inventory.total }}</span>
        </span>
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded" v-if="inventory.surplus!=0">
            <label class="col-1 font-weight-bold">剩余数:</label><span>@{{ inventory.surplus }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded" v-if="inventory.surplus==0">
            <label class="col-1 font-weight-bold">盘点记录数:</label><span>@{{ inventory.total }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded" v-if="inventory.surplus==0">
            <label class="col-1 font-weight-bold">复盘剩余数:</label><span>@{{ inventory.check_surplus }}/复盘总数:@{{ inventory.total }}</span>
        </span>
        </div>
        <div class="mt-4 ml-5" >
        <span class="btn col-1 font-weight-bold"  style="cursor: default" :class="inventory.surplus!=0?'bg-info':'btn-outline-info disabled'">
            @{{ inventory.type }}
        </span>
            <span class="btn col-1 font-weight-bold" style="cursor: default" :class="inventory.surplus!=0?'btn-outline-info disabled':'bg-info'">复盘</span>
        </div>

        <form id="form"  class="mt-3 pl-5">
            <div class="row" :class="inventory.surplus!=0?'row-cols-3':'row-cols-5'">
        <span>
            <label for="location" class="text-secondary font-weight-bold">请输入库位</label>
            <input id="inventoryInput" name="location" type="text" class="form-control col-6 input"  autocomplete="off" value="@if(old('location')){{old('location')}}@endif">
        </span>
        <span>
            <label for="barcode" class="text-secondary font-weight-bold">请输入产品条码</label>
            <input id="barcode" name="barcode" type="text" value="@if(old('barcode')){{old('barcode')}}@endif" class="form-control col-6 input" autocomplete="off" @blur="searchBarcode">
        </span>
        <span>
            <label for="count" class="text-secondary font-weight-bold">请输入盘点数</label>
            <input type="text" id="count" name="count" class="form-control col-6 input" value="@if(old('count')){{old('count')}}@endif"  autocomplete="off">
        </span>

        <span v-if="inventory.surplus==0">
            <label for="count" class="text-secondary font-weight-bold">上一次盘点数</label>
            <span v-if="!inventoryMissionRecord.re_checked_amount">
                <input type="text" id="count" name="count" v-model="inventoryMissionRecord.verified_amount" class="form-control col-6 input" readonly>
            </span>
            <span v-if="inventoryMissionRecord.re_checked_amount">
                <input type="text" id="count" name="count" v-model="inventoryMissionRecord.re_checked_amount" class="form-control col-6 input" readonly>
            </span>
        </span>
        <span v-if="inventory.surplus==0">
            <label for="count" class="text-secondary font-weight-bold">盘点差异数</label>
            <input type="text" id="count" name="count" v-model="inventoryMissionRecord.difference_amount" class="form-control col-6 input" readonly>
        </span>
            </div>
        </form>

        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2">
            <tr>
                <th>序号</th>
                <th>库位</th>
                <th>产品名</th>
                <th>产品条码</th>
                <th>生产日期</th>
                <th>失效日期</th>
                <th>入库日期</th>
                <th>批号</th>
                <th>ERP属性仓</th>
                <th>质量状态</th>
                <th>库存数量</th>
                <th>可用数量</th>
                <th>盘点数量</th>
                <th>复盘数量</th>
                <th>盘点差异</th>
                <th>分配数量</th>
            </tr>
{{--            v-if="inventoryMission.checked=='是'"--}}
            <tr v-for="(inventoryMission,i) in inventoryMissions"    @click="selectedColor(inventoryMission.id)" :style="{'font-weight': inventory.id==selectedStyle?'bold':''}">
                <td>@{{ i+1 }}</td>
                <td>@{{ inventoryMission.location }}</td>
                <td v-if="inventoryMission.commodity">@{{ inventoryMission.commodity.name }}</td>
                <td v-if="inventoryMission.commodity">@{{ inventoryMission.commodity.barcode }}</td>
                <td >@{{ inventoryMission.produced_at }}</td>
                <td >@{{ inventoryMission.valid_at }}</td>
                <td >@{{ inventoryMission.stored_at }}</td>
                <td class="text-muted">@{{ inventoryMission.batch_number }}</td>
                <td >@{{ inventoryMission.erp_type_position }}</td>
                <td >@{{ inventoryMission.quality }}</td>
                <td >@{{ inventoryMission.stored_amount }}</td>
                <td >@{{ inventoryMission.valid_amount }}</td>
                <td>@{{ inventoryMission.verified_amount }}</td>
                <td>@{{ inventoryMission.re_checked_amount }}</td>
                <td>@{{ inventoryMission.difference_amount }}</td>
                <td>@{{ inventoryMission.occupied_amount }}</td>
            </tr>
        </table>
    </div>

@endsection

@section('lastScript')
    <script>
        let listVue = new Vue({
            el: "#list",
            data: {
                inventory:{!! $inventory!!},
                inventoryMissions:{!! $inventoryMissions !!},
                checkData: [],
                selectedStyle:'',
                inventoryMissionRecord:{},
            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $("#list").removeClass('d-none');
                document.getElementById('inventoryInput').focus();
            },
            methods:{
                selectedColor(id){
                    if (id==this.selectedStyle){
                        this.selectedStyle='';
                        return;
                    }
                    this.selectedStyle=id;
                },
                //验证输入盘点产品条码对应是否有商品
                searchBarcode(){
                    let _this=this;
                    let barcode=document.getElementById('barcode').value;
                    let location=document.getElementById('inventoryInput').value;
                    let inventoryId=_this.inventory.id;
                    let barcodes=[];
                    _this.inventoryMissions.forEach(function (inventoryMission) {
                        barcodes.push(inventoryMission.commodity.barcode);
                    });
                    if (!barcodes.includes(barcode)){
                        tempTip.setDuration(2000);
                        tempTip.show('输入的产品条码没有对应的产品!');
                    }else {
                        //根据该库存和产品条码查询该条盘点记录
                        let url='{{url('inventory/searchStockInventoryRecord')}}';
                        axios.post(url,{location:location,barcode:barcode,inventoryId:inventoryId}).then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(2000);
                                tempTip.show('复盘!'+'   '+response.data.data);
                            }else {
                                _this.inventoryMissionRecord=response.data.data;
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(2000);
                            tempTip.show('网络错误'+err);
                        });
                    }
                },
                //提交盘点
                submitStockInventory(){
                    let _this=this;
                    let url='{{url('inventory/stockInventory')}}';
                    let location=document.getElementById('inventoryInput').value;
                    let barcode=document.getElementById('barcode').value;
                    let count=document.getElementById('count').value;
                    let inventoryId=_this.inventory.id;
                    axios.post(url,{location:location,barcode:barcode,count:count,inventoryId:inventoryId})
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(2000);
                                tempTip.show('盘点失败!'+'   '+response.data.data);
                            }else {
                                if (_this.inventory.id==response.data.inventory.id){
                                    _this.inventory.processed=response.data.inventory.processed;
                                    _this.inventory.surplus=response.data.inventory.surplus;
                                    _this.inventory.check_surplus=response.data.inventory.check_surplus;
                                }
                                _this.inventoryMissions.every(function (inventoryMission,i) {
                                    if (inventoryMission.id==response.data.inventoryMission.id){
                                        inventoryMission.checked=response.data.inventoryMission.checked;
                                        inventoryMission.verified_amount=response.data.inventoryMission.verified_amount;
                                        inventoryMission.difference_amount=response.data.inventoryMission.difference_amount;
                                        inventoryMission.re_checked_amount=response.data.inventoryMission.re_checked_amount;
                                        _this.inventoryMissions.splice(i,1)
                                        _this.inventoryMissions.unshift(inventoryMission);
                                        return false;
                                    }
                                    return true;
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('盘点成功！');
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(2000);
                        tempTip.show('盘点失败!'+'网络错误'+err);
                    })
                },
            }
        });
        $("#form").on("keydown","input",function(){
            let _this=this;
            let e = event || window.event;
            if(e && e.keyCode==13) {
                let inputs = $("#form .input");
                let idx = inputs.index(this);     // 获取当前焦点输入框所处的位置
                let location=document.getElementById('inventoryInput').value;
                if (idx == 2) {       // 判断是否是最后一个输入框
                    if (location==''||location==undefined||location==null){
                        document.getElementById('inventoryInput').focus();
                        return;
                    }
                    listVue.submitStockInventory();
                    $("#form .input").val(' ');
                    document.getElementById('inventoryInput').focus();
                } else {
                    inputs[idx + 1].focus(); // 设置焦点
                    inputs[idx + 1].select(); // 选中文字
                }
            }
        });
    </script>
@endsection