baoshi-was/resources/views/transport/waybill/delivering.blade.php

@extends('layouts.app')
@section('title')发运-运输管理@endsection
@section("head")<link href="{{ mix('css/animation.css') }}" rel="stylesheet">@endsection
@section('content')
    <div id="list" class="d-none container-fluid mt-2">
        @include("transport.waybill._dailyBillingApp")
        <div class="card" v-for="(item,date) in groups">
            <div class="card-header p-1 row" >
                <div class="text-center" :class="slideStatus[date] ? 'col-8' : 'col-12'" @click="selectedHeader(date)" @touchstart="startSlide()" @touchend="endSlide(date)">
                    @{{ date }}<i class="fa mr-2 pull-right" style="top: 2em" :class="header[date] ? 'fa-angle-down' : 'fa-angle-right'"></i>
                </div>
                <div class="col-4  p-0" :class="slideStatus[date] ? '' : 'd-none'">
                   <span class="btn btn-sm btn-success w-100" v-if="!item.pick_up_fee_total"  @click="dailyBillingApp(date)">按日输入专线费</span>
                   <span class="text-info w-100 small" v-else>专线费:
                       <span class="font-weight-bold">@{{ item.pick_up_fee_total }}</span>
                       <span class="btn btn-sm btn-info text-white" @click="dailyBillingApp(date)">修改</span>
                   </span>
                </div>
            </div>
            <div class="card-body p-0" v-if="header[date]">
                <div class="w-100 h-100 d-inline-block text-center" v-if="loadAnimation[date]">
                    <i class="fa fa-spinner fa-pulse"></i>
                </div>
                <div v-else v-for="waybill in item.waybills" class="w-100 border border-1" style="filter:grayscale(30%); " :id="'waybill-'+waybill.id">
                    <div :style="waybill.status!=='已完结'?'background-color:#f6eee8':''" class="mt-3">
                        <div style="transform:scale(0.9);color:#783000" class="pl-0">
                            <span class="mr-3 text-nowrap">日期：@{{ waybill.deliver_at }}</span>
                            <span class="mr-3 text-nowrap">承运商：@{{ waybill.carrier_name }}</span>
                            <span class="mr-3 text-nowrap">宝时运单号：@{{ waybill.waybill_number }}<br></span>
                            <span class="mr-3 text-nowrap">目的地：@{{ waybill.address }}<br></span>
                            <span class="mr-3 text-nowrap">收货人：@{{ waybill.recipient }}</span>
                            <span class="mr-3 text-nowrap">提货仓：@{{ waybill.origination }}</span>
                            <span class="mr-3 text-nowrap">预估重量：<span 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 v-if="waybill.warehouse_weight">@{{ waybill.warehouse_weight }} @{{ waybill.warehouse_weight_unit_name }}</span></span>
                        </div>
                    </div>
                    <div style="background-color:#e8eef6"  class="mb-3">
                        <div style="transform:scale(0.9);color:#02346a" class="pl-0 form-inline">
                            <div class="mr-3 text-nowrap form-inline">
                                <label :for="'carrier_bill'+waybill.id">专线运单号：</label>
                                <input :id="'carrier_bill'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_bill?'is-invalid':''"
                                       v-if="waybill.isBtn || updatePool[waybill.id]" type="text" v-model="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>
                            </div>
                            <div class="mr-3 text-nowrap form-inline">
                                <label :for="'inquire_tel'+waybill.id">查&nbsp;件&nbsp;电&nbsp;&nbsp;话：</label>
                                <input :id="'inquire_tel'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].inquire_tel?'is-invalid':''"
                                       v-if="waybill.isBtn || updatePool[waybill.id]" v-model="waybill.inquire_tel"  @click="enlarge($event)"
                                       class="form-control form-control-sm" type="text" style="width:50px">
                                <span v-else  class="text-muted">@{{ waybill.inquire_tel }}</span>
                            </div>
                            <div class="mr-3 text-nowrap form-inline">
                                <label :for="'amount'+waybill.id">数量：</label>
                                <div class="input-group input-group-sm" v-if="waybill.isBtn || updatePool[waybill.id]">
                                    <input :id="'amount'+waybill.id" :class="errors['_'+waybill.id]&&(errors['_'+waybill.id].amount || errors['_'+waybill.id].amount_unit_name)?'is-invalid':''"
                                           v-model="waybill.amount" @click="enlarge($event)"
                                   class="form-control" type="text" style="width:50px">
                                    <span class="input-group-append">
                                        <span class="input-group-text">
                                            <span class="custom-control custom-radio">
                                                <input :name="'radio-'+waybill.id" type="radio" class="custom-control-input" :id="'radio-one'+waybill.id" v-model="waybill.amount_unit_name" value="件"/>
                                                <label class="custom-control-label" :for="'radio-one'+waybill.id">件</label>
                                            </span>
                                            <span class="custom-control custom-radio">
                                                <input :name="'radio-'+waybill.id" type="radio" class="custom-control-input" :id="'radio-two'+waybill.id" v-model="waybill.amount_unit_name" value="托"/>
                                                <label class="custom-control-label" :for="'radio-two'+waybill.id">托</label>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                                <span v-else class="text-muted"><span v-if="waybill.amount">@{{ waybill.amount }} @{{ waybill.amount_unit_name }}</span></span>
                            </div>
                            <div class="mr-3 text-nowrap form-inline">
                                <label :for="'carrier_weight_other'+waybill.id">重量：</label>
                                <div class="input-group input-group-sm" v-if="waybill.isBtn || updatePool[waybill.id]">
                                <input :id="'carrier_weight_other'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight_other?'is-invalid':''"
                                       v-model="waybill.carrier_weight_other" @click="enlarge($event)"
                                    type="number" step="0.01" min="0" class="form-control" style="width:50px">
                                <span class="input-group-append">
                                  <span class="input-group-text">KG</span>
                                </span>
                                </div>
                                <span v-else class="text-muted">@{{ waybill.carrier_weight_other }}</span>
                            </div>
                            <div class="mr-3 text-nowrap form-inline">
                                <label :for="'carrier_weight'+waybill.id">体积：</label>
                                <div class="input-group input-group-sm" v-if="waybill.isBtn || updatePool[waybill.id]">
                                    <input :id="'carrier_weight'+waybill.id" :class="errors['_'+waybill.id]&&errors['_'+waybill.id].carrier_weight?'is-invalid':''"
                                           v-model="waybill.carrier_weight" @click="enlarge($event)"
                                           type="number" step="0.01" min="0" class="form-control" style="width:50px">
                                    <span class="input-group-append">
                                      <span class="input-group-text">M³</span>
                                    </span>
                                </div>
                                <span v-else class="text-muted">@{{ waybill.carrier_weight }}</span>
                            </div>
                            <div class="mr-3 text-nowrap form-inline" v-if="!waybill.isBtn">
                                <label :for="'subjoin_fee'+waybill.id">附加费：</label>
                                <div class="input-group input-group-sm">
                                    <input :id="'subjoin_fee'+waybill.id" :value="waybill.subjoin_fee"
                                           class="form-control" style="width:150px">
                                </div>
                            </div>
                            <span class="mr-3 text-nowrap">
                                <button class="btn btn-sm btn-outline-success" type="button" @click="submit(date,waybill)">提交</button>
                                <button v-if="!waybill.isBtn && !updatePool[waybill.id]" class="btn btn-sm btn-outline-info" @click="$set(updatePool,waybill.id,true);">修改</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white w-100 row" id="searchBlock" style="position: fixed;top:0;left:0;
            width: 100%; text-align: center; border-radius: 3px;">
            <div class="position-relative offset-2 col-9 mt-3 mb-3">
                <input class="form-control form-control-sm w-100 rounded-pill" @keydown.enter="searchSubmit()" v-model="searchText" type="text" placeholder="运单号 物流单号"></input>
                <a id="search" v-bind:href="'{{url('transport/waybill/delivering?searchText=')}}'+searchText"><button type="button" class="border btn btn-sm btn-primary text-white rounded-pill position-absolute" style="top: 0;right: 12px;">搜索</button></a>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
<style>
    .color1{background-color: #FFA07A}
    .color2{background-color: cornflowerblue}
</style>
<script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
<script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
<script>
    new Vue({
        el:"#list",
        data:{
            groups:{
                @foreach($groups as $group)
                    "{{$group->date}}": {waybills:[],pick_up_fee_total:'{{$group->pick_up_fee_total ? round($group->pick_up_fee_total) : ''}}'},
                @endforeach
            },
            header:{},
            errors:{},
            loadAnimation:{},
            searchText:"{{$searchText}}",
            lastHeight:"",
            updatePool:{},
            coordinate:{},
            slideStatus:{},
            dailyBilling:{screenDate:'', billing:''},
            error:{screenDate:'', billing:''},
        },
        mounted:function(){
            $(".tooltipTarget").tooltip({'trigger':'hover'});
            if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
            this.pageInit();
            $("#list").removeClass('d-none');
        },
        methods:{
            startSlide(){
                this.coordinate.x = event.touches[0].pageX;
                this.coordinate.y = event.touches[0].pageY;
            },
            endSlide(date){
                let x = event.changedTouches[0].pageX - this.coordinate.x;
                let y = event.changedTouches[0].pageY - this.coordinate.y;
                if (Math.abs(x) > Math.abs(y)) {
                    if (x>0)this.lToR(date,event.target);
                    else this.rToL(date,event.target);
                }
            },
            rToL(date,element){
                if (this.slideStatus[date])return;
                element.classList.add('translationRtoL');
                setTimeout(()=>{
                    element.classList.remove('translationRtoL');
                    this.$set(this.slideStatus,date,true);
                },300);
            },
            lToR(date,element){
                if (!this.slideStatus[date])return;
                element.classList.add('translationLtoR');
                setTimeout(()=>{
                    element.classList.remove('translationLtoR');
                    this.$set(this.slideStatus,date,false);
                },300);
            },
            selectedHeader(date){
                if (this.header[date]===undefined)this.loadData(date);
                if (this.header[date])this.$set(this.header,date,!this.header[date])
                else this.$set(this.header,date,true);
            },
            listener(){
                window.addEventListener('scroll',  ()=>{
                    let clientHeight = document.documentElement.clientHeight;
                    let scrollTop = document.body.scrollTop;
                    let scrollHeight = document.body.scrollHeight;
                    if (clientHeight+scrollTop >= scrollHeight-500) {
                        setTimeout(()=>{
                            if (this.lastHeight===scrollHeight)return;
                            this.loadData();
                            this.lastHeight=scrollHeight;
                        });
                    }
                }, false);
            },
            loadData(date){
                this.$set(this.loadAnimation,date,true);
                window.tempTip.postBasicRequest("{{url('transport/waybill/loadData')}}",{searchText:this.searchText,lastId:this.lastId,date:date},res=>{
                    this.$set(this.loadAnimation,date,false);
                    if(!res || res.length<1)return;
                    let waybills = [];
                    res.forEach(waybill=>{
                        waybills.push({
                            id:waybill.id,
                            deliver_at:waybill.deliver_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,
                            amount_unit_name:waybill.amount_unit ? waybill.amount_unit.name : '',
                            inquire_tel:waybill.inquire_tel,
                            carrier_name:waybill.logistic ? waybill.logistic.name : '',
                            isBtn:!!!waybill.carrier_bill,
                            subjoin_fee:waybill.subjoin_fee,
                            recipient:waybill.order ? waybill.order.consignee_name : waybill.recipient,
                            address:waybill.order ? waybill.order.province+waybill.order.city+waybill.order.district : waybill.destination,
                        });
                    });
                    this.groups[date].waybills = waybills;
                });
            },
            searchSubmit(){
                document.getElementById("search").click();
            },
            //页面初始化
            pageInit(){
                if (!this.isAndroid)return;
                let element = document.getElementById("navbarSupportedContent").parentElement;
                element.className = "row";
                element.children[0].className += " col-5";
                element.children[0].href = "#";
                element.innerHTML = element.children[0].outerHTML;
                let e1 = document.getElementById("menu");
                let e2 = document.getElementById("demand-div");
                //let e3 = document.getElementsByClassName("navbar");
                if (e1)e1.remove();
                if (e2)e2.remove();
                //if (e3.length>0)e3[0].remove();
                element = document.getElementById("container");
                if (element)element.style.height = (window.innerHeight-100)+"px";
            },
            enlarge(e){
                e.target.style.width="150px";
            },
            shrink(e){
                e.target.style.width="50px";
            },
            appendSubjoinFee(date,waybillId){
                let subjoinFee =  $("#subjoin_fee"+waybillId).val();
                if (!subjoinFee)return;
                window.tempTip.postBasicRequest("{{url('transport/waybill/appendSubjoinFee')}}",{subjoinFee:subjoinFee,id:waybillId},()=>{
                    this.groups[date].waybills.some((waybill,index)=>{
                        if (waybill.id===waybillId){
                            this.$set(this.groups[date].waybills[index],"subjoin_fee",subjoinFee);
                            return true;
                        }
                    });
                    return !this.updatePool[waybillId] ? "附加费添加成功" : '';
                });
            },
            submit(date,waybill){
                if(!waybill.isBtn){this.appendSubjoinFee(date,waybill.id);if (!this.updatePool[waybill.id])return;}
                window.tempTip.confirm("确定要提交调配信息吗？",()=>{
                    let data={
                        id           :  waybill.id,
                        carrier_bill :  waybill.carrier_bill,
                        inquire_tel  :  waybill.inquire_tel,
                        amount       :  waybill.amount,
                        carrier_weight  :  waybill.carrier_weight,
                        carrier_weight_other  :  waybill.carrier_weight_other,
                        amount_unit_name : waybill.amount_unit_name
                    };
                    axios.post("{{url('transport/waybill/storeCarrierBill')}}",data)
                        .then(response=>{
                            if (response.data.error){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            if (response.data.errors){
                                let key = "_"+data['id']
                                let errors = {};
                                errors[key] = response.data.errors;
                                this.errors = errors;
                                return;
                            }
                            waybill.isBtn=false;
                            tempTip.setDuration(2000);
                            if (this.updatePool[waybill.id]){
                                tempTip.showSuccess('修改成功!');this.$set(this.updatePool,waybill.id,false);
                            }else tempTip.showSuccess('录入成功!');
                        }).catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('网络异常：'+err);
                        });
                })
            },
            dailyBillingApp(date){
                $('#dailyBillingApp').modal('show');
                this.dailyBilling.screenDate=date;
            },
            dailyBillingCountApp(){
                if (this.dailyBilling.billing==='')this.error.billing='专线费必填';
                if (this.dailyBilling.billing && this.dailyBilling.screenDate)this.error={};
                if (this.error.billing || this.error.screenDate)return;
                let url = '{{url('transport/waybill/dailyBilling')}}';
                let param=this.dailyBilling;
                window.axios.post(url,{param:param})
                    .then(response=> {
                            if (!response.data.success){
                                $('#dailyBillingApp').modal('hide');
                                this.dailyBilling.billing='';
                                this.error={};
                                this.$forceUpdate();
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.message);
                            }else{
                                this.groups[this.dailyBilling.screenDate].pick_up_fee_total=this.dailyBilling.billing;
                                $('#dailyBillingApp').modal('hide');
                                this.dailyBilling={};
                                this.error={};
                                this.$forceUpdate();
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('按日输入专线费成功')
                            }
                        }
                    ).catch(function (err){
                    tempTip.setDuration(3000);
                    tempTip.show('按日输入专线费失败,网络连接错误!'+err)
                })
            },

            }
    });

</script>
@endsection