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="width: 3000px">
            <div class="d-none" id="list">
                @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;line-height: 80px;border-radius: 4px;cursor: pointer"
                                         :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 id="form_div"></div>
                <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>序号</th>
                        <th style="min-width: 75px">公司</th>
                        <th>订单号</th>
                        <th style="min-width: 120px">WEB+订单号</th>
                        <th style="min-width: 120px"> 提货日期</th>
                        <th style="min-width: 120px">销售</th>
                        <th style="min-width: 120px">客户</th>
                        <th>SKU</th>
                        <th style="min-width: 120px">物料描述</th>
                        <th>数量</th>
                        <th style="min-width: 120px">订单备注</th>
                        <th>重量</th>
                        <th>体积</th>
                        <th style="min-width: 120px">托盘合计</th>
                        <th style="min-width: 120px">运输方式</th>
                        <th>运输单号</th>
                        <th style="min-width: 120px">到达城市</th>
                        <th style="min-width: 200px">应送达时间</th>
                        <th style="min-width: 120px">是否赶上卡班</th>
                        <th style="min-width: 120px">到货情况</th>
                        <th style="min-width: 200px">签收日期</th>
                        <th style="min-width: 120px">签收单情况</th>
                        <th 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">@{{ trackOrder.ownerName }}</td>
                        <td>@{{ trackOrder.orderClientCode }}</td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.web_order_number">@{{ trackOrder.web_order_number }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'web_order_number')" :value="trackOrder.web_order_number"  :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.web_order_number }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.pick_up_at">@{{ trackOrder.pick_up_at | date }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none" type="date"  @keyup.enter="warehouseUpdate($event,'pick_up_at')"  :value="trackOrder.pick_up_at" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.pick_up_at }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.trackOrder">@{{ trackOrder.trackOrder }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'sale')"  :value="trackOrder.sale" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.sale }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.client">@{{ trackOrder.client }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'client')"  :value="trackOrder.client" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.client }}
                            @endcan
                        </td>
                        <td>@{{ trackOrder.sku.sku }}</td>
                        <td>@{{ trackOrder.sku.skuName }}</td>
                        <td>@{{ trackOrder.sku.skuAmount }}</td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.order_remark">@{{ trackOrder.order_remark }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <textarea class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'order_remark')"  :value="trackOrder.order_remark" :data_value="trackOrder.id" @blur="hideInput($event)"></textarea>
                            @else
                                @{{ trackOrder.client }}
                            @endcan
                        </td>
                        <td>@{{ trackOrder.packageWeight }}</td>
                        <td>@{{ trackOrder.packageBulk }}</td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.pallet_total">@{{ trackOrder.pallet_total }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none" type="number"  @keyup.enter="warehouseUpdate($event,'pallet_total')" :value="trackOrder.pallet_total" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.pallet_total }}
                            @endcan
                        </td>
                        <td>@{{ trackOrder.packageLogistic }}</td>
                        <td>@{{ trackOrder.packageLogisticNumber}}</td>
                        <td>@{{ trackOrder.orderCity}}</td>

                        <td>
                            @can('订单管理-跟踪-物流公司编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.planning_sent_at">@{{ trackOrder.planning_sent_at | date }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none" type="date"  @keyup.enter="logisticUpdate($event,'planning_sent_at')"  :value="trackOrder.planning_sent_at" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.planning_sent_at }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-物流公司编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.is_on_duty_shift">@{{ trackOrder.is_on_duty_shift }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="logisticUpdate($event,'is_on_duty_shift')"  :value="trackOrder.is_on_duty_shift" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.is_on_duty_shift }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-物流公司编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.is_arrival">@{{ trackOrder.is_arrival }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="logisticUpdate($event,'is_arrival')"  :value="trackOrder.is_arrival" :data_value="trackOrder.id"  @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.is_arrival }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-物流公司编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.signed_at">@{{ trackOrder.signed_at | date }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none" type="date"  @keyup.enter="logisticUpdate($event,'signed_at')" :value="trackOrder.signed_at" :data_value="trackOrder.id"  @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.signed_at }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.receive_bill_status">@{{ trackOrder.receive_bill_status }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'receive_bill_status')" :value="trackOrder.receive_bill_status" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.receive_bill_status }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-跟踪-仓库编辑')
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-if="trackOrder.remark">@{{ trackOrder.remark }}</button>
                                <button class="btn btn-sm btn-outline-secondary btn-border" @click="displayInput($event)" v-else style=" min-width: 120px;height: 30px"></button>
                                <input class="form-control d-none"  @keyup.enter="warehouseUpdate($event,'remark')"  :value="trackOrder.remark" :data_value="trackOrder.id" @blur="hideInput($event)">
                            @else
                                @{{ trackOrder.remark }}
                            @endcan
                        </td>
                    </tr>
                </table>

              {{ $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="{{asset('js/queryForm/export200818a.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200914.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200826b.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],
                checkData:[],
                seekOwners : [],
                name : "",
                trackingOwner : [],
                status:'',
                ownerName:'',
                page: {
                    total: {!!  $trackOrders->toJson() !!}['total'],
                },
            },
            mounted:function(){
                let selectDate = [
                    {name:'31',value:'近一月'},
                    {name:'92',value:'近三月'},
                    {name:'183',value:'近半年'},
                    {name:'366',value:'近一年'},
                    {name:'0',value: '不限'},
                ];

                $('.tooltipTarget').tooltip({'trigger': 'hover'});
                $("#list").removeClass('d-none');
                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:'client_code',type:'input',tip:'订单号',placeholder:'订单号'},
                        {name:['client','addtime'],type:'input_select',tip:['右侧选择查询范围，默认为一月内','查询范围，范围越短搜索越快'],placeholder: ['客户',''],
                            data:selectDate, rules:[{son:{addtime:{default:'31',required_without_all_if:['orderdate_start','orderdate_end']}}},
                                {date_relevance:{date:['start_at','end_at'],relevance:'addtime',killing:'date',default:[31,92,183,366]}}]},
                    ],
                    [
                        {name:'end_at',type:'dateTime',tip:'结束日期',placeholder: '结束日期'},
                        {name:'logistic_number',type:'input',tip:'运输单号',placeholder:'运输单号'},
                        {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
                },
            },
            filters:{
                date:function(value){
                    if(value.length > 10){
                        value = value.substring(0,10)
                    }
                    return value
                },
                weight:function(value){
                    return value+''
                },
                volume:function(value){
                    return value+''
                }
            },
            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){ // 仓库编辑
                    let input = $(e.target);
                    let id = input.attr('data_value'),value = input.val();
                    let trackOrder = this.getTrackOrder(id);
                    let data = {id:id,param:param,value:value}

                    if(!trackOrder){
                        return ;
                    }else{
                        if(trackOrder[param] === value){
                            input.addClass('d-none');
                            input.prev('button').show();
                            return;
                        }
                    }
                    // ajax 请求
                    let _this = this;
                    axios.post('{{url("apiLocal/order/tracking/warehouseUpdate")}}',data).then(function(res){
                        if(res.data.success){
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('更新成功');
                            _this.setTrackOrder(data);
                            input.addClass('d-none');
                            input.prev('button').show();
                        }else{
                            tempTip.setDuration(2000);
                            tempTip.show('更新失败');
                            input.val(trackOrder[param]);
                        }
                    }).catch(function(err){
                        tempTip.setDuration(4000);
                        tempTip.show('更新失败:'+err);
                        input.val(trackOrder[param]);
                    })
                },
                logisticUpdate(e,param){  // 物流公司编辑
                    let input = $(e.target);
                    let id = input.attr('data_value'),value = input.val();
                    let trackOrder = this.getTrackOrder(id);
                    if(!trackOrder ){
                        return ;
                    }else{
                        if(trackOrder[param] === value){
                            input.addClass('d-none');
                            input.prev('button').show();
                            return;
                        }
                    }
                    let data = {id:id,param:param,value:value}
                    // ajax 请求
                    let _this = this;
                    axios.post('{{url("apiLocal/order/tracking/logisticUpdate")}}',data).then(function(res){
                        if(res.data.success){
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('更新成功');
                            _this.setTrackOrder(data);
                            input.addClass('d-none');
                            input.prev('button').show();
                        }else{
                            tempTip.setDuration(2000);
                            tempTip.show('更新失败');
                            input.val(trackOrder[param]);
                        }
                    }).catch(function(err){
                        tempTip.setDuration(4000);
                        tempTip.show('更新失败:'+err);
                        input.val(trackOrder[param]);
                    })
                },
                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);
                },
            }
        });
    </script>
@endsection