baoshi-was/resources/views/package/logistic/index.blade.php

@extends('layouts.app')
@section('title')快递查询-包裹管理@endsection

@section('content')
    <span id="nav2">
        @component('package.menu')@endcomponent
    </span>
    <div id="list">
        <div class="container-fluid">
            <div id="form_div"></div>
            <table class="table table-striped table-sm text-nowrap table-hover">
                <tr>
                    <th>单号</th>
                    <th>状态</th>
                    <th>快递公司</th>
                    <th>货主</th>
                    <th>发出日期</th>
                    <th>收货日期</th>
                    <th>称重日期</th>
                    <th>异常标记</th>
                    <th>快递路由</th>
                    <th>客服备注</th>
                </tr>
                <tr v-for="(package,i) in packages" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                    <td>@{{ package.logistic_number }}</td>
                    <td>@{{ package.status }}</td>
                    <td>@{{ package.order != null  ? package.order.logistic.name : '#' }}</td>
                    <td>@{{ package.order != null  ? package.order.owner.name : '#' }}</td>
                    <td>@{{ package.sent_at }}</td>
                    <td>@{{ package.received_at }}</td>
                    <td>@{{ package.weighed_at }}</td>
                    <td>@{{ package.exception }}</td>
                    <td>
                        <div v-if="package.transfer_status && package.transfer_status.length>0" class="text-overflow-warp-200 up" :id="'route-'+i">
                            <p v-for="route in package.transfer_status">
                                @{{ route.accept_address+" "+ route.remark+" "+route.accept_time}}
                            </p>
                        </div>
                        <div class="text-overflow-warp-200 " v-if=" package.transfer_status && !showList[i] && package.transfer_status.length > 0">
                            @{{ package.transfer_status[0].accept_address+" "+ package.transfer_status[0].remark+" "+package.transfer_status[0].accept_time}}
                        </div>
                        <div @click="showRoute(i)" v-if="package.transfer_status && package.transfer_status.length > 1">
                            <label class="text-center mt-0 p-0 cursor-pointer pull-left">
                                <span class="fa" :class="package.isShowRoute ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                &nbsp;<span v-if="package.transfer_status && showList[i]">收起</span><span v-else>展开</span>&nbsp;@{{ package.transfer_status.length }} 条
                            </label>
                        </div>
                    </td>
                    <td>@{{ package.remark }}</td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$orderPackages->count()}}/{{$orderPackages->total()}}</div>
            {{$orderPackages->appends($paginateParams)->links()}}
        </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>
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                packages: [
                    @foreach($orderPackages as $package)
                    {!! $package !!},
                    @endforeach
                ],
                logistics: [
                        @foreach($logistics as $logistic)
                    {
                        name: '{{$logistic->id}}', value: '{{$logistic->name}}'
                    },
                    @endforeach
                ],
                owners: [
                        @foreach($owners as $owner)
                    {
                        name: '{{$owner->id}}', value: '{{$owner->name}}'
                    },
                    @endforeach
                ],
                showList:{},
                selectTr:0
            },
            created(){
                $.each(this.packages,function (index,item){
                    if (item.transfer_status!=null&&item.transfer_status.length>1) {
                        item.transfer_status.sort(function (item1, item2) {
                            let date1 = new Date(item1.accept_time);
                            let date2 = new Date(item2.accept_time);
                            if (date1 - date2 > 0) return -1;
                            if (date1 - date2 < 0) return 1;
                            return 0;
                        });
                    }
                });
            },
            mounted() {
                let _this = this;
                $(".up").slideUp();
                let data = [
                    [
                        /*"","","","","","","","","","",""*/
                        {name: 'logistic_number', type: 'input', tip: '可支持多快递单号，糊模查找需要在左边打上%符号', placeholder: '快递单号'},
                        {
                            name: 'status',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '状态',
                            data: [{name: '无', value: '无'}, {name: '已称重', value: '已称重'}, {
                                name: '已揽收',
                                value: '已揽收'
                            }, {name: '在途', value: '在途'}, {name: '在途异常', value: '在途异常'}, {
                                name: '派送中',
                                value: '派送中'
                            }, {name: '派送异常', value: '派送异常'}, {name: '返回中', value: '返回中'}, {
                                name: '返回异常',
                                value: '返回异常'
                            }, {name: '返回派件', value: '返回派件'}, {name: '其他异常', value: '其他异常'},]
                        },


                        {name: 'sent_at_start', type: 'dateTime', tip: '选择显示发出时间的起始时间'},
                        {name: 'received_at_start', type: 'dateTime', tip: '选择显示收货时间的起始时间'},


                        {
                            name: 'is_weighed',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否称重',
                            data: [{name: false, value: '无'}, {name: true, value: '已称重'}]
                        },
                        {name: 'default_date', type: 'checkbox', tip: '默认15天', data: [{name: 'ture', value: '默认15天'}]},

                    ], [
                        {
                            name: 'logistic_id',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的快递'],
                            placeholder: ['快递', '定位或多选快递'],
                            data: _this.logistics
                        },
                        {
                            name: 'owner_id',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的货主'],
                            placeholder: ['货主', '定位或多选货主'],
                            data: _this.owners
                        },
                        {name: 'sent_at_end', type: 'dateTime', tip: '选择显示发出时间的截止时间'},
                        {name: 'received_at_end', type: 'dateTime', tip: '选择显示收货时间的截止时间'},

                        {
                            name: 'is_exception',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否有异常',
                            data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                        },
                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                _this.form.init();
            },
            methods:{
                showRoute(id){
                    if (this.showList[id]){
                        this.$set(this.showList,id,false);
                        $("#route-"+id).slideUp();
                    }else{
                        this.$set(this.showList,id,true);
                        $("#route-"+id).slideDown();
                    }
                    this.$forceUpdate();
                },
            },
            filters:{
                toObjected:function(value){
                    return JSON.parse(value);
                }
            },
        });
    </script>
@endsection