baoshi-was/resources/views/customer/project/report.blade.php

@extends('layouts.app')
@section('title')
    客户管理-项目报表
@endsection
@section('content')
    @component('customer.project.menu')@endcomponent
    <div class="container-fluid card" id="container">
        <div id="form_div"></div>
        <div>
            <button type="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="reportExport(false)" href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="reportExport(true)" href="javascript:">导出所有页</a>
            </div>
        </div>
        <div>
            <label for="all" id="cloneCheckAll" class="d-none">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="d-none" id="headerRoll"></table>
            <table class="table table-sm table-striped table-hover" id="headerParent">
                <tr class="text-center">
                    <td colspan="2"></td>
                    <td colspan="7" class="bg-light-khaki">客户信息</td>
                    <td colspan="4" class="bg-light-info">盘点信息</td>
                    <td colspan="3" class="bg-light-cyanogen">账单信息</td>
                </tr>
                <tr class="text-nowrap" id="header"></tr>
            </table>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                reports : [],
                owners : [],
                workgroup : [],
                customers : [],
                status : [],
                checkData : [],
            },
            mounted(){
                let data=[
                    [
                        {name:'workgroup',type:'select',tip:'项目小组',placeholder: '项目小组',data:this.workgroup},
                        {name:'counting_month_start',type:'dateMonth',tip:'起始结算月'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的项目'],
                            placeholder:['项目','定位或多选项目'],data:this.owners},
                    ],[
                        {name:'customer_id',type:'select',tip:'客户',placeholder: '客户',data:this.customers},
                        {name:'counting_month_end',type:'dateMonth',tip:'结束结算月'},
                        {name:'status',type:'select',placeholder:'状态',data:this.status},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'operating',value: '操作', neglect: true},
                    {name:'index',value: '序号', neglect: true ,class:"bg-khaki"},
                    {name:'workgroup',value: '项目小组',class:"bg-khaki"},
                    {name:'customer',value: '客户',class:"bg-khaki"},
                    {name:'owner',value: '子项目',class:"bg-khaki"},
                    {name:'status',value: '状态',class:"bg-khaki"},
                    {name:'created_at',value: '创建日期',class:"bg-khaki"},
                    {name:'storage_duration',value: '在库时长',class:"bg-khaki"},
                    {name:'counting_month',value: '结算月', class:"bg-info"},
                    {name:'daily_average_order_amount',value: '日均单量', neglect: true, class:"bg-info"},
                    {name:'last_month_counting_area',value: '结算月上月盘点面积', neglect: true, class:"bg-info"},
                    {name:'current_month_counting_area',value: '结算月盘点面积', neglect: true, class:"bg-info"},
                    {name:'init_bill_amount',value: '初始账单金额', neglect: true, class:"bg-cyanogen"},
                    {name:'confirm_bill_amount',value: '确认账单金额', neglect: true, class:"bg-cyanogen"},
                    {name:'confirm_created_at',value: '确认日期', class:"bg-cyanogen"},
                ];
                let _this=this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.reports,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods : {
                reportExport(isAll){

                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.reports.forEach((el)=>{
                            if (this.checkData.indexOf(el.id) === '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
            }
        });
    </script>
@stop