baoshi-was/resources/views/waybill/waybillFinancialSnapshot/index.blade.php

@extends('layouts.app')
@section('title')财务报表@endsection

@section('content')
<div class="d-none" id="editingPanel">

    <div  class="card" id="nav2">
        @component('waybill.menu')@endcomponent

            <div class="container-fluid nav3">
                <div class="card menu-third" >
                    <ul class="nav nav-pills">
                        @can('财务报表-查询')
                            <li class="nav-item">
                                <a class="nav-link @if($type=='') active @endif" href="@if(!isset($excepted)) {{url('waybill/waybillFinancialSnapshot')}} @else {{url('waybill/waybillFinancialExcepted')}} @endif">全部</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if($type=='ZX') active @endif" href="@if(!isset($excepted)) {{url('waybill/waybillFinancialSnapshot?type=ZX')}} @else {{url('waybill/waybillFinancialExcepted?type=ZX')}} @endif">专线</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if($type=='ZF') active @endif" href="@if(!isset($excepted)) {{url('waybill/waybillFinancialSnapshot?type=ZF')}} @else {{url('waybill/waybillFinancialExcepted?type=ZF')}} @endif">直发车</a>
                            </li> @endcan

                    </ul>
                </div>
            </div>
    </div>
    <div class="card " style="width: 3500px">
    <form  method="get" action="@if(!isset($excepted))
    @if($type=='ZF'){{url('waybill/waybillFinancialSnapshot?type=ZF')}}@elseif($type=='ZX'){{url('waybill/waybillFinancialSnapshot?type=ZX')}}@else{{url('waybill/waybillFinancialSnapshot')}}@endif
    @else
    @if($type=='ZF'){{url('waybill/waybillFinancialExcepted?type=ZF')}}@elseif($type=='ZX'){{url('waybill/waybillFinancialExcepted?type=ZX')}}@else{{url('waybill/waybillFinancialExcepted')}}@endif
    @endif ">
    <div class="card-header form-inline">
        <label style="margin-left: 1%"> 开始日期：</label><input style="max-width: 200px" type="date" name="created_at_start" class="form-control form-control-sm"  v-model="filterData.created_at_start">
        <label style="margin-left: 1%"> 截至日期：</label><input style="max-width: 200px" type="date" class="form-control form-control-sm" name="created_at_end" v-model="filterData.created_at_end">
        <input type="text" hidden name="type" v-model="filterData.type" >
        <input type="submit" class="btn btn-sm btn-outline-dark ml-3" value="按条件搜索" >
    </div>
    </form>
<!-- 自定义内容区域 -->
<div>
    @if(!isset($excepted))
    <div class="card-header">
    <label>操作选定记录：</label>
        <span class="dropdown">
            <button class="btn btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark':'btn-outline-dark']"
                    data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                导出Excel
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" @click="waybillExport(1)" href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="waybillExport(2)" href="javascript:">导出所有页</a>
            </div>
        </span>
    </div>
    @endif
    @if(!isset($excepted))
        <label for="all" class="d-none" id="cloneCheckAll">
            <input id="all" type="checkbox" @click="checkAll($event)">全选
        </label>
    @endif
    <table class="d-none table table-bordered text-nowrap" id="headerRoll"></table>
    <table class="table  table-hover table-bordered text-nowrap " style="width: 1500px;height: auto" id="headerParent">
        <thead>
        <tr style="background: #E8E8E8;@if(isset($excepted)) color: red; @endif" id="header"></tr>
        </thead>
        <tbody>

        <tr v-for="(json_content,i) in json_contents" :style="{background:json_content.waybill.type=='直发车'?'#F8F8F8':''}">
            @if(!isset($excepted))
            <td>
                <input class="checkItem" type="checkbox" :value="json_content.waybill_id" v-model="checkData">
            </td>
            @endif
            <td>@{{ i+1 }}</td>
            <td>@{{json_content.waybill.type}}</td>
            <td>@{{json_content.waybill.waybill_number}}</td>
            <td><p v-if="json_content.waybill.owner">@{{json_content.waybill.owner.name}}</p></td>
            <td>@{{json_content.waybill.wms_bill_number}}</td>
            <td>@{{json_content.waybill.origination}}</td>
            <td>@{{json_content.waybill.destination}}</td>
            <td>@{{json_content.waybill.recipient}}</td>
            <td>@{{json_content.waybill.recipient_mobile}}</td>
            <td>@{{json_content.waybill.charge}}</td>
            <td>@{{json_content.waybill.ordering_remark}}</td>
            <td><p v-if="json_content.waybill.carrier">@{{json_content.waybill.carrier.name}}</p></td>
            <td>@{{json_content.waybill.carrier_bill}}</td>
            <td><p v-if="json_content.waybill.origination_city&&json_content.waybill.origination_city.name">@{{json_content.waybill.origination_city.name}}</p> </td>
            <td><p v-if="json_content.waybill.destination_city&&json_content.waybill.destination_city.name">@{{json_content.waybill.destination_city.name}}</p> </td>
            <td>@{{json_content.waybill.warehouse_weight}}&nbsp;<b>@{{json_content.waybill.warehouse_weight_unit_name}}</b></td>
            <td>@{{json_content.waybill.warehouse_weight_other}}&nbsp;<b>@{{json_content.waybill.warehouse_weight_unit_other_name}}</b></td>
            <td>@{{json_content.waybill.carrier_weight}}&nbsp;<b>@{{json_content.waybill.carrier_weight_unit_name}}</b></td>
            <td>@{{json_content.waybill.carrier_weight_other}}&nbsp;<b>@{{json_content.waybill.carrier_weight_unit_other_name}}</b></td>
            <td><p v-if="json_content.waybill.car_type">@{{json_content.waybill.car_type.name}}</p></td>
            <td>@{{json_content.waybill.car_owner_info}}</td>
            <td>@{{json_content.waybill.fee}}</td>
            <td>@{{json_content.waybill.pick_up_fee}}</td>
            <td>@{{json_content.waybill.other_fee}}</td>
            <td>@{{json_content.waybill.collect_fee}}</td>
            <td>@{{json_content.waybill.dispatch_remark}}</td>
            <td>@{{json_content.waybill.created_at}}</td>
            <td>
                <ul style="list-style: none">
                    <li  v-for="waybillAuditLog in json_content.waybill.waybill_audit_logs" v-if=waybillAuditLog.audit_stage==="运单阶段">@{{waybillAuditLog.user.name}}</li>
                </ul>
            </td>
            <td>
                <ul  style="list-style: none">
                    <li v-for="waybillAuditLog in json_content.waybill.waybill_audit_logs" v-if=waybillAuditLog.audit_stage==="调度阶段">@{{waybillAuditLog.user.name}}</li>
                </ul>
            </td>
            <td>@{{json_content.total_receivable}}</td>
            <td>@{{json_content.total_expense}}</td>
            <td>@{{json_content.gross_margin}}</td>
            <td>@{{Math.round(json_content.gross_profit_rate*100)}}%</td>

        </tr>

        </tbody>
    </table>
        <div class="text-info h5 btn btn">{{$waybillFinancialSnapshots->count()}}/{{$waybillFinancialSnapshots->total()}}</div>
    </div>
</div>

<!-- 分页  -->
<div>
    <div class="pull-right">
        {{$waybillFinancialSnapshots->render()}}
    </div>
</div>
</div>
@stop

@section('lastScript')
<script type="text/javascript" src="{{asset('js/queryForm/header200818a.js')}}"></script>
<script>
    let vue = new Vue({
        el:'#editingPanel',
        data:{
            json_contents:[
                @if(isset($waybillFinancialSnapshots))
                @foreach($waybillFinancialSnapshots as $waybillFinancialSnapshot)
                    {!!$waybillFinancialSnapshot->json_content!!},
                @endforeach
                @endif
            ],
            checkData:[],
            filterData:{
                created_at_start:'',created_at_end:'',type:'{{$type}}',
            },
        },
        watch:{
            checkData:{
                handler(){
                    if (this.checkData.length === this.json_contents.length){
                        document.querySelector('#all').checked = true;
                        document.querySelector('#all_temp').checked = true;
                    }else {
                        document.querySelector('#all').checked = false;
                        document.querySelector('#all_temp').checked = false;
                    }
                },
                deep:true
            },
        },
        mounted:function(){
            this.initInputs();
            $(".tooltipTarget").tooltip({'trigger':'hover'});
            $('#editingPanel').removeClass('d-none');
            let column = [
                @if(!isset($excepted)){name:'cloneCheckAll',customization:true,type:'checkAll',column:'waybill_id',
                    dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},@endif
                {name:'index',value: '序号', neglect: true},
                {name:'type',value: '运单类型', neglect: true},
                {name:'waybill_number',value: '运单号', neglect: true},
                {name:'owner',value: '货主', neglect: true},
                {name:'wms_bill_number',value: 'WMS单号', neglect: true},
                {name:'origination',value: '始发地', neglect: true},
                {name:'destination',value: '目的地', neglect: true},
                {name:'recipient',value: '收件人', neglect: true},
                {name:'recipient_mobile',value: '收件人电话', neglect: true},
                {name:'charge',value: '收费(元)', neglect: true},
                {name:'ordering_remark',value: '下单备注', neglect: true},
                {name:'carrier',value: '承运商', neglect: true},
                {name:'carrier_bill',value: '承运商单号', neglect: true},
                {name:'origination_city',value: '始发市', neglect: true},
                {name:'destination_city',value: '目的市', neglect: true},
                {name:'warehouse_weight',value: '仓库计数(抛)', neglect: true},
                {name:'warehouse_weight_other',value: '仓库计数二', neglect: true},
                {name:'carrier_weight',value: '承运商计数(抛)', neglect: true},
                {name:'carrier_weight_other',value: '承运商计数二', neglect: true},
                {name:'car_type',value: '车型', neglect: true},
                {name:'car_owner_info',value: '车辆信息', neglect: true},
                {name:'fee',value: '运费(元)', neglect: true},
                {name:'pick_up_fee',value: '提货费(元)', neglect: true},
                {name:'other_fee',value: '其他费用(元)', neglect: true},
                {name:'collect_fee',value: '到付金额(元)', neglect: true},
                {name:'dispatch_remark',value: '调度备注', neglect: true},
                {name:'created_at',value: '创建时间', neglect: true},
                {name:'user_name',value: '运单审核人', neglect: true},
                {name:'user_name_update',value: '调度审核人', neglect: true},
                {name:'total_receivable',value: '应收款', neglect: true},
                {name:'total_expense',value: '应付款', neglect: true},
                {name:'gross_margin',value: '毛利', neglect: true},
                {name:'gross_profit_rate',value: '毛利率', neglect: true},
            ];
            let _this = this;
            setTimeout(function () {
                let header = new Header({
                    el: "#header",
                    column: column,
                    data: _this.json_contents,
                    restorationColumn: 'id',
                    offset:0.5,
                    vue : vue,
                });
                header.init();
            },0);
        },
        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);
                        decodeURI(data.filterData[key]=val);
                    });
                }
            },
            checkAll(e){
                if (e.target.checked){
                    this.json_contents.forEach((el,i)=>{
                        if (this.checkData.indexOf(el.waybill_id) == '-1'){
                            this.checkData.push(el.waybill_id);
                        }
                    });
                }else {
                    this.checkData = [];
                }
            },
            waybillExport(e){
                let val=e;
                let data=this.filterData;
                if (val==1) {
                    if (this.checkData.length <= 0) {
                        tempTip.setDuration(4000);
                        tempTip.showSuccess('没有勾选任何记录');
                    } else {
                        location.href = "{{url('waybillFinancialSnapshot/export')}}/" + this.checkData;
                    }
                }else {
                    location.href = "{{url('waybillFinancialSnapshot/export/-1?created_at_start=')}}"+
                        data.created_at_start+"&created_at_end="+data.created_at_end;
                }
            },
        }
    })

</script>
@stop