baoshi-was/resources/views/waybill/index.blade.php

@extends('layouts.app')
@section('title')运输管理@endsection

@section('content')
    <div id="nav2">
        @component('waybill.menu')
        @endcomponent
    </div>
    <div class="container-fluid" style="min-width: 1500px;">
        <div class="d-none" id="list">
            <div class="container-fluid nav3">
                <div class="card menu-third" >
                    <ul class="nav nav-pills">
                        @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link @if($uriType=='') active @endif" href="{{url('waybill/index')}}">全部</a>
                        </li> @endcan
                        @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link @if($uriType=='专线') active @endif" href="{{url('waybill/index?uriType=专线')}}">专线</a>
                        </li> @endcan
                        @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link @if($uriType=='直发车') active @endif" href="{{url('waybill/index?uriType=直发车')}}">直发车</a>
                        </li> @endcan
                    </ul>
                </div>
            </div>
            <div id="form_div"></div>
            <span class="dropdown">
                <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="waybillExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="waybillExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            <div>
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
            </div>
            <label for="all" class="d-none" id="cloneCheckAll">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="table table-striped table-sm table-bordered table-hover text-nowrap d-none" id="headerRoll"></table>
            <table class="table table-striped table-sm table-bordered table-hover text-nowrap waybill-table" style="background: #fff;" id="headerParent">
                <tr>
                    <th class="table-header-layer-1" colspan="4"></th>
                    <th class="table-header-layer-1" colspan="11"><span class="fa fa-file-text-o"></span> 运单信息</th>
                    <th class="table-header-layer-1" colspan="12"><span class="fa fa-truck"></span> 运输信息</th>
                    <th class="table-header-layer-1" colspan="5"><span class="fa fa-rmb"></span> 费用信息
                    @can('运输管理-删除')
                        <th class="table-header-layer-1" colspan="1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                    @endcan
                </tr>
                <tr id="header"></tr>

                <tr v-for="(waybill,i) in waybills" :style="[{color:waybill.status=='待重审'?'red':''||waybill.status=='已完结'?'green':''},{'font-weight': waybill.id==selectedStyle?'bold':''}]"
                    :id="'waybill'+waybill.id" @click="selectedColor(waybill.id)" position="static" @mouseover="hidetop($event)" @mouseleave="showtop($event)">
                    <td>
                        <input class="checkItem" type="checkbox" :value="waybill.id" v-model="checkData">
                    </td>
                    <td>
                        <span v-if=waybill.status==="未审核"||waybill.status==="待重审">
                            @can('运输管理-运单审核')
                                <button class="btn btn-outline-primary btn-sm" @click="waybillAudit(waybill.id,waybill.waybill_number)">审核</button>
                            @endcan
                            @can('运输管理-编辑')
                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('waybill/waybillEdit')}}/'+waybill.id)">修改</a>
                            @endcan
                        </span>
                        <span v-if=waybill.status==="已审核">
                            @can('运输管理-调度')
                                <button class="btn btn-outline-secondary btn-sm" @click="waybillRetreatAudit(waybill.id,waybill.waybill_number)">取消审核</button>
                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('waybill')}}/'+waybill.id+'/edit')">调度</a>
                            @endcan
                        </span>
                        <span v-if=waybill.status==="待终审">
                            @can('运输管理-调度审核')
                                <button class="btn btn-outline-success btn-sm" @click="waybillEndAudit(waybill.id,waybill.waybill_number)">完结</button>
                            @endcan
                            @can('运输管理-调度')
                                <a target="_blank" class="btn btn-outline-secondary btn-sm" :href= "('{{url('waybill')}}/'+waybill.id+'/edit')">改调度</a>
                            @endcan
                        </span>
                    </td>
                    @can('运输管理-置顶')
                        <td class="td-warm text-muted" v-if="waybill.remark" style="height: 55px">
                            <button type="button" class="btn btn-sm btn-outline-danger " @click="cancelOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">取消</button>
                        </td>
                        <td v-else>
                            <button type="button" class="btn btn-sm btn-outline-secondary" @click="waybillOnTop($event)" :data_id="waybill.id"  style="opacity: 0.75">置顶</button>
                        </td>
                    @endcan
                    <td :class="[waybill.status=='已审核'?'text-success':'']">@{{waybill.status}}</td>
                    <td class="td-warm text-muted toptd" >
                        <div v-if="waybill.remark" class="bg-light-yellow  text-danger top"  data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1"
                        >置顶备注：@{{  waybill.remark }}</div>
                        @{{ i+1 }}</td>
                    <td class="td-warm text-muted">@{{waybill.created_at}}</td>
                    <td class="td-warm">@{{waybill.type}} <span class="badge badge-sm bg-warning" v-if="waybill.collect_fee">到付</span></td>
                    <td class="td-warm">@{{waybill.owner}}</td>
                    <td class="td-warm toptd" :title="waybill.remark? '置顶备注：'+waybill.remark :''">@{{waybill.source_bill}}</td>
                    <td class="td-warm" >@{{waybill.wms_bill_number}}</td>
                    <td class="td-warm">@{{waybill.waybill_number}}</td>
                    @can('运输管理-运单编辑')
                    <td class="td-warm" >
                        <span v-if="waybill.charge" class="btn-sm btn-outline-secondary btn" @click="waybillChargeCheck($event)" :data_id="waybill.id">@{{waybill.charge|money}}</span>
                        <input v-else type="number" class="form-control form-control-sm" @blur="addWaybillCharge($event)" onfocus="$(this).css('width','85px')" :value="waybill.charge" :data_id="waybill.id" >
                        <input type="number" class="form-control form-control-sm"  @blur="updateWaybillCharge($event)" :value="waybill.charge" :data_id="waybill.id" style="min-width:85px;display: none">
                    </td>
                        @else
                        <td class="td-warm" ><span v-if="waybill.charge">@{{waybill.charge|money}}</span></td>
                    @endcan
                    <td class="td-warm">@{{waybill.other_charge}}</td>
                    <td class="td-warm">@{{waybill.other_charge_remark}}</td>
                    <td class="td-warm">
                        <div align="center" @mouseleave="removeCommonImg('common_img_'+waybill.id)" @mouseenter="commonImg('img_'+waybill.id,waybill.url,waybill.suffix)">
                            <img v-if="waybill.url" :id="'img_'+waybill.id"  :data-src="waybill.url+'-thumbnail.'+waybill.suffix" src="{{url('icon/img404-thumbnail.jpg')}}">
                            @can('运输管理-图片上传')<div v-if="!waybill.url">
                                <input class="btn  btn-sm btn-outline-secondary" type="button" @click="certiimg(waybill.waybill_number)" value="上传照片 "/>
                                <input type="file" @change="submitFile($event,waybill.waybill_number)" :id="waybill.waybill_number"
                                       style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
                            </div>@endcan
                        </div>
                    </td>
                    <td class="td-cool">@{{waybill.recipient}}</td>
                    <td class="td-cool">@{{waybill.recipient_mobile}}</td>
                    <td class="td-cool text-muted">@{{waybill.origination}}</td>
                    <td class="td-cool text-muted">@{{waybill.destination}}</td>
                    <td class="td-cool">@{{waybill.carrier}}</td>
                    <td class="td-cool"><span v-if="waybill.type==='专线'">@{{waybill.carrier_bill}}</span>
                        <span v-if="waybill.type==='直发车'">
                            <span v-if="waybill.carType">@{{ waybill.carType.name }}<i v-if="waybill.carType.length">(@{{waybill.carType.length}}米)</i></span></span></td>
                    <td class="td-cool"><span v-if="waybill.warehouse_weight">@{{waybill.warehouse_weight|filterZero}}  @{{waybill.warehouse_weight_unit}}</span></td>
                    <td class="td-cool"><span v-if="waybill.carrier_weight">@{{waybill.carrier_weight|filterZero}}  @{{waybill.carrier_weight_unit}}</span></td>
                    <td class="td-cool text-center" style="position: relative" @mouseenter="btnRefreshWeightZoomOut(waybill)" @mouseleave="btnRefreshWeightZoomIn(waybill)">
                        <span v-if="waybill.warehouse_weight_other&&waybill.btn_refresh_weight=='zoomIn'"> @{{waybill.warehouse_weight_other}}  @{{waybill.warehouse_weight_unit_other}}</span>
                        <button type="button" class="btn btn-sm btn-outline-info" @click="refreshWaveHouseWeight(waybill.wms_bill_number)"
                                :style="[
                                {position:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'absolute':'static'},
                                {transform:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'scale(0.55)':'scale(1)'},
                                {right:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'-10px':'auto'},
                                {bottom:waybill.btn_refresh_weight&&waybill.btn_refresh_weight=='zoomIn'?'-6px':'auto'},
                                ]">刷新</button>
                    </td>
                    <td class="td-cool"><span v-if="waybill.carrier_weight_other">@{{waybill.carrier_weight_other|filterZero}}  @{{waybill.carrier_weight_unit_other}}</span></td>
                    <td class="td-cool"><span v-if="waybill.amount">@{{waybill.amount}} @{{waybill.amount_unit_name }}</span></td>
                    <td class="td-cool">@{{waybill.mileage|km}} </td>
                    @can('运输管理-可见费用项')
                        @can('运输管理-运费')
                            <td class="td-helpful" v-if="waybill.fee">
                                <span v-if="waybill.type==='专线'"></span>
                                <span v-else-if="waybill.fee" class="btn-sm btn-outline-secondary btn" @click="waybillFeeCheck($event)" :data_id="waybill.id">@{{waybill.fee|money}}</span>
                                <input type="number" class="form-control form-control-sm"  @blur="updateWaybillFee($event)" :value="waybill.fee" :data_id="waybill.id" style="min-width:85px;display: none">
                            </td>
                            <td class="td-helpful" v-else>
                                <span v-if="waybill.type==='专线'"></span>
                                <input v-else type="number" class="form-control form-control-sm" @blur="addWaybillFee($event)" onfocus="$(this).css('width','85px')" :value="waybill.fee" :data_id="waybill.id" >
                            </td>
                        @endcan
                        <td class="td-helpful">@{{waybill.pick_up_fee}}</td>
                        <td class="td-helpful">@{{waybill.other_fee}}</td>
                    @endcan
                    <td class="td-helpful">@{{waybill.deliver_at}}</td>
                    <td class="td-helpful"><span v-html="waybill.dispatch_remark"></span></td>
                    @can('运输管理-删除')
                        <td class="td-operation">
                            <button type="button" class="btn btn-outline-danger btn-sm" @click="waybillDestroy(waybill.id,waybill.waybill_number,i)">删</button>
                        </td>
                    @endcan
                </tr>
            </table>
            <div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">请输入置顶备注</h5>
                            <button type="button" class="close"  data-dismiss="modal" aria-label="Close" @click="changeRemark">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" class="form-control" id="onTopId">
                            <textarea type="text" class="form-control"  required id="remark" @change="changeRemark"  ></textarea>
                            <div class="invalid-feedback">
                                备注信息不能为空
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" @click="changeRemark" >关闭</button>
                            <button type="button" class="btn btn-sm btn-primary" @click="submitOnTop">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-info h5 btn btn">@{{ ((page-1)*paginate) + count }}/{{$waybills->total()}}</div>
            {{$waybills->appends($paginateParams)->links()}}
        </div>
    </div>

@endsection


@section('lastScript')
    <style type="text/css">
        @keyframes anima
        {
            from {
                opacity:0.1;
            }
            to{
                opacity:1;
            }
        }
        @-webkit-keyframes anima
        {
            from {
                opacity:0.75;
            }
            to{
                opacity:0.1;
            }
        }
        .bg-light-yellow{
            background: #fffff8;
        }
        .top{
            padding-top: 0px;
            padding-left: 10px;
            margin-top: -4px;
            margin-left: -5px;
            line-height: 55px;


            position: absolute;
            animation: anima;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(0,0,1,1);
            animation-direction: alternate;
            animation-play-state: running;

            -webkit-animation-name: anima;
            -webkit-animation-duration: 3s;
            -webkit-animation-timing-function:  cubic-bezier(0,0,1,1);
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
    </style>
    <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>
        let vue = new Vue({
            el:'#list',
            data:{
                waybills:[
                        @foreach($waybills as $waybill)
                    {
                        id:'{{$waybill->id}}',
                        created_at:'{{$waybill->created_at}}',
                        updated_at:'{{$waybill->updated_at}}',
                        url:'{{$waybill->uploadFile ? asset('/storage'.$waybill->uploadFile->url) : ''}}',
                        suffix:'{{$waybill->uploadFile ? $waybill->uploadFile->type : ''}}',
                        status:'{{$waybill->status}}',
                        type:'{{$waybill->type}}',
                        waybill_number:'{{$waybill->waybill_number}}',
                        owner:'{{$waybill->owner ? $waybill->owner->name : ''}}',
                        source_bill:'{{$waybill->source_bill}}',
                        wms_bill_number:'{{$waybill->wms_bill_number}}',
                        origination:'{{$waybill->origination}}',
                        destination:'{{$waybill->destination}}',
                        recipient:'{{$waybill->recipient}}',
                        recipient_mobile:'{{$waybill->recipient_mobile}}',
                        charge:'{{$waybill->charge}}',
                        ordering_remark:'{{$waybill->ordering_remark}}',
                        carrier:'{{$waybill->logistic ? $waybill->logistic->name : ''}}',
                        carrier_bill:'{{$waybill->carrier_bill}}',
                        origination_city:'{{$waybill->origination_city ? $waybill->origination_city->name : ''}}',
                        destination_city:'{{$waybill->destination_city ? $waybill->destination_city->name : ''}}',
                        warehouse_weight:'{{$waybill->warehouse_weight}}',
                        destination_province_name:'{{$waybill->destination_city ? ($waybill->destination_city->province ? $waybill->destination_city->province->name : '') : ''}}',
                        warehouse_weight_unit:'{{$waybill->warehouse_weight_unit ? $waybill->warehouse_weight_unit->name : ''}}',
                        carrier_weight:'{{$waybill->carrier_weight}}',
                        carrier_weight_unit:'{{$waybill->carrier_weight_unit ? $waybill->carrier_weight_unit->name : ''}}',
                        warehouse_weight_other:'{{$waybill->warehouse_weight_other}}',
                        warehouse_weight_unit_other:'{{$waybill->warehouse_weight_unit_other ? $waybill->warehouse_weight_unit_other->name : ''}}',
                        carrier_weight_other:'{{$waybill->carrier_weight_other}}',
                        carrier_weight_unit_other:'{{$waybill->carrier_weight_unit_other ? $waybill->carrier_weight_unit_other->name : ''}}',
                        amount_unit_name:'{{$waybill->amount_unit ? $waybill->amount_unit->name : ''}}',
                        other_charge:'{{$waybill->other_charge}}',
                        other_charge_remark:'{{$waybill->other_charge_remark}}',
                        mileage:'{{$waybill->mileage}}',
                        amount:'{{$waybill->amount}}',
                        @if($waybill->carType)carType:{!! $waybill->carType !!},car_owner_info:'{{$waybill->car_owner_info}}',@endif
                        @can('运输管理-可见费用项') fee:'{{$waybill->fee}}',
                        pick_up_fee:'{{$waybill->pick_up_fee}}',other_fee:'{{$waybill->other_fee}}',
                        collect_fee:'{{$waybill->collect_fee}}', @endcan
                        deliver_at:'{{$waybill->deliver_at}}',
                        dispatch_remark:'{{$waybill->dispatch_remark}}',
                        isBtn:false,
                        waybillAuditLogs:{!! $waybill->waybillAuditLogs !!},
                        btn_refresh_weight:'zoomIn',
                        remark:'{{$waybill->remark ?? ''}}',
                        test:{!! $waybill !!}
                    },
                    @endforeach
                ],
                checkData:[],
                selectedStyle:[],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                logistics:[
                        @foreach($logistics as $logistic)
                    {name:"{{$logistic->id}}",value:'{{$logistic->name}}'},
                    @endforeach
                ],
                status:[
                    {name:'未审核',value:'未审核'},
                    {name:'已审核',value:'已审核'},
                    {name:'待调度',value:'待调度'},
                    {name:'待终审',value:'待终审'},
                    {name:'已完结',value:'已完结'},
                ],
                isOut:false,
                isBlur:false,
                isOwnersBtn:false,
                imgs:'',
                is_ownerSelectShow:true,
                sum:{!! $waybills->total() !!},
                paginate : 50,
                page : Number('{{$waybills->currentPage()}}'),
                count : Number('{{$waybills->count()}}'),
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.waybills.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
                },

            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let waybill =  $('.table-header-layer-1')[1];
                $('.top').css('min-width', waybill.scrollWidth);
                this.imgs=Array.from(document.getElementById('list').querySelectorAll('img'));
                this.lazy();
                if (this.imgs&&this.imgs.length>0){
                    window.addEventListener('scroll',this.lazy)
                }
                let data=[
                    [
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'created_at_start',type:'time',tip:['选择显示指定日期的起始时间','选择显示指定日期的起始时间']},
                        {name:'origination',type:'input',tip:'始发地：可在左侧增加百分号(%)进行模糊搜索',placeholder: '始发地'},
                        {name:'carrier_bill',type:'input',tip:'承运商单号：可在左侧增加百分号(%)进行模糊搜索',placeholder: '承运商单号'},
                        {name:'status',type:'select',placeholder: '运单状态',data:this.status},
                        {name:'source_bill',type:'input',tip: '上游单号：可在左侧增加百分号(%)进行模糊搜索',placeholder: '上游单号'},
                    ],
                    [
                        {name:'wms_bill_number',type:'input',tip:'WMS单号：可在两侧增加百分号(%)进行模糊搜索',placeholder: 'WMS单号'},
                        {name:'created_at_end',type:'time',tip:['选择显示指定日期的结束时间','选择显示指定日期的结束时间']},
                        {name:'destination',type:'input',tip:'目的地：可在两侧增加百分号(%)进行模糊搜索',placeholder: '目的地'},
                        {name:'waybill_number',type:'input',tip:'运单号：可在两侧增加百分号(%)进行模糊搜索',placeholder: '运单号'},
                        {name:'logistic_id',type:'select',placeholder: '承运商',data:this.logistics},
                    ],
                ];
                let param=[];
                this.$set(param,"uriType",'{{$uriType}}');
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                    param:param,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    @can('运输管理-编辑','运输管理-运单审核','运输管理-调度','运输管理-编辑')
                    {name:'operation',value: '操作', neglect: true, class:"td-operation"},@endcan
                    {name:'onTop',value: '置顶', neglect: true, class:"td-operation"},
                    {name:'status',value: '状态', class:"td-operation"},
                    {name:'index',value: '序号', neglect: true, class:"td-warm"},
                    {name:'created_at',value: '创建时间', class:"td-warm"},
                    {name:'type',value: '运单类型', class:"td-warm"},
                    {name:'owner',value: '货主', class:"td-warm"},
                    {name:'source_bill',value: '上游单号', class:"td-warm"},
                    {name:'wms_bill_number',value: 'WMS订单号', class:"td-warm"},
                    {name:'waybill_number',value: '运单号', class:"td-warm"},
                    {name:'charge',value: '运输收费', neglect: true, class:"td-warm"},
                    {name:'other_charge',value: '其他收费', neglect: true, class:"td-warm"},
                    {name:'other_charge_remark',value: '其他收费备注', class:"td-warm"},
                    @can('运输管理-图片上传'){name:'img',value: '照片', neglect: true, class:"td-warm"},@endcan
                    {name:'recipient',value: '收件人', class:"td-cool"},
                    {name:'recipient_mobile',value: '收件人电话', class:"td-cool"},
                    {name:'origination',value: '始发地', class:"td-cool"},
                    {name:'destination',value: '目的地', class:"td-cool"},
                    {name:'carrier',value: '承运商', class:"td-cool"},
                    {name:'carrier_bill',value: '单号/车型', neglect: true, class:"td-cool"},
                    {name:'warehouse_weight',value: '仓库计抛', neglect: true, class:"td-cool"},
                    {name:'carrier_weight',value: '承运商计抛', neglect: true, class:"td-cool"},
                    {name:'warehouse_weight_other',value: '仓库计重', neglect: true, class:"td-cool"},
                    {name:'carrier_weight_other',value: '承运商计重', neglect: true, class:"td-cool"},
                    {name:'amount',value: '计件', neglect: true, class:"td-cool"},
                    {name:'mileage',value: '里程', neglect: true, class:"td-cool"},
                    @can('运输管理-运费'){name:'fee',value: '运费', neglect: true, class:"td-helpful"},@endcan
                    {name:'pick_up_fee',value: '提货费', neglect: true, class:"td-helpful"},
                    {name:'other_fee',value: '其他支出', neglect: true, class:"td-helpful"},
                    {name:'deliver_at',value: '发货时间', class:"td-helpful"},
                    {name:'dispatch_remark',value: '调度备注', class:"td-helpful"},
                    @can('运输管理-删除'){name:'remove',value: '操作', neglect: true, class:"td-delete"},@endcan
                ];
                let _this = this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.waybills,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue : vue,
                    });
                    header.init();
                },0);
                this.paginate = $("#paginate").val();
            },
            methods:{
                btnRefreshWeightZoomIn(waybill){
                    waybill.btn_refresh_weight='zoomIn'
                },
                btnRefreshWeightZoomOut(waybill){
                    waybill.btn_refresh_weight='zoomOut'
                },
                lazy(){
                    //可视区域高度
                    let height=window.innerHeight;
                    //滚动区域高度
                    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
                    let _this=this;
                    this.imgs.forEach(function (img,i) {
                        if ((height+scrollHeight)>$('#'+img.getAttribute('id')).offset().top && img.getAttribute('data-src')){
                            let temp=new Image();
                            temp.src=img.getAttribute('data-src');
                            temp.onload=function () {
                                img.src=img.getAttribute('data-src');
                                _this.$delete(_this.imgs,i);
                            }
                        }
                    });
                },
                waybillAudit(id,waybill_number){
                    if(!confirm('确定要通过“'+waybill_number+'”的审核吗？')){return};
                    let _this=this;
                    let w;
                    let url = '{{url('waybill/waybillAudit')}}';
                    axios.post(url, {id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (waybill) {
                                        if (waybill.id===id){
                                            waybill.status=response.data.status;
                                            waybill.waybillAuditLogs.push(response.data.waybillAuditLog);
                                            w=waybill.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核'+w+'成功!');
                                }else if (response.data.exception!=null){
                                    tempTip.setDuration(3000);
                                    tempTip.show(response.data.exception);
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.show('审核失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('审核失败,网络连接错误!'+err);
                    });
                },
                {{--waybillUpdate(id){--}}
                {{--    location.href="{{url('waybill/waybillEdit')}}/"+id;--}}
                {{--},--}}
                // 软删除
                waybillDestroy(id,waybill_number,index){
                    if(!confirm('确定要删除运单号为：“'+waybill_number+'”的运单吗？')){return};
                    let url = '{{url('waybill')}}/'+id;
                    let _this = this;
                    axios.delete(url).then(
                        function (response) {
                            if(!response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.show('运单:'+waybill_number+'删除失败!');
                            }else {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('运单:'+waybill_number+'删除成功!');
                                _this.$delete(_this.waybills,index);
                            }
                        }
                    ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('删除失败,网络链接错误！'+err);
                    });

                },
                waybillRetreatAudit(id,waybill_number){
                    if(!confirm('确定要驳回“'+waybill_number+'”的审核吗？')){return};
                    let _this=this;
                    let w;
                    let url='{{url('files')}}';
                    axios.post(url,{id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (waybill){
                                        if (waybill.id===id){
                                            waybill.status=response.data.status;
                                            waybill.waybillAuditLogs=[];
                                            w=waybill.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(w+'审核驳回成功!');
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.show('审核驳回失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('审核驳回失败,网络连接错误!'+err);
                    });
                },
                {{--job(id){--}}
                {{--    location.href="{{url('waybill')}}/"+id+"/edit";--}}
                {{--},--}}
                waybillEndAudit(id,waybill_number){
                    if(!confirm('确定要通过“'+waybill_number+'”的终审吗？')){return};
                    let _this=this;
                    let w;
                    let url='{{url('waybill/waybillEndAudit')}}';
                    axios.post(url, {id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (s) {
                                        if (s.id===id){
                                            s.status=response.data.status;
                                            s.waybillAuditLogs.push(response.data.waybillAuditLog);
                                            w=s.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(w+'终审完毕!');
                                }else if (response.data.exception!=null){
                                    tempTip.setDuration(3000);
                                    tempTip.show(response.data.exception);
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.show('终审失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('终审失败,网络连接错误!'+err);
                    });
                },
                checkAll(e){
                    if (e.target.checked){
                        this.waybills.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                waybillExport(checkAllSign){
                    let url = '{{url('waybill/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
                selectedColor(id){
                    if (id==this.selectedStyle){
                        this.selectedStyle='';
                        return;
                    }
                    this.selectedStyle=id;
                },
                mouseleaveOwner:function () {
                    if(!this.isOut&&!this.isBlur){
                        this.isOwnersBtn=false;
                    }
                },
                blurOwner:function () {
                    if (!this.isOut&&!this.isBlur){
                        this.isOwnersBtn=false;
                    }
                },
                certiimg(waybill_number){
                    $('#'+waybill_number).click();
                },
                submitFile(e,waybill_number){
                    let file=e.target.files[0];
                    if (file.size >=5242880){
                        tempTip.setDuration(3000);
                        tempTip.show("图片大小不能超过5MB！");
                        return;
                    }
                    let _this=this;
                    let formData=new FormData();
                    formData.append("file",file);
                    formData.append("waybill_number",waybill_number);
                    axios.post('{{url('waybill/upload')}}',formData)
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(4000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            _this.waybills.some(function (waybill) {
                                if (waybill.waybill_number===waybill_number){
                                    waybill.url=response.data.data.url;
                                    waybill.suffix=response.data.data.type;
                                    setTimeout(function () {
                                        _this.imgs.push(document.getElementById('img_'+waybill.id));
                                        _this.lazy();
                                    },1);
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess("上传成功!");
                                    return true;
                                }
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show("网络错误："+err);
                    })
                },
                commonImg(id,url,suffix){
                    $('#'+id).after(
                        "<div id=\"common_"+id+"\" style='position: absolute;padding-top: 2px;z-index: 99'>" +
                        "<div style='position:absolute'>"+
                        "<div >"+
                        "<a target='_blank' href='"+url+'-bulky.'+suffix+"'>" +
                        "<img src=\""+url+'-common.'+suffix+"\" style='position: relative;left:-50px;' >" +
                        "</a>" +
                        "</div>"+
                            @can('运输管理-图片删除')"<button type='button' class='btn btn-sm btn-danger' onclick='vueList.btnDeleteImg(this)' value='"+id+"' style='position: relative;float: right;margin-right: 51px;margin-top: -30px;' >删除</button>" +@endcan
                            "</div>"+
                        "</div>");
                },
                removeCommonImg(id){
                    $('#'+id).remove();
                },
                btnDeleteImg(e){
                    let idstr = $(e).val();
                    let id =  idstr.substr( idstr.indexOf('_')+1);
                    if (!confirm('确定要删除所选图片吗？'))return;
                    this.destroyImg([id]);
                },
                deleteImg(){
                    if (this.checkData.length <= 0) {
                        tempTip.setDuration(2000);
                        tempTip.showSuccess('没有勾选任何记录');
                        return;
                    }
                    if (!confirm('确定要删除所选图片吗？'))return;
                    this.destroyImg(this.checkData);
                },
                destroyImg(id){
                    let _this = this;
                    axios.post('{{url('waybill/deleteImg')}}',{'ids':id})
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(4000);
                                tempTip.show("删除失败");
                                return;
                            }
                            id.forEach(function (id) {
                                _this.waybills.some(function (waybill) {
                                    if (waybill.id===id){
                                        waybill.url='';
                                        return true;
                                    }
                                });
                            });

                            tempTip.setDuration(3000);
                            tempTip.showSuccess("删除成功!");
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show("网络错误："+err);
                    });
                },
                // 运输收费修改
                waybillChargeCheck:function (e) {
                    let target = $(e.target);
                    target.hide();
                    let input = target.next();
                    input.show();
                    input.focus();
                },
                // 运输收费失焦事件
                updateWaybillCharge:function (e) {
                    let target = $(e.target);
                    let _this = this;
                    let span = target.prev();
                    let id = target.attr('data_id');
                    let oldCharge = span.text();
                    let charge = target.val();
                    if(charge !== span.text()){
                        let ajaxUrl= '{{url("apiLocal/waybill/changeCharge")}}';
                        axios.post(ajaxUrl,{'id':id,'charge':charge}).then(function (response) {
                            if(response.data.success){
                                _this.updateWaybill(id,charge);
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('运输收费修改成功');
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('运输收费修改失败!'+response.data.fail_info);
                                _this.updateWaybill(id,oldCharge);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('运输收费修改失败!网络异常：'+err);
                            _this.updateWaybill(id,oldCharge);
                        });
                    }
                    span.show();
                    target.hide();
                },
                // 为运单添加运输收费
                addWaybillCharge(e){
                    let target = $(e.target);
                    target.css('width','85px');
                    let _this = this;
                    let id = target.attr('data_id');
                    let charge = target.val();
                    console.log(charge);
                    let ajaxUrl= '{{url("apiLocal/waybill/changeCharge")}}';
                    if(charge === ''|| charge === null){
                        target.css('width','75px');
                        return;
                    }else{
                        axios.post(ajaxUrl,{'id':id,'charge':charge}).then(function (response) {
                            if(response.data.success){
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('运输收费添加成功');
                                _this.updateWaybill(id,charge);
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('运输收费添加失败!'+response.data.fail_info);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('运输收费添加失败！网络异常：'+err);
                        });
                        target.css('width','75px');
                    }
                },
                // 修改运输收费更新表格数据
                updateWaybill(id,newCharge){
                    this.waybills.some(function(waybill){
                        if(waybill.id === id){
                            waybill.charge = newCharge;
                            return true;
                        }
                    })
                },




                // 运费修改
                waybillFeeCheck:function (e) {
                    let target = $(e.target);
                    target.hide();
                    let input = target.next();
                    input.show();
                    input.focus();
                },
                // 失焦事件
                updateWaybillFee:function (e) {
                    let target = $(e.target);
                    let _this = this;
                    let span = target.prev();
                    let id = target.attr('data_id');
                    let oldFee = span.text();
                    let fee = target.val();
                    if(fee !== span.text()){
                        let ajaxUrl= '{{url("apiLocal/waybill/changeFee")}}';
                        axios.post(ajaxUrl,{'id':id,'fee':fee}).then(function (response) {
                            if(response.data.success){
                                _this.updateWaybills(id,fee);
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('运单运费修改成功');
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('运单运费修改失败!'+response.data.fail_info);
                                _this.updateWaybills(id,oldFee);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('运单运费修改失败!网络异常：'+err);
                            _this.updateWaybills(id,oldFee);
                        });
                    }
                    span.show();
                    target.hide();
                },
                // 为直发车运单添加运费
                addWaybillFee(e){
                    let target = $(e.target);
                    target.css('width','85px');
                    let _this = this;
                    let id = target.attr('data_id');
                    let fee = target.val();
                    let ajaxUrl= '{{url("apiLocal/waybill/changeFee")}}';
                    if(fee === ''|| fee === null){
                        target.css('width','75px');
                        return;
                    }else{
                        axios.post(ajaxUrl,{'id':id,'fee':fee}).then(function (response) {
                            if(response.data.success){
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('运单运费添加成功');
                                _this.updateWaybills(id,fee);
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('运单运费添加失败!'+response.data.fail_info);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('运单运费添加失败！网络异常：'+response.data.fail_info);
                        });
                        target.css('width','75px');
                    }
                },
                // 更新表格数据
                updateWaybills(id,newFee){
                    this.waybills.some(function(waybill){
                        if(waybill.id === id){
                            waybill.fee = newFee;
                            return true;
                        }
                    })
                },
                // 置顶操作
                waybillOnTop:function(e){
                    let target = $(e.target);
                    let id = target.attr('data_id');
                    $("#onTopId").val(id);
                    $('#exampleModal').modal('show');
                },
                submitOnTop:function(){
                    let ajaxUrl = '{{url('waybill/ontop/top')}}';
                    let remark =  $("#remark").val();
                    let id = $("#onTopId").val();
                    if(remark === ''){
                        $("#remark").focus();
                        $('#remark').addClass('is-invalid');
                    }else{
                        axios.post(ajaxUrl,{'id':id,'detail':remark}).then(function (response) {
                            if(response.data.success){
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('置顶成功');
                                $('#exampleModal').modal('hide');
                                setTimeout(function(){
                                        window.location.reload();
                                    }
                                    ,1000);
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('置顶失败!'+response.fail_info);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('置顶失败,网络连接错误!'+err);
                        });
                    }
                },
                changeRemark:function(){
                    $('#remark').removeClass('is-invalid');
                },
                cancelOnTop:function (e) {
                    let target = $(e.target);
                    let id = target.attr('data_id');
                    let ajaxUrl='{{url('waybill/ontop/cancel')}}';
                    if(id !== null){
                        axios.post(ajaxUrl,{'id':id}).then(function (response) {
                            if(response.data.success){
                                tempTip.setDuration(30000);
                                tempTip.showSuccess('取消置顶成功');
                                setTimeout(function(){
                                        window.location.reload();
                                    }
                                    ,1000);
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('取消置顶失败!'+response.fail_info);
                            }
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('取消置顶失败,网络连接错误!'+err);
                        });
                    }
                },
                hidetop:function(e) {
                    let target = $(e.target);
                    let top = target.parent().find('.top');
                    let tip = target.parent().find('.toptd');
                    top.hide();
                    tip.tooltip('show');
                },
                showtop:function(e){
                    let target = $(e.target);
                    let top = target.parent().find('.top');
                    let tip = target.parent().find('.toptd');
                    top.show();
                    tip.tooltip('hide');
                },
                refreshWaveHouseWeight(wms_bill_number) {
                    let _this=this;
                    let url='{{url('waybill/refreshWaveHouseWeight')}}';
                    axios.post(url,{'wms_bill_number':wms_bill_number}).then(function (response) {
                        if(response.data.success){
                            _this.waybills.every(function (waybill) {
                                if (waybill.wms_bill_number==wms_bill_number){
                                    waybill.warehouse_weight_other=response.data.warehouseWeight;
                                    return false;
                                }
                                return true;
                            });
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('刷新计重成功');
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show('刷新计重失败!'+response.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('刷新计重失败,网络连接错误!'+err);
                    });
                }
            },
            filters:{
                km:function(value){
                    if(!value)return '';
                    return value + ' km';
                },
                money:function(value){
                    if(value.indexOf('.')>0){
                        return value
                    }
                    return value += '.00';
                },
                filterZero:function(value){
                    value=value.replace(/\.00$/,'');
                    value=value.replace(/(\.[1-9])0$/,'$1');
                    return value;
                },
            }
        });
        // modal 隐藏时修改 input 为空
        $("#exampleModal").on('hide.bs.modal',function(e){
            $('#remark').val('');
        });

    </script>
@endsection