baoshi-was/resources/views/rejected/search/analyze.blade.php

@extends('layouts.app')
@section('title')退货管理@endsection

@section('content')
    <div id="nav2">
        @component('rejected.menu')@endcomponent
        @component('rejected.search.menu')@endcomponent
    </div>
    <div class="container-fluid" id="list">
        <div id="form_div"></div>
        <span class="dropdown m-1">
            <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="exportExcel(false)"
                   href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="exportExcel(true)"
                   href="javascript:">导出所有页</a>
            </div>
        </span>
        <label id="cloneCheckAll" class="d-none">
            <input type="checkbox" class="form-control-sm tooltipTarget" title="全选"
                   id="checkSelectingAll" @click="checkBoxAllToggle($event)">
        </label>
        <table class="table table-striped table-sm table-bordered table-hover d-none" id="headerRoll"></table>
        <table class="table table-striped table-sm table-bordered table-hover" style="background: #fff;" id="headerParent">
            <tr id="header"></tr>
            <tr v-for="(rejectedBill,index) in rejectedBills " :data-id="rejectedBill.id">
                <td>
                    <input type="checkbox" v-model="rejectedBills_checkBoxes" :value="rejectedBill.id_owner">
                </td>
                <td class="text-muted" style="opacity:0.7">
                    @{{ index+1 }}
                </td>
                <td>
                    @{{ rejectedBill.owner_name }}
                </td>
                <td class="text-muted">
                    @{{ rejectedBill.bounce_amount }}
                </td>
                <td class="text-success font-weight-bold">
                    @{{ rejectedBill.check_amount }}
                </td>
                <td>
                    @{{ rejectedBill.bounce_amount-rejectedBill.check_amount }}
                </td>
                <td class="text-success font-weight-bold">
                    @{{ rejectedBill.in_storage_count }}
                </td>
                <td>
                    @{{ rejectedBill.not_in_storage_count }}
                </td>
            </tr>
        </table>
    </div>
@endsection

@section('lastScript')
    <script src="{{asset('js/queryForm/export200818a.js')}}"></script>
    <script src="{{asset('js/queryForm/queryForm200803a.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200818a.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#list",
            data:{
                rejectedBills : {!! $rejectedBills !!},
                checkBoxAll:[],
                sum : '{{count($rejectedBills)}}',
                rejectedBills_checkBoxes:[],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let data=[
                    [
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                    ],[
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                    ]
                ];
                this.form=new query({
                    el:"#form_div",
                    condition:data,
                    isPaginations:false,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id_owner',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'owner_name',value: '货主', neglect: true},
                    {name:'bounce_amount',value: '退件数', neglect: true, class:'text-muted'},
                    {name:'check_amount',value: '审核数', neglect: true, class:'text-success font-weight-bold'},
                    {name:'bounce_amount_check_amount',value: '未审核数', neglect: true},
                    {name:'in_storage_count',value: '入库数', neglect: true, class:'text-success font-weight-bold'},
                    {name:'not_in_storage_count',value: '未入库数', neglect: true},
                ];
                let _this = this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.rejectedBills,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue,
                        checkbox:'rejectedBills_checkBoxes',
                    });
                    header.init();
                },0);
            },
            watch:{
                rejectedBills_checkBoxes:{
                    handler(){
                        if (this.rejectedBills_checkBoxes.length === this.rejectedBills.length){
                            document.querySelector('#checkSelectingAll').checked = true;
                            document.querySelector('#checkSelectingAll_temp').checked = true;
                        }else {
                            document.querySelector('#checkSelectingAll').checked = false;
                            document.querySelector('#checkSelectingAll_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                checkBoxAllToggle:function(e){
                    if (e.target.checked) {
                        this.rejectedBills.forEach((el) => {
                            if (!el.id) this.rejectedBills_checkBoxes.push(el.id);
                            if (el.id && this.rejectedBills_checkBoxes.indexOf(el.id) == '-1') {
                                this.rejectedBills_checkBoxes.push(el.id);
                            }
                        });
                    } else {
                        this.rejectedBills_checkBoxes = [];
                    }
                },
                exportExcel:function(checkAllSign){
                    let url = '{{url('rejected/exportAnalyze')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.rejectedBills_checkBoxes,url,this.sum,token);
                },
            },
        });
    </script>
@endsection