baoshi-was/resources/views/inventory/statement/changeInventory.blade.php

@extends('layouts.app')
@section('title')库存管理@endsection

@section('content')
    @component('inventory.statement.menu')@endcomponent
<div id="list" class="d-none card container-fluid" style="min-width: 1500px">
    <form method="GET" action="{{url('inventory/statement/changeInventory')}}" id="form">
        <div class="text-nowrap mb-0" style="background: #fff;">
            <div v-if="isBeingFilterConditions">
                <div><div class="col" style="padding:0">
                        <a  href="{{url('inventory/statement/changeInventory')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                    </div>
                </div>
            </div>
            <div class="row mt-2 ml-2">
                <div class="col-md-6" style="max-width: 400px">
                    <input type="date" name="date_start" class=" form-control-sm tooltipTarget" title="选择显示指定日期的起始时间"
                           v-model="filterData.date_start" :class="filterData.created_at_start?'bg-warning':''">
                    <input type="date" class=" form-control-sm tooltipTarget" name="date_end" title="选择显示指定日期的结束时间"
                           v-model="filterData.date_end" :class="filterData.created_at_end?'bg-warning':''" >
                    <button type="submit" class="btn btn-sm btn-outline-dark">查询</button>
                </div>

            </div>
        </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>批号</th>
            <th>移出数量</th>
            <th>移入数量</th>
            <th>在库数量</th>
            <th>占用数量</th>
        </tr>
        <tr v-for="oracleActTransactingLog in oracleActTransactingLogs">
            <td class="text-primary">@{{ oracleActTransactingLog.货主 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.库位 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.产品编码 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.产品条码 }}</td>
            <td :title="oracleActTransactingLog.商品名称" class="tooltipTarget" style="max-width: 200px;overflow:hidden">@{{ oracleActTransactingLog.商品名称 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.属性仓 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.质量状态 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.失效日期 }}</td>
            <td class="text-muted">@{{ oracleActTransactingLog.批号 }}</td>
            <td>@{{ oracleActTransactingLog.移出数量 }}</td>
            <td>@{{ oracleActTransactingLog.移入数量 }}</td>
            <td>@{{ oracleActTransactingLog.在库数量 }}</td>
            <td>@{{ oracleActTransactingLog.占用数量 }}</td>
        </tr>
    </table>

    {{--<div>
        <button type="button" @click="pageUp()">上一页</button>
        <button type="button" @click="pageDown()">下一页</button>
        <input name="page" placeholder="去往指定页">
        <span v-if="oracleActTransactingLogs && oracleActTransactingLogs.length>0">@{{ oracleActTransactingLogs[0].sum }}</span>
        <span v-if="oracleActTransactingLogs && oracleActTransactingLogs.length>0">@{{ page }}/@{{ Math.ceil(oracleActTransactingLogs[0].sum/50) }}</span>
    </div>--}}
</div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                oracleActTransactingLogs:{!! $oracleActTransactingLogs !!},
                page:Number('{{$page}}'),
                filterData:{date_start:'',date_end:''},
            },
            mounted:function () {
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.initInputs();
                $("#list").removeClass('d-none');
            },
            computed:{
                isBeingFilterConditions:function(){

                    for(let key in this.filterData){
                        if(this.filterData[key]){
                            return true
                        }
                    }
                    return false;
                },

            },
            methods:{
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(location.href).split("?");
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.forEach(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                pageUp(){
                    if (this.page<=1)return;
                     this.page=this.page-1;
                     window.location.href="{{url('inventory/statement/changeInventory?page=')}}"+this.page;
                },
                pageDown(){
                    this.page=this.page+1;
                    window.location.href="{{url('inventory/statement/changeInventory?page=')}}"+this.page;
                }
            },
        });
    </script>
@endsection