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 class="">
                <div>
                    <form  method="GET" action="{{url('package/')}}" id="optionSubmit">
                        <table class="table  table-sm table-bordered text-nowrap mb-0">
                            <tr v-if="isBeingFilterConditions">
                                <td colspan="10"><div class="col" style="padding:0">
                                        <a  href="{{url('package')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                                    </div></td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="text-muted">每页显示记录：</span>
                                </td>
                                <td  colspan="9">
                                    <select name="paginate" v-model="filterData.paginate" class="tooltipTarget form-control-sm" style="vertical-align: middle" @change="setPaginate">
                                        <option value="50">50行</option>
                                        <option value="100">100行</option>
                                        <option value="200">200行</option>
                                        <option value="500">500行</option>
                                        <option value="1000">1000行</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td rowspan="2">
                                    <span class="text-muted">根据条件过滤：</span>
                                </td>
                                <td >
                                    <input style="width: 150px" name="created_at_start" type="date" v-model="filterData.created_at_start" :class="filterData.created_at_start?'bg-warning':''" class="form-control-sm tooltipTarget" title="选择显示指定日期的起始时间">

                                </td>
                                <td>
                                    <input type="text" class="form-control-sm tooltipTarget" placeholder="客户"
                                           style="width:70px" @input="owner_seek"
                                           title="输入关键词快速定位下拉列表，回车确定">
                                    <select name="owner_id" id="owner_id" :class="filterData.owner_id?'bg-warning':''" v-model="filterData.owner_id" @change="setOwner"
                                            class="form-control-sm tooltipTarget"  title="选择要显示的客户">
                                        @foreach($owners as $owner)
                                            <option value="{{$owner->id}}">{{$owner->name}}</option>
                                        @endforeach
                                    </select>
                                    <input hidden type="submit" >
                                </td>

                                <td >
                                    <input :class="filterData.logistic_number?'bg-warning':''" type="text" title="支持15内模糊搜索与15天外精确搜索" name="logistic_number" class="form-control-sm  tooltipTarget" v-model="filterData.logistic_number" style="vertical-align: middle" placeholder="快递单号"></td>
                                <td >
                                    <input :class="filterData.delivery_number?'bg-warning':''" type="text" title="支持15内模糊搜索与15天外精确搜索" name="delivery_number" class="form-control-sm  tooltipTarget" v-model="filterData.delivery_number" style="vertical-align: middle" placeholder="发货单号"></td>
                                <td colspan="5"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input style="width: 150px" type="date" name="created_at_end" v-model="filterData.created_at_end" :class="filterData.created_at_end?'bg-warning':''" class="form-control-sm tooltipTarget" title="选择显示指定日期的结束时间">
                                </td>
                                <td >
                                    <input type="text" title="支持15内模糊搜索与15天外精确搜索" name="batch_number" class="form-control-sm  tooltipTarget" v-model="filterData.batch_number"  :class="filterData.batch_number?'bg-warning':''" style="vertical-align: middle" placeholder="波次号"></td>
                            </tr>
                            <tr>
                                <td>
                                    <span class="text-muted">操作选定记录：</span>
                                </td>
                                <td colspan="9">
                                    <span class="dropdown">
                                        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData>0?'btn-dark text-light':'']"
                                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                                            导出Excel
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" @click="packageExport(1)" href="javascript:">导出勾选内容</a>
                                            <a class="dropdown-item" @click="packageExport(2)" href="javascript:">导出所有页</a>
                                        </div>
                                    </span>
                                    <input hidden type="submit" >
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <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>重(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 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>
    </div>
@endsection

@section('lastScript')
    <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}}'},
                    @endforeach
                ],
                i:0,
                owners:[
                        @foreach($owners as $owner)
                    {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                filterData:
                    {paginate:'50',created_at_start:'',created_at_end:'',logistic_number:'',delivery_number:'',owner_id: '',batch_number:''},
                checkData:[]
            },
            mounted:function(){
                this.initInputs();
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.packages.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            computed:{
                isBeingFilterConditions:function(){

                    for(let key in this.filterData){
                        if(this.filterData[key]){
                            if(key==='paginate')continue;
                            return true
                        }
                    }
                    return false;
                },

            },
            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);
                            $('select[name="'+key+'"]').val(val);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                setPaginate:function(e){
                    this.filterData.paginate=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setOwner:function (e){
                    this.filterData.owner_id=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                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(e){
                    let val=e;
                    let data=this.filterData;
                    if (val==1){
                        if (this.checkData&&this.checkData.length<=0){
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('没有勾选任何记录');
                        }else{
                            location.href="{{url('package/export').'/'}}"+this.checkData;
                        }
                    } else {
                        location.href="{{url('package/export/-1?created_at_start=')}}"+
                            data.created_at_start+"&created_at_end="+data.created_at_end+"&logistic_number="+
                            data.logistic_number+"&delivery_number="+data.delivery_number+"&owner_id="+data.owner_id+
                            "&batch_number="+data.batch_number;
                    }
                },
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.filterData.owner_id='';
                    else
                        _this.owners.forEach(function (owner) {
                            if (owner.name.includes($val)){
                                _this.filterData.owner_id=owner.id;
                            }
                        });
                },
            },
        });
    </script>
@endsection