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">
        <table class="table  table-sm table-bordered text-nowrap  mb-0">
            <tr v-if="isBeingFilterConditions">
                <td colspan="10">
                    <div class="col" style="padding:0">
                        <a  href="{{url('inventory/statement/changeInventory')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                    </div></td>
            </tr>
            <tr>
                <td >
                    <select name="paginate" v-model="filterData.paginate" class="tooltipTarget form-control form-control-sm" style="vertical-align: middle;max-width: 100px" @change="submit">
                        <option value="50">50行</option>
                        <option value="100">100行</option>
                        <option value="200">200行</option>
                        <option value="500">500行</option>
                        <option value="1000">1000行</option>
                    </select></td>
                <td >
                    <div class="form-inline">
                    <input type="date" name="date_start" style="max-width: 150px" class="form-control form-control-sm tooltipTarget" title="选择显示指定日期的起始时间"
                           v-model="filterData.date_start" :class="filterData.created_at_start?'bg-warning':''">
                    <select v-model="filterData.range" name="range" @change="submit" title="查询内容的日期范围" class="form-control form-control-sm tooltipTarget m-2">
                        <option value="1">近一天</option>
                        <option value="3">近三天</option>
                        <option value="7">近七天</option>
                        <option value="30">近三十天</option>
                    </select></div>
                </td>
                <td>
                    <input name="TOLocation" style="max-width: 200px" v-model="filterData.TOLocation" class="form-control form-control-sm tooltipTarget" placeholder="库位" :class="filterData.TOLocation?'bg-warning':''">
                </td>
                <td >
                    <input name="LotAtt05" style="max-width: 200px" v-model="filterData.LotAtt05" class="form-control form-control-sm tooltipTarget" placeholder="属性仓" :class="filterData.LotAtt05?'bg-warning':''">
                </td>
                <td >
                    <input style="max-width: 150px" type="date" class="form-control form-control-sm tooltipTarget" name="LotAtt02_start" title="选择显示失效日期的起始时间"
                           v-model="filterData.LotAtt02_start" :class="filterData.LotAtt02_start?'bg-warning':''" >
                </td>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td >
                    <div class="form-inline">
                    <input type="text" class="form-control form-control-sm tooltipTarget" placeholder="客户"
                           style="width:70px" @input="owner_seek"
                           title="输入关键词快速定位下拉列表，回车确定">
                    <select name="descr_c" v-model="filterData.descr_c" @change="submit" style="max-width: 100px" class="form-control form-control-sm tooltipTarget"  title="选择要显示的客户" :class="filterData.descr_c?'bg-warning':''">
                        <option >    </option>
                        <option v-for="owner in owners" :value="owner.descr_c" >@{{owner.descr_c}}</option>
                    </select></div>
                </td>
                <td >
                    <input style="max-width: 150px" type="date" class="form-control form-control-sm tooltipTarget" name="date_end" title="选择显示指定日期的结束时间"
                           v-model="filterData.date_end" :class="filterData.created_at_end?'bg-warning':''" >
                </td>
                <td>
                    <input style="max-width: 200px" name="SKU" v-model="filterData.SKU" class="form-control form-control-sm tooltipTarget" placeholder="产品编码" :class="filterData.SKU?'bg-warning':''">
                </td>
                <td >
                    <input style="max-width: 200px" name="ALTERNATE_SKU1" v-model="filterData.ALTERNATE_SKU1" class="form-control form-control-sm tooltipTarget" placeholder="产品条码" :class="filterData.ALTERNATE_SKU1?'bg-warning':''">
                </td>
                <td >
                    <input style="max-width: 150px" type="date" class="form-control form-control-sm tooltipTarget" name="LotAtt02_end" title="选择显示失效日期的结束时间"
                           v-model="filterData.LotAtt02_end" :class="filterData.LotAtt02_end?'bg-warning':''" >
                </td>
                <td colspan="5">
                    <input type="submit" class="btn btn-sm btn-outline-dark pull-left" value="按条件搜索">
                </td>
            </tr>
            <tr>
                <td colspan="9">
                               <span class="dropdown">
                                        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'']"
                                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                                            导出Excel
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" @click="processExport(1)" href="javascript:">导出勾选内容</a>
                                            <a class="dropdown-item" @click="processExport(2)" href="javascript:">导出所有页</a>
                                        </div>
                                    </span>
                </td>
            </tr>
        </table>
    </form>
    <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2">
        <tr>
            <th>
                <label for="all">
                    <input id="all" type="checkbox" @click="checkAll($event)">全选
                </label>
            </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>在库数量</th>
            <th>占用数量</th>
        </tr>
        <tr v-for="(oracleActTransactingLog,i) in oracleActTransactingLogs">
            <td>
                <input class="checkItem" type="checkbox" :value="oracleActTransactingLog" v-model="checkData">
            </td>
            <td>@{{ i+1 }}</td>
            <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><span v-if="oracleActTransactingLog.在库数量">@{{ oracleActTransactingLog.在库数量 }}</span><span v-else>0</span></td>
            <td><span v-if="oracleActTransactingLog.占用数量">@{{ oracleActTransactingLog.占用数量 }}</span><span v-else>0</span></td>
        </tr>
    </table>
    <form method="post" hidden action="{{url('inventory/statement/changeInventory/export')}}" id="checkDataForm">
        @csrf
        <input name="checkData" :value="checkData | json">
        <input name="export" :value="filterData.export">
        <input name="date_start" :value="filterData.date_start">
        <input name="date_end" :value="filterData.date_end">
        <input name="SKU" :value="filterData.SKU">
        <input name="TOLocation" :value="filterData.TOLocation">
        <input name="LotAtt05" :value="filterData.LotAtt05">
        <input name="LotAtt02_start" :value="filterData.LotAtt02_start">
        <input name="LotAtt02_end" :value="filterData.LotAtt02_end">
        <input name="descr_c" :value="filterData.descr_c">
        <input name="ALTERNATE_SKU1" :value="filterData.ALTERNATE_SKU1">
    </form>
    <div >
        <button type="button" @click="pageUp()" :readonly="page>1?false:true" class="btn btn-sm " :class="page>1?'btn-outline-info':''">上一页</button>
        <button type="button" @click="pageDown()" :readonly="page<maxPage?false:true" class="btn btn-sm m-3" :class="page<maxPage?'btn-outline-info':''">下一页</button>
        <input  @keyup.enter="pageSkip($event)" class="form-control-sm ml-3 tooltipTarget" :placeholder="'当前页数：'+page+'/'+maxPage" title="去往指定页">
        <span class="text-muted m-1">共 @{{ sum }} 条</span>
    </div>
</div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                oracleActTransactingLogs:{!! $oracleActTransactingLogs !!},
                page:Number('{{$page}}'),
                filterData:{date_start:'',date_end:'',SKU:'',paginate:"50",TOLocation:'',range:'',
                    LotAtt05:'',LotAtt02_start:'',LotAtt02_end:'',descr_c:'',ALTERNATE_SKU1:'',export:''},
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                checkData:[],
                maxPage:1,
                sum:0
            },
            mounted:function () {
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.initInputs();
                $("#list").removeClass('d-none');
                if (this.oracleActTransactingLogs.length>0){
                    this.maxPage=Math.ceil(this.oracleActTransactingLogs[0].sum/50);
                    this.sum=this.oracleActTransactingLogs[0].sum;
                }
            },
            computed:{
                isBeingFilterConditions:function(){

                    for(let key in this.filterData){
                        if(this.filterData[key] && key!='paginate'){
                            return true
                        }
                    }
                    return false;
                },

            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.oracleActTransactingLogs.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            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;
                     this.href();
                },
                pageDown(){
                    if (this.page>=this.maxPage)return;
                    this.page=this.page+1;
                    this.href();
                },
                pageSkip(e){
                  if (Number(e.target.value)<=0 || Number(e.target.value)>this.maxPage){
                      tempTip.setDuration(2000);
                      tempTip.show('页数不存在！ ');
                      return
                  }
                  this.page=e.target.value;
                  this.href();
                },
                href(){
                    let url="{{url('inventory/statement/changeInventory?page=')}}"+this.page;
                    if (this.filterData.date_start)url+="&&date_start="+this.filterData.date_start;
                    if (this.filterData.date_end)url+="&&date_end="+this.filterData.date_end;
                    if (this.filterData.SKU)url+="&&SKU="+this.filterData.SKU;
                    if (this.filterData.paginate)url+="&&paginate="+this.filterData.paginate;
                    if (this.filterData.TOLocation)url+="&&TOLocation="+this.filterData.TOLocation;
                    if (this.filterData.LotAtt05)url+="&&LotAtt05="+this.filterData.LotAtt05;
                    if (this.filterData.LotAtt02_start)url+="&&LotAtt02_start="+this.filterData.LotAtt02_start;
                    if (this.filterData.LotAtt02_end)url+="&&LotAtt02_end="+this.filterData.LotAtt02_end;
                    if (this.filterData.ALTERNATE_SKU1)url+="&&ALTERNATE_SKU1="+this.filterData.ALTERNATE_SKU1;
                    if (this.filterData.descr_c)url+="&&descr_c="+this.filterData.descr_c;
                    if (this.filterData.range)url+="&&range="+this.filterData.range;
                    window.location.href=url;
                },
                //提交表单
                submit:function(){
                    let form = $("#form");
                    form.submit();
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.oracleActTransactingLogs.forEach((el,i)=>{
                            if (this.checkData.indexOf(el) == '-1'){
                                this.checkData.push(el);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                //寻找客户
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.filterData.descr_c='';
                    else
                        _this.owners.forEach(function (owner) {
                            if (owner.descr_c.includes($val)){
                                _this.filterData.descr_c=owner.descr_c;
                            }
                        });
                },
                processExport:function(value){
                    if (value==1&&this.checkData.length <= 0) {
                        tempTip.setDuration(2000);
                        tempTip.showSuccess('没有勾选任何记录');
                        return
                    }
                    this.filterData.export=value;
                    setTimeout(function () {
                        $("#checkDataForm").submit();
                    },1);
                },
            },
            filters:{
                json(value) {
                    return JSON.stringify(value);
                }
            },
        });
    </script>
@endsection