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 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>ID</th>
                        <th>货主</th>
                        <th>快递单号</th>
                        <th>波次号</th>
                        <th>订单号</th>
                        <th>物流公司</th>
                        <th>设备</th>
                        <th>重(KG)</th>
                        <th>长*宽*高(cm)</th>
                        <th>体积(cm³)</th>
                        <th>纸箱</th>
                        <th>状态</th>
                        <th>波次规则</th>
                        <th>称重时间</th>
                        <th>收件人</th>
                        <th>收件人电话</th>
                    </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 class="text-muted">@{{package.id}}</td>
                        <td>@{{package.ownerName}}</td>
                        <td>@{{package.logisticNumber}}</td>
                        <td class="text-muted">@{{package.batchNumber}}</td>
                        <td>@{{package.order_code}}</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>
                @if(isset($request))
                    {{$packages->appends($request)->links()}}
                @else
                    {{$packages->links()}}
                @endif
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200724.js')}}"></script>
    <script>
            @if(isset($request))
        let request={!! json_encode($request) !!};
        @endif
        new Vue({
            el:"#list",
            data:{
                packages:[
                        @foreach($packages as $package)
                    {id:'{{$package->id}}',ownerName:'{{$package->owner_name}}',logisticNumber:'{{$package->logistic_number}}'
                        ,wmsNumber:'{{$package->delivery_number}}',batchNumber:'{{$package->batch_number}}',batchRule:'{{$package->batch_rule}}'
                        ,recipient:'{{$package->recipient}}',recipientMobile:'{{$package->recipient_mobile}}',logisticName:'{{$package->logistic_name}}'
                        ,measuringMachineName:'{{$package->measuring_machine_name}}',
                        weight:'{{$package->weight}}', length:'{{$package->length}}',width:'{{$package->width}}',height:'{{$package->height}}',
                        bulk:'{{$package->bulk}}',paperBoxName:'{{$package->paperBox_name}}',
                        status:'{{$package->status}}',created_at:'{{$package->created_at}}',weighed_at:'{{$package->weighed_at}}',order_code:'{{$package->order_code}}'},
                    @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:'dataTime',tip:'选择显示指定日期的起始时间'},
                    {name:'owner_id',type:'search_select',tip:['',''],placeholder:['客户',''],data:_this.owners},
                    {name:'logistic_number',type:'input',tip:'快递单号：支持15内模糊搜索与15天外精确搜索',placeholder:'快递单号'},
                ],[
                    {name:'created_at_end',type:'dataTime',tip:'选择显示指定日期的结束时间'},
                    {name:'batch_number',type:'input',tip:'波次号：支持15内模糊搜索与15天外精确搜索',placeholder:'波次号'}
                ]];

                _this.form = new query({
                    el:'#form_div',
                    condition:data,
                });
                _this.form.init();
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.packages.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').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