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" class="d-none">
        <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>
                    <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>
                        <select class="form-control-sm" v-model="package.exception_type" @change="package.showEditButton = true">
                            <option :disabled="!exception_editable" v-for="(value,index) in exception_types" :value="value" :name="value" :key="index">@{{ value }}</option>
                        </select>
                        <button class="btn btn-info btn-sm text-white mr-1" @click="updateExceptionType(package)" v-if="package.showEditButton">
                            更新状态</button>
                    </td>
                    <td>@{{ i+1 }}</td>
                    <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>
                        <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 class="text-overflow-warp-200 " v-if="package.order && package.order.issue">@{{ package.order.issue.result_explain }}</td>
                    <td class="text-overflow-warp-200 " v-if="package.order && package.order.issue && package.order.issue.issue_type">@{{ package.order.issue.issue_type.name }}</td>
                    <td class="text-overflow-warp-200 " v-if="package.order && package.order.issue && package.order.issue.logs.length >0"><span v-for="log in package.order.issue.logs">@{{ log.content }}<br></span></td>
                    <td class="text-overflow-warp-200 " v-if="package.order && package.order.issue && package.order.issue.logs.length >0"><span v-for="log in package.order.issue.logs">@{{ log.user.name }}<br></span></td>
                    <td class="text-overflow-warp-200 " v-if="package.order && package.order.issue && package.order.issue.logs.length >0"><span v-for="log in package.order.issue.logs">@{{ log.created_at }}<br></span></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/queryForm.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,
                exception_types: [
                    '疑似库内丢件',
                    '揽件异常',
                    '中转异常',
                    '疑似丢件',
                    '派件异常',
                    '其他',
                    '无',
                ],
                exception_editable: @can('包裹管理-快递-异常类型-编辑') true @else false  @endcan,
                selectedExceptionType: '修改异常类型'
            },
            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() {
                $('#list').removeClass('d-none');
                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: '其他异常', 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: '否'}]
                        },
                        {
                            name: 'exception_type',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '异常类型',
                            data: [
                                {name: '疑似库内丢件', value: '疑似库内丢件'},
                                {name: '揽件异常', value: '揽件异常'},
                                {name: '中转异常', value: '中转异常'},
                                {name: '疑似丢件', value: '疑似丢件'},
                                {name: '派件异常', value: '派件异常'},
                                {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();
                },
                updateExceptionType(orderPackages) {
                    let  url = '{{ url("package/logistic") }}' +'/'+ orderPackages.id;
                    let data =  {id:orderPackages['id'],exception_type: orderPackages.exception_type}
                    axios.patch(url, data).then((res)=>{
                        window.tempTip.showSuccess('异常状态修改成功');
                    });
                }
            },
            filters: {
                toObjected: function (value) {
                    return JSON.parse(value);
                }
            },
        });
    </script>
@endsection