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

@extends('layouts.app')
@section('title')称重管理@endsection

@section('content')
    <span id="nav2">
        @component('weight.menu')@endcomponent
        @component('weight.package.menu')@endcomponent
    </span>
    <div class="d-none" id="list">
        <div class="container-fluid">
            <div id="form_div"></div>
            <span class="dropdown">
                <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget mt-1 mb-1" :class="[checkData.length>0?'btn-dark text-light':'']"
                        data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                    导出Excel
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" @click="packageExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="packageExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            <div>
                <label for="all" class="d-none" id="cloneCheckAll">
                    <input id="all" type="checkbox" @click="checkAll($event)">全选
                </label>
                <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
                <table class="table table-striped table-sm text-nowrap table-hover" id="headerParent">
                    <tr id="header"></tr>
                    <tr v-for="(package,i) in packages">
                        <td>
                            <input class="checkItem" type="checkbox" :value="package.id" v-model="checkData">
                        </td>
                        <td>@{{ i+1  }}</td>
                        <td>@{{package.ownerName}}</td>
                        <td>@{{package.logisticNumber}}</td>
                        <td class="text-muted">@{{package.batchNumber}}</td>
                        <td>@{{package.orderCode}}</td>
                        <td class="text-muted">@{{package.logisticName}}</td>
                        <td class="text-muted">@{{package.measuringMachineName}}</td>
                        <td>@{{package.weight}}</td>
                        <td>@{{package.length}}<a v-if="package.length" class="text-primary">*</a>@{{package.width}}<a class="text-primary" v-if="package.width">*</a>@{{package.height}}</td>
                        <td>@{{package.bulk}}</td>
                        <td>@{{package.paperBoxName}}</td>
                        <td :class="[package.status==='已上传'?'text-success':'']">@{{package.status}}</td>
                        <td class="text-muted">@{{package.batchRule}}</td>
                        <td class="text-muted">@{{package.weighed_at}}</td>
                        <td class="text-muted">@{{package.recipient}}</td>
                        <td class="text-muted">@{{package.recipientMobile}}</td>
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$packages->count()}}/{{$packages->total()}}</div>
                {{$packages->appends($paginateParams)->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
            @if(isset($request))
        let request={!! json_encode($request) !!};
        @endif
        let vue = new Vue({
            el:"#list",
            data:{
                packages:[
                        @foreach($packages as $package)
                    {id:'{{$package->id}}',ownerName:'{{$package->order ? ($package->order->owner ? $package->order->owner->name : '') : ''}}',
                        orderCode:'{{$package->order ? $package->order->code : ''}}',
                        logisticName:'{{$package->order ? ($package->order->logistic ? $package->order->logistic->name : '') : ''}}'
                        ,batchNumber:'{{$package->batch_number}}',batchRule:'{{$package->batch_rule}}',
                        recipient:'{{$package->order ? $package->order->consignee_name : ''}}',recipientMobile:'{{$package->order ? $package->order->consignee_phone : ''}}'
                        ,logisticNumber:'{{$package->logistic_number}}'
                        ,measuringMachineName:'{{$package->measuringMachine ? $package->measuringMachine->name : ''}}',
                        weight:'{{$package->weight}}', length:'{{$package->length}}',width:'{{$package->width}}',height:'{{$package->height}}',
                        bulk:'{{$package->bulk}}',paperBoxName:'{{$package->paperBox ? $package->paperBox->name : ''}}',
                        status:'{{$package->status}}',created_at:'{{$package->created_at}}',weighed_at:'{{$package->weighed_at}}',
                        paperBox : {!! $package->paperBox??'""' !!} },
                    @endforeach
                ],
                i:0,
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                checkData:[],
                form:'',
                sum:{!! $packages->total() !!},
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let _this = this;
                let data = [[
                    {name:'created_at_start',type:'dateTime',tip:'选择显示创建日期的起始时间'},
                    {name:'weighed_at_start',type:'dateTime',tip:'选择显示称重日期的起始时间'},
                    {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                        placeholder:['货主','定位或多选货主'],data:_this.owners},
                    {name:'logistic_number',type:'input',tip:'可支持多快递单号，糊模查找需要在左边打上%符号',placeholder:'快递单号'},
                ],[
                    {name:'created_at_end',type:'dateTime',tip:'选择显示创建日期的结束时间'},
                    {name:'weighed_at_end',type:'dateTime',tip:'选择显示称重日期的结束时间'},
                    {name:'batch_number',type:'input',tip:'波次号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'波次号'}
                ]];

                _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:'index',value: '序号', neglect: true},
                    {name:'ownerName',value: '货主'},
                    {name: 'logisticNumber', value: '快递单号'},
                    {name: 'batchNumber', value: '波次号'},
                    {name:'order_code',value: '订单号'},
                    {name: 'logisticName', value: '物流公司'},
                    {name: 'measuringMachineName', value: '设备'},
                    {name: 'weight', value: '重(KG)'},
                    {name:'length_width_height',value: '长*宽*高(cm)', neglect: true},
                    {name: 'bulk', value: '体积(cm³)'},
                    {name: 'paperBoxName', value: '纸箱'},
                    {name: 'status', value: '状态'},
                    {name:'batchRule',value: '波次规则'},
                    {name:'weighed_at',value: '称重时间'},
                    {name:'recipient',value: '收件人'},
                    {name:'recipientMobile',value: '收件人电话'},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.packages,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue : vue,
                    });
                    header.init();
                },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.packages.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
                }
            },
            methods:{
                checkAll(e){
                    if (e.target.checked){
                        this.packages.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                packageExport(checkAllSign){
                    let url = '{{url('package/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
            },
        });
    </script>
@endsection