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

@extends('layouts.app')
@section('title')回收站-退货管理@endsection

@section('content')
    <div id="nav2">
        @component('rejected.menu')@endcomponent
    </div>
    <div class="container-fluid">
        <div class="card" style="min-width: 2000px;">
            <div class="card-body d-none" id="list">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col" v-if="isBeingFilterConditions">
                                        <label for="">
                                            <a :href="'{{url('rejected').'?paginate='}}'+filterParams.paginate"><span class="btn btn-warning text-dark">清除筛选</span></a>
                                        </label>
                                    </div>
                                    <table class="table mb-n3 table-sm table-bordered">
                                        <tr>
                                            <td>
                                                <span class="text-muted">每页显示记录：</span>
                                            </td>
                                            <td colspan="9">
                                                <select name="" id="setPaginate" class="tooltipTarget form-control-sm" style="vertical-align: middle"
                                                        @change="setPaginate" v-model="filterParams.paginate">
                                                    <option value="50">50条</option>
                                                    <option value="100">100条</option>
                                                    <option value="200">200条</option>
                                                    <option value="500">500条</option>
                                                    <option value="1000">1000条</option>
                                                </select>
                                            </td>
                                            <td width="80%"></td>
                                        </tr>
{{--                                        <tr>--}}
{{--                                            <td class="text-muted">按条件筛选：</td>--}}
{{--                                            <td colspan="2">--}}
{{--                                                <label for="">时间：</label>--}}
{{--                                                <input type="date" name="created_at_start" class="form-control-sm tooltipTarget" style="width:140px"--}}
{{--                                                       :class="filterParams.created_at_start?'bg-warning':''"--}}
{{--                                                       @keypress="created_at_startEntering" @change="created_at_startChange" title="选择显示指定日期的起始时间">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">客户：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" placeholder="查找"--}}
{{--                                                       style="width:70px" @input="locateOwner" @keypress="owner_idEntering"--}}
{{--                                                       title="输入关键词快速定位下拉列表，回车确定">--}}
{{--                                                <select name="owner_id" id="owner_id" class="form-control-sm tooltipTarget"--}}
{{--                                                        :class="filterParams.owner_id?'bg-warning':''"--}}
{{--                                                        title="选择要显示的客户" @change="owner_idChange">--}}
{{--                                                    <option value="" selected>全部客户</option>--}}
{{--                                                    <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>--}}
{{--                                                </select>--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">订单号：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" placeholder="搜索订单号" name="order_number"--}}
{{--                                                       :class="filterParams.order_number?'bg-warning':''"--}}
{{--                                                       @keypress="order_numberEntering" title="可在两侧增加百分号(%)进行模糊搜索">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">退回单号：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" placeholder="搜索退回单号" name="logistic_number_return"--}}
{{--                                                       :class="filterParams.logistic_number_return?'bg-warning':''"--}}
{{--                                                       @keypress="logistic_number_returnEntering" title="可在两侧增加百分号(%)进行模糊搜索">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">审核：</label>--}}
{{--                                                <select name="is_checked" class="form-control-sm" @change="is_checkedChange"--}}
{{--                                                        :class="filterParams.is_checked?'bg-warning':''">--}}
{{--                                                    <option value=""></option>--}}
{{--                                                    <option value="1">已审核</option>--}}
{{--                                                    <option value="0">未审核</option>--}}
{{--                                                </select></td>--}}
{{--                                            <td></td>--}}
{{--                                            <td width="16%"></td>--}}
{{--                                        </tr>--}}
{{--                                        <tr>--}}
{{--                                            <td ></td>--}}
{{--                                            <td colspan="2">--}}
{{--                                                <label for="">&nbsp;　　&nbsp;&nbsp;</label>--}}
{{--                                                <input type="date" name="created_at_end" class="form-control-sm tooltipTarget" style="width:140px"--}}
{{--                                                       :class="filterParams.created_at_end?'bg-warning':''"--}}
{{--                                                       @keypress="created_at_endEntering" @change="created_at_endChange" title="选择显示指定日期的结束时间">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">商品条码：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" placeholder="包含该商品的退单" name="barcode_goods"--}}
{{--                                                       :class="filterParams.barcode_goods?'bg-warning':''" title="可模糊匹配右边未填完的部分，按回车提交"--}}
{{--                                                       @keypress="barcode_goodsEntering">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">是否正品：</label>--}}
{{--                                                <select name="id_quality_label" id="id_quality_label" class="form-control-sm tooltipTarget"--}}
{{--                                                        :class="filterParams.id_quality_label?'bg-warning':''"--}}
{{--                                                        title="正品仅显示全部是正品的退单，但残次显示的是包含有残次的退单" @change="id_quality_labelChange">--}}
{{--                                                    <option value="" selected></option>--}}
{{--                                                    <option v-for="qualityLabel in qualityLabels" :value="qualityLabel.id">@{{ qualityLabel.name }}</option>--}}
{{--                                                </select>--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">寄件人手机：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" name="mobile_sender"--}}
{{--                                                       :class="filterParams.mobile_sender?'bg-warning':''"--}}
{{--                                                       @change="mobile_senderChange" title="输入完成敲回车提交">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">审核批次号：</label>--}}
{{--                                                <input type="text" class="form-control-sm tooltipTarget" name="checked_numbers"--}}
{{--                                                       :class="filterParams.checked_numbers?'bg-warning':''"--}}
{{--                                                       @change="checked_numbersChange" title="支持右位留空的模糊搜索">--}}
{{--                                            </td>--}}
{{--                                            <td>--}}
{{--                                                <label for="">是否入库：</label>--}}
{{--                                                <select name="is_loaded" id="is_loaded" class="form-control-sm"--}}
{{--                                                        :class="filterParams.is_loaded?'bg-warning':''"--}}
{{--                                                        title="" @change="is_loadedChange">--}}
{{--                                                    <option value="" selected></option>--}}
{{--                                                    <option value="1">是</option>--}}
{{--                                                    <option value="0">否</option>--}}
{{--                                                    <option value="null">无需入库</option>--}}
{{--                                                </select>--}}
{{--                                            </td>--}}
{{--                                            <td></td>--}}
{{--                                        </tr>--}}
                                        <tr>
                                            <td>
                                                <span class="text-muted">操作选定记录：</span>
                                            </td>
                                            <td colspan="9">
                                                @can('退货管理-删除')
                                                    <span class="btn btn-sm" @click="recoverSelected" style="cursor: pointer"
                                                          :class="[rejectedBills_checkBoxes.length>0?'btn-danger':'btn-outline-danger']">恢复</span>
                                                @endcan
                                            </td>
                                            <td></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-striped table-sm table-bordered table-hover">
                    <tr>
                        <th>
                            <input type="checkbox" class="form-control-sm tooltipTarget" title="全选"
                                   id="checkSelectingAll" @click="checkBoxAllToggle" v-model="checkBoxAll" value="1">
                            {{--                            @can('退货管理-审核')--}}
                            {{--                                <span style="vertical-align: top;padding:5px 0 0 5px;line-height: 25px" >全选</span>--}}
                            {{--                                <button v-if="checkBoxAll" class="btn btn-outline-info btn-sm tooltipTarget"--}}
                            {{--                                        @click="checkAll" title="将本页所有可见列表已勾选的标记为审核，拖动该按钮取消全选"--}}
                            {{--                                        id="checkConfirmingAll" draggable="true" ondragstart="drag(event)"--}}
                            {{--                                >全审</button>--}}
                            {{--                            @endcan--}}
                        </th>
                        <th>是否审核</th>
                        <th>是否完结</th>
                        <th>是否入库</th>
                        <th>创建时间</th>
                        <th>客户名称</th>
                        <th>退回单号</th>
                        <th>退回公司</th>
                        <th>订单号</th>
                        <th>姓名</th>
                        <th>手机</th>
                        <th>原单单号</th>
                        <th>到付费用</th>
                        <th>商品总数</th>
                        <th>商品条码</th>
                        <th>商品名称</th>
                        <th>数量</th>
                        <th>是否正品</th>
                        <th>批次号</th>
                        <th>生产日期</th>
                        <th>效期</th>
                        <th>备注</th>
                        <th>录入人</th>
                    </tr>

                    <tr v-for="(rejectedBill,i) in rejectedBills" v-if="!rejectedBill.is_hide" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td>
                            <input type="checkbox" v-model="rejectedBills_checkBoxes" :value="rejectedBill.id"/>
                        </td>
                        <td class="text-muted">
                            <span v-if="rejectedBill.is_checked==1" class="text-success">
{{--                                <span class="fa fa-check-square"></span> 已审核--}}
                                <span class="fa fa-check-square"></span> @{{ rejectedBill.checked_numbers }}
                            </span>
                            <span v-else class="text-muted">
                                未审核
                            </span>
                        </td>
                        <td class="" :class="[rejectedBill.is_finished!=0?'text-success':'text-muted']">@{{rejectedBill.is_finished | yesNo}}</td>
                        <td class="" :class="[rejectedBill.is_loaded==1?'text-success':'text-muted']">@{{rejectedBill.is_loaded | yesNoIsLoaded}}</td>
                        <td class="text-muted">@{{rejectedBill.created_at}}</td>
                        <td>@{{rejectedBill.owner.name}}</td>
                        <td>@{{rejectedBill.logistic_number_return}}</td>
                        <td class="text-muted">@{{rejectedBill.logistic.name}}</td>
                        <td>@{{rejectedBill.order_number}}</td>
                        <td class="text-muted">@{{rejectedBill.sender}}</td>
                        <td class="text-muted">@{{rejectedBill.mobile_sender}}</td>
                        <td>@{{rejectedBill.logistic_number}}</td>
                        <td class="text-muted">@{{rejectedBill.fee_collected}}</td>
                        <td class="text-muted">@{{rejectedBill.goods_amount}}</td>
                        <td colspan="8">
                            <div class="text-center" v-if="rejectedBill.detailFolding && rejectedBill.items.length>1">
                                <a href="javascript:;" @click="rejectedBill.detailFolding=false">@{{rejectedBill.goods_amount}}件商品，点击展开明细</a></div>
                            <table class="table table-sm" v-else>
                                <tr v-for="item in rejectedBill.items">
                                    <td>@{{item.barcode_goods}}</td>
                                    <td>@{{item.name_goods}}</td>
                                    <td>@{{item.amount}}</td>
                                    <td class="text-muted">@{{item.quality_label}}</td>
                                    <td class="text-muted">@{{item.batch_number}}</td>
                                    <td class="text-muted">@{{item.made_at}}</td>
                                    <td class="text-muted">@{{item.validity_at}}</td>
                                    <td class="text-muted">@{{item.remark}}</td>
                                </tr>
                                <tr v-if="!rejectedBill.detailFolding && rejectedBill.items.length>1">
                                    <td colspan="7" class="text-center">
                                        <a href="javascript:;" @click="rejectedBill.detailFolding=true">点击收起明细</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="text-muted">@{{rejectedBill.operator_name}}</td>
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$rejectedBills->count()}}/{{$total}}</div>
                {{$rejectedBills->appends($paginateParams)->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')

    <script>
        let vueList=new Vue({
            el:"#list",
            data:{
                filterParams:{created_at:'',owner_id:'',order_number:'',logistic_number_return:'',mobile_sender:'',barcode_goods:'',
                    is_checked:'',created_at_start:'',created_at_end:'',id_quality_label:'',is_loaded:'',checked_numbers:'',paginate:'50'},
                checkBoxAll:[],
                rejectedBills:[
                        @foreach( $rejectedBills as $rejectedBill )
                    {
                        id:'{{$rejectedBill->id}}',is_checked:'{{$rejectedBill->is_checked}}',checked_numbers:'{{$rejectedBill->checked_numbers}}',
                        created_at:'{{$rejectedBill->created_at->format("Y-m-d H:i")}}',owner:{!! $rejectedBill->owner !!},
                        order_number:'{{$rejectedBill->order_number}}',sender:'{{$rejectedBill->sender}}',
                        is_hide:false,
                        mobile_sender:'{{$rejectedBill->mobile_sender}}',logistic_number:'{{$rejectedBill->logistic_number}}',
                        logistic_number_return:'{{$rejectedBill->logistic_number_return}}',logistic:{!!$rejectedBill->logistic ?? "''"!!},
                        fee_collected:'{{$rejectedBill->fee_collected}}',goods_amount:'{{$rejectedBill->goods_amount}}',
                        is_loaded:'{{$rejectedBill->is_loaded_null}}',operator_name:'{{$rejectedBill->operator_name}}',detailFolding:true,
                        items:{!! $rejectedBill->items !!},is_finished:'{{$rejectedBill->is_finished}}',
                        {{--name_goods:'{{$rejectedBill->name_goods}}',--}}
                        {{--amount:'{{$rejectedBill->amount}}',--}}
                        {{--quality_label:{!!$rejectedBill->qualityLabel!!},--}}
                        {{--batch_number:'{{$rejectedBill->batch_number}}',--}}
                        {{--validity_at:'{{$rejectedBill->validity_at}}',--}}
                        {{--remark:'{{$rejectedBill->remark}}',--}}
                    },
                    @endforeach
                ],
                rejectedBills_checkBoxes:[],
                selectTr:0
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.initInputs();
                $('#list').removeClass('d-none');
            },
            methods:{
                filterRun:function(){
                    let form=$("<form method='get'></form>");
                    this.filterParams['page']='';
                    for(let key in this.filterParams){
                        if(this.filterParams[key]){
                            form.append($("<input type='hidden' name='"+key+"' value='"+this.filterParams[key]+"'>"));
                        }
                    }
                    $("body").append(form);
                    form.submit();
                },
                created_at_startChange:function(e){
                    this.filterParams.created_at_start=e.target.value;
                    if(this.filterParams.created_at_end){
                        this.filterRun();
                    }
                },
                created_at_endChange:function(e){
                    this.filterParams.created_at_end=e.target.value;
                    if(this.filterParams.created_at_start)
                        this.filterRun();
                },
                owner_idChange:function(e){
                    this.filterParams.owner_id=e.target.value;
                    this.filterRun();
                },
                is_checkedChange:function(e){
                    this.filterParams.is_checked=e.target.value;
                    this.filterRun();
                },
                id_quality_labelChange:function(e){
                    this.filterParams.id_quality_label=e.target.value;
                    this.filterRun();
                },
                is_loadedChange:function(e){
                    this.filterParams.is_loaded=e.target.value;
                    this.filterRun();
                },
                mobile_senderChange:function(e){
                    this.filterParams.mobile_sender=e.target.value;
                    this.filterRun();
                },
                checked_numbersChange:function(e){
                    this.filterParams.checked_numbers=e.target.value;
                    this.filterRun();
                },
                initInputs:function(){
                    let data=this;
                    let uriParts = location.href.split("?");
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.forEach(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            data.filterParams[key]=val;
                        });
                    }
                },
                created_at_startEntering:function(e){
                    if(e.key==='Enter'){
                        this.created_at_startChange(e)
                    }
                },
                created_at_endEntering:function(e){
                    if(e.key==='Enter'){
                        this.created_at_endChange(e)
                    }
                },
                owner_idEntering:function(e){
                    if(e.key==='Enter'){
                        e.target.value=$('#owner_id').val();
                        this.owner_idChange(e);
                        e.target.value='';
                    }
                },
                locateOwner:function (e) {
                    str = e.target.value.trim()
                    if (str==='')return ;
                    $("#owner_id option").attr("selected",false);
                    let selectingOption=$("#owner_id").find("option:contains("+str+")").eq(0);
                    selectingOption.attr("selected",true);
                    // this.filterParams.owner_id=selectingOption.val();
                },
                order_numberEntering:function(e){
                    if(e.key==='Enter'){
                        this.filterParams.order_number=e.target.value;
                        this.filterRun();
                    }
                },
                barcode_goodsEntering:function(e){
                    if(e.key==='Enter'){
                        this.filterParams.barcode_goods=e.target.value;
                        this.filterRun();
                    }
                },
                logistic_number_returnEntering:function(e){
                    if(e.key==='Enter'){
                        this.filterParams.logistic_number_return=e.target.value;
                        this.filterRun();
                    }
                },
                cancelCheckConfirmAll:function(){
                    $('#checkConfirmingAll').tooltip('hide');
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({'trigger':'hover'})
                    }, 10);
                    this.checkBoxAll=false;
                    this.rejectedBills.forEach(function(rejectedBill){
                        if(rejectedBill.is_checked===-1)
                            rejectedBill.is_checked='0';
                    })
                },
                setIsLoaded_batch:function(e){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length===0){
                        tempTip.show('没有勾选记录');
                        $(e.target).val("");
                        return;
                    }
                    let val=$(e.target).val();
                    let is_loaded=0;
                    let is_loadedLabel='否';
                    if(val==="1"){
                        is_loaded=1;
                        is_loadedLabel='是';
                    }else if(val==="null"){
                        is_loaded='null';
                        is_loadedLabel='无需入库';
                    }
                    if(!confirm("确定要标记所有勾选入库情况为'"+is_loadedLabel+"'吗")){return;}
                    let ajaxCheckUrl='{{url("apiLocal/rejectedBill/apiSetIsLoadedAll")}}';
                    axios.post(ajaxCheckUrl,{ids:_this.rejectedBills_checkBoxes,is_loaded:is_loaded}).then(function(response){
                        if(response.data.success){
                            _this.rejectedBills_checkBoxes.forEach(function(id){
                                _this.rejectedBills.forEach(function(bill){
                                    if(bill.id===id){
                                        bill.is_loaded=is_loaded;
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('修改勾选记录的入库状态成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('修改勾选记录的入库状态失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        tempTip.setDuration(2500);
                        tempTip.show('审核勾选内容失败，网络连接错误：'+e);
                    });
                    $(e.target).val("")
                },
                checkBoxAllToggle:function(e){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length>=this.rejectedBills.length){
                        _this.rejectedBills_checkBoxes=[];
                        _this.checkBoxAll=[];
                    }
                    else{
                        _this.rejectedBills_checkBoxes=[];
                        this.rejectedBills.forEach(function(bill){
                            _this.rejectedBills_checkBoxes.push(bill.id);
                            _this.checkBoxAll=[1];
                        });
                    }
                },
                recoverSelected:function(){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length===0){
                        tempTip.show('没有勾选记录');
                        return
                    }
                    if(!confirm("确定要恢复所有勾选内容为'未删除'吗")){return;}
                    let ajaxUrl='{{url("apiLocal/rejected/recoverSelected")}}';
                    axios.post(ajaxUrl,{ids:_this.rejectedBills_checkBoxes}).then(function(response){
                        if(response.data.success){
                            response.data.rejecteds.forEach(function (rejected) {
                                _this.rejectedBills.forEach(function(rejectedBill){
                                    if(parseInt(rejectedBill.id)===parseInt(rejected.id)){
                                        rejectedBill.is_hide=true;
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('恢复勾选内容成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('恢复勾选内容失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        tempTip.setDuration(2500);
                        tempTip.show('恢复勾选内容失败，网络连接错误：'+e);
                    })
                },
                exportExcel:function(e){
                    let _this=this;
                    let val=$(e.target).val();
                    $(e.target).val("");
                    let form;
                    if(val==="1"){
                        if(_this.rejectedBills_checkBoxes.length===0){
                            tempTip.show('没有勾选记录');
                            return;
                        }
                        form=$('<form action=\"{{url("rejected/exportExcel")}}\" method="post" target="_blank"></form>');
                        form.append('<input type="hidden" name="ids" value=\''+JSON.stringify(_this.rejectedBills_checkBoxes)+'\'/>');
                    }
                    if(val==="2"){
                        if(!confirm("确定要导出当前条件下全部页的结果吗？")){return;}

                        form=$('<form action=\"{{url("rejected/exportExcelOnFilterParams")}}\" method="post" target="_blank"></form>');
                        form.append('<input type="hidden" name="filterParams" value=\''+JSON.stringify(_this.filterParams)+'\'/>');
                    }
                    form.append('@csrf');
                    $('#list').append(form);
                    form.submit();
                    tempTip.setDuration(5000);
                    tempTip.showSuccess("导出成功，如无结果则是被浏览器拦截新窗口，请尝试再次请求，或关闭浏览器对当前页面的弹出窗口拦截")
                },
                setPaginate:function(e){
                    let _this=this;
                    // let val=$(e.target).val();
                    this.filterParams.paginate=e.target.value;
                    this.filterRun();
                },

            },
            computed:{
                isBeingFilterConditions:function(){
                    for(let key in this.filterParams){
                        if(this.filterParams[key]){
                            if(key==='paginate')continue;
                            return true
                        }
                    }
                    return false;
                }
            },
            filters:{
                yesNo:function (val) {
                    if(!val||val===0||val==='0'){return '否'}
                    return '是'
                },
                yesNoIsLoaded:function (val) {
                    if(!val||val===0||val==='0'){return '否'}
                    if(val==='null'){return '无需入库'}
                    return '是'
                }
            }
        });
    </script>
@endsection