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">
            <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" @click="status.barcodeDisable=false">手动输入</div>
                            <div class="btn btn-sm btn-outline-danger" @click="status.barcodeDisable=true">扫描输入</div>
                        </div>
                        <input type="text" id="barcode" class="form-control" placeholder="扫入条码"
                               :disabled="status.barcodeDisable" {{-- @focusin="focusOutDocument" @focusout="focusDocument" v-model="inputting.barcode"--}}>

                        <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,
            },
        },
        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();
        },
        methods:{
            switchMenu(menuName){
                this.inputMode = menuName;
            }
        },
    });
</script>
@stop