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="@cannot('订单管理-问题件-客户不可见')min-width: 3000px;@else min-width: 1990px; @endcannot">
            <div id="list" class="d-none container-fluid">
                <div id="form_div" style="min-width: 2250px;"></div>
                <div class="form-inline mt-1" id="btn">
                    <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   tooltipTarget"
                                @click="endOrderIssue" :class="[checkData.length>0?'btn-dark text-light':'']"
                                style="background: #dad7e8;">批量完结</button>
                    </span>
                    @endcannot
                    @can('订单管理-问题件-删除')
                        <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="batchDeleteOrderIssue">批量删除</button>
                    </span>
                    @endcan
                    @can('订单管理-问题件-编辑')
                        <span class="ml-1">
                            <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="batchStoreLogsModel" style="background: #d7e8df;">批量处理说明</button>
                        <span class="ml-1">
                            <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="batchOthersModel">批量处理赔偿金额与事故责任方</button>
                        </span>
                    @endcan
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="copyOrderNo" style="background: #dad7e8;">复制快递单号</button>
                    </span>
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                @click="importdispose">批量导入处理</button>
                    </span>
                    <span class="ml-1">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                            @click="copyRejectedLogisticNumber" style="background: #dad7e8;">复制退回单号</button>
                    </span>
                    @cannot('订单管理-问题件-客户不可见')
                                @can('订单管理-问题件-财务确认')
                                    <span class="ml-1">
                                <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                        @click="financeConfirm('是')" style="background: #d7e8df;">批量财务确认
                                </button>
                                </span>
                                    <span class="ml-1">
                                <button type="button" class="btn btn-outline-dark btn-sm form-control-sm  tooltipTarget"
                                        @click="financeConfirm('否')">  批量财务确认取消
                                </button>
                            </span>
                                @endcan
                                @can('订单管理-问题件-批量归档')
                                    <span class="ml-1">
                                <button type="button" class="btn btn-outline-primary btn-sm form-control-sm tooltipTarget"
                                        @click="archiveOrderIssue" v-show="checkData.length>0">批量归档
                                </button>
                            </span>
                    @endcan
                    @endcannot
                </div>
                <table class="table table-sm table-striped table-bordered table-hover card-body p-0 m-0"
                       style="background: #fff;@cannot('订单管理-问题件-客户不可见')min-width: 3000px;@else min-width: 1990px; @endcannot">
                    <tr class="tr-yellow align-center">
                        <th class=" font-weight-bolder header-1"></th>
                        <th class="td-yellow  font-weight-bolder original-class table-head-warning  header-2 text-center" colspan="8">
                            原始运单
                        </th>
                        <th class="font-weight-bolder header-3 text-center" colspan="14">
                            情况说明
                        </th>
                        @cannot('订单管理-问题件-客户不可见')
                            <th></th>
                        @endcannot
                    </tr>

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

                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 95px;min-width: 95px;">订单日期</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 100px;min-width: 100px;">客户</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 120px;min-width: 120px;">店铺</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 150px;min-width: 150px;">客户订单号</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 100px;min-width: 100px;">原始承运商</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width: 150px;min-width: 150px;">原始运单号</th>
                        {{--原始商品明细 开始--}}
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width: 200px">收货人名称</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width: 200px;">收货人电话</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width: 70px">省</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width: 70px">市</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width: 70px">区</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" rowspan="2"
                            style="min-width:300px">收货人地址</th>
                        <th class="tow-layer align-middle td-yellow" v-show="isShowOrderInfo" colspan="3"
                            style="min-width:300px">原始商品明细</th>
                        <th class="tow-layer align-middle td-yellow" rowspan="2" style="max-width:50px">@{{
                            isShowOrderInfo? '隐藏':'展开' }}</th>
                        {{--原始商品明细 结束--}}

                        {{--原始商品明细 开始--}}
                        <th class="three-layer   align-middle" rowspan="2" style="max-width:50px">@{{ isShowRejectedBill
                            ? '隐藏':'展开' }}</th>
                        <th class="three-layer align-middle" rowspan="2" v-show="isShowRejectedBill"
                            style="min-width:265px">退回单号</th>
                        <th class="three-layer   align-middle" colspan="5" v-show="isShowRejectedBill"
                            style="min-width: 450px">返回商品明细</th>
                        <th class="three-layer bg-whit  align-middle" rowspan="2" style="min-width: 180px">情况说明</th>
                        <th class="three-layer   align-middle" rowspan="2" style="min-width: 115px">问题类别</th>
                        <th class="three-layer  align-middle" colspan="4" style="min-width: 155px">处理结果</th>
                        @cannot('订单管理-问题件-客户不可见')
                            <th class="three-layer  align-middle" rowspan="2"
                                style="width:50px">@{{ isShowSecondOrderInfo ? '隐藏':'展开' }}</th>
                            <th class="three-layer  align-middle" rowspan="2" v-show="isShowSecondOrderInfo"
                                style=" min-width: 120px;">二次客户订单号</th>
                            <th class="three-layer  align-middle" rowspan="2" v-show="isShowSecondOrderInfo"
                                style=" min-width: 100px;">二次承运商</th>
                            <th class="three-layer  align-middle" rowspan="2" v-show="isShowSecondOrderInfo"
                                style=" min-width: 200px;">二次运单号</th>
                            <th class="three-layer" colspan="3" v-show="isShowSecondOrderInfo" style=" min-width: 350px;">
                                二次商品明细</th>
                        @endcannot
                        {{--原始商品明细 结束--}}
                        @cannot('订单管理-问题件-客户自定义订单号')
                            <th class="three-layer  align-middle" rowspan="2" style="min-width: 120px">自定义订单号</th>
                        @endcannot
                        @cannot('订单管理-问题件-客户不可见')
                            <th class="three-layer  align-middle" rowspan="2" style="min-width: 120px">承运商赔偿金额</th>
                            <th class="three-layer  align-middle" rowspan="2" style="min-width: 120px">承运商快递减免</th>
                        @endcannot
                        <th class="three-layer  align-middle" rowspan="2" style="min-width: 120px">宝时赔偿金额</th>
                        <th class="three-layer  align-middle" rowspan="2" style="min-width: 120px">宝时快递减免</th>
                        @cannot('订单管理-问题件-客户不可见')
                            <th class="three-layer  align-middle" rowspan="2" style="min-width: 200px">仓库组责任方</th>
                            <th class="three-layer  align-middle" rowspan="2" style="min-width: 200px">项目组责任方</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-show="isShowOrderInfo" style="min-width: 120px">条码</th>
                        <th class="td-yellow" v-show="isShowOrderInfo" style="min-width: 150px">商品名</th>
                        <th class="td-yellow" v-show="isShowOrderInfo" style="min-width: 75px">数量</th>
                        @cannot('订单管理-问题件-客户不可见')
                            <th v-show="isShowRejectedBill" style="min-width: 75px">条码</th>
                            <th v-show="isShowRejectedBill" style="min-width: 100px">商品名</th>
                            <th v-show="isShowRejectedBill" style="min-width: 50px">数量</th>
                            <th v-show="isShowRejectedBill" style="min-width: 50px">是否正品</th>
                            <th v-show="isShowRejectedBill" style="min-width: 100px">备注</th>
                        @endcannot
                        <th style="max-width: 135px">说明</th>
                        <th style="max-width: 55px">操作者</th>
                        <th style="max-width: 135px">时间</th>
                        <th></th>
                        @cannot('订单管理-问题件-客户不可见')
                            <th v-show="isShowSecondOrderInfo" style="min-width: 100px">条码</th>
                            <th v-show="isShowSecondOrderInfo" style="min-width: 100px">商品名</th>
                            <th v-show="isShowSecondOrderInfo" style="min-width: 75px">数量</th>
                        @endcannot
                    </tr>

                    <tbody id="tbody">
                    <tr class="tr-yellow text-center table-body" v-if="orderIssues"
                        v-for="(orderIssue,index) in orderIssues"
                        @click="selectedColor(orderIssue.id,$event)" :class="orderIssue.top ? 'tr_top':''"
                        v-on:mouseover="hidetop($event)" v-on:mouseleave="showtop($event)">
                        <td class="child-layer-1">
                            <div class="m-0 p-0 " :style="[{'min-height':orderIssue.top ?'72px':'45px'}]">
                                <label>
                                    <input class="checkItem" type="checkbox" :value="orderIssue.id" v-model="checkData">
                                </label>
                            </div>
                        </td>
                        <td class="child-layer-1 text-nowrap">
                            @{{index+1}}
                            <span class="text-muted" v-show="orderIssue.finance_confirm === '是'">财务确认</span>
                        </td>
                        <td class="child-layer-1">
                            @{{ orderIssue.id }}
                            @can('订单管理-问题件-编辑')
                                <button v-if="orderIssue.imported_status === '导入未处理'" type="button"
                                        class="btn btn-sm btn-primary"
                                        @click="updateOrderIssue(orderIssue,'imported_status',$event)">导入</button>
                            @endcan
                        </td>
                        @cannot('订单管理-问题件-客户不可见')
                            <td class="child-layer-1">
                                @can('订单管理-问题件-编辑')
                                    <button v-if="orderIssue.is_new_rejecting === '有'" type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            @click="disposeOrderIssue(orderIssue)">有</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 child-layer-1">
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                            @click="cancelOnTop(orderIssue.top.id)" style="opacity: 0.75"
                                            v-if="orderIssue.top">取消</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            @click="OrderIssueOnTop(orderIssue.id)" :data-value="orderIssue.id"
                                            style="opacity: 0.75" v-else>置顶</button>
                                </td>
                            @endcan
                            <td class="child-layer-1">
                                @can('订单管理-问题件-编辑')
                                    <label>
                                        <select class="form-control form-control-sm"
                                                :value="orderIssue.rejecting_status"
                                                @change="updateOrderIssue(orderIssue,'rejecting_status',$event)">
                                            <option v-for="item in rejectingStatus" :value="item.name">@{{ item.value }}</option>
                                        </select>
                                    </label>
                                @else
                                    @{{ orderIssue.rejecting_status }}
                                @endcan
                            </td>
                        @endcannot

                        <td class="child-layer-1">
                            @can('订单管理-问题件-编辑')
                                <label>
                                    <select class="form-control form-control-sm" :value="orderIssue.final_status"
                                            @change="updateOrderIssue(orderIssue,'final_status',$event)">
                                        <option v-for="item in finalStatus" :value="item.value">@{{ item.name }}</option>
                                    </select>
                                </label>
                            @else
                                @{{ orderIssue.final_status }}
                            @endcan
                        </td>

                        @cannot('订单管理-问题件-客户不可见')
                            <td class="toptd td-yellow child-layer-2 m-0 p-0 pt-1">
                                <div v-if="orderIssue.remark"
                                     class="bg-light-yellow  text-danger top text-left position-absolute"
                                     data-toggle="tooltip" style="opacity: 0.1;z-index: 1">置顶备注：@{{ orderIssue.remark }}</div>
                                @{{ orderIssue.created_at  }}
                            </td>
                        @endcannot

                        <td class="td-yellow child-layer-2  m-0 p-0 pt-1">
                            @cannot('订单管理-问题件-客户不可见')
                            @else
                                <div v-if="orderIssue.top" class="bg-light-yellow  text-danger top text-left"
                                     data-toggle="tooltip" style="opacity: 0.1;position: absolute;z-index: 1">置顶备注：@{{ orderIssue.top.remark}}</div>
                            @endcannot
                            @{{ orderIssue.order.created_at }}
                        </td>
                        <td class="td-yellow child-layer-2">
                            <span v-if='orderIssue.order.owner'>@{{ orderIssue.order.owner.name }}</span>
                        </td>
                        <td class="td-yellow child-layer-2">
                            <span v-if="orderIssue.order.shop">@{{ orderIssue.order.shop.name }}</span>
                        </td>
                        <td class="td-yellow child-layer-2">
                            <span v-if="orderIssue.order">@{{ orderIssue.order.client_code }}</span>
                        </td>
                        <td class="td-yellow child-layer-2">
                            <span v-if='orderIssue.order.logistic'>@{{ orderIssue.order.logistic.name }}</span>
                        </td>
                        <td class=" hide-content p-0 td-yellow child-layer-2 align-center">
                            <template v-if="orderIssue.order">
                                <span :class="orderIssue.order.packages.length > 1 ?'collapse ':''"
                                      :id="'logisticNumbers'+orderIssue.id">
                                    <span class="m-0 p-0 d-inline-block" v-for="package in orderIssue.order.packages">@{{ package.logistic_number!==orderIssue.order.code ? package.logistic_number:'' }}&nbsp;&nbsp;</span>
                                </span>
                                <button type="button" class="btn btn-sm btn-outline-primary align-middle mt-1"
                                    v-if="orderIssue.order.packages.length > 1"
                                    :id="'logisticNumbersBtn'+orderIssue.id" data-toggle="collapse"
                                    :data-target="'#logisticNumbers'+orderIssue.id"
                                    @click="toggleLogisticNumbers(orderIssue.id,orderIssue.order.packages.length)"
                                    >分箱@{{ orderIssue.order.packages.length }}件,点击展开</button>
                            </template>
                        </td>

                        {{--商品明细 开始--}}
                        <td class="td-yellow child-layer-2-hide text-wrap text-letter" v-show="isShowOrderInfo"
                            style="max-width: 320px">@{{ orderIssue.order.consignee_name }}
                        </td>
                        <td class="td-yellow child-layer-2-hide text-wrap text-letter" v-show="isShowOrderInfo"
                            style="max-width: 320px">@{{ orderIssue.order.consignee_phone }}
                        </td>
                        <td class="td-yellow child-layer-2-hide" v-show="isShowOrderInfo">@{{ orderIssue.order.province }}</td>
                        <td class="td-yellow child-layer-2-hide" v-show="isShowOrderInfo">@{{ orderIssue.order.city }}</td>
                        <td class="td-yellow child-layer-2-hide" v-show="isShowOrderInfo">@{{ orderIssue.order.district }}</td>
                        <td class="td-yellow child-layer-2-hide" style="max-width: 400px" v-show="isShowOrderInfo">
                            <span class="text-wrap m-0 p-0 text-wrap text-letter" style="max-width: 550px">@{{ orderIssue.order.address }}</span>
                        </td>
                        <td class="td-yellow p-0 child-layer-2-hide" :id="orderIssue.id+'items'" colspan="3"
                            v-show="isShowOrderInfo">
                            <div v-if="orderIssue.order">
                                <table class="table table-sm m-0" v-if="orderIssue.order.packages"
                                       :class="orderIssue.order.type_numbers > 1? 'collapse' : ''"
                                       :id="'order'+orderIssue.id">
                                    <template v-for="packages in orderIssue.order.packages">
                                        <tr v-for="item in packages.commodities" class="text-center align-center"
                                            v-if="item.commodity" @click="removeFocusing($event)">
                                            <td>@{{ item.commodity.sku }}</td>
                                            <td>
                                                <p class="text-truncate text-primary m-0 p-0 tooltipTarget"
                                                   style="width: 100px;cursor:pointer;text-decoration: underline"
                                                   title="双击展开" @dblclick="nowrapText($event)">@{{ item.commodity.name }}</p>
                                                <p class="text-nowrap m-0 p-0 tooltipTarget"
                                                   style="display: none;cursor:pointer" @dblclick="truncateText($event)"
                                                   title="双击收起">@{{ item.commodity.name }}</p>
                                            </td>
                                            <td>@{{ item.amount }}</td>
                                        </tr>
                                    </template>
                                </table>
                                <button v-if="orderIssue.order.type_numbers > 1" type="button"
                                        class="btn btn-sm btn-outline-primary mt-1" :id="'orderBtn'+orderIssue.id"
                                        @click="toggleOrder(orderIssue.id,orderIssue.order.amounts)"
                                        data-toggle="collapse" :data-target="'#order'+orderIssue.id">
                                    商品@{{ orderIssue.order.amounts }}件,点击展开
                                </button>
                            </div>
                        </td>
                        <td class="td-yellow p-0 m-0 child-layer-2 w-50"  style="width:50px;" v-if="index===0" :rowspan="orderIssues.length">
                            <span class="btn" :class="isShowOrderInfo ? 'btn-outline-secondary':'btn-outline-info'"
                                  @click="toggleOrderInfo" :style="{'min-height':toggleBtnHeight+'px'}">
                                @{{ isShowOrderInfo ? '隐藏运单列' : '展开运单列'}}
                            </span>
                        </td>
                        {{--商品明细 结束--}}

                        {{--情况说明 开始--}}
                        <td class="p-0 m-0 child-layer-3" style="width:50px;" v-if="index===0"
                            :rowspan="orderIssues.length">
                            <span class="btn" :class="isShowRejectedBill ? 'btn-outline-secondary':'btn-outline-info'"
                                  @click="toggleRejectedBill" :style="{'min-height':toggleBtnHeight+'px'}">
                                @{{ isShowRejectedBill ? '隐藏退单列' : '展开退单列'}}
                            </span>
                        </td>
                        <td class="text-muted child-layer-3-hide" v-show="isShowRejectedBill">
                            @can('订单管理-问题件-编辑')
                                <div class="form-inline">
                                    <div class="form-group">
                                        {{--添加--}}
                                        <input type="text" class="form-control form-text form-control-sm mr-1">
                                        <button class="btn btn-sm btn-primary"
                                                @click="joinRejectedBill(orderIssue,$event)">添加
                                        </button>
                                    </div>
                                </div>
                                <div class="form-inline"
                                     v-for="orderIssueRejectedBill in orderIssue.order_issue_rejected_bills">
                                    {{--修改--}}
                                    <input type="text" class="form-control form-control-sm mt-1 mr-1"
                                           :value="orderIssueRejectedBill.logistic_number_return"
                                           @change="reviseJoinRejectedBill(orderIssue,orderIssueRejectedBill.logistic_number_return,$event)"
                                           @focus="displayDelBtn(true,$event)" @blur="displayDelBtn(false,$event)">
                                    {{--删除--}}
                                    <button type="button" class="btn btn-sm btn-outline-danger mt-1 d-none"
                                            @click="unJoinRejectedBill(orderIssue,orderIssueRejectedBill.logistic_number_return)">
                                        删
                                    </button>
                                </div>
                            @else
                                <span v-for="order_issue_rejected_bill in orderIssue.order_issue_rejected_bills">
                                    <span class="d-inline-block w-100">@{{ order_issue_rejected_bill.logistic_number_return }}</span>
                                </span>
                            @endcan
                        </td>

                        <td class="p-0 child-layer-3-hide align-center" :id="orderIssue.id+'rejectedBill'" colspan="5"
                            v-show="isShowRejectedBill">
                            <div v-if="orderIssue.order_issue_rejected_bills" class="m-0 p-0">
                                <table class="table table-sm m-0"
                                       :class="orderIssue.rejected_bill_type_numbers > 2 ? 'collapse' : '' "
                                       :id="'rejectedBill'+orderIssue.id">
                                    <template
                                        v-for="order_issue_rejected_bill in orderIssue.order_issue_rejected_bills">
                                        <template v-if="order_issue_rejected_bill.rejected_bill">
                                            <tr v-for="item in order_issue_rejected_bill.rejected_bill.items"
                                                @click="removeFocusing($event)" v-show="isShowRejectedBill">
                                                <td class="w-50">@{{ item.barcode_goods }}</td>
                                                <td>
                                                    <div class="text-truncate text-primary tooltipTarget w-100"
                                                         style="cursor:pointer;text-decoration: underline" title="双击展开"
                                                         @dblclick="nowrapText($event)">@{{ item.name_goods }}
                                                    </div>
                                                    <div class="text-nowrap m-0 p-0 tooltipTarget"
                                                         style="display: none;cursor:pointer"
                                                         @dblclick="truncateText($event)" title="双击收起">@{{
                                                        item.name_goods }}
                                                    </div>
                                                </td>
                                                <td class="w-25">@{{ item.amount }}</td>
                                                <td class="w-25">@{{ item.quality_label }}</td>
                                                <td class="w-auto">@{{ item.remark }}</td>
                                            </tr>
                                        </template>
                                    </template>
                                </table>
                                <button v-if="orderIssue.rejected_bill_type_numbers > 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="toggleRejectedBillItems(orderIssue.id,orderIssue.rejected_bill_amounts)">
                                    商品@{{ orderIssue.rejected_bill_amounts }}件,点击展开
                                </button>
                            </div>
                        </td>

                        <td class="child-layer-3">
                            @can('订单管理-问题件-编辑')
                                <textarea class="form-control form-control-sm"
                                          @change="updateOrderIssue(orderIssue,'result_explain',$event)"
                                          data-toggle="tooltip" data-placement="bottom"
                                          :title="orderIssue.result_explain"
                                          :cols="orderIssue.result_explain==null?'': (orderIssue.result_explain.length>10?10:orderIssue.result_explain.length)"
                                          :rows="orderIssue.result_explain==null?2: (orderIssue.result_explain.length>10?(Math.ceil(orderIssue.result_explain.length)/10)+1:2)"
                                >@{{ orderIssue.result_explain }}</textarea>
                            @else
                                @{{ orderIssue.result_explain}}
                            @endcan
                        </td>
                        <td class="child-layer-3">
                            @can('订单管理-问题件-编辑')
                                <select class="form-control form-control-sm" :value="orderIssue.order_issue_type_id"
                                        @change="updateOrderIssue(orderIssue,'order_issue_type_id',$event)">
                                    <option value></option>
                                    <option v-for="type in orderIssueType" :value="type.name">@{{ type.value }}</option>
                                    <select>
                                        @else
                                            <span v-if="orderIssue.issue_type">@{{ orderIssue.issue_type.name}}</span>
                            @endcan
                        </td>

                        <td class=" m-0 p-0 log-td child-layer-3  align-center" v-on:mouseover="showAddBtn($event)"
                            v-on:mouseleave="hideAddBtn($event)" colspan="4">
                            @can('订单管理-问题件-处理结果添加')
                                <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>

                                <div class="addLogDiv row m-0 p-0 form-group" :id="'AddLog_'+orderIssue.id"
                                     style="display: none;">
                                    <input type="hidden" name="id" :value="orderIssue.id">
                                    <div style="width: 45px"></div>
                                    <div class="form-inline m-2">
                                        <input type="text" name="content" class="form-control m-0 p-0" style="width: 275px"
                                               required>
                                        <button type="button" class="btn btn-primary ml-2 m-0 p-0"
                                                @click="addOrderIssueLog('AddLog_'+orderIssue.id,orderIssue)" style="width: 50px">添加
                                        </button>
                                    </div>
                                </div>

                            @endcan
                            <template v-if="orderIssue.logs && orderIssue.logs.length > 0" class="p-0 m-0">
                                <table class="table table-sm p-0 m-0 " :id="'logs'+orderIssue.id">
                                    <tr class="align-center position-static" v-for="(log,logIndex) in orderIssue.logs"
                                        @click="removeFocusing($event)" v-on:mouseover="showDelBtn($event)"
                                        v-on:mouseleave="hideDelBtn($event)">
                                        <template v-if="logIndex<2||orderIssue.log_is_show===true">
                                            <td style="max-width: 175px;min-width: 175px;">@{{ log.content }}</td>
                                            <td class="text-muted" style="max-width: 55px;min-width: 55px;">
                                                <span v-if="log.user">@{{ log.user.name}}</span>
                                            </td>
                                            <td class="text-muted" style="max-width: 95px;min-width: 95px;">@{{ log.created_at }}</td>
                                            @can('订单管理-问题件-处理结果删除')
                                                <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,orderIssue,index,logIndex)">
                                                        删
                                                    </button>
                                                </td>
                                            @endcan
                                        </template>
                                    </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,index)">
                                    记录共@{{ orderIssue.logs.length }}条,点击展开
                                </button>
                            </template>
                            <div v-else class="w-auto h-50">

                            </div>
                        </td>
                        {{--情况说明 结束--}}

                        {{--客户编辑 开启--}}
                        @cannot('订单管理-问题件-客户不可见')
                            <td class="p-0 m-0 child-layer-3  " style="min-width:50px;" v-if="index===0" :rowspan="orderIssues.length">
                                <span class="btn text-center"
                                      :class="isShowSecondOrderInfo ?'btn-outline-secondary': 'btn-outline-info'"
                                      @click="togglSecondeOrder" :style="{'min-height':toggleBtnHeight+'px'} ">@{{ isShowSecondOrderInfo ? '隐藏运单列':'展开运单列' }}</span>
                            </td>
                            <td class="child-layer-3-hide" v-show="isShowSecondOrderInfo">
                                @can('订单管理-问题件-编辑')
                                    <input class="form-control form-control-sm"
                                           @change="editSecondClientNo(orderIssue,$event)"
                                           :value="orderIssue.second_client_no">
                                @else
                                    @{{ orderIssue.second_client_no }}
                                @endcan
                            </td>
                            <td class="child-layer-3-hide" v-show="isShowSecondOrderInfo">
                                <span v-if="orderIssue.second_order" class="p-0">
                                    <span v-if="orderIssue.second_order.logistic">@{{ orderIssue.second_order.logistic.name }}</span>
                                </span>
                            </td>
                            <td class="log-td p-0 child-layer-3-hide" v-show="isShowSecondOrderInfo"
                                v-on:mouseover="edit.orderIssue.id=orderIssue.id"
                                v-on:mouseleave="edit.orderIssue.id = null">
                                <div class="row position-absolute p-0 m-0" v-if="edit.orderIssue.id === orderIssue.id"
                                     :class="edit.orderIssue.id === orderIssue.id ? '':'d-none'">
                                    <button type="button" class="btn btn-primary " style="margin-top: -35px"
                                            @click="edit.orderIssue.showId === orderIssue.id ? edit.orderIssue.showId='':edit.orderIssue.showId=orderIssue.id">
                                        新
                                    </button>
                                </div>
                                <div class="row p-0 m-0" v-if="edit.orderIssue.showId === orderIssue.id ">
                                    <div class="form-inline">
                                        <input class="form-control" :id="'secondLogisticNumber-'+orderIssue.id">
                                        <button type="button" class="btn btn-sm btn-primary"
                                                @click="addSecondLogisticNumber(orderIssue)">添加
                                        </button>
                                    </div>
                                </div>

                                <div v-if="orderIssue.second_order !== null">
                                    <div class="text-center m-0" :id="'secondOrderNumbers'+orderIssue.id"
                                         :class="orderIssue.seconderCount > 1 ? 'collapse':''">
                                        <p class="m-0 p-0  text-muted "
                                           v-for="package in orderIssue.second_order.packages">@{{
                                            package.logistic_number }}</p>
                                    </div>
                                    <button v-if="orderIssue.second_order.packages.length > 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.packages.length)">
                                        分箱@{{ orderIssue.second_order.packages.length }}件,点击展开
                                    </button>
                                </div>
                                <div v-else-if="orderIssue.second_order === null">
                                    @{{orderIssue.second_logistic_number}}
                                    @can('订单管理-问题件-编辑')
                                        <button v-if="orderIssue.second_logistic_number" type="button"
                                                class="btn btn-sm btn-danger ml-1"
                                                @click="destroySecondLogisticNumber(orderIssue)">删
                                        </button>
                                    @endcan
                                </div>
                            </td>
                            <td class="child-layer-3-hide p-0" colspan="3" v-show="isShowSecondOrderInfo">
                                <template v-if="orderIssue.second_order!==null" class=" p-0">
                                    <div class="m-0 p-0"
                                         :class="orderIssue.second_order.type_numbers > 1 ? 'collapse':''"
                                         :id="'secondOrder'+orderIssue.id">
                                        <table class="table table-sm  m-0 ">
                                            <template v-for="packages in orderIssue.second_order.packages">
                                                <tr v-for="item in packages.commodities" v-if="item.commodity">
                                                    <td>@{{ item.commodity.sku }}</td>
                                                    <td>
                                                        <div class="text-truncate text-primary tooltipTarget"
                                                             style="width: 100px;cursor:pointer;text-decoration: underline"
                                                             title="双击展开" @dblclick="nowrapText($event)">@{{
                                                            item.commodity.name }}
                                                        </div>
                                                        <div class="text-nowrap tooltipTarget"
                                                             style="display: none;cursor:pointer"
                                                             @dblclick="truncateText($event)" title="双击收起">@{{
                                                            item.commodity.name }}
                                                        </div>
                                                    </td>
                                                    <td>@{{ 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.second_order.amounts > 0"
                                            :id="'secondOrderBtn'+orderIssue.id"
                                            :data-target="'#secondOrder'+orderIssue.id"
                                            @click="toggleSecond(orderIssue.id,orderIssue.secondeOrderItems)">
                                        商品@{{ orderIssue.second_order.amounts }}件,点击展开
                                    </button>
                                </template>
                            </td>
                        @endcannot
                        @cannot('订单管理-问题件-客户自定义订单号')
                            <td>
                                <input class="form-control form-control-sm" :value="orderIssue.custom_code"
                                       @change="updateOrderIssue(orderIssue,'custom_code',$event)">
                            </td>
                        @endcan
                        @cannot('订单管理-问题件-客户不可见')
                            <td class="child-layer-3">
                                @can('订单管理-问题件-编辑')
                                    <input type="number" class="form-control form-control-sm"
                                           :value="orderIssue.logistic_indemnity_money"
                                           @change="updateOrderIssue(orderIssue,'logistic_indemnity_money',$event)">
                                @else
                                    @{{ orderIssue.logistic_indemnity_money }}
                                @endcan
                            </td>
                            <td class="child-layer-3">
                                @can('订单管理-问题件-编辑')
                                    <select class="form-control form-control-sm"
                                            :value="orderIssue.logistic_express_remission"
                                            @change="updateOrderIssue(orderIssue,'logistic_express_remission',$event)">
                                        <option value></option>
                                        <option v-for="item in expressRemission" :value="item">@{{ item }}</option>
                                    </select>
                                @else
                                    @{{ orderIssue.logistic_express_remission }}
                                @endcan
                            </td>
                        @endcannot
                        <td class="child-layer-3">
                            @can('订单管理-问题件-编辑')
                                <input type="number" class="form-control form-control-sm"
                                       :value="orderIssue.baoshi_indemnity_money"
                                       @change="updateOrderIssue(orderIssue,'baoshi_indemnity_money',$event)">
                            @else
                                @{{ orderIssue.baoshi_indemnity_money }}
                            @endcan
                        </td>
                        <td class="child-layer-3">
                            @can('订单管理-问题件-编辑')
                                <select class="form-control form-control-sm"
                                        :value="orderIssue.baoshi_express_remission"
                                        @change="updateOrderIssue(orderIssue,'baoshi_express_remission',$event)">
                                    <option value></option>
                                    <option v-for="item in expressRemission" :value="item">@{{ item }}</option>
                                </select>
                            @else
                                @{{ orderIssue.baoshi_express_remission }}
                            @endcan
                        </td>
                        @cannot('订单管理-问题件-客户不可见')
                            <td class="child-layer-3">
                                <table class="table table-sm">
                                    <tr colspan="2">
                                        <td colspan="2">
                                            <select class="form-control form-control-sm"
                                                    @change="addUserWorkgroup(orderIssue,'user_workgroup_id',$event)">
                                                <option value></option>
                                                <option v-for="item in userWorkGroup" :value="item.name">@{{ item.value
                                                    }}
                                                </option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr v-for="(user_workgroup,j) in orderIssue.user_workgroups"
                                        v-if="j<2 || orderIssue.is_show_user_workgroup">
                                        <td>@{{ user_workgroup.name }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-danger"
                                                    @click="deleteUserWorkgroup(user_workgroup,j,orderIssue)">
                                                删除
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" v-if="orderIssue.user_workgroups.length > 2">
                                            <div class="row" @click="showUserWorkgroup(orderIssue)"
                                                 v-if="orderIssue.user_workgroups.length > 2">
                                                <label class="text-center mt-0 p-0 cursor-pointer offset-5">
                                        <span class="fa"
                                              :class="orderIssue.is_show_user_workgroup ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                                    &nbsp;<span v-if="orderIssue.is_show_user_workgroup">收起</span><span
                                                        v-if="!orderIssue.is_show_user_workgroup">展开</span>共@{{
                                                    orderIssue.user_workgroups.length }} 条
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>

                            </td>
                            <td>
                                @can('订单管理-问题件-编辑')
                                    <select v-model="orderIssue.user_owner_group_id"
                                            class="form-control form-control-sm"
                                            @change="updateOrderIssue(orderIssue,'user_owner_group_id',$event)">
                                        <option></option>
                                        <option v-for="(userOwnerGroup,index) in userOwnerGroups"
                                                :value="userOwnerGroup.name">@{{ userOwnerGroup.value }}
                                        </option>
                                    </select>
                                @else
                                    @{{ orderIssue.user_owner_group ? orderIssue.user_owner_group.name : '' }}
                                @endcan
                            </td>
                            {{--客户编辑 结束--}}
                            <td>
                                @can('订单管理-问题件-编辑')
                                    <a :href="'edit/'+orderIssue.id" class="btn btn-sm btn-outline-primary"
                                       target="_blank">改</a>
                                @endcan
                                @can('订单管理-问题件-删除')
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                            @click="deleteOrderIssue(orderIssue.id)">删
                                    </button>
                                @endcan
                            </td>
                        @endcannot
                    </tr>
                    </tbody>
                </table>
                <div class="text-info h5 btn btn">{{$orderIssues->count()}}/@{{ total }}</div>
                {{$orderIssues->withQueryString()->links()}}
            </div>
        </div>

        {{--batchStore logs--}}
        <div class="modal fade" id="batchStoreLogsModel" tabindex="-1" role="dialog" aria-labelledby="logsLabel"
             aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logsLabel">输入处理内容</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                @click="edit.batchStoreLogs=''">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <textarea id="logsContent" class="form-control" v-model="edit.batchStoreLogs"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                @click="edit.batchStoreLogs=''">取消
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="batchStoreLogs">确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="batchOthersModel" tabindex="-1" role="dialog" aria-labelledby="othersLabel"
             aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <h5 class="modal-title" id="othersLabel">承运商赔偿金额</h5>
                        <input type="number" v-model="edit.batchOthers.logistic_indemnity_money"
                               class="form-control form-control-sm">
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="othersLabel">承运商快递减免</h5>
                        <select class="form-control form-control-sm"
                                v-model="edit.batchOthers.logistic_express_remission">
                            <option disabled value="">请选择</option>
                            <option v-for="item in expressRemission" :value="item">@{{ item }}</option>
                        </select>
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="othersLabel">宝时赔偿金额</h5>
                        <input type="number" v-model="edit.batchOthers.baoshi_indemnity_money"
                               class="form-control form-control-sm">
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="othersLabel">宝时快递减免</h5>
                        <select class="form-control form-control-sm"
                                v-model="edit.batchOthers.baoshi_express_remission">
                            <option disabled value="">请选择</option>
                            <option v-for="item in expressRemission" :value="item">@{{ item }}</option>
                        </select>
                    </div>

                    <div class="modal-body">
                        <h5 class="modal-title" id="logsLabel">事故责任方</h5>
                        <span v-for="item in userWorkGroup">
                             <input v-model="edit.batchOthers.userWorkGroupIds" type="checkbox" name="vehicle"
                                    :value="item.name"/> @{{ item.value }}
                        </span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="batchOthers()">确认
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{--delete OrderIssue--}}
        <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>
        <textarea id="clipboardDiv" style="opacity:0"></textarea>
    </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="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.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],
                userWorkGroup: [
                        @foreach($userWorkgroup as $item)
                    {
                        name:{{$item->id}}, value: '{{$item->name}}'
                    },
                    @endforeach
                    {name:'空',value:'空'},
                    ],
                userOwnerGroups:{!! $userOwnerGroups !!},
                rejectingStatus: [
                    {name: '无', value: '无'},
                    {name: '未退回', value: '未退回'},
                    {name: '全部退回', value: '全部退回'},
                    {name: '部分退回', value: '部分退回'},
                    {name: '差异退回', value: '差异退回'},
                    {name: '超量退回', value: '超量退回'},
                    {name: '全部退回', value: '全部退回'},
                ],
                logistics: [
                        @foreach($logistics as $logistic)
                    {
                        name:{{$logistic->id}}, value: '{{$logistic->name}}'
                    },
                    @endforeach
                ],
                expressRemission: ['原单减免', '补发减免', '全部减免'],
                checkData: [],
                from: '',
                finalStatus: [{value: '', name: ""}, {value: '已解决', name: "已解决"}, {
                    value: '待退回',
                    name: "待退回"
                }, {value: '退回中', name: "退回中"}, {value: '已归档', name: "已归档"},],//['无','已解决', '待退回', '退回中'，'已归档'],
                selectedStyle: '',
                deleteId: '',
                total: {!!  $orderIssues->toJson() !!}['total'],
                isShowOrderInfo: false,
                isShowRejectedBill: false,
                isShowSecondOrderInfo: false,
                message: {},
                edit: {
                    batchStoreLogs: '',
                    batchOthers: {
                        logistic_indemnity_money: null,
                        logistic_express_remission: null,
                        baoshi_indemnity_money: null,
                        baoshi_express_remission: null,
                        userWorkGroupIds: []
                    },
                    isShow: [],
                    addSendOrderIssueID: '',
                    orderIssue: {id: null, showId: ''},
                },
                toggleBtnHeight: null,
            },
            created() {
                let _this = this;
                $.each(this.orderIssues, function (i, orderIssue) {
                    _this.regroupOrder(orderIssue.order);
                    _this.regroupOrder(orderIssue.second_order);
                    _this.regroupRejectedBill(orderIssue);
                    _this.regroupLogs(orderIssue);
                    _this.regroupUserGroup(orderIssue);
                });
                this.userOwnerGroups.forEach(function (item, index, array) {
                    array[index] = {name: item.id, value: item.name};
                });
            },
            mounted: function () {

                $(".tooltipTarget").tooltip({'trigger': 'hover'});

                let tr = $('.tr-yellow')[1];
                let countShow = $(tr).children('.one-layer').length;
                $('.header-1').attr('colspan', countShow);
                $('[data-toggle="tooltip"]').tooltip({'trigger': 'hover'})
                $('#list').removeClass("d-none");
                let _this = this;
                let log_content_range = [{name: '15', value: '15天内'}, {name: '31', value: '近一月'}, {
                    name: '92',
                    value: '近三月'
                }, {name: '183', value: '近半年'}, {name: '366', value: '近一年'}, {name: '0', value: '不限'},];
                let final_status = [
                    {name: 'null', value: '无'},
                    {name: '已解决', value: '已解决'},
                    {name: '待退回', value: '待退回'},
                    {name: '退回中', value: '退回中'},
                    {name: '已归档', value: '已归档'},
                ];
                let imported_status = [{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_id',
                        type: 'select_multiple_select',
                        tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的承运商'],
                        placeholder: ['承运商', '定位或多选承运商'],
                        data: this.logistics
                    },
                    {
                        name: 'logistic_number_return',
                        type: 'input',
                        tip: '可支持多退回单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索',
                        placeholder: '退回单号'
                    },
                    // {name: 'send_client_code', type: 'input', tip: '二次订单号：前或后加百分号为单个模糊搜索，否则为多条件精确搜索', placeholder: '二次订单号'},
                    {
                        name: ['shop_name', 'shop_name_limit_time'],
                        type: 'input_select',
                        tip: ['商铺:前或后加 百分号为单个模糊搜索，默认添加后%，否则为多条件精确搜索', '查询范围越短，搜索速度越快'],
                        placeholder: ['店铺', ''],
                        data: log_content_range,
                        rules: [{
                            son: {
                                shop_name_limit_time: {
                                    default: '15',
                                    required_without_all_if: ['created_at_start', 'created_at_end']
                                }
                            }
                        }]
                    },
                    {
                        name: 'user_owner_group_id',
                        type: 'select',
                        tip: '项目责任方',
                        placeholder: '项目责任方',
                        data: this.userOwnerGroups
                    },
                ], [
                    {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: 'is_imported', type: 'select', tip: '是否导入处理', placeholder: '是否导入处理', data: imported_status},
                    {
                        name: 'user_workgroups',
                        type: 'select_multiple_select',
                        tip: ['事故责任方', ''],
                        placeholder: ['事故责任方', ''],
                        data: this.userWorkGroup
                    },
                ], [
                        @cannot('订单管理-问题件-客户不可见')
                    {
                        name: 'logistic_indemnity_money',
                        type: 'select',
                        tip: '承运商赔偿金额',
                        placeholder: '承运商赔偿金额',
                        data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                    },
                        @endcannot
                    {
                        name: 'baoshi_indemnity_money',
                        type: 'select',
                        tip: '宝时赔偿金额',
                        placeholder: '宝时赔偿金额',
                        data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                    },
                        @cannot('订单管理-问题件-客户不可见')
                    {
                        name: 'final_status', type: 'select', tip: '问题件的最终状态', placeholder: '最终状态', data: final_status
                    },
                    {
                        name: 'order_issue_type_id',
                        type: 'select_multiple_select',
                        tip: ['问题类别', ''],
                        placeholder: ['问题类别', ''],
                        data: this.orderIssueType
                    },
                        @endcannot
                    {
                        name: ['log_content', 'addtime'],
                        type: 'input_select',
                        tip: ['处理结果:前或后加 百分号为单个模糊搜索，否则为多条件精确搜索', '查询范围越短，搜索速度越快'],
                        placeholder: ['处理结果', ''],
                        data: log_content_range,
                        rules: [{
                            son: {
                                addtime: {
                                    default: '31',
                                    required_without_all_if: ['created_at_start', 'created_at_end']
                                }
                            }
                        }]
                    },
                    // {date_relevance:{date:['orderdate_start','orderdate_end'],relevance:'addtime',killing:'date',default:[31,92,183,366]}}]},
                    {
                        name: 'finance_confirm',
                        type: 'select',
                        tip: '财务确认',
                        placeholder: '财务确认是/否',
                        data: [{name: '是', value: '是'}, {name: '否', value: '否'}]
                    },
                ], [
                    {name: 'settlement_at_start', type: 'dateTime', tip: '完结起始日期'},
                    {name: 'settlement_at_end', type: 'dateTime', tip: '完结结束日期'},
                    {name: 'hiddenTag', type: 'input', tip: '隐藏标识', placeholder: '标识'},
                    {
                        name: 'is_new_rejecting',
                        type: 'select',
                        tip: '退件状态',
                        placeholder: '退件状态',
                        data: [{name: '无', value: '无'}, {name: '有', value: '有'}, {name: '已处理', value: '已处理'}]
                    },
                    {
                        name: 'rejectingStatus',
                        type: 'select',
                        tip: '退单状态',
                        placeholder: '退单状态',
                        data: this.rejectingStatus
                    },
                    {name: 'sendOrderClientCode', type: 'input', tip: '二次客户订单号', placeholder: '二次客户订单号'},
                    {name: 'sendOrderLogisticNumber', type: 'input', tip: '二次运单号', placeholder: '二次运单号'},
                    {name: 'custom_code', type: 'input', tip: '自定义订单号：自定义订单号', placeholder: '自定义订单号'},
                ],

                    [
                            @cannot('订单管理-问题件-客户不可见')
                        {name: 'archive_at_start', type: 'dateTime', tip: '归档起始日期'},
                        {name: 'archive_at_end', type: 'dateTime', tip: '归档结束日期'},
                            @endcannot
                        {name: 'is_handle', type: 'checkbox', tip: '是否已处理', data: [{name: 'ture', value: '已解决'}]},
                    ]
                ];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                    appendDom: "btn",
                    paginations: [50, 100, 200, 500, 1000, 20],
                })
                this.form.init();
                let order = $('.table-head-warning')[0];
                $('.top').css('min-width', $(order).outerWidth(true)-50);
                this._initializePage();
            },
            watch: {
                checkData: {
                    handler() {
                        if (this.checkData.length === this.orderIssues.length) {
                            document.querySelector('#all').checked = true;
                        } else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep: true
                },
                isShowOrderInfo(newValue) {
                    setTimeout(function () {
                        $('.header-2').attr('colspan', 8 + (newValue ? 9 : 0));
                    }, 2);
                },
                isShowRejectedBill(newValue) {
                    let _this = this;
                    setTimeout(function () {
                        $('.header-3').attr('colspan', 14 + (_this.isShowSecondOrderInfo ? 6 : 0) + (newValue ? 6 : 0));
                    }, 2);
                },
                isShowSecondOrderInfo(newValue) {
                    let _this = this;
                    setTimeout(function () {
                        $('.header-3').attr('colspan', 14 + (newValue ? 6 : 0) + (_this.isShowRejectedBill ? 6 : 0));
                    }, 2);
                },
            },
            methods: {
                _initializePage() {
                    this.toggleBtnHeight = document.getElementById('tbody').clientHeight;
                    this.isShowOrderInfo = false;
                    this.isShowRejectedBill = false;
                    this.isShowSecondOrderInfo = false;
                },
                regroupOrder(order) {
                    if (!order) return;
                    let amounts = 0; // 商品总数
                    let type_numbers = 0; // 商品类型数量
                    $.each(order.packages, function (i, package) {
                        $.each(package.commodities, function (i, commodity) {
                            type_numbers++;
                            amounts += commodity.amount;
                        });
                    });
                    order.amounts = amounts;
                    order.type_numbers = type_numbers;
                },
                regroupRejectedBill(orderIssue) {
                    if (!orderIssue) return;
                    if (!orderIssue.order_issue_rejected_bills) return;
                    let amounts = 0;// 商品总数
                    let type_numbers = 0; // 商品类型数量
                    $.each(orderIssue.order_issue_rejected_bills, function (i, order_issue_rejected_bill) {
                        if (order_issue_rejected_bill.rejected_bill) {
                            $.each(order_issue_rejected_bill.rejected_bill.items, function (i, item) {
                                type_numbers++;
                                amounts += item.amount;
                            });
                        }
                    });
                    orderIssue.rejected_bill_amounts = amounts;
                    orderIssue.rejected_bill_type_numbers = type_numbers;
                },
                regroupLogs(orderIssue) {
                    if (!orderIssue) return;
                    if (!orderIssue.logs) return;
                    if (orderIssue.logs.length < 2) {
                        orderIssue.log_is_show = true;
                    } else {
                        orderIssue.log_is_show = false;
                    }
                },
                regroupUserGroup(orderIssue) {
                    orderIssue.is_show_user_workgroup = false;
                },
                displayDelBtn(bool, e) {
                    if (bool) $(e.target).next().removeClass('d-none');
                    else {
                        setTimeout(function () {
                            $(e.target).next().addClass('d-none');
                        }, 100);
                    }
                },
                selectedColor(orderno, e) {
                    $('.table-body').removeClass('focusing')
                    if (orderno === this.selectedStyle) {
                        this.selectedStyle = '';
                        return;
                    }
                    this.selectedStyle = orderno;
                    $(e.target).parent('tr').addClass('focusing')
                },
                deleteOrderIssue(id) {
                    $('#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.cancelWaitingTip();
                        if (res.data.success) {
                            for (let i = 0; i < _this.orderIssues.length; i++) {
                                if (_this.orderIssues[i].id == id) {
                                    _this.orderIssues.splice(i, 1);
                                    _this.deleteId = 0;
                                    break;
                                }
                            }
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('删除成功');
                            return;
                        }
                        tempTip.setDuration(2500);
                        tempTip.show('删除失败,错误：' + res.data.fail_info);
                    }).catch(function (err) {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(4000);
                        tempTip.show('网络错误：' + err);
                    });
                    this.changeDeleteId();
                },
                changeDeleteId() {
                    $('#deleteId').val('');
                },
                cancelOnTop(id) {
                    axios.post('{{url('apiLocal/order/issue/onTop/cancelTop')}}', {id: id})
                        .then(function (res) {
                            if (res.data.success) {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('订单问题件取消置顶成功！');
                                window.location.reload();
                                return;
                            }
                            tempTip.setDuration(2500);
                            tempTip.show(res.data.fail_info);
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络错误：' + err);
                    });
                },
                changeRemark() {
                    $('#remark').removeClass('is-invalid');
                },
                OrderIssueOnTop(id) {
                    $("#onTopId").val(id);
                    $("#exampleModal").modal('show');
                },
                submitOnTop() {
                    let _this = this;
                    let remark = $("#remark").val();
                    let id = $("#onTopId").val();
                    if (remark === '' || remark == null) {
                        $('#remark').focus().addClass('is-invalid');
                        return;
                    }
                    axios.post('{{url('apiLocal/order/issue/onTop/store')}}', {id: id, remark: remark})
                        .then(function (res) {
                            $("#exampleModal").modal('hide');
                            if (res.data.success) {
                                $.each(_this.orderIssues, function (i, orderIssue) {
                                    if (orderIssue.id == id) {
                                        orderIssue.top = res.data.data;
                                        _this.orderIssues.unshift(_this.orderIssues.splice(i, 1).shift());
                                    }
                                });
                                tempTip.setDuration(2500);
                                tempTip.showSuccess('置顶成功');
                                window.location.reload();
                                return;
                            }
                            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.total, token);
                    } else {
                        excelExport(false, this.checkData, url, null, token);
                    }
                },
                copyOrderNo() {
                    let _this = this;
                    if (this.checkData.length === 0) {
                        tempTip.show('没有勾选订单');
                        return;
                    }
                    let orderNos = [];
                    $.each(this.orderIssues, function (index, orderIssue) {
                        if (_this.checkData.includes(orderIssue.id)) {
                            if (orderIssue.order.packages) {
                                $.each(orderIssue.order.packages, function (i, package) {
                                    orderNos.push(package.logistic_number);
                                });
                            }
                        }
                    });
                    if (orderNos.length === 0) {
                        tempTip.setDuration(2200);
                        tempTip.show('勾选的问题件没有对应的快递单号');
                        return;
                    }
                    this.copyText(orderNos.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)
                    }
                },
                copyRejectedLogisticNumber(){
                    let _this = this ;
                    if (this.checkData.length === 0) {
                        tempTip.show('没有勾选订单');
                        return;
                    }
                    let logisticNumbers = [];
                    $.each(this.orderIssues, function (index, orderIssue) {
                        if (_this.checkData.includes(orderIssue.id)) {
                            if (orderIssue.order_issue_rejected_bills) {
                                $.each(orderIssue.order_issue_rejected_bills, function (i, rejectedBill) {
                                    logisticNumbers.push(rejectedBill.logistic_number_return);
                                });
                            }
                        }
                    });
                    if (logisticNumbers.length === 0) {
                        tempTip.setDuration(2200);
                        tempTip.show('勾选的问题件没有对应的退回单号');
                        return;
                    }
                    this.copyText(logisticNumbers.join('\n'));
                },
                checkAll(e) {
                    if (!e.target.checked) this.checkData = [];
                    else {
                        this.orderIssues.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) === -1) this.checkData.push(el.id);
                        });
                    }
                },
                endOrderIssue() {
                    if (this.checkData.length !== 0) {
                        this.endOrderIssues(this.checkData)
                        return;
                    }
                    tempTip.show('没有勾选订单');
                },
                disposeOrderIssue(orderIssue) {
                    let data = {id: orderIssue.id};
                    axios.post('{{url('apiLocal/order/issue/disposeOrderIssue')}}', data).then(function (res) {
                        if (res.data.success) {
                            orderIssue.is_new_rejecting = '已处理'
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('订单已处理');
                            return;
                        }
                        tempTip.setDuration(3000);
                        tempTip.show(res.data.fail_info);
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网路链接异常' + err);
                    });
                },
                endOrderIssueById(id) {
                    this.endOrderIssues([id]);
                },
                endOrderIssues(ids) {
                    let data = {ids: ids}
                    let orderIssues = {};
                    let _this = this;
                    for (let i = 0; i < this.orderIssues.length; i++) {
                        let id = this.orderIssues[i]['id']
                        if (ids.includes(id)) orderIssues[id] = this.orderIssues[i];
                    }
                    axios.post('{{url('apiLocal/order/issue/endOrderIssues')}}', data).then(function (response) {
                        if (response.data.success) {
                            tempTip.setDuration(3000)
                            tempTip.showSuccess('订单已处理')
                            let logs = response.data.logs;
                            for (let i = 0; i < logs.length; i++) {
                                let log = logs[i]
                                let orderIssue = orderIssues[log['order_issue_id']]
                                if (orderIssue) {
                                    orderIssue.logs.unshift(log)
                                    orderIssue['final_status'] = '已解决'
                                }
                            }
                            return;
                        }
                        tempTip.setDuration(3000)
                        tempTip.show(response.data.fail_info)
                    }).catch(function (error) {
                        tempTip.setDuration(4000)
                        tempTip.show('网路链接异常' + error);
                    })
                },
                addOrderIssueLog(id, orderIssue) {
                    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 data = {id: idInput.val(), content: contentInput.val()};
                    axios.post('{{url('apiLocal/order/issue/log/store')}}', data).then(function (res) {
                        if (res.data.success) {
                            orderIssue.logs.unshift(res.data.data);
                            contentInput.val('');
                            $('#' + id).hide();
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('添加成功');
                            return;
                        }
                        tempTip.setDuration(3000);
                        tempTip.show(res.data.fail_info);
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络异常:' + err);
                    });
                },
                deleteOrderIssueLog(log, orderIssue, index, logIndex) {
                    if (!confirm('是否删除当前记录')) return;
                    if (log.type === '创建') {
                        tempTip.show('创建记录不能删除');
                        return;
                    }
                    axios.post("{{url('apiLocal/order/issue/log/destroy')}}", {id: log.id}).then(function (res) {
                        if (res.data.success) {
                            if (log.type === '结束') orderIssue.final_status = '';
                            orderIssue.logs.splice(logIndex, 1);
                            tempTip.setDuration(2000);
                            tempTip.showSuccess('删除成功');
                            return;
                        }
                        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();
                    } else {
                        let obj = $(e.target);
                        if (obj.hasClass('log-td')) {
                            obj.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();
                        div.find('input').focus();
                    } 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, index) {
                    if (orderIssue.log_is_show === false) {
                        orderIssue.log_is_show = true;
                        this.$set(this.orderIssues, index, orderIssue);
                        $(e.target).text('点击收起');
                    } else {
                        orderIssue.log_is_show = false;
                        this.$set(this.orderIssues, index, orderIssue);
                        $(e.target).text("记录共" + orderIssue.logs.length + "条,点击展开");
                    }
                },
                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 + "件,点击展开");
                    }
                },
                toggleRejectedBillItems(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 + "件,点击展开");
                    }
                },
                toggleOrderInfo() {
                    this.isShowOrderInfo = !this.isShowOrderInfo;
                },
                toggleRejectedBill() {
                    this.isShowRejectedBill = !this.isShowRejectedBill;
                },
                togglSecondeOrder() {
                    this.isShowSecondOrderInfo = !this.isShowSecondOrderInfo;
                },
                updateOrderIssue(orderIssue, column, e) {
                    let value = $(e.target).val()
                    if (column === 'imported_status') value = '导入已梳理'
                    if (column === 'final_status' && value === '已解决') {
                        this.endOrderIssueById(orderIssue['id'])
                        return;
                    }
                    let data = {id: orderIssue['id'], column: column, value: value}
                    axios.post('{{url("apiLocal/order/issue/updateColumn")}}', data).then(function (response) {
                        if (response.data.success) {
                            orderIssue[column] = data.value
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('修改成功')
                            return;
                        }
                        tempTip.setDuration(3000)
                        tempTip.show('修改失败:' + response.data.fail_info)
                    }).catch(function (error) {
                        tempTip.setDuration(3000)
                        tempTip.show('修改出现异常:' + error)
                    })
                },
                batchDeleteOrderIssue() {
                    if (this.checkData.length === 0) {
                        tempTip.setDuration(2000)
                        tempTip.show('没有勾选内容')
                        return;
                    }
                    if (!confirm('是否删除当前问题件')) return;
                    let _this = this
                    let data = {ids: this.checkData}
                    axios.post('{{url('apiLocal/order/issue/batchDestroy')}}', data).then(function (response) {
                        if (response.data.success) {
                            for (let index = _this.orderIssues.length - 1; index >= 0; index--) {
                                let item = _this.orderIssues[index]
                                if (_this.checkData.includes(item.id)) _this.orderIssues.splice(index, 1)
                            }
                            _this.checkData = []
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('删除成功')
                            return;
                        }
                        tempTip.setDuration('删除失败')
                    }).catch(function (error) {
                        tempTip.setDuration(3000)
                        tempTip.show('删除异常:' + error)
                    })
                },
                batchStoreLogsModel() {
                    if (this.checkData.length === 0) {
                        tempTip.setDuration(2000)
                        tempTip.show('没有勾选内容')
                        return;
                    }
                    $("#batchStoreLogsModel").modal('show');
                },
                batchOthersModel() {
                    if (this.checkData.length === 0) {
                        tempTip.setDuration(2000)
                        tempTip.show('没有勾选内容')
                        return;
                    }
                    $("#batchOthersModel").modal('show');
                },
                batchStoreLogs() {
                    let _this = this;
                    let data = {orderIssueIds: this.checkData, content: this.edit.batchStoreLogs};
                    axios.post('{{url("apiLocal/order/issue/log/batchStore")}}', data).then(function (response) {
                        if (response.data.success) {
                            _this.edit.batchStoreLogs = ''
                            let logs = response.data.logs
                            _this.orderIssues.forEach(function (item) {
                                let id = item['id']
                                if (_this.checkData.includes(id)) {
                                    item['logs'].unshift(logs[id])
                                }
                            })
                            tempTip.setDuration(2000)
                            tempTip.setIndex(100)
                            tempTip.showSuccess('添加成功')
                            $("#batchStoreLogsModel").modal('hide')
                        } else {
                            tempTip.setIndex(100)
                            tempTip.show('添加失败' + response.data.fail_info)
                        }
                    }).catch(function (error) {
                        tempTip.setDuration(3000)
                        tempTip.show('处理结果添加异常:' + error)
                    })
                },
                batchOthers() {
                    let _this = this;
                    let data = {
                        orderIssueIds: this.checkData,
                        logistic_indemnity_money: this.edit.batchOthers.logistic_indemnity_money,
                        logistic_express_remission: this.edit.batchOthers.logistic_express_remission,
                        baoshi_indemnity_money: this.edit.batchOthers.baoshi_indemnity_money,
                        baoshi_express_remission: this.edit.batchOthers.baoshi_express_remission,
                        userWorkGroupIds: this.edit.batchOthers.userWorkGroupIds,
                    };
                    window.tempTip.postBasicRequest('{{url("apiLocal/order/issue/batchOthers")}}', data, res => {
                        if (_this.edit.batchOthers.logistic_indemnity_money) {
                            _this.orderIssuesEdit(_this.checkData, "logistic_indemnity_money", _this.edit.batchOthers.logistic_indemnity_money);
                        }
                        if (_this.edit.batchOthers.logistic_express_remission) {
                            _this.orderIssuesEdit(_this.checkData, "logistic_express_remission", _this.edit.batchOthers.logistic_express_remission);
                        }
                        if (_this.edit.batchOthers.baoshi_indemnity_money) {
                            _this.orderIssuesEdit(_this.checkData, "baoshi_indemnity_money", _this.edit.batchOthers.baoshi_indemnity_money);
                        }
                        if (_this.edit.batchOthers.baoshi_express_remission) {
                            _this.orderIssuesEdit(_this.checkData, "baoshi_express_remission", _this.edit.batchOthers.baoshi_express_remission);
                        }
                        return "批量修改完成";
                    });
                },
                editSecondClientNo(orderIssue, e) {
                    let value = $(e.target).val()
                    let data = {id: orderIssue.id, secondClientNo: value}
                    axios.post('{{url('apiLocal/order/issue/editSecondClientNo')}}', data).then(function (response) {
                        if (response.data.success) {
                            if (response.data.message) {
                                orderIssue.second_client_no = value
                                orderIssue.second_order = null;
                                tempTip.okWindow(response.data.message, '确认')
                            } else {
                                orderIssue.second_client_no = value
                                if (response.data.order === null) {
                                    orderIssue.second_order = null;
                                } else {
                                    orderIssue.second_order = response.data.order
                                }
                                tempTip.setDuration(2000)
                                tempTip.showSuccess('修改成功')
                            }
                        } else {
                            tempTip.setDuration(2000)
                            tempTip.show('修改失败:' + response.data.fail_info)
                        }
                    }).catch(function (error) {
                        tempTip.setDuration(3000)
                        tempTip.show('修改异常：' + error)
                    });
                },
                truncateText(e) {
                    let nowrapSpan = $(e.target);
                    nowrapSpan.hide();
                    nowrapSpan.siblings('.text-truncate').show();
                },
                nowrapText(e) {
                    let truncateSpan = $(e.target);
                    truncateSpan.hide();
                    truncateSpan.siblings('.text-nowrap').show();
                },
                addShow(id) {
                    this.edit.isShow.push(id)
                },
                removeShow(id) {
                    let index = this.edit.isShow.indexOf(id)
                    if (index !== -1) this.edit.isShow.splice(index, 1)
                },
                removeFocusing(e) {
                    $(e.target).parent('tr').removeClass('focusing')
                },
                addSecondLogisticNumber(orderIssue) {
                    let logisticNumber = $('#secondLogisticNumber-' + orderIssue.id).val()
                    let data = {
                        id: orderIssue.id,
                        logistic_number: logisticNumber,
                        client_code: orderIssue.second_client_no
                    }
                    let _this = this;
                    axios.post('{{url('apiLocal/order/issue/editSecondLogisticNumber')}}', data).then(function (response) {
                        if (response.data.success) {
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('添加成功')
                            if (response.data.order != null) {
                                _this.regroupOrder(response.data.order);
                                orderIssue.second_order = response.data.order
                                orderIssue.second_client_no = response.data.order.client_code
                            } else orderIssue.second_logistic_number = logisticNumber;
                            if (response.data.second_logistic_number != null) {
                                orderIssue.second_logistic_number = response.data.second_logistic_number
                            }
                            _this.edit.orderIssue.id = ''
                            _this.edit.orderIssue.showId = ''
                        } else {
                            tempTip.setDuration(2000)
                            tempTip.show(response.data.fail_info)
                        }
                    }).catch(function (error) {
                        tempTip.setDuration(2000)
                        tempTip.show('添加失败' + error)
                    });
                },
                importdispose() {
                    let _this = this
                    if (this.checkData.length === 0) {
                        tempTip.setDuration(2000)
                        tempTip.show('没有勾选内容')
                        return;
                    }
                    if (!confirm('是否对当前导入进行处理')) return;
                    let data = {ids: this.checkData};
                    tempTip.setDuration(9999)
                    tempTip.setIndex(2000)
                    tempTip.waitingTip('正在处理,请等待')
                    axios.post('{{url('apiLocal/order/issue/disposeImport')}}', data).then(function (response) {
                        tempTip.cancelWaitingTip()
                        if (response.data.success) {
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('处理导入成功')
                            _this.orderIssues.forEach(function (item) {
                                if (_this.checkData.includes(item.id)) {
                                    item.imported_status = '导入已处理'
                                }
                            });
                            return;
                        }
                        tempTip.setDuration(2000)
                        tempTip.show(response.data.fail_info)
                    }).catch(function (error) {
                        tempTip.setDuration(2000)
                        tempTip.show('处理导入出现异常' + error)
                    })
                },
                financeConfirm(flag) {
                    let _this = this
                    if (this.checkData.length === 0) {
                        tempTip.setDuration(2000)
                        tempTip.show('没有勾选内容')
                        return;
                    }
                    if (flag == '是') {
                        if (!confirm('是否进行财务确认')) return;
                    } else {
                        if (!confirm('是否取消财务确认')) return;
                    }
                    let data = {ids: this.checkData};
                    tempTip.setDuration(9999);
                    tempTip.waitingTip('处理中.......');
                    data.flag = flag;
                    axios.post('{{url('apiLocal/order/issue/financeConfirm')}}', data)
                        .then(function (response) {
                            tempTip.cancelWaitingTip();
                            if (response.data.success) {
                                tempTip.setDuration(2000);
                                if (flag == '是') {
                                    tempTip.showSuccess('确认成功');
                                } else {
                                    tempTip.showSuccess('取消成功');
                                }
                                _this.orderIssuesEdit(data.ids, 'finance_confirm', '是');
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show(response.data.error);
                        }).catch(function (error) {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(2000);
                        tempTip.show(error);
                    });

                },
                orderIssuesEdit(ids, column, value) {
                    this.orderIssues.forEach(function (item) {
                        if (ids.includes(item.id)) {
                            item[column] = value;
                        }
                    });
                },
                archiveOrderIssue() {
                    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/archiveOrderIssue')}}', data)
                        .then(function (response) {
                            if (response.data.success) {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('确认成功');
                                _this.orderIssuesEdit(data.ids, 'final_status', '已归档');
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show(response.data.error);
                        })
                        .catch(function (error) {
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(2000);
                            tempTip.show(error);
                        });
                },
                joinRejectedBill(orderIssue, e) {
                    let logistic_number = $(e.target).prev().val();
                    this
                    let is_return = false;
                    if (logistic_number === null) {
                        tempTip.show('请输入需要关联的退回单号');
                        is_return = true;
                    }
                    orderIssue.order_issue_rejected_bills.forEach(function (order_issue_rejected_bill) {
                        if (order_issue_rejected_bill.logistic_number_return === logistic_number) {
                            tempTip.show('已有对应的退回单号');
                            is_return = true;
                        }
                    });
                    if (is_return) return;
                    let _this = this;
                    axios.post('{{url('apiLocal/order/issue/rejectedBill/join')}}', {
                        id: orderIssue.id,
                        logistic_number_return: logistic_number
                    })
                        .then(function (response) {
                            if (response.data.success) {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('关联成功');
                                if (orderIssue.order_issue_rejected_bills === null) orderIssue.order_issue_rejected_bills = [];
                                orderIssue.order_issue_rejected_bills.push(response.data.data.orderIssueRejectedBill);
                                $(e.target).prev().val('');
                                if (response.data.data.orderIssue) {
                                    orderIssue.is_new_rejecting = response.data.data.orderIssue.is_new_rejecting;
                                    orderIssue.rejecting_status = response.data.data.orderIssue.rejecting_status;
                                }
                                _this.regroupRejectedBill(orderIssue);
                                _this.$forceUpdate();
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show(response.data.error);
                        })
                        .catch(function (error) {
                            tempTip.setDuration(2000);
                            tempTip.show(error);
                        });
                },
                unJoinRejectedBill(orderIssue, logistic_number) {
                    if (logistic_number === null) return;
                    let _this = this;
                    axios.post('{{url('apiLocal/order/issue/rejectedBill/unJoin')}}', {
                        id: orderIssue.id,
                        logistic_number_return: logistic_number
                    })
                        .then(function (response) {
                            if (response.data.success) {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('退回单号取消关联成功');
                                if (orderIssue.order_issue_rejected_bills === null) return;
                                $.each(orderIssue.order_issue_rejected_bills, function (i, item) {
                                    if (item && item.logistic_number_return === logistic_number) {
                                        orderIssue.order_issue_rejected_bills.splice(i, 1);
                                        _this.regroupRejectedBill(orderIssue);
                                    }
                                });
                                if (response.data.orderIssue) {
                                    orderIssue.rejecting_status = response.data.orderIssue.rejecting_status;
                                    orderIssue.is_new_rejecting = response.data.orderIssue.is_new_rejecting;
                                }
                                _this.$forceUpdate();
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show(response.data.error);
                        })
                        .catch(function (error) {
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(2000);
                            tempTip.show(error);
                        });
                },
                reviseJoinRejectedBill(orderIssue, logistic_number, e) {
                    let logistic_number_update = $(e.target).val();
                    if (logistic_number === null || logistic_number_update === null) {
                        tempTip.show('请输入需要关联的退回单号');
                        return;
                    }
                    let _this = this;
                    let data = {
                        id: orderIssue.id,
                        logistic_number_return: logistic_number,
                        logistic_number_return_update: logistic_number_update
                    };
                    axios.post('{{url('apiLocal/order/issue/rejectedBill/reviseJoin')}}', data)
                        .then(function (response) {
                            if (response.data.success) {
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('修改关联');
                                if (response.data.data) {
                                    $.each(orderIssue.rejected_bills, function (i, rejecetd_bill) {
                                        if (rejecetd_bill.logistic_number_return === logistic_number) {
                                            orderIssue.rejected_bills.splice(i, 1);
                                            orderIssue.rejected_bills.push(response.data.data);
                                            _this.regroupRejectedBill(orderIssue);
                                        }
                                    });
                                }
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show(response.data.error);
                        })
                        .catch(function (error) {
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(2000);
                            tempTip.show(error);
                        });
                },
                addUserWorkgroup(orderIssue, user_workgroup_id, e) {
                    let value = $(e.target).val()
                    window.tempTip.postBasicRequest("{{url('apiLocal/order/issue/userWorkgroups/add')}}", {
                        orderIssueId: orderIssue.id,
                        userWorkgroupId: value
                    }, res => {
                        orderIssue.user_workgroups.unshift(res);
                        return "添加事故责任方成功！";
                    });
                },
                deleteUserWorkgroup(user_workgroup, index, orderIssue) {
                    window.tempTip.postBasicRequest("{{url('apiLocal/order/issue/userWorkgroups/delete')}}", {
                        orderIssueId: orderIssue.id,
                        userWorkgroupId: user_workgroup.id
                    }, res => {
                        orderIssue.user_workgroups.splice(index, 1);
                        this.$forceUpdate();
                        return "删除事故责任方成功！";
                    });
                },
                showUserWorkgroup(orderIssue) {
                    orderIssue.is_show_user_workgroup = !orderIssue.is_show_user_workgroup;
                    this.$forceUpdate();
                },
                destroySecondLogisticNumber(orderIssue) {
                    if (!confirm('确定要删除吗')) {
                        return;
                    }
                    tempTip.setDuration(2000)
                    axios.post('{{url("apiLocal/order/issue/destroySecondLogisticNumber")}}', {id: orderIssue.id}).then(res => {
                        if (res.data.success) {
                            tempTip.showSuccess("修改成功");
                            orderIssue.second_logistic_number = null;
                            return;
                        }
                        tempTip.show(res.data.error);
                    }).catch(error => {
                        tempTip.show("网络异常：" + error);
                    });
                },
                listenTBodyResize(){
                    this.$set(this,'toggleBtnHeight',document.getElementById('tbody').clientHeight);
                },
            },
            filters:{
                date:function(value) {
                    if (value !== null) {
                        return moment(value).format('yyyy-MM-DD');
                    }
                    return value
                },
            }
        })
        // modal 隐藏时修改 input 为空
        $("#exampleModal").on('hide.bs.modal', function (e) {
            $('#remark').val('');
        });
    </script>
@endsection