baoshi-was/resources/views/exit/index/forwarding.blade.php

@extends('layouts.app')

@section('content')
    @component('exit.index.menu')@endcomponent
    <div id="list" class="d-none container-fluid">
        <form method="GET" action="{{url('waybill/forwarding')}}" id="form">
            <div class="text-nowrap mb-0" style="background: #fff;">
                <div v-if="isBeingFilterConditions">
                    <div><div class="col" style="padding:0">
                            <a  href="{{url('waybill/forwarding')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                        </div>
                    </div>
                </div>
                <div class="row mt-2 ml-2">
                    <div class="col-md-6" style="max-width: 400px">
                        <input type="date" name="created_at_start" class=" form-control-sm tooltipTarget" title="选择显示指定日期的起始时间"
                               v-model="filterData.created_at_start" :class="filterData.created_at_start?'bg-warning':''">
                        <input type="date" class=" form-control-sm tooltipTarget" name="created_at_end" title="选择显示指定日期的结束时间"
                               v-model="filterData.created_at_end" :class="filterData.created_at_end?'bg-warning':''" >
                    </div>
                    <div class=" col-md-2 mr-0 " style="max-width: 160px">
                        <input type="text" title="运单号：支持15内模糊搜索与15天外精确搜索" name="waybill_number" placeholder="运单号"
                               class=" form-control-sm tooltipTarget" v-model="filterData.waybill_number" style="vertical-align: middle;width: 153px" :class="filterData.waybill_number?'bg-warning':''">
                    </div>
                    <div class=" col-md-2 " style="max-width: 160px">
                        <input type="text" title="承运商单号：支持15内模糊搜索与15天外精确搜索"  name="carrier_bill" placeholder="承运商单号"
                               class="form-control-sm tooltipTarget" v-model="filterData.carrier_bill" style="vertical-align: middle;width: 153px" :class="filterData.carrier_bill?'bg-warning':''">
                    </div>
                    <input type="submit" hidden>
                </div>
                <div class="ml-4 mt-2">
                    <span class="dropdown">
                        <button type="button" class="btn  btn-sm  form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'btn-outline-dark']"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                            导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="waybillExport(1)" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="waybillExport(2)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                </div>
            </div>
        </form>
        <div class="card">
            <table class="card-body table table-sm table-hover table-striped table-bordered d-none d-sm-block p-0 text-nowrap" style="width: 100%">
                <tr style="width: 100%">
                    <th class="td-operation">
                        <label for="all">
                            <input id="all" type="checkbox" @click="checkAll($event)">全选
                        </label>
                    </th>
                    <th>序号</th>
                    <th class="color1">日期</th>
                    <th class="color1">承运商</th>
                    <th class="color1">宝时运单号</th>
                    <th class="color1">提货仓</th>
                    <th class="color1">货主</th>
                    <th class="color1">预估重量/KG</th>
                    <th class="color1">预估体积/M³</th>
                    <th class="color2">状态</th>
                    <th class="color2">专线运单号</th>
                    <th class="color2">查件电话</th>
                    <th class="color2">件数</th>
                    <th class="color2">重量</th>
                    <th class="color2">体积</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(waybill,i) in waybills">
                    <td>
                        <input class="checkItem" type="checkbox" :value="waybill.id" v-model="checkData">
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ waybill.created_at }}</td>
                    <td>@{{ waybill.carrier_name }}</td>
                    <td>@{{ waybill.waybill_number }}</td>
                    <td>@{{ waybill.origination }}</td>
                    <td>@{{ waybill.owner_name }}</td>
                    <td>@{{ waybill.warehouse_weight_other }}</td>
                    <td>@{{ waybill.warehouse_weight }}</td>
                    <td><span v-if="waybill.status=='已完结'">已完成</span><span v-else><span v-if="waybill.carrier_bill">已提交</span><span v-if="!waybill.carrier_bill">待提交</span></span></td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_bill'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?errors['_'+waybill.id].carrier_bill[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_bill">
                        </span><span v-else>@{{ waybill.carrier_bill }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'inquire_tel'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?errors['_'+waybill.id].inquire_tel[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.inquire_tel">
                        </span><span v-else>@{{ waybill.inquire_tel }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'amount'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?errors['_'+waybill.id].amount[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.amount">
                        </span><span v-else>@{{ waybill.amount }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_weight_other'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?errors['_'+waybill.id].carrier_weight_other[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_weight_other">
                        </span><span v-else>@{{ waybill.carrier_weight_other }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.isBtn || !waybill.carrier_bill">
                            <input :id="'carrier_weight'+waybill.id+'PC'" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?'is-invalid tooltipTargetError':''"
                                   :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?errors['_'+waybill.id].carrier_weight[0]:''" type="text" class="form-control form-control-sm w-100" :value="waybill.carrier_weight">
                        </span><span v-else>@{{ waybill.carrier_weight }}</span>
                    </td>
                    <td>
                        <span v-if="waybill.status!='已完结'">
                            <button v-if="!waybill.isBtn&&waybill.carrier_bill" @click="waybill.isBtn=true" class="btn btn-sm btn-outline-dark" >修改</button>
                            <button v-if="!waybill.isBtn&& !waybill.carrier_bill" @click="submit(waybill.id+'PC',waybill.id);" class="btn btn-sm btn-outline-info" >录入</button>
                            <button v-if="waybill.isBtn" @click="submit(waybill.id+'PC',waybill.id);" class="btn btn-sm btn-outline-success">确定</button>
                            <button @click="waybill.isBtn=false" v-if="waybill.isBtn" class="btn btn-sm btn-outline-danger">取消</button>
                        </span>
                    </td>
                </tr>
            </table>
            <table class="table table-striped table-sm table-bordered table-hover p-0 d-block d-sm-none" style="background: rgb(255, 255, 255);">
                <tbody>
                <tr v-for="waybill in waybills">
                    <td style="filter:grayscale(30%); ">
                        <div :style="waybill.status!='已完结'?'background-color:#f6eee8':''" class="mt-3">
                            <div style="transform:scale(0.9)" class="pl-0">
                                <span class="mr-3 text-nowrap"><span style="color:#783000">日期：</span><span style="color:#af7651">@{{ waybill.created_at }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">承运商：</span><span style="color:#af7651">@{{ waybill.carrier_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">宝时运单号：</span><span style="color:#af7651">@{{ waybill.waybill_number }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">提货仓：</span><span style="color:#af7651">@{{ waybill.origination }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">项目：</span><span style="color:#af7651">@{{ waybill.owner_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">预估重量：</span><span style="color:#af7651" v-if="waybill.warehouse_weight_other">@{{ waybill.warehouse_weight_other }} @{{ waybill.warehouse_weight_unit_other_name }}</span></span>
                                <span class="mr-3 text-nowrap"><span style="color:#783000">预估体积：</span><span style="color:#af7651" v-if="waybill.warehouse_weight">@{{ waybill.warehouse_weight }} @{{ waybill.warehouse_weight_unit_name }}</span></span>
                            </div>
                        </div>
                        <div :style="waybill.status!='已完结'?'background-color:#e8eef6':''"  class="mb-3">
                            <div style="transform:scale(0.9)" class="pl-0 form-inline">
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">专线运单号：</span>
                                    <input :id="'carrier_bill'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?errors['_'+waybill.id].carrier_bill[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_bill"
                                           class="form-control form-control-sm " @click="enlarge($event)"  style="width: 50px">
                                    <span v-else  class="text-muted">@{{ waybill.carrier_bill }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">查&nbsp;件&nbsp;电&nbsp;话：</span>
                                    <input :id="'inquire_tel'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?errors['_'+waybill.id].inquire_tel[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.inquire_tel"
                                           class="form-control form-control-sm" @click="enlarge($event)"  style="width:50px">
                                    <span v-else  class="text-muted">@{{ waybill.inquire_tel }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">件数：</span>
                                    <input :id="'amount'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].amount?errors['_'+waybill.id].amount[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.amount" class="form-control form-control-sm"
                                           @click="enlarge($event)" style="width:50px">
                                    <span v-else class="text-muted">@{{ waybill.amount }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">重量：</span>
                                    <input :id="'carrier_weight_other'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?errors['_'+waybill.id].carrier_weight_other[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_weight_other"
                                           class="form-control form-control-sm" @click="enlarge($event)" style="width:50px">
                                    <span v-else class="text-muted">@{{ waybill.carrier_weight_other }}</span>
                                </span>
                                <span class="mr-3 text-nowrap form-inline"><span style="color:#02346a">体积：</span>
                                    <input :id="'carrier_weight'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?'is-invalid tooltipTargetError':''"
                                           :title="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?errors['_'+waybill.id].carrier_weight[0]:''" v-if="waybill.isBtn || !waybill.carrier_bill" type="text" :value="waybill.carrier_weight"
                                           class="form-control form-control-sm" @click="enlarge($event)" {{--@mouseleave="shrink($event)"--}} style="width:50px">
                                    <span v-else class="text-muted">@{{ waybill.carrier_weight }}</span>
                                </span>
                                <span class="mr-3 text-nowrap" v-if="waybill.status!='已完结'">
                                    <button v-if="waybill.isBtn==true || !waybill.carrier_bill" class="btn btn-sm btn-outline-success" @click="submit(waybill.id)">提交</button>
                                    <button v-if="waybill.isBtn==true" class="btn btn-sm btn-outline-danger" @click="waybill.isBtn=false">取消</button>
                                    <button v-if="waybill.isBtn==false && waybill.carrier_bill" class="btn btn-sm " @click="waybill.isBtn=true" :class="waybill.carrier_bill?'btn-outline-dark':'btn-outline-primary'">修改</button></span></div>
                        </div>
                    </td>
                </tr>
            </tbody>
            </table>
        </div>
    </div>
@endsection

@section('lastScript')
<style>
    .color1{background-color: #FFA07A}
    .color2{background-color: cornflowerblue}
</style>
<script>
    new Vue({
        el:"#list",
        data:{
            waybills:[
                @foreach($waybills as $waybill)
                {id:'{{$waybill->id}}',created_at:'{{$waybill->created_at}}',waybill_number:'{{$waybill->waybill_number}}',origination:'{{$waybill->origination}}',carrier_bill:'{{$waybill->carrier_bill}}'
                    ,warehouse_weight:'{{$waybill->warehouse_weight}}',carrier_weight:'{{$waybill->carrier_weight}}',warehouse_weight_other:'{{$waybill->warehouse_weight_other}}',carrier_weight_other:'{{$waybill->carrier_weight_other}}',status:'{{$waybill->status}}'
                    ,amount:'{{$waybill->amount}}',inquire_tel:'{{$waybill->inquire_tel}}',carrier_name:'{{$waybill->carrier_name}}',owner_name:'{{$waybill->owner_name}}',warehouse_weight_unit_name:'{{$waybill->warehouse_weight_unit_name}}'
                    ,carrier_weight_unit_name:'{{$waybill->carrier_weight_unit_name}}',warehouse_weight_unit_other_name:'{{$waybill->warehouse_weight_unit_other_name}}',carrier_weight_unit_other_name:'{{$waybill->carrier_weight_unit_other_name}}'
                    ,isBtn:false},
                @endforeach
            ],
            filterData:{
                created_at_start:'',created_at_end:'',waybill_number:'',carrier_bill:''
            },
            checkData:[],
            errors:{},
        },
        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(){
          $(".tooltipTarget").tooltip({'trigger':'hover'});
          this.initInputs();
          $("#list").removeClass('d-none');
        },
        computed:{
            isBeingFilterConditions:function(){

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

        },
        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);
                    });
                }
            },
            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(value){
                if (value==1&&this.checkData.length<1){
                    tempTip.setDuration(2000);
                    tempTip.showSuccess('没有勾选任何记录');
                    return;
                }
                window.location.href="{{url('waybill/forwarding?created_at_start=')}}"
                    +this.filterData.created_at_start+"&&created_at_end="+this.filterData.created_at_end
                    +"&&waybill_number="+this.filterData.waybill_number+"&&carrier_bill="+this.filterData.carrier_bill
                    +"&&exportType="+value+"&&checkData="+this.checkData;
            },
            enlarge(e){
                e.target.style.width="150px";
            },
            shrink(e){
                e.target.style.width="50px";
            },
            submit(waybill_id,id=null){
                if (!confirm('确定要提交吗？')){return;}
                let _this=this;
                let data={};
                data['id'] = id??waybill_id;
                data['carrier_bill'] = $("#carrier_bill"+waybill_id).val();
                data['inquire_tel'] = $("#inquire_tel"+waybill_id).val();
                data['amount'] = $("#amount"+waybill_id).val();
                data['carrier_weight'] = $("#carrier_weight"+waybill_id).val();
                data['carrier_weight_other'] = $("#carrier_weight_other"+waybill_id).val();
                if (_this.errors["_"+data['id']])_this.errors["_"+data['id']]={};
                axios.post("{{url('waybill/storeCarrierBill')}}",data)
                    .then(function (response) {
                        if (response.data.error){
                            tempTip.setDuration(3000);
                            tempTip.show(response.data.error);
                            return
                        }
                        if (response.data.errors){
                            Vue.set(_this.errors,"_"+data['id'],response.data.errors);
                            setTimeout(function(){
                                $(".tooltipTargetError").tooltip('show');
                            },1);
                            return;
                        }
                        _this.waybills.some(function (waybill) {
                            if (waybill.id===data['id']){
                                waybill.carrier_bill=response.data.carrier_bill;
                                waybill.inquire_tel=response.data.inquire_tel;
                                waybill.amount=response.data.amount;
                                waybill.carrier_weight=response.data.carrier_weight;
                                waybill.carrier_weight_other=response.data.carrier_weight_other;
                                waybill.isBtn=false;
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('录入成功!');
                                return true;
                            }
                        });
                    }).catch(function (err) {
                    tempTip.setDuration(3000);
                    tempTip.show('网络异常：'+err);
                    });
            }}
    });
</script>
@endsection