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

@extends('layouts.app')
@section('title')快递查询-包裹管理@endsection
@section('head')
    <style>
        .package-logistic-index{
            position:relative;
        }

        /*备注容器*/
        .order-package-remarks{
            position:relative;
        }
        /*新建按钮*/
        .btn-create-remark {
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            position: absolute;
            display: none;
            background-color: rgb(92, 141, 236);
            border: blue solid 1px;
            color: #111;
            box-shadow: 0 0 6px #4747f1;
            float: left;
        }
        .order-package-remarks:hover .btn-create-remark{
            display: block;
        }
        /*新建输入框*/
        .remark-input {
            height: 30px;
            line-height: 30px;
            padding-left: 16px;
            margin-left: 35px;
            box-shadow: 0 0 6px #fff6a1;
            border-radius: 5px;
        }
        /*删除按钮*/
        .order-package-remarks table .destroy {
            float: right;
            position: absolute;
            right: 0;
            padding: 0 !important;
            width: 29px !important;
            min-width: 30px !important;
            border: 0 solid transparent !important;
        }

        .remark-created_at{
            border-right: none !important;
        }

        .btn-destroy-remark {
            display: none;
            background-color: rgba(0, 0, 0, 0);
            border: red solid 1px;
            color: red;
            box-shadow: 0 0 6px #ac4a4a;
        }

        .order-package-remarks table:hover .btn-destroy-remark{
            display: block;
        }

    </style>
@stop
@section('content')
    <div id="list" class="d-none package-logistic-index">
        <div class="container-fluid">
            <div id="form_div"></div>
            <div class="ml-3 form-inline" id="btn">
                @can('包裹管理-快递-异常类型-编辑')
                    <span class="dropdown">
                        <button type="button"
                                class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="orderPackageExport(false)" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="orderPackageExport(true)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                    <span class="ml-1">
                        <select class="form-control-sm ml-2" v-model="batchStatus">
                            <option v-for="(value,index) in statuses" :value="value"
                                    :name="value" :key="index">@{{ value }}
                            </option>
                        </select>
                        <button @click="batchStatusUpdate()" type="button"
                                class="btn btn-sm ml-2 btn-outline-danger">批量状态修改
                        </button>
                    </span>

                    <span class="ml-1">
                        <!-- Button trigger modal -->
                        <button
                            type="button"
                            class="btn btn-sm ml-2 btn-outline-info"
                            data-toggle="modal" data-target="#staticBackdrop">
                         批量添加备注
                        </button>

                    </span>
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="copyLogisticNumber" style="background: #dad7e8;">复制快递单号</button>
                    </span>
                @endcan
            </div>
            <table class="table table-striped table-bordered table-hover card-body td-min-width-80" 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 style="position:relative">
                            @{{ i+1 }}
                            <span class="badge badge-danger" v-if="package.order.issue">问题件</span>
                            <span
                                style="display: inline-block;width: 15px;height: 15px;border-radius: 50%;position: absolute;top: 2px; margin-left: 3px;box-shadow: 0 0 3px #211f1f"
                                  :style="package.sync_routes_flag?'background-color:#4ed32d':'background-color:#e83939'"></span>
                            <span v-if="package.is_manual_update">
                                <i class="fa fa-hand-paper-o" aria-hidden="true"
                                   style="color: red;position: absolute;left: 50px;top: 3px;"></i>
                            </span>
                        </span>
                    </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>@{{ package.order.issue?package.order.issue.is_new_rejecting:'' }}</td>
                    <td  class="m-0 p-0 order-package-remarks" style="padding-left: 0 !important;padding-right: 0 !important">
                        @can('包裹管理-快递-客服备注')
                        <label :for="'create_remark_'+package.id" class="btn-create-remark" @click="package.input_remark=!package.input_remark">
                            新
                        </label>
                        <input :id="'create_remark_'+package.id" @keyup.enter="submitRemark(package)" v-model="remark" v-show="package.input_remark" type="text" class="remark-input">
                       <table class="table m-0 p-0 ">
                           <tr v-show="package.order_package_remarks.length > 0 && package.showMoreRemark===true" v-for="(item,index) of package.order_package_remarks" :key="item.id">
                               <td :title="item.content" style="width: 100px;overflow:hidden !important;">@{{ item.content }}</td>
                               <td class="text-secondary">@{{ item.user.name }}</td>
                               <td class="text-secondary remark-created_at">@{{ item.created_at }}</td>
                               <td class="destroy"><button   class="btn-destroy-remark" @click="destroyRemark(package,item.id)">删</button></td>
                           </tr>
                           <tr v-show="(!package.showMoreRemark) && package.order_package_remarks.length > 0" >
                               <td :title="package.order_package_remarks[0]? package.order_package_remarks[0].content:''" style="width: 100px;overflow:hidden !important;">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].content:'' }}</td>
                               <td class="text-secondary">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].user.name:'' }}</td>
                               <td class="text-secondary remark-created_at">@{{ package.order_package_remarks[0]?package.order_package_remarks[0].created_at:'' }}</td>
                               <td class="destroy"><button   class="btn-destroy-remark" @click="destroyRemark(package,package.order_package_remarks[0].id)">删</button></td>
                           </tr>
                       </table>
                        <div
                            class="float-left"
                            @click="package.showMoreRemark = !package.showMoreRemark" v-show="package.order_package_remarks && package.order_package_remarks.length > 1">
                            <label class="text-center mt-0 p-0 cursor-pointer pull-left">
                                <span class="fa"
                                      :class="package.showMoreRemark ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                &nbsp;<span v-if="package.order_package_remarks && package.showMoreRemark">收起</span><span
                                    v-else>展开</span>&nbsp;@{{ package.order_package_remarks.length }} 条
                            </label>
                        </div>
                        @endcan
                    </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()}}
        <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" z-index="51">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">添加备注</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <textarea v-model="bench_remark" style="width:80%;margin: 0 auto;" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button @click="bench_remark = ''" type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button @click="submitBenchRemark" type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <textarea id="clipboardDiv" style="opacity:0"></textarea>
    </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>{{--新版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,
                statuses: [
                    '无',
                    '已称重',
                    '已揽收',
                    '揽件异常',
                    '疑似库内丢件',
                    '在途',
                    '在途异常',
                    '派送中',
                    '派送异常',
                    '返回中',
                    '返回异常',
                    '返回派件',
                    '其他异常',
                    '已签收',
                ],
                batchStatus: null,
                remarkHover: null,
                remark: null,
                isShowRemarkInput: false,
                showBenchRemarkWrapper: false,
                bench_remark: '',
            },
            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: 'remark', type: 'input', tip: '糊模查找需要在右边打上%符号', placeholder: '客服备注'},
                        {
                            name: 'status',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: ['状态','定位或多选状态'],
                            data: [
                                {name: '1', value: '无'},
                                {name: '2', value: '已称重'},
                                {name: '3', value: '已揽收'},
                                {name: '4', value: '揽件异常'},
                                {name: '5', value: '疑似库内丢件'},
                                {name: '6', value: '在途'},
                                {name: '7', value: '在途异常'},
                                {name: '8', value: '派送中'},
                                {name: '9', value: '派送异常'},
                                {name: '10', value: '返回中'},
                                {name: '11', value: '返回异常'},
                                {name: '12', value: '返回派件'},
                                {name: '13', value: '其他异常'},
                                {name: '14', value: '已签收'},
                            ]
                        },
                        {name: 'sent_at_start', type: 'dateTime', tip: '选择显示发出时间的起始时间'},
                        {
                            name: 'is_weighed',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否称重',
                            data: [{name: false, value: '无'}, {name: true, value: '已称重'}]
                        },
                        {name: 'received_at_start', type: 'dateTime', tip: '选择显示收货时间的起始时间'},
                        {name: 'default_date', type: 'checkbox', tip: '默认15天', data: [{name: 'ture', value: '默认15天'}]},
                        {name: 'default_logistics', type: 'checkbox', tip: '默认承运商', data: [{name: 'ture', value: '默认承运商'}]},
                    ], [
                        {
                            name: 'logistic',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的快递'],
                            placeholder: ['快递', '定位或多选快递'],
                            data: _this.logistics
                        },
                        {
                            name: 'owner',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的货主'],
                            placeholder: ['货主', '定位或多选货主'],
                            data: _this.owners
                        },
                        {
                            name: 'has_transfer_status',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否有物流信息',
                            data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                        },
                        {name: 'sent_at_end', type: 'dateTime', tip: '选择显示发出时间的截止时间'},
                        {
                            name: 'sync_routes_flag',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否有查询记录',
                            data: [{name: true, value: '是'}, {name: false, value: '否'}]
                        },
                        {name: 'received_at_end', type: 'dateTime', tip: '选择显示收货时间的截止时间'},
                        {
                            name: 'is_issue',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '是否为问题件',
                            data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                        },
                        {
                            name: 'is_new_rejecting',
                            type: 'select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的状态'],
                            placeholder: '退件状态',
                            data: [{name: '无', value: '无'}, {name: '有', value: '有'},{name: '已处理', value: '已处理'}]
                        },
                    ]
                ];
                _this.form = new query({
                    el: '#form_div',
                    condition: data,
                    appendDom : "btn",
                });
                _this.form.init();
                let column = [
                    {name: 'index', value: '序号', neglect: true},
                    {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: 'is_new_rejecting', 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();
            },
            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();
                },
                batchStatusUpdate() {
                    if(!confirm('是否却认操作')) return;
                    let _this = this;
                    if (checkData.length === 0) {
                        tempTip.show('没有勾选记录');
                        return
                    }
                    axios.put('{{url('package/logistic/batchUpdate')}}', {
                        status: this.batchStatus,
                        logistic_numbers: checkData
                    }).then(() => {
                        tempTip.setDuration(1000);
                        tempTip.showSuccess('批量状态成功');
                        location.reload();
                    })
                },
                submitBenchRemark() {
                    let _this = this;
                    if (checkData.length === 0) {
                        tempTip.show('没有勾选记录');
                        return
                    }
                    axios.post('{{url('apiLocal/package/logistic/benchRemark')}}', {
                        remark: this.bench_remark,
                        logistic_numbers: checkData
                    }).then(() => {
                        location.reload();
                    })
                },
                submitRemark(orderPackage) {
                    if (this.remark === null) {
                        return
                    }
                    let url = '{{url('apiLocal/package/logistic/')}}';
                    let _this = this;
                    tempTip.setDuration(2000);
                    tempTip.showSuccess('正在操作请稍后！');
                    axios.put(url, {remark: _this.remark, orderPackageId: orderPackage.id}).then(response=>{
                        if (response.data.success) {
                            orderPackage.order_package_remarks = response.data.data
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('成功!');
                            _this.remark = '';
                            orderPackage.input_remark = false;
                        } else {
                            tempTip.setDuration(5000);
                            tempTip.show(response.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show("网络错误：" + err)
                    });
                },
                destroyRemark(orderPackage,remarkId) {
                    let url = '{{url('apiLocal/package/logistic/delete')}}';
                    if (!confirm('是否却认删除', false)) {
                        return;
                    };
                    let _this = this;
                    tempTip.setDuration(2000);
                    tempTip.showSuccess('正在操作请稍后！');
                    axios.post(url, {orderPackageId: orderPackage.id,remarkId:remarkId}).then(response=>{
                        if (response.data.success) {
                            orderPackage.order_package_remarks = 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)
                    });
                },
                copyLogisticNumber() {
                    if (checkData.length === 0) {
                        tempTip.show('没有勾选');
                        return;
                    }
                    this.copyText(checkData.join('\n'));
                },
                copyText(text) {
                    try {
                        $('#clipboardDiv').text(text).select().focus();
                        document.execCommand("Copy");
                        tempTip.setIndex(1052)
                        tempTip.setDuration(2000)
                        tempTip.showSuccess('复制成功')
                    } catch (e) {
                        tempTip.setIndex(1052)
                        tempTip.setDuration(2000)
                        tempTip.showSuccess('复制失败：' + e)
                    }
                },
                orderPackageExport(sign) {
                    let url = '{{url('package/logistic/export')}}';
                    let token = '{{ csrf_token() }}';
                    if (sign) {
                        excelExport(true, checkData, url, this.total, token);
                    } else {
                        excelExport(false, checkData, url, null, token);
                    }
                },
            },
            filters: {
                toObjected: function (value) {
                    return JSON.parse(value);
                }
            },
        });
    </script>
@endsection