baoshi-was/resources/views/order/tracking/index.blade.php

@extends('layouts.app')
@section('title')订单管理-跟踪@endsection
@section('content')
    @component('order.tracking.menu')@endcomponent
    <div class="container-fluid" id="tracking_div">
        <div style="min-width: 3000px">
            <div class="d-none container-fluid" id="list">
                <div id="form_div"></div>
                @can('订单管理-跟踪-监听')
                <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="pasteDataTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header row form-inline">
                                <input type="text" v-model="name" class="form-control form-control-sm col-5 offset-3" placeholder="搜索货主，点击下方块添加" />
                                <button class="btn btn-sm btn-info col-2" @click="seekOwner()">搜索</button>
                                <label class="col-2"></label>
                            </div>
                            <div class="modal-body container row" style="text-align:center">
                                <div class="col-2 mt-2" v-for="owner in owners">
                                    <div style="border: 1px solid #aac7ea;height: 80px;text-align: center;border-radius: 4px;cursor: pointer;align-content: center"
                                         :style="[{'background': trackingOwner.includes(Number(owner.name)) ? '#00FF00' : ''},
                                            {'box-shadow' : trackingOwner.includes(owner.name) ? '0px 0px 10px 5px rgba(0,0,0,0.9)' : ''}]"
                                         @click="addTrackingOwner(owner.name,owner.value)">@{{ owner.value }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endcan

                <div class="form-inline mt-1 ">
                    <span class="dropdown">
                        <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="exportSelect()" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="exportAll()" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                    @can('订单管理-跟踪-监听')
                    <button class="btn btn-outline-info btn-sm tooltipTarget ml-2" @click="openModal()">
                        管理监听货主
                    </button>
                    @endif
                </div>
                {{--<!-- table table-bordered table-hover  table-responsive-sm p-0 m-0-->--}}
                <table class="table table-sm table-striped table-bordered table-hover card-body p-0 m-0">
                    <tr class="text-center" >
                        <th>
                            <input id="all" type="checkbox" @click="checkAll($event)"/>
                        </th>
                        <th style="min-width: 50px">序号</th>
                        <th class="td-warm" style="min-width: 75px">公司</th>
                        <th class="td-warm" style="min-width: 120px">订单号</th>
                        <th class="td-warm" style="min-width: 120px">客户订单号</th>
                        <th class="td-warm" style="min-width: 120px">WEB+订单号</th>
                        <th class="td-warm" style="min-width: 120px"> 提货日期</th>
                        <th class="td-warm" style="min-width: 120px">销售</th>
                        <th class="td-yellow" style="min-width: 120px">客户</th>
                        <th class="td-yellow">SKU</th>
                        <th class="td-yellow">物料描述</th>
                        <th class="td-yellow" style="min-width: 75px">数量</th>
                        <th class="td-yellow" style="min-width: 120px">订单备注</th>
                        <th class="td-yellow" style="min-width: 75px">重量</th>
                        <th class="td-yellow" style="min-width: 75px">体积m³</th>
                        <th class="td-yellow" style="min-width: 120px">托盘合计</th>
                        <th class="td-yellow" style="min-width: 120px">运输方式</th>
                        <th class="td-yellow">运输单号</th>
                        <th class="td-yellow" style="min-width: 120px">到达城市</th>
                        <th class="td-yellow" style="min-width: 120px">照片</th>
                        <th class="td-calm" style="min-width: 200px">应送达时间</th>
                        <th class="td-calm" style="min-width: 120px">是否赶上卡班</th>
                        <th class="td-calm" style="min-width: 120px">到货情况</th>
                        <th class="td-calm" style="min-width: 200px">签收日期</th>
                        <th class="td-calm" style="min-width: 120px">签收单情况</th>
                        <th class="td-calm" style="min-width: 120px">备注</th>
                    </tr>
                    <tr v-for="(trackOrder,index) in trackOrders" class="table-body text-center"  :key="trackOrder.id">
                        <td>
                            <input id="all" type="checkbox" :value="trackOrder.id" v-model="checkData">
                        </td>
                        <td>@{{ index+1 }}</td>
                        <td class="text-decoration-none td-warm">@{{ trackOrder.ownerName }}</td>
                        <td class="td-warm">
                            <span v-if="trackOrder.web_order_number">
                                <input class="form-control form-control-sm" :value="trackOrder.order_client_code === trackOrder.web_order_number ? '' : trackOrder.order_client_code " @change="warehouseUpdate($event,'order_client_code',trackOrder)" >
                            </span>
                            <span v-else>@{{ trackOrder.order_client_code }}</span>
{{--                            <span v-else>--}}
{{--                            @can('订单管理-跟踪-仓库编辑')--}}
{{--                                <input class="form-control form-control-sm" :value="trackOrder.order_client_code" @change="warehouseUpdate($event,'order_client_code',trackOrder)" >--}}
{{--                            @else--}}
{{--                                <span> @{{ trackOrder.order_client_code }}</span>--}}
{{--                            @endcan--}}
{{--                            </span>--}}
                        </td>
                        <td class="td-warm">
                            @{{ trackOrder.order_client_code_wms }}
                        </td>

                        <td class="td-warm">
                            @can('订单管理-跟踪-仓库编辑')
                                <input class="form-control form-control-sm" :value="trackOrder.web_order_number" @change="warehouseUpdate($event,'web_order_number',trackOrder)" >
                            @else
                                @{{ trackOrder.web_order_number }}
                            @endcan
                        </td>
                        <td class="td-warm">
                            @can('订单管理-跟踪-仓库编辑')
                                <input class="form-control form-control-sm" type="datetime-local" :value="trackOrder.pick_up_at | dateLocal" @change="warehouseUpdate($event,'pick_up_at',trackOrder)" >
                            @else
                                @{{ trackOrder.pick_up_at }}
                            @endcan
                        </td>
                        <td class="td-warm">
                        </td>
{{--                        <td class="td-warm">--}}
{{--                            @can('订单管理-跟踪-仓库编辑')--}}
{{--                                <input class="form-control form-control-sm" :value="trackOrder.sale" @change="warehouseUpdate($event,'sale',trackOrder)" >--}}
{{--                            @else--}}
{{--                                @{{ trackOrder.sale }}--}}
{{--                            @endcan--}}
{{--                        </td>--}}
                        <td class="td-yellow">
                            @can('订单管理-跟踪-仓库编辑')
                                <input class="form-control form-control-sm" :value="trackOrder.client" @change="warehouseUpdate($event,'client',trackOrder)" >
                            @else
                                @{{ trackOrder.client }}
                            @endcan
                        </td>
                        <td class="td-yellow">@{{ trackOrder.sku.sku }}</td>
                        <td class="td-yellow" style="min-width: 120px">@{{ trackOrder.sku.skuName }}</td>
                        <td class="td-yellow">@{{ trackOrder.sku.skuAmount }}</td>
                        <td class="td-yellow " data-toggle="tooltip" >
                            @can('订单管理-跟踪-仓库编辑')
                                <input class="form-control form-control-sm" :value="trackOrder.order_remark" @change="warehouseUpdate($event,'order_remark',trackOrder)" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.order_remark">
                            @else
                                @{{ trackOrder.order_remark }}
                            @endcan
                        </td>
                        <td class="td-yellow">@{{ trackOrder.gross_weight }}</td>
                        <td class="td-yellow">@{{ trackOrder.bulk |millimeterToCubic}}</td>
                        <td class="td-yellow">
                            @can('订单管理-跟踪-仓库编辑')
                                <input class="form-control form-control-sm" :value="trackOrder.pallet_total" @change="warehouseUpdate($event,'pallet_total',trackOrder)" >
                            @else
                                @{{ trackOrder.pallet_total }}
                            @endcan
                        </td>
                        <td class="td-yellow">
                            <div v-if="trackOrder.logistic">
                                <span v-if="['新杰物流','新杰物流到付'].includes(trackOrder.logistic.name)">
                                    <button class="btn btn-md btn-outline-primary m-0 text-nowrap" @click="changeLogistic(trackOrder,$event)">
                                        @{{ trackOrder.logistic.name }}
                                    </button>
                                </span>
                                <span v-else>
                                    @{{ trackOrder.logistic.name }}
                                </span>
                            </div>

                        </td>
                        <td class="td-yellow">
                            <div v-if="!(trackOrder.packageLogisticNumber.includes('null_'))">
                                <span v-if="trackOrder.packageLogistic === '新杰物流' || trackOrder.packageLogistic === '新杰物流到付'">
                                    @{{ trackOrder.web_order_number ? trackOrder.web_order_number : trackOrder.order_client_code}}
                                </span>
                                <span v-else >
                                    @{{ trackOrder.packageLogisticNumber}}
                                </span>
                            </div>
                        </td>
                        <td class="td-yellow">@{{ trackOrder.orderCity}}</td>
                        <td class="td-yellow">
                            <div class="text-center" @mouseleave="removeCommonImg('common_img_'+trackOrder.id)" @mouseenter="commonImg('img_'+trackOrder.id,trackOrder)">
                            @can('订单管理-跟踪-物流公司编辑')
                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-src="trackOrder.upload_file.url+'-thumbnail.'+trackOrder.upload_file.type" src="{{url('icon/img404-thumbnail.jpg')}}">
                                <input v-else class="btn btn-sm btn-outline-secondary" type="button" @click="certiimg(trackOrder.id)" value="上传照片">
                                <input type="file" @change="submitFile($event,trackOrder)" :id="trackOrder.id+'input'"
                                       style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
                            @else
                                <img v-if="trackOrder.upload_file" :id="'img_'+trackOrder.id" :data-scr="trackOrder.upload_file.url" src="{{url('icon/img404-thumbnail.jpg')}}">
                            @endcan
                            </div>
                        </td>
                        <td class="td-calm">
                            @can('订单管理-跟踪-物流公司编辑')
                                <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'planning_sent_at',trackOrder)"  :value="trackOrder.planning_sent_at | date" >
                            @else
                                @{{ trackOrder.planning_sent_at }}
                            @endcan
                        </td>
                        <td class="td-calm">
                            @can('订单管理-跟踪-物流公司编辑')
                                <select class="form-control form-control-sm" :value="trackOrder.is_on_duty_shift" @change="logisticUpdate($event,'is_on_duty_shift',trackOrder)" >
                                    <option v-for="item in isOnDutyShift" :value="item">@{{ item }}</option>
                                </select>
                            @else
                                @{{ trackOrder.is_on_duty_shift }}
                            @endcan
                        </td>
                        <td class="td-calm">
                            @can('订单管理-跟踪-物流公司编辑')
                                <select class="form-control form-control-sm" :value="trackOrder.is_arrival" @change="logisticUpdate($event,'is_arrival',trackOrder)" >
                                    <option v-for="item in isArrival" :value="item">@{{ item }}</option>
                                </select>
                            @else
                                @{{ trackOrder.is_arrival }}
                            @endcan
                        </td>
                        <td class="td-calm">
                            @can('订单管理-跟踪-物流公司编辑')
                                <input class="form-control form-control-sm" type="date"  @change="logisticUpdate($event,'signed_at',trackOrder)" :value="trackOrder.signed_at | date">
                            @else
                                @{{ trackOrder.signed_at }}
                            @endcan
                        </td>
                        <td class="td-calm">
                            @can('订单管理-跟踪-物流公司编辑')
                                <input class="form-control form-control-sm" @change="logisticUpdate($event,'receive_bill_status',trackOrder)" :value="trackOrder.receive_bill_status">
                            @else
                                @{{ trackOrder.receive_bill_status }}
                            @endcan
                        </td>
                        <td class="td-calm" data-toggle="tooltip">
                            @can('订单管理-跟踪-物流公司编辑')
                                <input class="form-control form-control-sm" @change="logisticUpdate($event,'remark',trackOrder)" :value="trackOrder.remark" data-toggle="tooltip" data-placement="bottom" :title="trackOrder.remark">
                            @else
                                @{{ trackOrder.remark }}
                            @endcan
                        </td>
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$trackOrders->count()}}/@{{  page.total }}</div>
              {{ $trackOrders->withQueryString()->links() }}

                <div id="alert_modal" class="modal fade " tabindex="-1" aria-hidden="true" >
                    <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">提示</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body p-0">
                                <div class="alert alert-info m-0" role="alert" >
                                    是否将@{{ ownerName }} 监听 @{{ status==='启用'?'启用':'禁用' }}
                                </div>
                            </div>
                            <div class="modal-footer ">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal" >取消</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="changeOwnerTrackingStatus" >确认</button>
                            </div>
                        </div>
                    </div>
                </div>

            </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>
    <style>
        .btn-border{
            border:1px solid rgba(108, 117, 125,0.3);
        }
    </style>
    <script>
        let tracking_vue = new Vue({
            el:'#tracking_div',
            data:{
                trackOrders:{!! $trackOrders->toJson() !!}['data'],
                owners:[
                    @foreach($owners as $owner)
                    {name: '{{ $owner->id }}', value: '{{ $owner->name}}'},
                    @endforeach],
                logistics:[
                    @foreach($logistics as $logistic)
                    {name: '{{ $logistic->id }}', value: '{{ $logistic->name}}'},
                    @endforeach],
                checkData:[],
                seekOwners : [],
                name : "",
                trackingOwner : [],
                status:'',
                ownerName:'',
                imgs:'',
                page: {
                    total: {!!  $trackOrders->toJson() !!}['total'],
                },
                isOnDutyShift: ['','是','否'],
                isArrival: ['','是','否'],
            },
            mounted:function(){
                this.imgs=Array.from(document.getElementById('tracking_div').querySelectorAll('img'));
                this.lazy();
                if (this.imgs&&this.imgs.length>0){
                    window.addEventListener('scroll',this.lazy)
                }

                let selectDate1 = [
                    {name:'31',value:'近一月'},
                    {name:'92',value:'近三月'},
                    {name:'183',value:'近半年'},
                    {name:'366',value:'近一年'},
                    {name:'0',value: '不限'},
                ];
                let selectDate2 = [
                    {name:'15',value:'15天内'},
                    {name:'31',value:'近一月'},
                    {name:'92',value:'近三月'},
                    {name:'183',value:'近半年'},
                    {name:'366',value:'近一年'},
                    {name:'0',value: '不限'},
                ];

                $('.tooltipTarget').tooltip({'trigger': 'hover'});
                $("#list").removeClass('d-none');
                $('[data-toggle="tooltip"]').tooltip({'trigger': 'hover'})
                let _this = this;
                let data = [
                    [
                        {name:'start_at',type:'dateTime',tip:'起始日期',placeholder:'起始日期'},
                        {name:'owner_id',type:'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'], placeholder: ['货主', '定位或多选货主'], data: _this.owners},
                        {name:'start_planning_sent_at',type:'dateTime',tip:'应送达时间开始',placeholder:'应送达时间开始'},
                        {name:'client_code',type:'input',tip:'订单号',placeholder:'订单号'},
                        {name:'web_order_number',type:'input',tip:'web+订单号',placeholder:'web+订单号'},
                        {name:['client','addtime'],type:'input_select',tip:['右侧选择查询范围，默认为一月内','查询范围，范围越短搜索越快'],placeholder: ['客户',''],
                            data:selectDate1, rules:[{son:{addtime:{default:'31',required_without_all_if:['start_at','end_at']}}},
                                {date_relevance:{date:['start_at','end_at'],relevance:'addtime',killing:'date',default:[15,31,92,183,366]}}]},
                        {name:['remark','remark_addtime'],type:'input_select',tip:['右侧选择查询范围，默认为15天内','查询范围，范围越短搜索越快'],placeholder: ['订单备注',''],
                            data:selectDate2, rules:[{son:{remark_addtime:{default:'15',required_without_all_if:['start_at','end_at']}}},
                                {date_relevance:{date:['start_at','end_at'],relevance:'remark_addtime',killing:'date',default:[15,31,92,183,366]}}]},
                     ],
                    [
                        {name:'end_at',type:'dateTime',tip:'结束日期',placeholder: '结束日期'},
                        {name:'logistic_number',type:'input',tip:'运输单号',placeholder:'运输单号'},
                        {name:'end_planning_sent_at',type:'dateTime',tip:'应送达时间结束',placeholder:'应送达时间结束'},
                        {name:'logistic_id',type:'select',tip:'物流方式',placeholder:'物流方式',data:this.logistics},
                        {name:'sku',type:'input',tip:'SKU',placeholder: '商品编号'},
                    ]
                ];
                this.from = new query({
                    el: '#form_div',
                    condition: data,
                }).init();
            },
            watch:{
                checkData: {
                    handler() {
                        if (this.checkData.length === this.trackOrders.length && this.checkData.length !== 0) {
                            document.querySelector('#all').checked = true;
                        } else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep: true
                },
            },
            methods:{
                checkAll(e){
                    if (e.target.checked) {
                        this.trackOrders.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) === -1)
                                this.checkData.push(el.id);
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                selectedColor(id) {
                    if (id === this.selectedStyle) {
                        this.selectedStyle = '';
                        return;
                    }
                    this.selectedStyle = id;
                },
                openModal(){
                    let url = "{{url('apiLocal/order/trackingOwner/all')}}";
                    axios.post(url).then(res=>{
                        this.trackingOwner = res.data;
                        $("#modal").modal('show');
                    });
                },
                seekOwner(){
                    if (!this.name)return ;
                    let name = this.name;
                    let seekOwners = [];
                    this.owners.forEach(function (owner) {
                        if ((owner.value).indexOf(name) !== -1){seekOwners.push(owner.name);}
                    });
                    if (seekOwners.length > 0)this.seekOwners = seekOwners;
                },
                addTrackingOwner(owner_id,owner_name) {
                    let status = '启用';
                    owner_id = Number.parseInt(owner_id);
                    if (this.trackingOwner.indexOf(owner_id) > -1) {status = '禁用';}
                    this.status = status;
                    this.ownerName = owner_name;
                    this.ownerId = owner_id;
                    $("#alert_modal").modal('show');
                },
                changeOwnerTrackingStatus(){
                    let _this = this
                    let data= {owner_id: this.ownerId,status: this.status };
                    axios.post('{{url("apiLocal/order/trackingOwner/updateStatus")}}',data).then(function(res){
                        if(res.data.success){
                            if(_this.status === '启用'){_this.trackingOwner.push(_this.ownerId);
                            }else{_this.trackingOwner.splice(_this.trackingOwner.indexOf(_this.ownerId),1);}
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show(this.status+'货主'+owner_name+'监听失败')
                        }
                    }).catch(function(err){
                        tempTip.setDuration(3000);
                        tempTip.show('网络异常'+err);
                    });
                },
                hideInput(e){
                    let input = $(e.target);
                    let button = input.prev('button').show();
                    input.addClass('d-none');
                },
                warehouseUpdate(e,param,trackingOrder){
                    let value = $(e.target).val();
                    if(trackingOrder[param] === value ){
                        return;
                    }
                    let data = {id:trackingOrder.id,param:param,value:value}
                    let _this = this
                    axios.post('{{url("apiLocal/order/tracking/warehouseUpdate")}}',data).then(function(response){
                        if(response.data.success){
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('更新成功')
                            _this.modifyOrderTracking(param,value,trackingOrder)
                        }else{
                            tempTip.setDuration(2000)
                            tempTip.show('更新失败')
                         }
                    }).catch(function(error){
                        tempTip.setDuration(4000)
                        tempTip.show('更新失败:'+error)
                    })
                },
                logisticUpdate(e,param,trackingOrder){
                    let value = $(e.target).val();
                    if(trackingOrder[param] === value ){
                        return
                    }
                    let data = {id:trackingOrder.id,param:param,value:value}
                    let _this = this
                    axios.post('{{url("apiLocal/order/tracking/logisticUpdate")}}',data).then(function(response){
                        if(response.data.success){
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('更新成功')
                            _this.modifyOrderTracking(param,value,trackingOrder)
                        }else{
                            tempTip.setDuration(2000)
                            tempTip.show('更新失败')
                        }
                    }).catch(function(error){
                        tempTip.setDuration(4000)
                        tempTip.show('更新失败:'+error)
                    })
                },
                modifyOrderTracking(param,value, trackingOrder){
                    this.trackOrders.forEach(function(item){
                        if(item['orderClientNumber'] === trackingOrder['orderClientNumber']){
                            if(param === 'planning_sent_at'){
                                item['signed_at'] = value
                                item['is_arrival'] = '是'
                                item['is_on_duty_shift'] = '是'
                            }
                            item[param] = value
                        }
                    })
                    setTimeout(function () {
                        let $data = $('[data-toggle="tooltip"]');
                        $data.tooltip('dispose')
                        $data.tooltip({'trigger': 'hover'})
                    })
                },
                getTrackOrder(id){
                    return this.trackOrders.filter(function(trackOrder){
                        return parseInt(id) === trackOrder['id'];
                    });
                },
                setTrackOrder(data){
                    this.trackOrders.forEach(function(trackOrder){
                        if(parseInt(data['id']) === trackOrder['id'] ){
                            trackOrder[data['param']] = data['value'];
                            return;
                        }
                    });
                },
                displayInput(e){
                    let button = $(e.target);
                    let input = button.next('.form-control');
                    button.hide();
                    input.removeClass('d-none').focus();
                },
                exportSelect:function(){
                    let url = '{{url('order/tracking/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(false, this.checkData, url, this.page.total, token);
                },
                exportAll:function(){
                    let url = '{{url('order/tracking/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(true, this.checkData, url, null, token);
                },
                changeLogistic:function (tackOrder,e) {
                    let value =  $(e.target).text().trim()
                    if(value==='新杰物流'){
                        value='新杰物流到付'
                    }else if(value==='新杰物流到付'){
                        value='新杰物流'
                    }
                    let data = {id:tackOrder.id,param:'logistic_id',value:value}
                    let _this = this
                    axios.post('{{url('apiLocal/order/tracking/updateLogisticId')}}',data).then(function (response) {
                        tempTip.setDuration(2000);
                        if(response.data.success){
                            tempTip.showSuccess('修改成功');
                            tackOrder.logistic.name = value;
                        }else{
                            tempTip.show(response.data.fail_info);
                        }
                    }).catch(function (error) {
                        tempTip.setDuration(200);
                        tempTip.show(error);
                    })
                },
                certiimg(id){
                    $('#'+id+'input').click();
                },
                submitFile(e,trackOrder){
                    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("id",trackOrder.id);
                    formData.append("order_client_code",trackOrder.order_client_code);
                    tempTip.setDuration(9999)
                    tempTip.setIndex(1051)
                    tempTip.waitingTip('上传中......')
                    axios.post('{{url('order/tracking/upload')}}',formData).then(function(response){
                        tempTip.cancelWaitingTip()
                        tempTip.setDuration(2000)
                        if(response.data.success){
                            _this.trackOrders.forEach(function(_trackOrder){
                                if(_trackOrder.order_client_code === response.data.data.table_id){
                                    _trackOrder.upload_file=response.data.data;
                                    setTimeout(function () {
                                        _this.imgs.push(document.getElementById('img_'+_trackOrder.id));
                                        _this.lazy();
                                    },1);
                                }
                            })
                            console.log(_this.imgs);
                            tempTip.showSuccess('上传成功！')
                        }else{
                            tempTip.show(response.data.error)
                        }
                    }).catch(function(error){
                        tempTip.cancelWaitingTip()
                        tempTip.setDuration(2000)
                        tempTip.show(error)
                    })
                },
                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);
                            }
                        }
                    });
                },
                removeCommonImg(id) {
                    $('#'+id).remove();
                },
                commonImg(id,trackOrder){
                    let url = trackOrder.upload_file ? trackOrder.upload_file.url :"";
                    let type = trackOrder.upload_file  ? trackOrder.upload_file.type :'';
                    $('#'+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.'+type+"'>" +
                        "<img src='"+url+"-common."+type+"'"+"style='position: relative;left:-50px;' >" +
                        "</a>" +
                        "</div>"+
                        @can('订单管理-跟踪-物流公司编辑')"<button type='button' class='btn btn-sm btn-danger' onclick='tracking_vue.btnDeleteImg(this)' value='"+id+"' style='position: relative;float: right;margin-right: 51px;margin-top: -30px;' >删除</button>" +@endcan
                            "</div>"+
                        "</div>");
                },
                btnDeleteImg(e){
                    let idstr = $(e).val()
                    let id = idstr.substr(idstr.indexOf('_')+1)
                    if (!confirm('确定要删除所选图片吗？'))return;
                    this.destroyImg([id]);
                },
                destroyImg(id){
                    let _this = this
                    let data = {id:id}
                    axios.post('{{url('order/tracking/destroyImg')}}',data).then(function(response){
                        tempTip.setDuration(2000)
                        if(response.data.success){
                            tempTip.showSuccess('删除成功!')
                            let _orderTracking = _this.trackOrders.find(function(_orderTrack){
                                return id ==_orderTrack.id;
                            });
                            if(_orderTracking===null){return}
                            _this.trackOrders.forEach(function (_orderTrack) {
                                if(_orderTrack.order_client_code === _orderTracking.order_client_code){
                                    if(_orderTrack.upload_file)
                                        _orderTrack.upload_file = null
                                }
                            })
                        }else{
                            tempTip.show(response.data.error)
                        }
                    }).catch(function(error){
                        tempTip.setDuration(2000)
                        tempTip.show(error)
                    })
                },

            },
            filters:{
                millimeterToCubic:function(val){
                    // if(typeof(val)==='undefined')return '';
                    // if(val==='0'||val===0)return 0;
                    // if(!val)return '';
                    // return _.round(val/1000000000,3);
                    return val;
                },
                date:function(value) {
                    if (value !== null) {
                        // return value.replace(' ', 'T')
                        return moment(value).format('yyyy-MM-DD');
                    }
                    return value
                },
                dateLocal:function(value) {
                    if (value !== null) {return value.replace(' ', 'T')}
                    return value
                },
                number:function(value){
                    var toFixedNum = Number(value).toFixed(3);
                    var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                    return realVal;
                }
            },

        });
    </script>
@endsection