baoshi-was/resources/views/weight/package/statistics.blade.php

@extends('layouts.app')
@section('title')统计@endsection

@section('content')
    <span id="nav2">
        @component('weight.menu')@endcomponent
    </span>
    <div class="d-none" id="statistics">
        <div class="container-fluid">
            <div class="">
                    <form  method="GET" action="{{url('package/statistics')}}" id="optionSubmit">
                        <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('package/statistics')}}"><span class="btn btn-warning text-dark">清除筛选</span></a>
                                    </div></td>
                            </tr>
                            <tr >
                                <td>
                                    <div class="form-inline pl-3" style="height: 100px">
                                        <div class="align-items-center">
                                            <div class="text-right form-inline">货主：
                                                <input type="text" style="width: 100px;opacity: 0.6" class="form-control form-control-sm tooltipTarget" placeholder="定位货主"
                                                       @input="owner_seek"
                                                       title="输入关键词快速定位下拉列表"></div>
                                        </div>


                                        <div style="max-height: 90px; overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;opacity:0.5;text-align: center;transform:scale(0.9)"  v-if="ownersCopy.length>0">
                                            <ul class="list-group tooltipTarget" id="seek" onselectstart="return false;">
                                                <li  title="单击添加货主"    v-for="ownerCopy in ownersCopy" :id="ownerCopy.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                                     @click="selectedOwner(ownerCopy)" :class="ownerCopy.style ? 'active' :''"><span style="cursor: default;" :id="ownerCopy.name">@{{ ownerCopy.name }}</span></li>
                                            </ul>
                                            <input hidden name="owner_id" :value="selectedOwners">
                                        </div>
                                    </div>
                                </td>
                                <td >
                                    <div class="form-inline pl-3" style="height: 100px">
                                        <div class="align-items-center ">
                                            <div class="text-right form-inline" >物流公司：
                                                <input type="text" style="width: 100px;opacity: 0.6" class="form-control form-control-sm tooltipTarget" placeholder="定位物流公司"
                                                       @input="logistic_seek"
                                                       title="输入关键词快速定位下拉列表"></div>
                                        </div>
                                        <div style="max-height: 90px;overflow-y: scroll;border: solid 1px #ddd;border-radius:5px;text-align: center;transform:scale(0.9)"  v-if="logisticsAll.length>0">
                                            <ul class="list-group tooltipTarget" onselectstart="return false;">
                                                <li  title="单击添加物流公司"   v-for="logistic in logisticsAll" class=" list-group-item list-group-item-action pt-0 pb-0"
                                                     @click="selectedLogistic(logistic)" :class="logistic.style ? 'active' :''" >
                                                    <span style="cursor: default;" :id="logistic.name">@{{ logistic.name }}</span></li>
                                            </ul>
                                            <input hidden name="logistic_id" :value="selectedLogistics">
                                        </div>
                                    </div>
                                </td>
                                <td  style="position: relative">
                                    <table class="table table-sm table-borderless">
                                        <tr>
                                            <td class="text-right" style="line-height: 60px">
                                                时间：
                                            </td>
                                            <td>
                                                <div class="form-inline">
                                                    <div class="form-group">
                                                        <input  style="width: 170px;transform:scale(0.8)" type="date" v-model="filterData.date_start" class="form-control" @change="makeFilterDuration">
                                                        <input id="hour_input" type="text" class="form-control"  placeholder="00:00" @change="makeFilterDuration" autocomplete="off"
                                                               @input="hourFilter($event)" v-model="inputtingAdd_start" style="transform:scale(0.8);width: 80px"
                                                               @keypress="hourFilter($event)" >
                                                        <input v-if="filterData.date_start" hidden  name="date_start" :value="filterData.date_start+' '+inputtingAdd_start">
                                                    </div>
                                                </div>
                                                <div class="form-inline">
                                                    <div class="form-group">
                                                        <input style="transform:scale(0.8);width: 170px"  type="date" v-model="filterData.date_end" class="form-control" @change="makeFilterDuration">
                                                        <input type="text" class="form-control"  placeholder="00:00" @change="makeFilterDuration" autocomplete="off"
                                                               @input="hourFilter($event)" v-model="inputtingAdd_end" style="transform:scale(0.8);width:80px"
                                                               @keypress="hourFilter($event)" >
                                                        <input v-if="filterData.date_end" hidden  name="date_end" :value="filterData.date_end+' '+inputtingAdd_end">
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center" colspan="2">
                                                <button class="btn btn-primary btn-sm pl-5 pr-5">提交</button>
                                            </td>
                                        </tr>
                                    </table>
                                    <span class="text-muted"
                                          style="position: absolute;  bottom: 48px;left:30px;transform: scale(0.65)" v-if="filterData.date_start || filterData.date_end">
                                        @{{ dateTime }}</span>

                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr></tr>
                            <tr>
                                <td colspan="3">
                                    <span class="dropdown">
                                        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" {{--:class="[rejectedBills_checkBoxes.length>0?'btn-dark text-light':'']"--}}
                                        data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                                            导出Excel
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item"  @click="statisticExport(1)" href="javascript:">导出勾选内容</a>
                                            <a class="dropdown-item"  @click="statisticExport(2)" href="javascript:">导出所有页</a>
                                        </div>
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </form>
                <div class="">
                    <table class="table table-striped table-sm text-nowrap table-hover">
                        <tr>
                            <th>
                                <label for="all">
                                    <input id="all" type="checkbox" @click="checkAll($event)">全选
                                </label>
                            </th>
                            <th>货主</th>
                            <th>总计</th>
                            <th v-for="logistic in logisticsAll" v-if="logistics[logistic.id]">@{{ logistic.name }}</th>
                        </tr>
                        <tr v-for="ownerModel in ownersModel">
                            <td>
                                <input class="checkItem" type="checkbox" :value="ownerModel.id" v-model="checkData">
                            </td>
                            <th class="text-muted">@{{ ownerModel.name }}</th>
                            <td><p v-if="ownerModel.sum">@{{ ownerModel.sum }}</p><p v-else>0</p></td>
                            <td class="text-muted" v-for="logistic in logisticsAll" v-if="logistics[logistic.id]"><p v-if="ownerModel.logistics[logistic.id]">@{{ ownerModel.logistics[logistic.id] }}</p>
                                <p v-else>0</p></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#statistics",
            data:{
                packages:[
                        @foreach($packages as $package)
                    {owner_id:'{{$package->owner_id}}',logistic_id:'{{$package->logistic_id}}',count:'{{$package->count}}',
                        owner_name:'',logistic_name:''},
                    @endforeach
                ],
                owners:{
                    @foreach($owners as $owner)
                    '{{$owner->id}}' : "{{$owner->name}}",
                    @endforeach
                },
                logisticsAll:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}', name: '{{$logistic->name}}',style:false},
                    @endforeach
                ],
                ownersCopy:[
                        @foreach($owners as $owner)
                    {id:'{{$owner->id}}',name:"{{$owner->name}}",style:false},
                    @endforeach
                ],
                logistics:[],
                ownersModel:[],
                filterData:
                    {date_start:'',date_end:''},
                selectedOwners:[],
                selectedLogistics:[],
                checkData:[],
                checkSign:'',
                inputtingAdd_start:'',
                inputtingAdd_end:'',
                dateTime:'',
            },
            computed:{
                isBeingFilterConditions:function(){
                    for(let key in this.filterData){
                        if(this.filterData[key]){
                            return true
                        }
                    }
                    if (this.selectedOwners.length>0||this.selectedLogistics.length>0){
                        return  true;
                    }
                    return false;
                },

            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.ownersModel.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted:function(){
                let _this=this;
                let owners=this.owners;

                this.packages.forEach(function (package){
                    if (owners[package.owner_id]){
                        package.owner_name=owners[package.owner_id];
                    }

                    let isEvery=true;
                    if (_this.ownersModel) {
                        isEvery=_this.ownersModel.every(function (ownerModel) {
                            if (ownerModel.name==package.owner_name){
                                ownerModel.logistics[package.logistic_id]=package.count;
                                ownerModel.sum=parseInt(ownerModel.sum)+parseInt(package.count);
                                return false;
                            }
                            return true;
                        });
                    }
                    if (isEvery){
                        let obj={};
                        _this.logisticsAll.every(function (logistic) {
                            if (logistic.id==package.logistic_id) {
                                obj[package.logistic_id]=package.count;
                                return false;
                            }
                            return true;
                        });
                        _this.ownersModel.push({'id':package.owner_id,'name':package.owner_name,'sum':package.count,'logistics':obj,});
                    }
                });
                this.initInputs();
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#statistics').removeClass('d-none');
                this.makeFilterDuration();
            },
            methods: {
                makeFilterDuration(){
                    let date=new Date();
                    let thisDate=this.getDate(date);
                    let startTime=this.inputtingAdd_start;
                    let endTime=this.inputtingAdd_end;
                    let endDate=this.filterData.date_end;
                    let startDate=this.filterData.date_start;
                    if (this.filterData.date_start && !this.inputtingAdd_start)  startTime="00:00";
                    if (this.filterData.date_end && !this.inputtingAdd_end)  endTime="23:59";
                    if (this.filterData.date_start && !this.filterData.date_end) endDate=thisDate;
                    if (this.filterData.date_end && !this.filterData.date_start) startDate="2000-01-01 00:00";
                    this.dateTime="选择区间："+startDate+" "+startTime+" 至 "+endDate+" "+endTime;
                },
                getDate(date){
                    let da=[
                        date.getFullYear(),
                        date.getMonth()+1,
                        date.getDate(),
                        date.getHours(),
                        date.getMinutes(),
                    ]
                    return da.slice(0,3).join("-")+" "+
                        da.slice(3).join(":");
                },
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(location.href).split("?");
                    let isLogistic=true;
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.every(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            if (key!='owner_id'||key!='logistic_id') {
                                decodeURI(data.filterData[key]=val);
                            }
                            let str=unescape(val);
                            let strs=new Array();
                            strs=str.split(",");
                            if (key=='owner_id' && val){
                                for (let i=0;i<strs.length;i++){
                                    data.selectedOwners.push(strs[i]);
                                    data.ownersCopy.every(function (ownerCopy) {
                                        if (strs[i]==ownerCopy.id){
                                            ownerCopy.style=true;
                                            return false;
                                        }
                                        return  true;
                                    });
                                }
                            }
                            if (key=='logistic_id' && val){
                                for (let i=0;i<strs.length;i++){
                                    data.selectedLogistics.push(strs[i]);
                                    data.logisticsAll.every(function (logistic) {
                                        if (strs[i]==logistic.id){
                                            logistic.style=true;
                                            return false;
                                        }
                                        return  true;
                                    });
                                }
                                {{--URL有参数且有logistic字段 --}}
                                let logistics=data.selectedLogistics;
                                if (logistics.length>0){
                                    for (let i=0;i<logistics.length;i++){
                                        data.logisticsAll.every(function (logistic) {
                                            if (logistic.id==logistics[i]){
                                                data.logistics[logistic.id]=logistic.name;
                                                return false;
                                            }
                                            return  true;
                                        });
                                    }
                                }else{
                                    data.logisticsAll.every(function (logistic) {
                                        data.logistics[logistic.id]=logistic.name;
                                        return true;
                                    });
                                };
                                isLogistic=false;
                            }
                            if (key=='date_start'){
                                strs=str.split("+");
                                if (strs.length!=2) return;
                                data.filterData.date_start=strs[0];
                                data.inputtingAdd_start=strs[1];
                            }
                            if (key=='date_end'){
                                strs=str.split("+");
                                if (strs.length!=2) return;
                                data.filterData.date_end=strs[0];
                                data.inputtingAdd_end=strs[1];
                            }
                            return true;
                        });
                    }
                    {{--URL无参数以packages所存在物流公司为显示标准 --}}
                    if (uriParts.length<=1 || isLogistic){
                        data.packages.every(function (package) {
                            data.logisticsAll.every(function (logistic) {
                                if (package.logistic_id==logistic.id){
                                    data.logistics[logistic.id]=logistic.name;
                                    return false;
                                }
                                return  true;
                            });
                            return true;
                        });
                    }

                },
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.filterData.owner_id='';
                    else{
                        @foreach($owners as $owner)
                        if ("{{ $owner->name }}".includes($val)){
                            _this.filterData.owner_id="{{ $owner->id }}";
                            location.href="#{{$owner->name}}";
                        }
                        @endforeach
                    }
                    $(e.target).focus();
                },
                logistic_seek:function(e){
                    let _this=this;
                    let $val=e.target.value;
                    if($val){
                        _this.logisticsAll.every(function (logistic) {
                            let name=logistic.name;
                            if (name.includes($val)){
                                location.href="#"+logistic.name;
                                return false;
                            }
                            return true;
                        });
                    }
                    $(e.target).focus();
                },
                selectedOwner:function (e) {
                    let selectedOwners=this.selectedOwners;
                    let sign = true;
                    for (let i=0;i<selectedOwners.length;i++){
                        if (selectedOwners[i]==e.id){
                            selectedOwners.splice(i,1);
                            this.ownersCopy.every(function (ownerCopy) {
                                if (ownerCopy.id==e.id) {
                                    ownerCopy.style=false;
                                    return false;
                                }
                                return  true;
                            });
                            sign=false;
                            break;
                        }
                    }
                    if (sign) {
                        this.selectedOwners.push(e.id);
                        this.ownersCopy.every(function (ownerCopy) {
                            if (ownerCopy.id==e.id) {
                                ownerCopy.style=true;
                                return false;
                            }
                            return  true;
                        });
                    }
                },
                selectedLogistic:function (e) {
                    let selectedLogistics=this.selectedLogistics;
                    let sign = true;
                    for (let i=0;i<selectedLogistics.length;i++){
                        if (selectedLogistics[i]==e.id){
                            selectedLogistics.splice(i,1);
                            this.logisticsAll.every(function (logistic) {
                                if (logistic.id==e.id) {
                                    logistic.style=false;
                                    return false;
                                }
                                return  true;
                            });
                            sign=false;
                            break;
                        }
                    }
                    if (sign) {
                        this.selectedLogistics.push(e.id);
                        this.logisticsAll.every(function (logistic) {
                            if (logistic.id==e.id) {
                                logistic.style=true;
                                return false;
                            }
                            return  true;
                        });
                    }
                },
                checkAll(e){
                    if (e.target.checked){
                        this.ownersModel.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                statisticExport:function (e) {
                    if (e==1){
                        if (this.checkData&&this.checkData.length<=0){
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('没有勾选任何记录');
                            return;
                        }
                        location.href="{{url('package/statistics?checkSign=')}}"+this.checkData;
                    }else{
                        location.href="{{url('package/statistics?owner_id=')}}"+this.selectedOwners+
                            "&logistic_id="+this.selectedLogistics+"&date_start="+this.filterData.date_start
                            +"&date_end="+this.filterData.date_end+"&checkSign=-1";
                    }
                },
                hourFilter:function(e){
                    datetimeRelating.verifyTime(e);
                },
            }
        });
    </script>
@endsection