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">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-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>
                            @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">
                            @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">
                            @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"> @{{ trackOrder.packageLogistic }}</td>
                        <td class="td-yellow">
                            <span v-if="trackOrder.packageLogistic === '新杰物流'">
                                @{{ trackOrder.web_order_number ? trackOrder.web_order_number : trackOrder.order_client_code}}
                            </span>
                            <span v-else>
                                @{{ trackOrder.packageLogisticNumber}}
                            </span>
                        </td>
                        <td class="td-yellow">@{{ trackOrder.orderCity}}</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:'',
                page: {
                    total: {!!  $trackOrders->toJson() !!}['total'],
                },
                isOnDutyShift: ['是','否'],
                isArrival: ['是','否'],
            },
            mounted:function(){
                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:'client_code',type:'input',tip:'订单号',placeholder:'订单号'},
                        {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:'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);
                },

            },
            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