baoshi-was/resources/views/order/issue/index.blade.php

@extends('layouts.app')
@section('title')问题件-查询@endsection

@section('content')
    @component("order.issue.menu")@endcomponent
    <div class="container-fluid" id="issue_div">
        <div style="min-width: 3000px;" >
            <div id="list" class="d-none container-fluid">
                <div id="form_div" style="min-width: 2250px;"></div>
                <div class="form-inline mt-1 ">
                    <span class="dropdown">
                        <button type="button"
                                class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                                :class="[checkData.length>0?'btn-dark text-light':'']"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="orderIssueExport(false)" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="orderIssueExport(true)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                    @cannot('客户不可见')
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  to ltipTarget"
                                @click="endOrderIssue"
                                :class="[checkData.length>0?'btn-dark text-light':'']">完结</button>
                    </span>
                    @endcannot
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="copyOrderNo">复制快递单号</button>
                    </span>
                </div>
                <table class="table table-sm  table-bordered table-hover card-body table-responsive-sm p-0 m-0 "
                       style="background: #fff;min-width: 3000px;">
                    <tr class="tr-yellow" align="center">
                        <th class=" font-weight-bolder "  @cannot('客户不可见')  colspan="7" @else colspan="4"    @endcannot></th>
                        <th class="td-yellow  font-weight-bolder original-class table-head-warning "
                            @cannot('客户不可见') :colspan="(isShowOrderInfo ? '16':'8' )" @else  :colspan="(isShowOrderInfo ? '15':'7' )"   @endcannot>
                            <span>原始运单号</span>
                            <button class="btn btn-sm btn-outline-secondary float-right" v-if="isShowOrderInfo" @click="hideOrderInfo">
                                隐藏运单列
                            </button>
                        </th>

                        <th class="  font-weight-bolder"
                            @cannot('客户不可见')
                            :colspan="11 +  (isShowRejectedBill ? 5:1) + (isShowSecondOrderInfo ? 6: 1 )"
                            @else
                            colspan="8"
                            @endcannot>

                            @cannot('客户不可见')
                            <button class="btn btn-sm btn-outline-secondary float-left" v-if="isShowRejectedBill" @click="hideRejectedBill">
                                隐藏退单列
                            </button>
                            @endcannot
                            情况说明
                            @cannot('客户不可见')
                            <button class="btn btn-sm btn-outline-secondary" v-if="isShowSecondOrderInfo" @click="hideSecondOrder">
                                隐藏运单列
                            </button>
                            @endcannot
                        </th>
                        @cannot('客户不可见')
                        <th></th>
                        @endcannot
                    </tr>

                    <tr class="tr-yellow" align="center">

                        <th rowspan="2" class="align-middle">
                            <label for="all">
                                <input id="all" type="checkbox" @click="checkAll($event)"/>
                            </label>
                        </th>
                        <th class=" align-middle" rowspan="2" style=" min-width: 50px;">序号</th>
                        <th class=" align-middle" rowspan="2" style=" min-width: 25px;">ID</th>
                        @cannot('客户不可见')
                        <th class=" align-middle" rowspan="2" style=" min-width: 75px;">退件</th>
                        @can("订单管理-问题件-置顶")
                        <th class=" align-middle" rowspan="2" style=" min-width: 75px;">置顶</th>
                        @endcan
                        <th class=" align-middle" rowspan="2" style=" min-width: 100px;">退单状态</th>
                        @endcannot
                        <th class=" align-middle" rowspan="2" style="min-width: 120px">最终状态</th>
                        @cannot('客户不可见')
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 165px;">登记日期</th>
                        @endcannot

                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 165px;">订单日期</th>
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 100px;">客户</th>
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 200px;">店铺</th>
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 200px;">客户订单号</th>
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 100px;">原始承运商</th>
                        <th class=" align-middle td-yellow" rowspan="2" style="min-width: 150px;">原始运单号</th>
                        {{--原始商品明细 开始--}}
                        <th class=" align-middle td-yellow" v-if="!isShowOrderInfo" rowspan="2" style="min-width:50px">展开</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width: 90px">收货人名称</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width: 120px;">收货人电话</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width: 70px">省</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width: 70px">市</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width: 70px">区</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" rowspan="2" style="min-width:300px">收货人地址</th>
                        <th class=" align-middle td-yellow" v-if="isShowOrderInfo" colspan="3" style="min-width:300px">原始商品明细</th>
                        <th class=" align-middle" rowspan="2" >退回单号</th>
                        @cannot('客户不可见')
                        <th class="  align-middle" rowspan="2" v-if="!isShowRejectedBill" style="min-width:50px">展开</th>
                        <th class="  align-middle" colspan="5" v-if="isShowRejectedBill" style="min-width: 450px">返回商品明细</th>
                        @endcannot
                        <th class="bg-whit  align-middle" rowspan="2" style="min-width: 115px">情况说明</th>
                        <th class="  align-middle" rowspan="2" style="min-width: 115px">问题类别</th>
                        <th class="  align-middle" colspan="3" style="min-width: 115px">处理结果</th>
                        @cannot('客户不可见')
                        <th class="  align-middle" rowspan="2" v-if="!isShowSecondOrderInfo" style="width:50px">展开</th>
                        <th class="  align-middle" rowspan="2" v-if="isShowSecondOrderInfo" style=" min-width: 120px;">二次客户订单号</th>
                        <th class="  align-middle" rowspan="2" v-if="isShowSecondOrderInfo" style=" min-width: 100px;">二次承运商</th>
                        <th class="  align-middle" rowspan="2" v-if="isShowSecondOrderInfo" style=" min-width: 200px;">二次运单号</th>
                        <th  colspan="3" style="min-width: 300px" v-if="isShowSecondOrderInfo" style=" min-width: 350px;">二次商品明细</th>
                        @endcannot
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">承运商赔偿金额</th>
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">承运商快递减免</th>
                        @cannot('客户不可见')
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">宝时赔偿金额</th>
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">宝时快递减免</th>
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">事故责任方</th>
                        <th class="  align-middle" rowspan="2" style="min-width: 120px">操作</th>
                        @endcannot
                    </tr>
                    <tr class="tr-yellow" align="center">
                        <th class="td-yellow" v-if="isShowOrderInfo" style="min-width: 120px">条码</th>
                        <th class="td-yellow" v-if="isShowOrderInfo" style="min-width: 150px">商品名</th>
                        <th class="td-yellow" v-if="isShowOrderInfo" style="min-width: 75px">数量</th>
                        @cannot('客户不可见')
                        <th  v-if="isShowRejectedBill" style="min-width: 75px">条码</th>
                        <th  v-if="isShowRejectedBill" style="min-width: 100px">商品名</th>
                        <th  v-if="isShowRejectedBill" style="min-width: 50px">数量</th>
                        <th  v-if="isShowRejectedBill" style="min-width: 50px">是否正品</th>
                        <th  v-if="isShowRejectedBill" style="min-width: 100px">备注</th>
                        @endcannot
                        <th  style="min-width: 75px">操作类型</th>
                        <th  style="min-width: 120px">说明</th>
                        <th  style="min-width: 100px">操作者</th>
                        @cannot('客户不可见')
                        <th  v-if="isShowSecondOrderInfo" style="min-width: 100px">条码</th>
                        <th  v-if="isShowSecondOrderInfo" style="min-width: 100px">商品名</th>
                        <th  v-if="isShowSecondOrderInfo" style="min-width: 75px">数量</th>
                        @endcannot
                    </tr>


                    <tr class="tr-yellow text-center"  v-if="orderIssues" v-for="(orderIssue,index) in orderIssues"
                        @click="selectedColor(orderIssue.id)" :class="orderIssue.remark ? 'tr_top':''" v-on:mouseover="hidetop($event)" v-on:mouseleave="showtop($event)"
                        :style="[{'font-weight': orderIssue.id===selectedStyle?'bold':''}]">
                        <td>
                            <div class="m-0 p-0 " :style="[{'min-height':orderIssue.remark ?'72px':'45px'}]">
                                <input class="checkItem" type="checkbox" :value="orderIssue.id" v-model="checkData">
                            </div>
                        </td>
                        <td >@{{index+1}}</td>
                        <td >@{{ orderIssue.id }}</td>
                        @cannot('客户不可见')
                        <td >
                            @can('订单管理-问题件-编辑')
                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                    @click="disposeOrderIssue($event)" :data-value="orderIssue.id"
                                    v-if="orderIssue.is_new_rejecting === '有'">有
                            </button>
                            <span v-else>@{{ orderIssue.is_new_rejecting }}</span>
                            @else
                            <span v-if="orderIssue.is_new_rejecting">@{{ orderIssue.is_new_rejecting }}</span>
                            @endcan
                        </td>


                        @can("订单管理-问题件-置顶")
                        <td class="text-muted">
                            <button type="button" class="btn btn-sm btn-outline-danger " @click="cancelOnTop($event)" :data-value="orderIssue.top.id" style="opacity: 0.75" v-if="orderIssue.top">
                                取消
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" @click="OrderIssueOnTop($event)" :data-value="orderIssue.id" style="opacity: 0.75" v-else>
                                置顶
                            </button>
                        </td>
                        <td >@{{ orderIssue.rejecting_status }}</td>{{--退件状态--}}
                        @endcan
                        @endcannot


                        <td >@{{ orderIssue.final_status }}</td>{{--最终状态--}}
                        @cannot('客户不可见')  {{--登记日期--}}
                        <td class="toptd td-yellow ">
                            <div v-if="orderIssue.remark" class="bg-light-yellow  text-danger top text-left" data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1">
                                置顶备注：@{{ orderIssue.remark }}
                            </div>
                            @{{ orderIssue.created_at }}
                        </td>
                        @endcannot

                        <td class="td-yellow">
                            @cannot('客户不可见')
                            @else
                            <div v-if="orderIssue.remark" class="bg-light-yellow  text-danger top text-left" data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1">
                                置顶备注：@{{ orderIssue.remark }}
                            </div>
                            @endcannot
                            @{{ orderIssue.order.created_at }}
                        </td>

                        <td class="td-yellow">
                            <span v-if='orderIssue.order.owner'>@{{ orderIssue.order.owner.name }}</span>
                        </td>
                        <td class="td-yellow">
                            <template v-if="orderIssue.order.shop">@{{ orderIssue.order.shop.name }}</template>
                        </td>
                        <td class="td-yellow">
                            <template v-if="orderIssue.order"> @{{ orderIssue.order.client_code }}</template>
                        <td class="td-yellow">
                            <span v-if='orderIssue.order.logistic'>@{{ orderIssue.order.logistic.name }}</span>
                        </td>
                        <td class=" hide-content p-0 td-yellow " valign="middle" align="center">
                            <div :id="'logisticNumbers'+orderIssue.id" :class="orderIssue.order.logisticNumbers.length > 1 ?'collapse ':''">
                                <p v-for="logisticNumber in orderIssue.order.logisticNumbers" class="m-0 p-0  text-muted ">@{{ logisticNumber }}</p>
                            </div>
                            <button v-if="orderIssue.order.logisticNumbers.length > 1" type="button" class="btn btn-sm btn-outline-primary   align-middle mt-1"
                                    :id="'logisticNumbersBtn'+orderIssue.id" data-toggle="collapse" :data-target="'#logisticNumbers'+orderIssue.id"
                                    @click="toggleLogisticNumbers(orderIssue.id,orderIssue.order.logisticNumbers.length)">
                                分箱@{{ orderIssue.order.logisticNumbers.length }}件,点击展开
                            </button>
                        </td>
                        {{--商品明细 开始--}}
                        <td class="td-yellow  p-0 m-0" v-if="!isShowOrderInfo && index===0" style="width:50px" :rowspan="orderIssues.length">
                            <span class="btn btn-outline-secondary "  @click="showOrderInfo" :style="orderIssues.length>4 ?'{height: 200px;line-height: 100px':''" >展开运单列</span>
                        </td>


                        <td class="td-yellow " v-if="isShowOrderInfo">@{{ orderIssue.order.consignee_name }}</td>
                        <td class="td-yellow " v-if="isShowOrderInfo">@{{ orderIssue.order.consignee_phone }}</td>
                        <td class="td-yellow " v-if="isShowOrderInfo">@{{ orderIssue.order.province }}</td>
                        <td class="td-yellow " v-if="isShowOrderInfo">@{{ orderIssue.order.city }}</td>
                        <td class="td-yellow " v-if="isShowOrderInfo">@{{ orderIssue.order.district }}</td>
                        <td class="td-yellow " style="width: 400px" v-if="isShowOrderInfo">
                            <span class="text-wrap m-0 p-0 " style="width: 400px">@{{ orderIssue.order.address }}</span>
                        </td>
                        <td class="td-yellow p-0" :id="orderIssue.id+'items'" colspan="3"
                            v-if="isShowOrderInfo">
                            <div v-if="orderIssue.order">
                                <table  class="table table-sm m-0" v-if="orderIssue.order.packages"
                                       :class="orderIssue.orderPackagecount > 1  ? 'collapse' : ''" :id="'order'+orderIssue.id"
                                        :data-value="orderIssue.orderCount = 0" :data-count="orderIssue.orderPackagecount = 0">
                                    <template v-for="packages in orderIssue.order.packages">
                                        <tr v-for="item in packages.commodities" class="text-center" :data-value="orderIssue.orderCount += 1" align="center">
                                            <td >@{{ item.commodity.sku }}</td>
                                            <td >@{{ item.commodity.name }}</td>
                                            <td  :data-value="orderIssue.orderPackagecount += item.amount ">@{{ item.amount }}</td>
                                        </tr>
                                    </template>
                                </table>
                                <button v-if="orderIssue.orderCount > 1 " type="button" class="btn btn-sm btn-outline-primary mt-1"
                                        :id="'orderBtn'+orderIssue.id"   @click="toggleOrder(orderIssue.id,orderIssue.orderPackagecount)"
                                        data-toggle="collapse" :data-target="'#order'+orderIssue.id">
                                    商品@{{ orderIssue.orderPackagecount}}件,点击展开
                                </button>
                            </div>
                        </td>
                        {{--商品明细 结束--}}

                        {{--退单商品明细 开始--}}
                        <td class="text-muted">
                            <template v-if="orderIssue.rejected_bill">
                                @{{ orderIssue.rejected_bill.logistic_number_return }}
                            </template>
                        </td>
                        @cannot('客户不可见')
                        <td class="p-0 m-0" v-if="!isShowRejectedBill && index === 0 " style="width:50px;" :rowspan="orderIssues.length" >
                            <span class="btn  btn-outline-secondary "  @click="showRejectedBill"  :style="orderIssues.length>4 ?'{height: 200px;line-height: 100px':''" >展开退单列</span>
                        </td>
                        <td class="p-0" :id="orderIssue.id+'rejectedBill'" valign="middle" align="center" colspan="5"
                            v-if="isShowRejectedBill">
                            <div v-if="orderIssue.rejected_bill" class="m-0 p-0">
                                <table v-if="orderIssue.rejected_bill.items" class="table table-sm  m-0" :class="orderIssue.rejected_bill.items.length > 1 ? 'collapse' : '' " :id="'rejectedBill'+orderIssue.id"
                                       :data-value="orderIssue.rejectedCount = 0">
                                    <tr v-for="item in orderIssue.rejected_bill.items"
                                        :data-value="orderIssue.rejected_bill.sum += item.amount" align="center">
                                        <td style="min-width: 75px" >@{{ item.barcode_goods }}</td>
                                        <td style="min-width: 100px" >@{{ item.name_goods }}</td>
                                        <td style="min-width: 50px" :data-value="orderIssue.rejectedCount += item.amount">@{{ item.amount }}</td>
                                        <td style="min-width: 50px" >@{{ item.quality_label }}</td>
                                        <td style="min-width: 100px" >@{{ item.remark }}</td>
                                    </tr>
                                </table>
                                <button v-if="orderIssue.rejected_bill.items.length >  1" type="button" class="btn btn-sm btn-outline-primary   align-middle mt-1" :id="'rejectedBillBtn'+orderIssue.id"
                                        data-toggle="collapse" :data-target="'#rejectedBill'+orderIssue.id" @click="toggleRejectedBill(orderIssue.id,orderIssue.rejectedCount)">
                                    商品@{{ orderIssue.rejectedCount }}件,点击展开
                                </button>
                            </div>
                        </td>
                        @endcannot
                        {{--退单商品明细 结束--}}

                        <td >@{{ orderIssue.result_explain}}</td>
                        <td ><span v-if="orderIssue.issue_type">@{{ orderIssue.issue_type.name}}</span></td>

                        {{--处理结果--}}
                        <td class=" m-0 p-0 log-td " valign="middle" align="center" v-on:mouseover="showAddBtn($event)" v-on:mouseleave="hideAddBtn($event)" colspan="3">
                            <div class="addLogD  v row m-0 p-0" :id="'AddLog_'+orderIssue.id" style="display: none">
                                <input type="hidden" name="id" :value="orderIssue.id">
                                <div class="form-group m-2">
                                    <input type="text" name="content" class="form-control" required>
                                </div>
                                <button type="button" class="btn btn-primary m-2 "
                                        @click="addOrderIssueLog('AddLog_'+orderIssue.id)">添加
                                </button>
                            </div>

                            <div style="position: absolute;display: none;margin-top: -35px" class="add-btn" :id="'AddBtn'+orderIssue.id">
                                <button type="button" class="btn  btn-primary "
                                        @click="showAddDiv('AddLog_'+orderIssue.id)">新
                                </button>
                            </div>

                            <template v-if="orderIssue.logs" class="p-0 m-0 ">
                                <table class="table table-sm p-0 m-0 " :id="'logs'+orderIssue.id" :data-value="orderIssue.logShow == null ? orderIssue.logShow=false:''">
                                    <tr style="position:static" align="center" v-for="(log,index) in orderIssue.logs" :class="(orderIssue.logs.length <= 2 ? '' : ((index === 0 || orderIssue.logShow )  ? '' : 'd-none' )) "
                                        v-on:mouseover="showDelBtn($event)" v-on:mouseleave="hideDelBtn($event)" >
                                        <td style="min-width: 75px">@{{ log.type }}</td>
                                        <td style="min-width: 200px">@{{ log.content }}</td>
                                        <td style="min-width: 120px">@{{ log.user.name }}</td>
                                        <td style="" class="m-0 p-0 border-0">
                                            <button type="button" class="btn btn-sm btn-outline-danger m-0 del-btn invisible"
                                                    @click="deleteOrderIssueLog(log.id,orderIssue.id)">删</button>
                                        </td>
                                    </tr>
                                </table>
                                <button type="button" class="btn btn-sm btn-outline-primary align-middle mt-1" v-if="orderIssue.logs.length > 2"
                                        @click="toggleLogs(orderIssue,$event)" :data-value="orderIssue.logs.length" :data-count="orderIssue.logShow" >
                                    记录共@{{ orderIssue.logs.length }}条,点击展开
                                </button>
                            </template>
                        </td>
                        @cannot('客户不可见')
                        <td class="p-0 m-0 h-100" v-if="!isShowSecondOrderInfo && index === 0" style="width:50px;" :rowspan="orderIssues.length" >
                            <span class="btn btn-outline-secondary " @click="showSecondeOrder"   :style="orderIssues.length>4 ?'{height: 200px;line-height: 100px':''">展开运单列</span>
                        </td>
                        <td v-if="isShowSecondOrderInfo">
                            <span v-if="orderIssue.second_order" class="p-0"> @{{ orderIssue.second_order.client_code }}</span>
                        </td>
                        <td v-if="isShowSecondOrderInfo">
                            <span v-if="orderIssue.second_order" class="p-0"> @{{ orderIssue.second_order.logistic.name }}</span>
                        </td>
                        <td class=" p-0" valign="middle" align="center" v-if="isShowSecondOrderInfo">
                            <template v-if="orderIssue.second_order">
                                <div class=" m-0" :id="'secondOrderNumbers'+orderIssue.id"
                                     :class="orderIssue.seconderCount > 1 ? 'collapse':''"
                                     :data-value="orderIssue.seconderCount = 0">
                                    <p class="m-0 p-0  text-muted " v-for="logisticNumber in orderIssue.second_order.logisticNumbers"
                                       :data-value="orderIssue.seconderCount +=1">@{{ logisticNumber }}</p>
                                </div>
                                <button v-if="orderIssue.seconderCount > 1" type="button"
                                        class="btn btn-sm btn-outline-primary align-middle mt-1"
                                        data-toggle="collapse"
                                        :id="'secondOrderNumbersBtn'+orderIssue.id"
                                        :data-target="'#secondOrderNumbers'+orderIssue.id"
                                        @click="toggleseCondOrderNumbers(orderIssue.id,orderIssue.second_order.logisticNumbers.length)">
                                    分箱@{{ orderIssue.second_order.logisticNumbers.length }}件,点击展开
                                </button>
                            </template>
                        </td>
                        <td class=" p-0" colspan="3"v-if="isShowSecondOrderInfo">
                            <template v-if="orderIssue.second_order" class=" p-0">
                                <div class="m-0 p-0" :class="orderIssue.secondeOrderCount > 1 ? 'collapse':''"
                                     :id="'secondOrder'+orderIssue.id">
                                    <table class="table table-sm  m-0 "
                                           :data-count="orderIssue.secondeOrderCount = 0"
                                           :data-value="orderIssue.secondeOrderItems = 0">
                                        <template v-for="packages in orderIssue.second_order.packages">
                                            <tr v-for="item in packages.commodities" :data-value="orderIssue.secondeOrderCount += 1">
                                                <td >@{{ item.commodity.sku }}</td>
                                                <td >@{{ item.commodity.name }}</td>
                                                <td :data-value="orderIssue.secondeOrderItems+=item.amount">@{{ item.amount }}</td>
                                            </tr>
                                        </template>
                                    </table>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary  align-middle mt-1"  data-toggle="collapse"
                                        v-if="orderIssue.secondeOrderCount > 0"
                                        :id="'secondOrderBtn'+orderIssue.id"
                                        :data-target="'#secondOrder'+orderIssue.id"
                                        @click="toggleSecond(orderIssue.id,orderIssue.secondeOrderItems)">商品@{{ orderIssue.secondeOrderItems }}件,点击展开
                                </button>
                            </template>
                        </td>
                        @endcannot
                        <td >@{{ orderIssue.logistic_indemnity_money }}</td>
                        <td >@{{ orderIssue.logistic_express_remission }}</td>
                        @cannot('客户不可见')
                        <td >@{{ orderIssue.baoshi_indemnity_money }}</td>
                        <td >@{{ orderIssue.baoshi_express_remission }}</td>
                        <td><span
                                v-if="orderIssue.user_work_group">@{{ orderIssue.user_work_group.name }}</span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary"
                                    @click="editOrderIssue($event)" :data-value="orderIssue.id">改
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger"
                                    @click="deleteOrderIssue($event)" :data-value="orderIssue.id">删
                            </button>
                        </td>
                        @endcannot
                    </tr>
                </table>
                <button  class="btn btn-sm" :class="page.curPage === 1 ?'':'btn-outline-primary'"
                    @click="goPage(page.curPage-1)"
                   :disabled="page.curPage === 1">上一页</button>
                <button  class="btn btn-sm" :class="page.curPage === page.lastPage ?'':'btn-outline-primary'"
                    @click="goPage(page.curPage+1)"
                    :disabled="page.curPage === page.lastPage">下一页</button>
                <input @keyup.enter="pageTurning($event)" class="form-control-sm ml-3 tooltipTarget"
                       :placeholder="'当前页数：'+page.curPage+'/'+page.lastPage" title="去往指定页">
                <span class="text-muted m-1">共 @{{page.total}} 条 </span>
            </div>
        </div>
        {{--deleteOrderIssue--}}
        <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel"
             aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                @click="changeDeleteId">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>是否删除当前订单问题件?</p>
                        <input type="hidden" id="deleteId" class="form-control"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="changeDeleteId">
                            取消
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                                @click="deleteOrderIssueById">确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{--OrderIssue On Top--}}
        <div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">请输入置顶备注</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                @click="changeRemark">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" class="form-control" id="onTopId">
                        <textarea type="text" class="form-control" required id="remark"
                                  @change="changeRemark"></textarea>
                        <div class="invalid-feedback">
                            备注信息不能为空
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
                                @click="changeRemark">关闭
                        </button>
                        <button type="button" class="btn btn-sm btn-primary" @click="submitOnTop">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('lastScript')
    <style type="text/css">
        @keyframes anima {
            from {
                opacity: 0.1;
            }
            to {
                opacity: 1;
            }
        }

        @-webkit-keyframes anima {
            from {
                opacity: 0.75;
            }
            to {
                opacity: 0.1;
            }
        }

        .tr_top {
            min-height: 75px;
        }

        .bg-light-yellow {
            background: #fffff8;
        }

        .top {
            padding-top: 0px;
            padding-left: 10px;
            margin-top: -4px;
            margin-left: -5px;
            line-height: 75px;
            position: absolute;
            animation: anima;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(0, 0, 1, 1);
            animation-direction: alternate;
            animation-play-state: running;

            -webkit-animation-name: anima;
            -webkit-animation-duration: 3s;
            -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }
    </style>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200901.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/export200818a.js')}}"></script>
    <script>
        let listVue = new Vue({
            el: '#issue_div ',
            data: {
                orderIssues: {!!  $orderIssues->toJson() !!}['data'],
                owners: [@foreach($owners as $owner){name: '{{ $owner->id }}', value: '{{ $owner->name}}'},@endforeach],
                orderIssueType: [
                    @foreach($orderIssueType as $type)
                    {name: '{{$type->id}}', value: '{{$type->name}}' },
                    @endforeach],
                qualityLabel: [
                    @foreach($qualityLabel as $type)
                    {name: '{{$type->id}}', value: '{{$type->name}}' },
                    @endforeach],
                checkData: [],
                from: '',
                finalStatus: [{name: '0', value: '已解决'}, {name: '1', value: '待退回'}, {name: '2', value: '退回中'}],
                selectedStyle: '',
                deleteId: '',
                page: {
                    lastPage: {!! $orderIssues->toJson() !!}['last_page'],
                    curPage: {!!  $orderIssues->toJson() !!}['current_page'],
                    total: {!!  $orderIssues->toJson() !!}['total'],
                    nextPageUrl: {!!  $orderIssues->toJson() !!}['next_page_url'],
                    prevPageUrl: {!! $orderIssues->toJson()  !!}['prev_page_url'],
                    lastPageUrl: {!!  $orderIssues->toJson() !!}['last_page_url'],
                },
                isShowOrderInfo:false,
                isShowRejectedBill: false,
                isShowSecondOrderInfo: false,
            },
            mounted: function () {
                $('.tooltipTarget').tooltip({'trigger': 'hover'});
                $('#list').removeClass("d-none");
                console.log(this.orderIssues);
                let _this = this;
                let final_status = [{name: '已解决', value: '已解决'}, {name: '待退回', value: '待退回'}, {
                    name: '退回中',
                    value: '退回中'
                }];
                let data = [[
                    {name: 'created_at_start', type: 'dateTime', tip: '订单开始日期'},
                    {
                        name: 'owner_id',
                        type: 'select_multiple_select',
                        tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                        placeholder: ['货主', '定位或多选货主'],
                        data: _this.owners
                    },
                    {name: 'client_code', type: 'input', tip: '原始订单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '原始订单号'},
                    {name: 'logistic_number', type: 'input', tip: ['输入原始运单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索'], placeholder: '原始运单号'},
                    {name: 'logistic_number_return', type: 'input', tip: '退回单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '退回单号'},
                    {name: 'send_client_code', type: 'input', tip: '二次订单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '二次订单号'},
                ], [
                    {name: 'created_at_end', type: 'dateTime', tip: '订单结束日期'},
                    {name: 'consignee_name', type: 'input', tip: '收货人名称：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '收货人名称'},
                    {name: 'consignee_phone', type: 'input', tip: '收货人电话：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '收货人电话'},
                    {name: 'good_barcode', type: 'input', tip: '条码：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '条码'},
                    {name: 'good_name', type: 'input', tip: '商品名', placeholder: '商品名'},

                    {
                        name: 'id_quality_label',
                        type: 'select',
                        tip: '是否正品',
                        placeholder: '是否正品',
                        data: this.qualityLabel
                    },
                ],[
                    {name: 'logistic_indemnity_money', type: 'input', tip: '承运商赔偿金额', placeholder: '承运商赔偿金额'},
                    @cannot('客户不可见')
                    {
                        name: 'baoshi_indemnity_money', type: 'input', tip: '宝时赔偿金额', placeholder: '宝时赔偿金额'
                    },
                    {name: 'final_status', type: 'select', tip: '问题件的最终状态', placeholder: '最终状态', data: final_status},
                    {
                        name: 'order_issue_type_id',
                        type: 'select',
                        tip: '问题类别',
                        placeholder: '问题类别',
                        data: this.orderIssueType
                    },
                    {name: 'is_handle', type: 'checkbox', tip: '是否已处理', data: [{name: 'ture', value: '已解决'}]},
                    @endcan
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                })
                this.form.init();
                let order = $('.table-head-warning')[0];
                $('.top').css('min-width', $(order).outerWidth(true));

            },
            watch: {
                checkData: {
                    handler() {
                        if (this.checkData.length === this.orderIssues.length) {
                            document.querySelector('#all').checked = true;
                        } else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep: true
                },
            },
            methods: {
                selectedColor(orderno) {
                    if (orderno === this.selectedStyle) {
                        this.selectedStyle = '';
                        return;
                    }
                    this.selectedStyle = orderno;
                },
                editOrderIssue($event) {
                    let id = $($event.target).attr('data-value');
                    window.location.href = "{{url('order/issue/edit')}}" + '/' + id;
                },
                deleteOrderIssue($event) {
                    let id = $($event.target).attr('data-value');
                    $('#deleteId').val(id);
                    $('#alertModal').modal('show');
                },
                deleteOrderIssueById() {
                    let _this = this;
                    tempTip.setDuration(99999)
                    tempTip.waitingTip('删除中,请稍候')
                    let id = $('#deleteId').val();
                    let data = {id: id};
                    axios.post('{{url('apiLocal/order/issue/destroy')}}', data).then(function (res) {
                        tempTip.setDuration(5000)
                        tempTip.cancelWaitingTip();
                        if (res.data.success) {
                            for (let i = 0; i < _this.orderIssues.length; i++) {
                                let data = _this.orderIssues[i];
                                if (data.id == id) {
                                    _this.orderIssues.splice(i, 1);
                                    _this.deleteId = 0;
                                    break;
                                }
                            }
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('问题件删除成功');
                        } else {
                            tempTip.setDuration(2500);
                            tempTip.show('标记勾选内容删除失败,错误：' + res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.cancelWaitingTip();
                        tempTip.show('网络错误：' + err);
                    });
                },
                changeDeleteId() {
                    $('#deleteId').val('');
                },
                cancelOnTop(event) {
                    let id = $(event.target).attr('data-value')
                    let data = {id: id};
                    if (data === '' || data === null) {
                        return;
                    }
                    axios.post('{{url('apiLocal/order/issue/onTop/cancelTop')}}', data).then(function (res) {
                        if (res.data.success) {
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('订单问题件取消置顶成功！');
                            window.location.reload();
                        } else {
                            tempTip.setDuration(2500);
                            tempTip.show(res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络错误：' + err);
                    });
                },
                changeRemark() {
                    $('#remark').removeClass('is-invalid');
                },
                OrderIssueOnTop(event) {
                    let id = $(event.target).attr('data-value');
                    $("#onTopId").val(id);
                    $("#exampleModal").modal('show');
                },
                submitOnTop() {
                    let _this = this;
                    let remark = $("#remark").val();
                    let id = $("#onTopId").val();
                    if (remark === '' || remark == null) {
                        $("#remark").focus();
                        $('#remark').addClass('is-invalid');
                    } else {
                        let data = {id: id, remark: remark};
                        axios.post('{{url('apiLocal/order/issue/onTop/store')}}', data).then(function (res) {
                            $("#exampleModal").modal('hide');
                            if (res.data.success) {
                                _this.orderIssues.forEach(function (orderIssue) {
                                    if (orderIssue.id == id) {
                                        if (orderIssue.top == null) {
                                            orderIssue.top = {};
                                        }
                                        orderIssue.top.remark = 'remark';
                                    }
                                })
                                tempTip.setDuration(2500);
                                tempTip.showSuccess('置顶成功');
                                window.location.href = window.location.href;
                            } else {
                                tempTip.setDuration(2500);
                                tempTip.show(res.data.fail_info);
                            }
                        }).catch(function (err) {
                            $("#exampleModal").modal('hide');
                            tempTip.setDuration(4000);
                            tempTip.show('网络错误：' + err);
                        });
                    }
                },

                orderIssueExport(sign) {
                    let url = '{{url('order/issue/export')}}';
                    let token = '{{ csrf_token() }}';
                    if (sign) {
                        excelExport(true, this.checkData, url, this.page.total, token);
                    } else {
                        excelExport(false, this.checkData, url, null, token);
                    }
                },
                copyOrderNo() {
                    try{
                        let _this = this;
                        if (this.checkData.length === 0) {
                            tempTip.show('没有勾选订单');
                        } else {
                            let orderNos = [];
                            this.orderIssues.forEach(function (item) {
                                if (_this.checkData.includes(item.id)) {
                                    let logisticNumbers = item.order.logisticNumbers;
                                    if (logisticNumbers.length > 0) {
                                        orderNos =  orderNos.concat(logisticNumbers);
                                    }
                                }
                            })
                            if (orderNos.length === 0) {
                                tempTip.setDuration(2200);
                                tempTip.show('勾选的问题件没有对应的快递单号');
                                return;
                            }
                            let p = $('<textarea id="copy" />'+orderNos.join('\n')+'</textarea>');
                            p.attr('opacity', 0);
                            $('body').append(p);
                            let p_ele = document.getElementById('copy');
                            p_ele.select();
                            document.execCommand("Copy");
                            p.remove();
                            tempTip.setDuration(1200);
                            tempTip.showSuccess('复制快递单号成功');
                        }
                    }catch(err){
                        tempTip.setDuration(2000);
                        tempTip.show('复制快递单号失败'+err);
                    }
                },
                checkAll(e) {
                    if (e.target.checked) {
                        this.orderIssues.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) == '-1') {
                                this.checkData.push(el.id);
                            }
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                endOrderIssue() {
                    if (this.checkData.length === 0) {
                        tempTip.show('没有勾选订单');
                        return;
                    }
                    let _this = this;
                    let ids = _this.checkData;
                    let data = {ids: ids};
                    axios.post('{{url('apiLocal/order/issue/endOrderIssue')}}', data).then(function (res) {
                        if (res.data.success) {
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('勾选订单已变为已完结');
                            _this.orderIssues.forEach(function (item,index) {
                                if (ids.includes(item.id)) {
                                    item.final_status = '已解决';
                                    // _this.orderIssues.splice(index,1);
                                }
                            });
                            _this.checkData = [];
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络异常:' + err);
                    })
                },
                disposeOrderIssue(e) {
                    let _this = this;
                    let id = $(e.target).attr('data-value');
                    let data = {id: id};
                    axios.post('{{url('apiLocal/order/issue/disposeOrderIssue')}}', data).then(function (res) {
                        if (res.data.success) {
                            _this.orderIssues.forEach(function (orderIssue) {
                                if (orderIssue.id == data.id) {
                                    orderIssue.is_new_rejecting = '已处理';
                                    orderIssue.logs.unshift(res.data.data);
                                }
                            })
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('订单已处理');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网路链接异常' + err);
                    });
                },
                addOrderIssueLog(id) {
                    let idInput = $('#' + id + ' :input[name="id"]');
                    let contentInput = $('#' + id + ' :input[name="content"]');
                    if (!contentInput.val()) {
                        contentInput.addClass('is-invalid').focus();
                        return;
                    }
                    contentInput.removeClass('is-invalid')
                    let _this = this;
                    let data = {id: idInput.val(), content: contentInput.val()};
                    axios.post('{{url('apiLocal/order/issue/log/store')}}', data).then(function (res) {
                        if (res.data.success) {
                            _this.orderIssues.forEach(function (orderIssue) {
                                if (orderIssue.id == data.id) {
                                    orderIssue.logs.unshift(res.data.data);
                                    contentInput.val('');
                                    $('#' + id).hide();
                                }
                            })
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('添加成功');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络异常:' + err);
                    });
                },
                deleteOrderIssueLog(id, OrderIssueId) {
                    let _this = this;
                    axios.post("{{url('apiLocal/order/issue/log/destroy')}}", {id: id}).then(function (res) {
                        if (res.data.success) {
                            _this.orderIssues.forEach(function (orderIssue) {
                                if (orderIssue.id == OrderIssueId) {
                                    let logs = orderIssue.logs;
                                    logs.forEach(function (item, index) {
                                        if (item.id == id) {
                                            logs.splice(index, 1);
                                        }
                                    });
                                }
                            })
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('删除成功');
                        } else {
                            tempTip.setDuration(2000);
                            tempTip.show('删除失败：' + res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络异常:' + err);
                    });
                },
                hidetop: function (e) {
                    let target = $(e.target);
                    let top = target.parent().find('.top');
                    let tip = target.parent().find('.toptd');
                    top.hide();
                    tip.tooltip('show');
                },
                showtop: function (e) {
                    let target = $(e.target);
                    let top = target.parent().find('.top');
                    let tip = target.parent().find('.toptd');
                    top.show();
                    tip.tooltip('hide');
                },
                showDelBtn(e) {
                    let domObj = $(e.target).parent();
                    domObj.find('.del-btn').addClass('visible').removeClass('invisible');

                },
                hideDelBtn(e) {
                    let domObj = $(e.target);
                    domObj.find('.del-btn').addClass('invisible').removeClass('visible');
                },
                showAddBtn(e) {
                    let domObj = $(e.target).parents('.log-td');
                    if (domObj.hasClass('log-td')) {
                        domObj.find('.add-btn').show();
                    }
                },
                hideAddBtn(e) {
                    let domObj = $(e.target);
                    if (domObj.hasClass('log-td')) {
                        domObj.find('.add-btn').hide();
                    }
                },
                showAddDiv(id) {
                    let div = $('#' + id);
                    if (div.is(":hidden")) {
                        div.show();
                    } else {
                        div.hide();
                    }
                },
                toggleLogisticNumbers(id, length) {
                    let collapse = $('#logisticNumbers' + id);
                    let button = $("#logisticNumbersBtn" + id);
                    let isShow = button.attr('aria-expanded');
                    if (isShow === 'false') {
                        button.text('点击收起');
                    } else {
                        button.text("分箱" + length + "件,点击展开");
                    }
                },
                toggleLogs(orderIssue, e) {
                    if ( orderIssue.logShow  === false) {
                        $(e.target).text('点击收起');
                    } else {
                        $(e.target).text("记录共" + $(e.target).attr('data-value') + "条,点击展开");
                    }
                    orderIssue.logShow = !orderIssue.logShow;
                },
                toggleOrder(id, length) {
                    let button = $("#orderBtn" + id);
                    let isShow = button.attr('aria-expanded');
                    if (isShow === 'false') {
                        button.text('点击收起');
                    } else {
                        button.text("商品" + length + "件,点击展开");
                    }
                },
                toggleSecond(id, length) {
                    let button = $("#secondOrderBtn" + id);
                    let isShow = button.attr('aria-expanded');
                    if (isShow === 'false') {
                        button.text('点击收起');
                    } else {
                        button.text("商品" + length + "件,点击展开");
                    }
                },
                toggleRejectedBill(id, length) {
                    let button = $("#rejectedBillBtn" + id);
                    let isShow = button.attr('aria-expanded');
                    if (isShow === 'false') {
                        button.text('点击收起');
                    } else {
                        button.text("商品" + length + "件,点击展开");
                    }
                },
                toggleseCondOrderNumbers(id, length) {
                    let button = $("#secondOrderNumbersBtn" + id);
                    let isShow = button.attr('aria-expanded');
                    if (isShow === 'false') {
                        button.text('点击收起');
                    } else {
                        button.text("分箱" + length + "件,点击展开");
                    }
                },
                hideOrderInfo() {
                    this.isShowOrderInfo = false;
                },
                hideRejectedBill() {
                    this.isShowRejectedBill = false;
                },
                hideSecondOrder() {
                    this.isShowSecondOrderInfo = false;
                },
                showOrderInfo() {
                    this.isShowOrderInfo = true;
                },
                showRejectedBill() {
                    this.isShowRejectedBill = true;
                },
                showSecondeOrder() {
                    this.isShowSecondOrderInfo = true;
                },
                pageTurning(e){
                    let page = $(e.target).val();
                    if (page > this.page.lastPage) {
                        return;
                    }
                    this.goPage(page);
                },
                goPage(page){
                    let href = window.location.href;
                    if(href.indexOf('?')===-1){
                        href+='?'
                    }
                    if(href.indexOf('page=')!==-1){
                        href = href.replace('page='+this.page.curPage,'page='+page);
                    }else{
                        href+='&page='+page;
                    }
                    window.location = href;
                }
            }
        })
        // modal 隐藏时修改 input 为空
        $("#exampleModal").on('hide.bs.modal', function (e) {
            $('#remark').val('');
        });

    </script>
@endsection