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>
            <div class="ml-3 form-inline" id="btn">
                @can('包裹管理-快递-异常类型-编辑')
                    <select class="form-control-sm" v-model="batchExceptionType">
                        <option v-for="(value,index) in exception_types" :value="value"
                                :name="value" :key="index">@{{ value }}
                        </option>
                    </select>
                    <button @click="batchExceptionTypeUpdate()" type="button"
                            class="btn btn-sm ml-2 btn-outline-primary">批量异常状态修改
                    </button>
                @endcan
            </div>
            <table class="table table-striped table-sm text-nowrap table-hover" id="table">
                <tr v-for="(package,i) in packages" @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                    :class="selectTr===i+1?'focusing' : ''">
                    <td>
                        <input class="checkItem" type="checkbox" :value="package.logistic_number">
                    </td>
                    <td><span>@{{ i+1 }} <span class="badge badge-danger" v-if="package.order.issue">问题件</span></span></td>
                    <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>@{{ 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.order != null ? package.order.province : '#' }}</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.isShowTransferStatus ? '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 @mouseover="remarkHover = package.id" @mouseleave="remarkHover=null;remark=null;isShowRemarkInput = false">
                        <button @click="isShowRemarkInput = true" v-if="remarkHover===package.id">新增</button>
                        <input @keydown.enter="submitRemark(package)" v-if="isShowRemarkInput && remarkHover===package.id" type="text" v-model="remark">
                        <div v-if="package.remark && package.remark.length>0" :id="'remark-'+i">
                            <div v-if="showRemarkList[i]" class="text-overflow-warp-200 up" >
                                <p v-for="remark_item in package.remark">
                                    @{{ remark_item }}
                                </p>
                            </div>
                            <div class="text-overflow-warp-200" v-else>
                                @{{ package.remark[0] }}
                            </div>
                        </div>
                        <div @click="showRemarkItem(i)" v-if="package.remark && package.remark.length > 1">
                            <label class="text-center mt-0 p-0 cursor-pointer pull-left">
                                <span class="fa"
                                      :class="package.isShowRemark ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                &nbsp;<span v-if="package.remark && showRemarkList[i]">收起</span><span
                                    v-else>展开</span>&nbsp;@{{ package.remark.length }} 条
                            </label>
                        </div>
                    </td>
                    <td class="text-overflow-warp-200"><span v-if="package.order && package.order.issue">@{{ package.order.issue.result_explain }}</span>
                    </td>
                    <td class="text-overflow-warp-200"><span
                            v-if="package.order && package.order.issue && package.order.issue.issue_type">@{{ package.order.issue.issue_type.name }}</span>
                    </td>
                    <td class="text-overflow-warp-200"><span
                            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></span></td>
                    <td class="text-overflow-warp-200"><span
                            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></span></td>
                    <td class="text-overflow-warp-200"><span
                            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></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 type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <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: {},
                showRemarkList: {},
                selectTr: 0,
                exception_types: [
                    '疑似库内丢件',
                    '揽件异常',
                    '中转异常',
                    '疑似丢件',
                    '派件异常',
                    '其他',
                    '无',
                ],
                exception_editable: @can('包裹管理-快递-异常类型-编辑') true @else false  @endcan,
                selectedExceptionType: '修改异常类型',
                batchExceptionType: null,
                remarkHover: null,
                remark: null,
                isShowRemarkInput: false
            },
            created() {
                $.each(this.packages, function (index, item) {
                    item.isShowTransferStatus = false;
                    item.isShowRemark = false;
                    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();
                let column = [
                    {name:'index',value: '序号', neglect: true},
                    {name:'exception_type',value: '异常类型'},
                    {name:'logistic_number',value: '单号'},
                    {name:'status',value: '状态'},
                    {name:'logistic_name',value: '快递公司'},
                    {name:'owner_name',value: '货主'},
                    {name:'province',value: '省份'},
                    {name:'sent_at',value: '发出日期'},
                    {name:'received_at',value: '收货日期'},
                    {name:'weighed_at',value: '称重日期'},
                    {name:'transfer_status',value: '快递路由'},
                    {name:'remark',value: '客服备注'},
                    {name:'result_explain',value: '情况说明'},
                    {name:'issue_type',value: '问题类别'},
                    {name:'content',value: '说明'},
                    {name:'operation_name',value: '操作者'},
                    {name:'operation_date',value: '时间'},
                ];
                new Header({
                    el: "table",
                    name:"package",
                    column: column,
                    data: this.packages,
                    restorationColumn: 'addtime',
                    fixedTop:($('#form_div').height())+($('#btn').height())+1,
                }).init();
            },
            computed:{

            },
            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();
                },
                showRemarkItem(id) {
                    if (this.showRemarkList[id]) {
                        this.$set(this.showRemarkList, id, false);
                        $("#remark-" + id).slideUp();
                    } else {
                        this.$set(this.showRemarkList, id, true);
                        $("#remark-" + 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('异常状态修改成功');
                    });
                },
                batchExceptionTypeUpdate() {
                    let _this = this;
                    if (checkData.length === 0) {
                        tempTip.show('没有勾选记录');
                        return
                    }
                    axios.put('{{url('package/logistic/batchUpdate')}}', {
                        exception_type: this.batchExceptionType,
                        logistic_numbers: checkData
                    }).then(() => {
                        tempTip.setDuration(1000);
                        tempTip.showSuccess('批量更新异常类型成功');
                    })
                },
                submitRemark(orderPackage) {
                    if (this.remark===null){
                        return
                    }
                    let url = '{{url('apiLocal/package/logistic/')}}';
                    let _this = this;
                    axios.put(url,{remark:_this.remark,orderPackageId:orderPackage.id}).then(function (response) {
                        if (response.data.success){
                            orderPackage.remark = response.data.data
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('成功!');
                        } else{
                            tempTip.setDuration(5000);
                            tempTip.show(response.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show("网络错误："+err)
                    });
                },
            },
            filters: {
                toObjected: function (value) {
                    return JSON.parse(value);
                }
            },
        });
    </script>
@endsection