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

@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.menu')
        @endcomponent
        <div class="container-fluid">
            <div class="card menu-third" style="background: #f9f0f0;transform: scale(0.95)">
                <ul class="nav nav-pills">
                    @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/index')}}" :class="{active:isActive('',3)}">全部</a>
                        </li> @endcan
                    @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/index/ZX')}}" :class="{active:isActive('ZX',3)}">专线</a>
                        </li> @endcan
                    @can('运输管理-查询')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/index/ZF')}}" :class="{active:isActive('ZF',3)}">直发车</a>
                        </li> @endcan

                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="min-width: 3500px;">
        <div id="list">

            <form  method="GET" action="@if($uriType=='ZF'){{url('waybill/index/ZF')}}@elseif($uriType=='ZX'){{url('waybill/index/ZX')}}@else{{url('waybill/index')}}@endif" style="margin-top: 1%" id="optionSubmit">
                <table class="table  table-sm table-bordered table-hover text-nowrap " style="background: #fff;">
                    <tr v-if="isBeingFilterConditions">
                        <td colspan="4"><div class="col" style="padding:0">
                                <a  href="@if($uriType=='ZF'){{url('waybill/index/ZF')}}@elseif($uriType=='ZX'){{url('waybill/index/ZX')}}@else{{url('waybill/index')}}@endif"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                            </div>
                        </td>
                    </tr>
                    <tr >
                        <td> <label style="margin-left: 2%">页显示条数：</label>
                            <select name="paginate" v-model="filterData.paginate" @change="setPaginate" class="form-control-sm" style="vertical-align: middle">
                                <option value="50">50行</option>
                                <option value="100">100行</option>
                                <option value="200">200行</option>
                                <option value="500">500行</option>
                                <option value="1000">1000行</option>
                            </select></td>
                        <td ><label style="margin-left: 2%">货主：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <select name="owner_id" v-model="filterData.owner_id" class="form-control-sm  "  @change="setOwner" style="vertical-align: middle">
                                <option>    </option>
                                @foreach($owners as $owner)
                                    <option value="{{$owner->id}}">{{$owner->name}}</option>
                                @endforeach
                            </select></td>
                        <td ><label style="margin-left: 2%">承运商：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <select name="carrier_id" v-model="filterData.carrier_id" class="form-control-sm  " @change="setCarrier" style="vertical-align: middle">
                                <option >    </option>
                                @foreach($carriers as $carrier)
                                    <option value="{{$carrier->id}}">{{$carrier->name}}</option>
                                @endforeach
                            </select></td>
                    </tr>
                    <tr>
                        <td  ><label style="margin-left: 2%">运单号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input type="text" name="waybill_number" class="form-control-sm  " v-model="filterData.waybill_number" style="vertical-align: middle"></td>
                        <td  ><label style="margin-left: 2%">承运商单号：</label>
                            <input type="text"  name="carrier_bill" class="form-control-sm  " v-model="filterData.carrier_bill" style="vertical-align: middle"></td>
                        <td  ><label style="margin-left: 2%"> WMS单号：&nbsp;&nbsp;</label>
                            <input type="text" name="wms_bill_number" class="form-control-sm  " v-model="filterData.wms_bill_number" style="vertical-align: middle"></td>
                    </tr>
                    <tr>
                        <td  style="width: 500px"><div><label style="margin-left: 2%"> 始发地：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <input type="text" name="origination" class="form-control-sm  " v-model="filterData.origination" style="vertical-align: middle">
                                <label style="margin-left: 2%"> 目的地：&nbsp;&nbsp;</label>
                                <input type="text" style="vertical-align: middle"  name="destination" class="form-control-sm  " v-model="filterData.destination"></div></td>
                        <td  style="width: 500px"><div><label style="margin-left: 2%"> 开始日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="date" name="created_at_start" class="form-control-sm"  v-model="filterData.created_at_start">
                                <label style="margin-left: 1%"> 截至日期：&nbsp;&nbsp;</label><input type="date" class="form-control-sm" name="created_at_end" v-model="filterData.created_at_end"></div></td>
                        <td>
                            <label style="margin-left: 2%">运单状态：&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <select name="state" v-model="filterData.state" @change="setState" class="form-control-sm" style="vertical-align: middle">
                                <option value="待审核">待审核</option>
                                <option value="已审核">待调度</option>
                                <option value="待终审">待终审</option>
                                <option value="已完结">已完结</option>
                            </select></td>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <label style="margin-left: 5px"> 操作选定记录：</label>
                            <span class="btn btn-sm" @click="waybillExport" style="cursor: pointer"
                                  :class="[checkData>0?'btn-dark':'btn-outline-dark']">导出Excel</span>
                            <input hidden type="submit" value="kk">
                        </td>
                    </tr>
                </table>
            </form>

            <div>
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
            </div>
            <table class="table table-striped table-sm table-bordered table-hover text-nowrap" style="background: #fff;">
                <tr>
                    <th>
                        <label for="all">
                            <input id="all" type="checkbox" @click="checkAll($event)">全选
                        </label>
                    </th>
                    <th>ID</th>
                    <th>运单类型</th>
                    <th>当前状态</th>
                    <th>运单号</th>
                    <th>货主</th>
                    <th>WMS单号</th>
                    <th>始发地</th>
                    <th>目的地</th>
                    <th>收件人</th>
                    <th>收件人电话</th>
                    <th>收费(元)</th>
                    <th>到付金额(元)</th>
                    <th>下单备注</th>
                    <th>运单审核人</th>
                    @can('运输管理-编辑','运输管理-运单审核','运输管理-调度')
                        <th>运单操作</th>
                    @endcan
                    <th>承运商</th>
                    <th>承运商单号</th>
                    <th>始发市</th>
                    <th>目的市</th>
                    <th>仓库计数(抛)</th>
                    <th>仓库计数二</th>
                    <th>承运商计数(抛)</th>
                    <th>承运商计数二</th>
                    <th>车型</th>
                    <th>车辆信息</th>
                    <th>运费(元)</th>
                    <th>提货费(元)</th>
                    <th>其他费用(元)</th>
                    <th>调度备注</th>
                    <th>创建时间</th>
                    <th>调度审核人</th>
                    @can('运输管理-编辑','运输管理-删除')
                        <th>调度操作</th>
                    @endcan
                </tr>

                <tr v-for="waybill in waybills" :style="{color:waybill.state=='待重审'?'red':''||waybill.state=='已完结'?'green':''}">
                    <td>
                        <input class="checkItem" type="checkbox" :value="waybill.id" v-model="checkData">
                    </td>
                    <td>@{{waybill.id}}</td>
                    <td>@{{waybill.type}}</td>
                    <td :style="{color:waybill.state=='已审核'?'blue':''}">@{{waybill.state}}</td>
                    <td>@{{waybill.waybill_number}}</td>
                    <td>@{{waybill.owner}}</td>
                    <td>@{{waybill.wms_bill_number}}</td>
                    <td>@{{waybill.origination}}</td>
                    <td>@{{waybill.destination}}</td>
                    <td>@{{waybill.recipient}}</td>
                    <td>@{{waybill.recipient_mobile}}</td>
                    <td>@{{waybill.charge}}</td>
                    <td>@{{waybill.collect_fee}}</td>
                    <td>@{{waybill.ordering_remark}}</td>
                    <td><p v-for="waybillAuditLog in waybill.waybillAuditLogs" v-if=waybillAuditLog.audit_stage==="运单阶段">@{{waybillAuditLog.user.name}}</p></td>
                    <td>
                        <div v-if=waybill.state==="未审核"||waybill.state==="待重审">
                            @can('运输管理-运单审核')
                                <button class="btn btn-outline-success" @click="waybillAudit(waybill.id,waybill.waybill_number)">审核</button>
                            @endcan
                            @can('运输管理-运单编辑')
                                <button class="btn btn-outline-secondary" @click="waybillUpdate(waybill.id)">修改</button>
                            @endcan
                        </div>
                        <div v-if=waybill.state==="已审核">
                            @can('运输管理-调度')
                                <button class="btn btn-outline-secondary" @click="waybillRetreatAudit(waybill.id,waybill.waybill_number)">取消审核</button>
                                <button class="btn btn-outline-secondary" @click="job(waybill.id)">调度</button>
                            @endcan
                        </div>
                    </td>
                    <td><p>@{{waybill.carrier}}</p></td>
                    <td>@{{waybill.carrier_bill}}</td>
                    <td>@{{waybill.origination_city}}</td>
                    <td>@{{waybill.destination_city}}</td>
                    <td>@{{waybill.warehouse_weight}}  @{{waybill.warehouse_weight_unit}}</td>
                    <td>@{{waybill.warehouse_weight_other}}  @{{waybill.warehouse_weight_unit_other}}</td>
                    <td>@{{waybill.carrier_weight}}  @{{waybill.carrier_weight_unit}}</td>
                    <td>@{{waybill.carrier_weight_other}}  @{{waybill.carrier_weight_unit_other}}</td>
                    <td><p v-if="waybill.carType">@{{ waybill.carType.name }}<i v-if="waybill.carType.length">(@{{waybill.carType.length}}米)</i></p></td>
                    <td>@{{waybill.car_owner_info}}</td>
                    @can('运输管理-可见费用项')
                        <td><p v-if="waybill.type=='专线'"></p><p v-else>@{{waybill.fee}}</p></td>
                        <td>@{{waybill.pick_up_fee}}</td>
                        <td>@{{waybill.other_fee}}</td>
                    @endcan
                    <td>@{{waybill.dispatch_remark}}</td>
                    <td>@{{waybill.created_at}}</td>
                    <td><p v-for="waybillAuditLog in waybill.waybillAuditLogs" v-if=waybillAuditLog.audit_stage==="调度阶段">@{{waybillAuditLog.user.name}}</p></td>

                    <td>
                        <div v-if=waybill.state==="待终审">
                            @can('运输管理-调度审核')
                                <button class="btn btn-outline-success" @click="waybillEndAudit(waybill.id,waybill.waybill_number)">完结</button>
                            @endcan
                            @can('运输管理-调度')
                                <button class="btn btn-outline-secondary" @click="job(waybill.id)">改调度</button>
                            @endcan
                        </div>
                    </td>
                </tr>
            </table>
            {{$waybills->appends($filterData)->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:'#list',
            data:{
                waybills:[
                        @foreach($waybills as $waybill)
                    {
                        id:'{{$waybill->id}}',created_at:'{{$waybill->created_at}}',updated_at:'{{$waybill->updated_at}}',
                        status:'{{$waybill->status}}',type:'{{$waybill->type}}',waybill_number:'{{$waybill->waybill_number}}',
                        owner:'{{$waybill->owner_name}}',wms_bill_number:'{{$waybill->wms_bill_number}}',origination:'{{$waybill->origination}}',
                        destination:'{{$waybill->destination}}',recipient:'{{$waybill->recipient}}',recipient_mobile:'{{$waybill->recipient_mobile}}',
                        charge:'{{$waybill->charge}}',ordering_remark:'{{$waybill->ordering_remark}}',carrier:'{{$waybill->carrier_name}}',
                        carrier_bill:'{{$waybill->carrier_bill}}',origination_city:'{{$waybill->origination_city_name}}',
                        destination_city:'{{$waybill->destination_city_name}}',warehouse_weight:'{{$waybill->warehouse_weight}}',
                        warehouse_weight_unit:'{{$waybill->warehouse_weight_unit_name}}',carrier_weight:'{{$waybill->carrier_weight}}',
                        carrier_weight_unit:'{{$waybill->carrier_weight_unit_name}}',
                        warehouse_weight_other:'{{$waybill->warehouse_weight_other}}',
                        warehouse_weight_unit_other:'{{$waybill->warehouse_weight_unit_other_name}}',carrier_weight_other:'{{$waybill->carrier_weight_other}}',
                        carrier_weight_unit_other:'{{$waybill->carrier_weight_unit_other_name}}',
                        @if($waybill->carType)carType:{!! $waybill->carType !!},car_owner_info:'{{$waybill->car_owner_info}}',@endif @can('运输管理-可见费用项') fee:'{{$waybill->fee}}',
                        pick_up_fee:'{{$waybill->pick_up_fee}}',other_fee:'{{$waybill->other_fee}}',
                        collect_fee:'{{$waybill->collect_fee}}', @endcan dispatch_remark:'{{$waybill->dispatch_remark}}',
                        waybillAuditLogs:{!! $waybill->waybillAuditLogs !!}
                    },
                    @endforeach
                ],
                checkData:[],
                filterData:
                    {paginate:'50',waybill_number:''
                        ,carrier_bill:'',carrier_id:''
                        ,owner_id:'',wms_bill_number:''
                        ,created_at_start:'',created_at_end:''
                        ,type:'',status:'',origination:'',destination:'',},

            },
            computed:{
                isBeingFilterConditions:function(){

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

            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.waybills.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted:function(){
                this.initInputs();
            },
            methods:{
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(location.href).split("?");
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.forEach(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                waybillAudit(id,waybill_number){
                    if(!confirm('确定要通过“'+waybill_number+'”的审核吗？')){return};
                    let _this=this;
                    let w;
                    let url = '{{url('waybill/waybillAudit')}}';
                    axios.post(url, {id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (waybill) {
                                        if (waybill.id===id){
                                            waybill.status=response.data.status;
                                            waybill.waybillAuditLogs.push(response.data.waybillAuditLog);
                                            w=waybill.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核'+w+'成功!');
                                }else if (response.data.exception!=null){
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(response.data.exception);
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.showSuccess('审核失败,网络连接错误!'+err);
                    });
                },
                waybillUpdate(id){
                    location.href="{{url('waybill/waybillEdit')}}/"+id;
                },
                waybillRetreatAudit(id,waybill_number){
                    if(!confirm('确定要驳回“'+waybill_number+'”的审核吗？')){return};
                    let _this=this;
                    let w;
                    let url='{{url('waybill/waybillRetreatAudit')}}';
                    axios.post(url,{id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (waybill){
                                        if (waybill.id===id){
                                            waybill.status=response.data.status;
                                            waybill.waybillAuditLogs=[];
                                            w=waybill.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(w+'审核驳回成功!');
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('审核驳回失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.showSuccess('审核驳回失败,网络连接错误!'+err);
                    });
                },
                job(id){
                    location.href="{{url('waybill')}}/"+id+"/edit";
                },
                waybillEndAudit(id,waybill_number){
                    if(!confirm('确定要通过“'+waybill_number+'”的终审吗？')){return};
                    let _this=this;
                    let w;
                    let url='{{url('waybill/waybillEndAudit')}}';
                    axios.post(url, {id:id})
                        .then(
                            function (response) {
                                if (response.data.success){
                                    _this.waybills.forEach(function (s) {
                                        if (s.id===id){
                                            s.status=response.data.status;
                                            s.waybillAuditLogs.push(response.data.waybillAuditLog);
                                            w=s.waybill_number;
                                        }
                                    });
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(w+'终审完毕!');
                                }else if (response.data.exception!=null){
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess(response.data.exception);
                                }else {
                                    tempTip.setDuration(3000);
                                    tempTip.showSuccess('终审失败!');
                                }
                            }
                        ).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.showSuccess('终审失败,网络连接错误!'+err);
                    });
                },
                setPaginate:function(e){
                    this.filterData.paginate=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setCarrier:function (e){
                    this.filterData.carrier_id=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setOwner:function (e) {
                    this.filterData.owner_id=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setType:function (e) {
                    this.filterData.type=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                setState:function (e) {
                    this.filterData.status=e.target.value;
                    var form = document.getElementById("optionSubmit");
                    form.submit();
                },
                checkAll(e){
                    if (e.target.checked){
                        this.waybills.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                waybillExport(){
                    if (this.checkData.length<=0){
                        tempTip.setDuration(4000);
                        tempTip.showSuccess('没有勾选任何记录');
                    }else{
                        location.href="{{url('waybillExport')}}/"+this.checkData;
                    }
                }
            },
        });
    </script>
@endsection