baoshi-was/resources/views/rejected/create.blade.php

@extends('layouts.app')

@section('content')

    <div id="nav2">
        @component('rejected.menu')@endcomponent
    </div>
    <div class="container-fluid d-none" id="editPanel">
        <div class="card mb-2">
            <div style="position: relative" v-if="status.lockingBillPanel">
                <div style="background-color: #aaa; height: 535px; opacity: 0.5;
                width:100%;z-index: 9; position: absolute" class="d-flex ">
                </div>
                <div style="height: 500px;
                width:100%;z-index: 10; position: absolute" class="d-flex align-items-center ">
                    <button class="btn btn-info flex-fill" @click="cancelPackCommitEdit">取消锁定</button>
                </div>
            </div>
            <div class="row">
                <div class="col-7">
                    <div class="card-body">
                        <div class="list-group" style="max-height: 477px;overflow-y: scroll">
                            <table class="table table-sm table-striped table-info table-hover table-bordered">
                                <tr>
                                    <th>创建时间</th>
                                    <th>客户名称</th>
                                    <th>退回单号</th>
                                    <th>退回公司</th>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>到付费用</th>
                                    <th>订单号</th>
                                    <th>原单号</th>
                                    <th>是否入库</th>
                                    <th>备注</th>
                                </tr>
                                <tr :class="[rejectedBill.isEditing?'bg-info':'']"
                                    v-for="rejectedBill in rejectedBills" :data-id="rejectedBill.id" @click="editBill">
                                    <td>@{{rejectedBill.created_at_short }}</td>
                                    <td>@{{rejectedBill.owner_name }}</td>
                                    <td>@{{rejectedBill.logistic_number_return }}</td>
                                    <td>@{{rejectedBill.logistic_name}}</td>
                                    <td>@{{rejectedBill.sender}}</td>
                                    <td>@{{rejectedBill.mobile_sender}}</td>
                                    <td>@{{rejectedBill.fee_collected}}</td>
                                    <td>@{{rejectedBill.order_number}}</td>
                                    <td>@{{rejectedBill.logistic_number}}</td>
                                    <td>@{{rejectedBill.is_loaded|isLoaded}}</td>
                                    <td>@{{rejectedBill.remark}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-5 disabled">
                    <div class="card-body ml-n4">
                        <table class="table table-striped table-sm table-bordered" :class="[status.billEditing?'bg-info':'']">
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="id_owner" class="col-form-label text-right">客户名称</label>
                                        <div class="input-group">
                                            <select name="id_owner" id="id_owner" class="form-control" :class="[errors.id_owner?'is-invalid':'']"
                                                    v-model="billInputting.id_owner" required data-focusOrder="1">
                                                <option value=""></option>
                                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                                            </select>
                                            <input type="text" class="form-control input-group-prepend" placeholder="输入关键字定位客户名称"
                                                   name="locateOwnerSearch" autocomplete="off" @input="locateIdOwner" v-model="billInputting.locateOwnerSearch">
                                            <span class="invalid-feedback" v-if="errors.id_owner"><strong>@{{ errors.id_owner[0] }}</strong></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="sender" class="col-form-label text-right">姓名</label>
                                        <input type="text" class="form-control" :class="[errors.sender?'is-invalid':'']"
                                               data-focusOrder="5"
                                               name="sender" id="sender" autocomplete="off" v-model="billInputting.sender">
                                        <span class="invalid-feedback" v-if="errors.sender"><strong>@{{errors.sender[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="logistic_number_return" class="col-form-label text-right">退回单号</label>
                                        <input type="text" class="form-control" :class="[errors.logistic_number_return?'is-invalid':'']"
                                               data-focusOrder="2"
                                               name="logistic_number_return" id="logistic_number_return" autocomplete="off" v-model="billInputting.logistic_number_return"
                                               @change="logistic_number_returnChange"
                                               required>
                                        <span class="invalid-feedback" v-if="errors.logistic_number_return"><strong>@{{errors.logistic_number_return[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="fee_collected" class="col-form-label text-right">到付费用</label>
                                        <input type="text" class="form-control" :class="[errors.fee_collected?'is-invalid':'']"
                                               data-focusOrder=""
                                               v-model="billInputting.fee_collected" name="fee_collected" id="fee_collected" autocomplete="off">
                                        <span class="invalid-feedback" v-if="errors.fee_collected"><strong>@{{errors.fee_collected[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="id_logistic_return" class="col-form-label text-right">退回公司</label>
                                        <div class="input-group">
                                            <select name="id_logistic_return" id="id_logistic_return" class="form-control"
                                                    data-focusOrder="3"
                                                    :class="[errors.id_logistic_return?'is-invalid':'']" v-model="billInputting.id_logistic_return" required>
                                                <option value=""></option>
                                                <option v-for="logistic in logistics" :value="logistic.id">@{{logistic.name}}</option>
                                            </select>
                                            <input type="text" class="form-control input-group-prepend" placeholder="输入关键字定位物流公司"
                                                   name="locateLogisticSearch" autocomplete="off" @input="locateLogistic" v-model="billInputting.locateLogisticSearch">
                                            <span class="invalid-feedback" v-if="errors.id_logistic_return"><strong>@{{errors.id_logistic_return[0] }}</strong></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="order_number" class="col-form-label text-right">订单号</label>
                                        <input type="text" class="form-control" :class="[errors.order_number?'is-invalid':'']"
                                               data-focusOrder="6"
                                               name="order_number" id="order_number" autocomplete="off" v-model="billInputting.order_number">
                                        <span class="invalid-feedback" v-if="errors.order_number"><strong>@{{ errors.order_number[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="mobile_sender" class="col-form-label text-right">电话</label>
                                        <input type="text"  class="form-control" :class="[errors.mobile_sender?'is-invalid':'']"
                                               data-focusOrder="4"
                                               name="mobile_sender" id="mobile_sender" autocomplete="off" v-model="billInputting.mobile_sender" required>
                                        <span class="invalid-feedback" v-if="errors.mobile_sender"><strong>@{{ errors.mobile_sender[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="logistic_number" class="col-form-label text-right">原单号</label>
                                        <button class="btn btn-outline-primary btn-sm" @click="billInputting.logistic_number='原单退回'" style="transform: scale(0.9)">原单退回</button>
                                        <input type="text" class="form-control" :class="[errors.logistic_number?'is-invalid':'']"
                                               data-focusOrder="7"
                                               name="logistic_number" id="logistic_number" autocomplete="off"
                                               v-model="billInputting.logistic_number"
                                        >
                                        <span class="invalid-feedback" v-if="errors.logistic_number"><strong>@{{errors.logistic_number[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="bill_remark" class="col-form-label text-right">备注</label>
                                        <input type="text"  class="form-control" :class="[errors.bill_remark?'is-invalid':'']"
                                               data-focusOrder="9"
                                               name="remark" id="bill_remark" autocomplete="off" v-model="billInputting.remark" required>
                                        <span class="invalid-feedback" v-if="errors.bill_remark"><strong>@{{ errors.remark[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="is_loaded" class="col-form-label text-right">是否入库</label>
                                        <div v-if="status.isLoadSign" class="text-danger">系统标计为入库</div>
                                        <select name="is_loaded" id="is_loaded" class="form-control" :class="[errors.is_loaded?'is-invalid':'']"
                                                data-focusOrder="8" :disabled="status.lockingIsLoadedInput"
                                                v-model="billInputting.is_loaded" required>
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                            <option value="null">无需入库</option>
                                        </select>
                                        <span class="invalid-feedback" v-if="errors.is_loaded"><strong>@{{errors.is_loaded[0]}}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0 align-items-center row" >
                                        <div class="col-2 mt-3" v-if="status.billEditing">
                                            <button class="btn btn-success btn-sm tooltipOn" @click="shiftToCreate"
                                                    title="点击取消编辑，进入新增状态">取消</button>
                                        </div>
                                        <div class="col-8 mt-3" :class="[status.billCreating?'offset-2':'']">
                                            <input v-if="status.billCreating" type="button" class="btn btn-success form-control" value="提交新条目" @click="commitHeader">
                                            <input v-if="status.billEditing" type="button" class="btn btn-dark form-control" value="修改" @click="commitEditHeader">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="card" v-if="status.editingBill">
            <div class="row">
                <div class="col-7">
                    <div class="card-body">
                        <div class="list-group">
                            <table class="table table-sm table-striped table-warning table-hover table-bordered">
                                <tr>
                                    <th>序号</th>
                                    <th>商品条码</th>
                                    <th>商品名称</th>
                                    <th>数量</th>
                                    <th>是否正品</th>
                                    <th>生产日期</th>
                                    <th>效期</th>
                                    <th>批次号</th>
                                    <th>备注</th>
                                    @can('退货管理-删除')<th></th>@endcan
                                </tr>
                                <tr :class="[item.isEditing?'bg-warning':'']"
                                    v-for="(item,i) in items" :data-id="item.id" @click="editItem">
                                    <td>@{{i+1}}</td>
                                    <td>@{{item.barcode_goods }}</td>
                                    <td>@{{item.name_goods }}</td>
                                    <td>@{{item.amount}}</td>
                                    <td>@{{item.quality_label}}</td>
                                    <td>@{{item.made_at}}</td>
                                    <td>@{{item.validity_at}}</td>
                                    <td>@{{item.batch_number}}</td>
                                    <td>@{{item.remark}}</td>
                                    @can('退货管理-删除')<td><button class="btn btn-outline-danger" @click="deleteItem">删</button></td>@endcan
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-5"><div class="card-body ml-n4">
                        <table class="table table-striped table-sm table-bordered" :class="[status.itemEditing?'bg-warning':'']">
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="barcode_goods" class="col-form-label text-right">商品条码</label>
                                        <input type="text" class="form-control" :class="[errors.barcode_goods?'is-invalid':'']"
                                               data-focusOrder="11"
                                               name="barcode_goods" id="barcode_goods" autocomplete="off" v-model="itemInputting.barcode_goods"
                                               @change="barcode_goodsChange"
                                        >
                                        <span class="invalid-feedback" v-if="errors.barcode_goods"><strong>@{{errors.barcode_goods[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="name_goods" class="col-form-label text-right">商品名称</label>
                                        <input type="text" class="form-control" :class="[errors.name_goods?'is-invalid':'']"
                                               data-focusOrder="14"
                                               name="name_goods" id="name_goods" autocomplete="off" v-model="itemInputting.name_goods"
                                               @change="name_goodsChange"
                                        >
                                        <span class="invalid-feedback" v-if="errors.name_goods"><strong>@{{errors.name_goods[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="amount" class="col-form-label text-right">数量</label>
                                        <input type="" class="form-control" :class="[errors.amount?'is-invalid':'']"
                                               data-focusOrder="13"
                                               name="amount" id="amount" autocomplete="off" v-model="itemInputting.amount" required>
                                        <span class="invalid-feedback" v-if="errors.amount"><strong>@{{errors.amount[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="qualityLabel.name" class="col-form-label text-right">是否正品</label>
                                        <div class="form-control" :class="[errors.id_quality_label?'is-invalid':'']">
                                            <span><input id="id_quality_label_space" type="radio" name="id_quality_label"
                                                         data-focusOrder="12" required="required" checked><label
                                                    for="id_quality_label_space">留空</label>&nbsp;</span>
                                            <span v-for="qualityLabel in qualityLabels">
                                                <input type="radio" name="id_quality_label" :value="qualityLabel.id" data-focusOrder="12"
                                                       :id="'id_quality_label_'+qualityLabel.id"
                                                       v-model="itemInputting.id_quality_label" required><label
                                                    for="'id_quality_label_'+qualityLabel.id">@{{qualityLabel.name}}</label>&nbsp;</span>
                                        </div>
                                        <span class="invalid-feedback" v-if="errors.id_quality_label"><strong>@{{errors.id_quality_label[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="made_at" class="col-form-label text-right">生产日期</label>
                                        <input type="date" class="form-control" :class="[errors.made_at?'is-invalid':'']"
                                               data-focusOrder="16"
                                               name="made_at" id="made_at" autocomplete="off" v-model="itemInputting.made_at">
                                        <span class="invalid-feedback" v-if="errors.made_at"><strong>@{{errors.made_at[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="validity_at" class="col-form-label text-right">效期</label>
                                        <input type="date" class="form-control" :class="[errors.validity_at?'is-invalid':'']"
                                               data-focusOrder="17"
                                               name="validity_at" id="validity_at" autocomplete="off" v-model="itemInputting.validity_at">
                                        <span class="invalid-feedback" v-if="errors.validity_at"><strong>@{{errors.validity_at[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="batch_number" class="col-form-label text-right">批次号</label>
                                        <input type="text" class="form-control" :class="[errors.batch_number?'is-invalid':'']"
                                               data-focusOrder="15"
                                               name="batch_number" id="batch_number" autocomplete="off" v-model="itemInputting.batch_number"
                                        >
                                        <span class="invalid-feedback" v-if="errors.batch_number"><strong>@{{errors.batch_number[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="remark" class="col-form-label text-right">备注</label>
                                        <input type="text" class="form-control" :class="[errors.remark?'is-invalid':'']"
                                               data-focusOrder="15"
                                               name="remark" id="remark" autocomplete="off" v-model="itemInputting.remark">
                                        <span class="invalid-feedback" v-if="errors.remark"><strong>@{{errors.remark[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0 align-items-center row" >
                                        <div class="col-2 mt-3" v-if="status.itemEditing">
                                            <button class="btn btn-success btn-sm tooltipOn" @click="shiftToCreateItem"
                                                    title="点击取消编辑，进入新增状态">取消</button>
                                        </div>
                                        <div class="col-8 mt-3" :class="[status.itemCreating?'offset-2':'']">
                                            <button v-if="status.itemCreating" class="btn btn-success form-control" @click="commitItem">添加明细</button>
                                            <input v-if="status.itemEditing" type="button" class="btn btn-dark form-control" value="修改" @click="commitEditItem">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="form-group mb-0">
                                        <div class="col-8 offset-2 mt-2 mb-2">
                                            <button class="btn btn-dark form-control" @click="endAndPackCommitEdit">
                                                结束添加并提交
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el: "#editPanel",
            data:{
                status: {billCreating:true,billEditing:false,itemCreating:true,itemEditing:false
                    ,editingBill:null,editingBillId:'',editingItem:null,editingItemId:''
                    ,inputtingId_owner:'',endAndPackCommitEdited:false,lockingBillPanel:false,lockingIsLoadedInput:false,
                existItemsBeforeAdd:0},
                itemInputting:{
                    barcode_goods:"",name_goods:"",amount:"1",id_quality_label:"",
                    batch_number:"",validity_at:"",remark:"",made_at:"",
                },
                billInputting:{
                    id_owner:"",mobile_sender:"",sender:"",order_number:"",remark:"",
                    logistic_number_return:"",logistic_number:"",id_logistic_return:"",
                    fee_collected:"",is_loaded:"0",locateLogisticSearch:"",locateOwnerSearch:"",
                    isLoadSign:false,
                },
                errors:{
                    id_owner:"",mobile_sender:"",sender:"",bill_remark:"",
                    logistic_number_return:"",logistic_number:"",id_logistic_return:"",
                    fee_collected:"",is_loaded:"",
                    barcode_goods:"",name_goods:"",amount:"",id_quality_label:"",
                    batch_number:"",validity_at:"",remark:"",made_at:"",
                },
                rejectedBills:[
                        @foreach($rejectedBills as $bill)
                    {id:'{{$bill->id}}',created_at_short:'{{$bill->created_at_short}}',owner_name:'{{$bill->owner_name}}',remark:'{{$bill->remark}}'
                        ,id_owner:'{{$bill->id_owner}}',mobile_sender:'{{$bill->mobile_sender}}',sender:'{{$bill->sender}}'
                        ,logistic_number:'{{$bill->logistic_number}}',id_logistic_return:'{{$bill->id_logistic_return}}'
                        ,fee_collected:'{{$bill->fee_collected}}',is_loaded:'{{$bill->is_loaded_null}}',order_number:'{{$bill->order_number}}'
                        ,logistic_number_return:'{{$bill->logistic_number_return}}',logistic_name:'{{$bill->logistic_name}}',
                        isEditing:false},

                    @endforeach
                ],
                items:[

                ],
                owners:[
                        @foreach($owners as $owner)
                    {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                logistics:[
                        @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}'},
                    @endforeach
                ],
                qualityLabels:[
                        @foreach($qualityLabels as $qualityLabel)
                    {id:'{{$qualityLabel->id}}',name:'{{$qualityLabel->name}}'},
                    @endforeach
                ]
            },
            mounted:function () {
                let _this=this;
                $('#editPanel').removeClass('d-none');
                $('.tooltipOn').tooltip({'trigger':'hover'});
                $(document).on('keypress',function(e){
                    if(_this.itemInputting.barcode_goods){
                        if(e.key==='*'){
                            _this.commitItem();
                            return false;
                        }
                    }
                });
                this.listenEnterAndJump();
            },
            methods:{
                logistic_number_returnChange:function(e){
                    let _this=this;
                    let number=$(e.target).val();
                    if(!number)return;
                    let url='{{"/apiLocal/logistic/numberFeatures/computeLogisticByNumber"}}';
                    axios.post(url,{logistic_number_return:number}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            if(response.data.logistic){
                                _this.billInputting.id_logistic_return=response.data.logistic.id;
                            }
                        }
                    }).catch(function (response) {
                        console.log(response);
                    });
                    if(_this.status.editingBill)return;
                    let url_isUnique='{{"/apiLocal/logistic/logisticNumberReturnIsUnique"}}';
                    axios.post(url_isUnique,{logistic_number_return:number}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            if(response.data.result==='true'){
                                tempTip.okWindow('该退回单号"'+number+'"已有录入其他单','知道了')
                            }
                        }
                    }).catch(function (response) {
                        console.log(response);
                    });
                },
                barcode_goodsChange:function(e){
                    let _this=this;
                    let barcode=$(e.target).val();
                    let url='{{"/apiLocal/commodity/getCommodityByBarcode"}}';
                    axios.post(url,{barcode:barcode}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            if(response.data.name){
                                _this.itemInputting.name_goods=response.data.name;
                            }
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show('查找商品条码错误：'+response.data.fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('未连接至商品表，检查网络');
                    });
                },
                name_goodsChange:function(e){
                    let _this=this;
                    let name=$(e.target).val();
                    this.items.forEach(function(item){
                        if(item.barcode_goods+''===_this.itemInputting.barcode_goods+''){
                            item.name_goods=name;
                        }
                    });
                },
                listenEnterAndJump:function(){
                    let targets=$('select,input');
                    targets.off('keypress');
                    targets.on('keypress',function(e){
                        if(e.key!=="Enter")return;
                        let target=$(e.target);
                        let currentOrder = target.attr('data-focusOrder');
                        if(currentOrder){
                            targets.each(function($i,$val){
                                let checkingTarget = $($val);
                                let checkingOrder = checkingTarget.attr('data-focusOrder');
                                if(parseInt(currentOrder)+1===parseInt(checkingOrder)){
                                    checkingTarget.focus();
                                }
                            })
                        }
                    });
                    targets.off('change');
                    targets.on('change',function(e){
                        let target=$(e.target);
                        let currentOrder = target.attr('data-focusOrder');
                        if(currentOrder){
                            targets.each(function($i,$val){
                                let checkingTarget = $($val);
                                let checkingOrder = checkingTarget.attr('data-focusOrder');
                                if(parseInt(currentOrder)+1===parseInt(checkingOrder)){
                                    checkingTarget.focus();
                                }
                            })
                        }
                    })
                },
                cleanHeader:function(){
                    for(let key in this.billInputting){
                        this.billInputting[key]='';
                    }
                    this.billInputting.id_owner=this.status.inputtingId_owner;
                    this.billInputting.is_loaded="0";
                    this.billInputting.isLoadSign=false;
                },
                cleanItem:function(){
                    for(let key in this.itemInputting){
                        this.itemInputting[key]='';
                    }
                    this.itemInputting['amount']='1';
                },
                cleanError:function(){
                    for(let key in this.errors){
                        this.errors[key]='';
                    }
                },
                setEditingBill:function(id){
                    let _this=this;
                    this.status.editingBillId=id;
                    this.rejectedBills.forEach(function (bill) {
                        if(bill.id+''===id+''){
                            _this.status.editingBill=bill;
                            bill.isEditing=true;
                        }else{
                            bill.isEditing=false
                        }
                    });
                    this.$forceUpdate();
                },
                setEditingItem:function(id){
                    let _this=this;
                    this.status.editingItemId=id;
                    this.items.forEach(function (item) {
                        if(item.id+''===id+''){
                            _this.status.editingItem=item;
                            item.isEditing=true;
                        }else{
                            item.isEditing=false
                        }
                    });
                    this.$forceUpdate();
                },
                commitHeader:function () {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBill/store')}}';
                    axios.post(url,_this.billInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功录入退单号：'+_this.billInputting.logistic_number_return);
                            _this.status.inputtingId_owner=_this.billInputting.id_owner;
                            _this.setEditingBill(response.data.id);
                            _this.getItemsUnderBill(response.data.id);
                            _this.cleanHeader();
                            _this.getRecentRejectedBills();
                            _this.lockBillPanel();
                            _this.status.existItemsBeforeAdd=0;
                            $('#barcode_goods').focus();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                                if(_this.errors.remark){
                                    _this.errors.bill_remark=_this.errors.remark;
                                    _this.errors.remark = '';
                                }
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                commitEditItem:function () {
                    let _this=this;
                    if(!confirm("确定要提交修改吗？")){return;}
                    let url='{{url('apiLocal/rejectedBillItem/update')}}';
                    axios.post(url,_this.itemInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功修改商品：'+_this.itemInputting.barcode_goods);
                            _this.cleanItem();
                            _this.getItemsUnderBill(_this.status.editingBillId);
                            _this.shiftToCreateItem();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('修改失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                                if(_this.errors.remark){
                                    _this.errors.bill_remark=_this.errors.remark;
                                    _this.errors.remark = '';
                                }
                            }else{
                                tempTip.show('修改失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                commitEditHeader:function () {
                    let _this=this;
                    if(!confirm("确定要提交修改吗？")){return;}
                    let url='{{url('apiLocal/rejectedBill/update')}}';
                    axios.post(url,_this.billInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功修改退单号：'+_this.billInputting.logistic_number_return);
                            _this.cleanHeader();
                            _this.getRecentRejectedBills();
                            _this.shiftToCreate();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('修改失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                            }else{
                                tempTip.show('修改失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                commitItem:function () {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBillItem/store')}}';
                    _this.itemInputting.id_rejected_bill=_this.status.editingBill.id;
                    axios.post(url,_this.itemInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功录入退单商品：'+_this.itemInputting.name_goods);
                            _this.status.endAndPackCommitEdited=false;
                            _this.lockBillPanel();
                            _this.getItemsUnderBill(_this.status.editingBill.id);
                            _this.cleanItem();
                            $('#barcode_goods').focus();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                            }else{
                                tempTip.show('录入失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                endAndPackCommitEdit:function () {
                    let _this=this;
                    if(_this.items.length===0){
                        if(confirm('没有填加明细项，确定要退出详细编辑模式吗？')){
                            _this.cancelPackCommitEdit();
                        }
                        return;
                    }else{
                        if(!confirm('确定要提交填加的明细项吗？提交后即不可修改')){
                            return;
                        }
                    }
                    let ids=[];
                    _this.items.forEach(function(item){
                        ids.push(item.id);
                    });
                    let url='{{url('apiLocal/rejectedBillItem/packConfirm')}}';
                    tempTip.setDuration(5000);
                    tempTip.waitingTip('与外部交互中，请稍候');
                    axios.post(url,{'ids':ids}).then(function (response) {
                        _this.cleanError();
                        tempTip.cancelWaitingTip();
                        if(response&&response.data&&response.data.success!=='false'){
                            if(typeof(response.data.bill_is_loaded)!='undefined'){
                                if(response.data.bill_is_loaded===true){
                                    _this.status.editingBill.is_loaded=1;
                                    _this.billInputting.is_loaded=1;
                                    _this.billInputting.isLoadSign=true;
                                    // _this.status.lockingIsLoadedInput=true;
                                    tempTip.okWindow('该批商品状态已改为“入库”','已处理');
                                }
                            }
                            tempTip.setDuration(5000);
                            switch(response.data.remote_result){
                                case 'fail': tempTip.show('与客户服务器通讯异常，明细未被外部处理，请联系系统相关同事');break;
                                case 'none': tempTip.show('客户未返回明细处理信息，请联系系统相关同事检查');break;
                                case 'received':tempTip.show('该单之前已提交过给客户服务器');break;
                                case 'storable': tempTip.showSuccess('WMS尚未推单，客户返回可以入库，所以状态为“待推单”','已处理该待推单');break;
                                default: tempTip.showSuccess('成功录入所有退单商品并已上传至外部');break;
                            }
                            _this.status.endAndPackCommitEdited=true;
                            _this.cancelPackCommitEdit();
                        }else{
                            tempTip.setDuration(4000);
                            let fail_info='';
                            if(response.data)
                                fail_info=response.data.fail_info;
                            tempTip.show('录入明细列表失败，请重试：'+fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(3000);
                        let fail_info='';
                        if(response.data)
                            fail_info=response.data.fail_info;
                        tempTip.show('提交失败，请重试：'+fail_info);
                        alert('连接错误：'+response)
                    });
                },
                cancelPackCommitEdit:function () {
                    let _this=this;
                    if(_this.items.length===0&&!_this.status.endAndPackCommitEdited){
                        _this.unlockBillPanel();
                        return;
                    }else{
                        if(_this.status.endAndPackCommitEdited){
                            _this.unlockBillPanel();
                            return;
                        }else{
                            if(!confirm('已填加的明细尚未提交，回到表头编辑将取消已填加明细，是否确定？')){
                                return;
                            }
                        }
                    }
                    let ids=[];
                    for(let i=_this.status.existItemsBeforeAdd;i<_this.items.length;i++){
                        ids.push(_this.items[i].id);
                    }
                    if(ids.length===0){_this.unlockBillPanel();return;}
                    let url='{{url('apiLocal/rejectedBillItem/packDestroy')}}';
                    axios.post(url,{'ids':ids}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            _this.status.editingBill=null;
                            _this.unlockBillPanel();
                        }else{
                            tempTip.show('数据操作失败，请重试：'+response.data.fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                lockBillPanel:function () {
                    this.status.lockingBillPanel=true;
                    $('input,select').blur();
                },
                unlockBillPanel:function () {
                    this.status.lockingBillPanel=false;
                    this.status.editingBill=null;
                    this.status.editingBillId='';
                    this.shiftToCreate();
                },
                getRecentRejectedBills:function () {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBill/apiGetRecent')}}';
                    axios.post(url).then(function (response) {
                        if(response.data.success==='true'){
                            _this.rejectedBills=response.data.rejectedBills;
                            _this.setEditingBill(_this.status.editingBillId)
                        }else{
                            tempTip.show('加载新增内容失败，可尝试刷新页面');
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response);
                        tempTip.show('加载新增内容失败，可尝试刷新页面！');
                    });
                },
                getItemsUnderBill:function (billId,func) {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBillItem/apiGet')}}';
                    axios.post(url,{id_rejected_bill:billId}).then(function (response) {
                        if(response.data.success==='true'){
                            response.data.items.forEach(function(item){
                                item.isEditing=false;
                            });
                            _this.items=response.data.items;
                            if(typeof func!=='undefined'){
                                func()
                            }
                            _this.listenEnterAndJump();
                            setTimeout(function(){$('#barcode_goods').focus();},500)
                        }else{
                            tempTip.show('加载相关明细失败，可尝试刷新页面');
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response);
                        tempTip.show('加载相关明细失败，可尝试刷新页面!');
                    });
                },
                deleteItem:function (e) {
                    if(!confirm('确定要删除该明细吗？不可恢复')){return}
                    let _this=this;
                    let id = $(e.target).parents('tr').attr('data-id');
                    let url='{{url('apiLocal/rejectedBillItem/apiDelete')}}';
                    axios.post(url,{id:id}).then(function (response) {
                        if(response.data.success==='true'){
                            _this.items.forEach(function(item,i){
                                if(item.id+''===id+''){
                                    _this.items.splice(i, 1);
                                }
                            });
                        }else{
                            tempTip.show('删除失败，可尝试刷新页面再操作');
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response);
                        tempTip.show('删除失败，可尝试刷新页面!');
                    });
                },
                editBill:function (e) {
                    let _this=this;
                    let billId = $(e.target).parent('tr').attr('data-id');
                    let billTarget='';
                    this.rejectedBills.every(function(bill){
                        if(bill.id+''===billId+''){
                            billTarget=bill;
                            return false;
                        }
                        return true;
                    });
                    if(billTarget){
                        this.billInputting = JSON.parse(JSON.stringify(billTarget));
                        this.shiftToEdit();
                        this.setEditingBill(billTarget.id)
                    }
                    this.getItemsUnderBill(billTarget.id,function () {
                        _this.status.existItemsBeforeAdd=_this.items.length;
                    });
                },
                editItem:function (e) {
                    let _this=this;
                    let itemId = $(e.target).parent('tr').attr('data-id');
                    let itemTarget='';
                    this.items.every(function(item){
                        if(item.id+''===itemId+''){
                            itemTarget=item;
                            return false;
                        }
                        return true;
                    });
                    if(itemTarget){
                        this.itemInputting = JSON.parse(JSON.stringify(itemTarget));
                        this.shiftToEditItem();
                        this.setEditingItem(itemTarget.id)
                    }
                    // this.getItemsUnderBill(this.status.editingBillId,function () {});
                },
                shiftToEditItem:function () {
                    this.cleanError();
                    this.status.itemCreating=false;
                    this.status.itemEditing=true;
                    setTimeout(function () {
                        $('.tooltipOn').tooltip({'trigger':'hover'});
                    },50)
                },
                shiftToEdit:function () {
                    this.cleanError();
                    this.status.billCreating=false;
                    this.status.billEditing=true;
                    setTimeout(function () {
                        $('.tooltipOn').tooltip({'trigger':'hover'});
                    },50)
                },
                shiftToCreateItem:function () {
                    this.cleanError();
                    this.cleanItem();
                    this.status.itemCreating=true;
                    this.status.itemEditing=false;
                    this.items.forEach(function (item) {
                        item.isEditing=false;
                    });
                    $('.tooltipOn').tooltip('hide').tooltip({'trigger':'hover'});
                },
                shiftToCreate:function () {
                    this.cleanError();
                    this.cleanHeader();
                    this.status.billCreating=true;
                    this.status.billEditing=false;
                    this.status.editingBill=null;
                    this.rejectedBills.forEach(function(rejectedBill){
                        if(rejectedBill.isEditing===true){
                            rejectedBill.isEditing=false;
                            return false;
                        }
                    });
                    $('.tooltipOn').tooltip('hide').tooltip({'trigger':'hover'});
                },
                locateIdOwner:function (e) {
                    let _this=this;
                    let $target=$(e.target);
                    this.owners.forEach(function(owner){
                        if(owner.name.includes($target.val())){
                            _this.billInputting.id_owner=owner.id;
                        }
                    });
                },
                locateLogistic:function (e) {
                    let _this=this;
                    let $target=$(e.target);
                    this.logistics.forEach(function(logistic){
                        if(logistic.name.includes($target.val())){
                            _this.billInputting.id_logistic_return=logistic.id;
                        }
                    });
                },
            },
            filters:{
                isLoaded:function (value) {
                    return value==1?'是':'否';
                }
            }
        });
    </script>
@endsection