baoshi-was/resources/views/exit/index/forwarding.blade.php

@extends('layouts.app')

@section('content')
    @component('exit.index.menu')@endcomponent
    <div id="list" class="d-none">
        <form method="GET" action="{{url('exit/index/forwarding')}}" id="form">
            <table class="table  table-sm table-bordered text-nowrap  mb-0 ml-3">
                <tr v-if="isBeingFilterConditions">
                    <td colspan="10">
                        <div class="col" style="padding:0">
                            <a  href="{{url('exit/index/forwarding')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                        </div></td>
                </tr>
                <tr>
                    <td style="width: 400px">
                        <select  name="paginate" v-model="filterData.paginate" class="tooltipTarget form-control-sm" style="vertical-align: middle" @change="submit">
                            <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 style="width: 400px">
                        <input  type="date" name="ordertime_start" class=" form-control-sm tooltipTarget" title="选择显示指定日期的起始时间"
                               v-model="filterData.ordertime_start" :class="filterData.ordertime_start?'bg-warning':''">
                    </td>
                    <td style="width: 400px">
                        <input  type="date" class=" form-control-sm tooltipTarget" name="ordertime_end" title="选择显示指定日期的结束时间"
                               v-model="filterData.ordertime_end" :class="filterData.ordertime_end?'bg-warning':''" >
                    </td>
                    <td colspan="7"></td>
                </tr>
                <tr>
                    <td >
                        <input type="text" class="form-control-sm tooltipTarget" placeholder="客户"
                               style="width:70px" @input="owner_seek"
                               title="输入关键词快速定位下拉列表，回车确定">
                        <select name="customerid" v-model="filterData.customerid" @change="submit" style="max-width: 120px" class="form-control-sm tooltipTarget"  title="选择要显示的客户" :class="filterData.customerid?'bg-warning':''">
                            <option >    </option>
                            <option v-for="owner in owners" :value="owner.customerid" >@{{owner.descr_c}}</option>
                        </select>
                    </td>
                    <td>
                        <input name="soreference1" v-model="filterData.soreference1" class="form-control-sm tooltipTarget" placeholder="发运单号" :class="filterData.soreference1?'bg-warning':''">
                    </td>
                    <td >
                        <input name="soreference5" title="可输出多快递单号" v-model="filterData.soreference5" class="form-control-sm tooltipTarget" placeholder="快递单号" :class="filterData.soreference5?'bg-warning':''">
                    </td>
                    <td colspan="7"><input hidden type="submit"></td>
                </tr>
                <tr>
                    <td colspan="10">
                       <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="exitExport(1)" href="javascript:">导出勾选内容</a>
                                    <a class="dropdown-item" @click="exitExport(2)" href="javascript:">导出所有页</a>
                                </div>
                        </span>
                        @can('出库管理-批量注释')<button @click="modal()" type="button" class="btn btn-sm ml-2 btn-outline-primary">批量注释</button>@endcan
                    </td>
                </tr>
            </table>
        </form>
        <div class="modal fade " style="top: 20%" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input class="form-control" v-model="content" placeholder="注释内容">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" @click="batchComments()" class="btn btn-primary">提交批量注释</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2 ml-3">
            <tr>
                <th>
                    <label for="all">
                        <input id="all" type="checkbox" @click="checkAll($event)">全选
                    </label>
                </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 style="width: 200px">产品代码</th>
                <th style="width: 200px">产品条码</th>
                <th style="width: 200px">产品名称</th>
                <th>订单数量</th>
                <th>备注</th>
                <th>接口取消标记</th>
                <th>拣货单打印标记</th>
                <th>接口回传标记</th>
                <th>订单冻结标记</th>
                <th>收货人地址</th>
            </tr>
            <tr v-for="(order,i) in orders">
                <td>
                    <input class="checkItem" type="checkbox" :value="order.orderno" v-model="checkData">
                </td>
                <td>@{{ i+1 }}</td>
                <td class="text-primary">@{{ order.orderno }}</td>
                <td class="text-muted">@{{ order.oracleBASCode_codename_c }}</td>
                <td> @{{ order.warehouseid }}</td>
                <td >@{{ order.oracleBASCustomer_descr_c }}</td>
                <td class="text-muted">@{{ order.consigneeid }}</td>
                <td class="text-muted">@{{ order.consigneename }}</td>
                <td class="text-muted">@{{ order.c_tel1 }}</td>
                <td class="text-muted">@{{ order.carriername }}</td>
                <td>@{{ order.issuepartyname }}</td>
                <td>@{{ order.waveno }}</td>
                <td>@{{ order.soreference1 }}</td>
                <td>@{{ order.soreference5 }}</td>
                <td>@{{ order.edisendflag2 }}</td>
                <td>@{{ order.edisendtime2 }}</td>
                <td colspan="4" class="text-center">
                    <table v-if="order.oracle_d_o_c_order_details.length==1 || isBtn[order.orderno]" class="table table-sm">
                        <tr v-for="oracleDOCOrderDetail in order.oracle_d_o_c_order_details">
                            <td><div style="width: 180px;overflow: hidden">@{{ oracleDOCOrderDetail.sku }}</div></td>
                            <td><div style="width: 180px;overflow: hidden">@{{ oracleDOCOrderDetail.alternate_sku1 }}</div></td>
                            <td><div :title="oracleDOCOrderDetail.descr_c" class="tooltipTarget" style="width: 180px;overflow: hidden">@{{ oracleDOCOrderDetail.descr_c }}</div></td>
                            <td>@{{ oracleDOCOrderDetail.qtyordered }}</td>
                        </tr>
                        <tr v-if="isBtn[order.orderno]">
                            <td colspan="4">
                                <b style="cursor:pointer;color: #4aa0e6;" @click="isBtn[order.orderno]=false;">点击收起明细</b>
                            </td>
                        </tr>
                    </table>
                    <b @click="unfold(order.orderno)" style="cursor:pointer;text-decoration: underline;color: #4aa0e6;" v-if="order.oracle_d_o_c_order_details.length>1 && !isBtn[order.orderno]">共有 @{{ order.oracle_d_o_c_order_details.length }}  件商品，点击展开</b>
                </td>
                <td>@{{ order.notes }}</td>
                <td>@{{ order.erpcancelflag }}</td>
                <td>@{{ order.picking_print_flag }}</td>
                <td>@{{ order.edisendflag }}</td>
                <td>@{{ order.releasestatus }}</td>
                <td>@{{ order.c_address1 }}</td>
            </tr>
        </table>
        {{$orders->appends($request)->links()}}
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                filterData:{
                    paginate:50,ordertime_start:'',ordertime_end:'',customerid:'',soreference1:'',soreference5:'',
                },
                checkData:[],
                owners:[
                    @foreach($customers as $customer)
                    {!! $customer !!},
                    @endforeach
                ],
                orders:[
                    @foreach($orders as $order)
                    {!! $order !!},
                    @endforeach
                ],
                isBtn:{},
                content:'',
            },
            mounted:function () {
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                this.initInputs();
                $("#list").removeClass('d-none');
            },
            computed:{
                isBeingFilterConditions:function(){
                    for(let key in this.filterData){
                        if(this.filterData[key] && key!='paginate'){
                            return true
                        }
                    }
                    return false;
                },

            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.orders.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(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);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                //提交表单
                submit:function(){
                    let form = $("#form");
                    form.submit();
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.orders.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.orderno) == '-1'){
                                this.checkData.push(el.orderno);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                //寻找客户
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.filterData.customerid='';
                    else
                        _this.owners.forEach(function (owner) {
                            if (owner.descr_c.includes($val)){
                                _this.filterData.customerid=owner.customerid;
                            }
                        });
                },
                unfold(orderno){
                    this.$set(this.isBtn,orderno,true);
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },1);
                },
                exitExport(val){
                    if (val==1){
                        if (this.checkData.length<1) {
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('没有勾选任何记录')
                            return;
                        }
                        window.location.href="{{url('exit/index/forwarding?checkData=')}}"+this.checkData;
                        return;
                    }
                    window.location.href="{{url('exit/index/forwarding?ordertime_start=')}}"+this.filterData.ordertime_start
                    +"&&ordertime_end="+this.filterData.ordertime_end+"&&soreference1="+this.filterData.soreference1
                    +"&&soreference5="+this.filterData.soreference5+"&&export="+true;
                },
                modal(){
                  $("#myModal").modal('show');
                },
                batchComments(){
                    let _this=this;
                    if (this.checkData.length<1 || !this.content) {
                        $("#myModal").modal('hide');
                        tempTip.setDuration(3000);
                        if (this.checkData.length<1) tempTip.showSuccess('没有勾选任何记录');
                        else tempTip.showSuccess('没有输入任何内容');
                        return;
                    }
                    axios.post('{{url('exit/create/batchComments')}}',{checkData:this.checkData,content:this.content})
                        .then(function (response) {
                            let sign=[];
                            _this.orders.every(function (order) {
                                if (sign.length===response.data.length)return false;
                                response.data.every(function (data) {
                                    if (order.orderno===data.orderno){
                                        order.notes=data.notes;
                                        sign.push(order.orderno);
                                        return false;
                                    }
                                    return  true;
                                });
                                return true;
                            });
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('注释完毕！')
                            _this.content='';
                        }).catch(function (err) {
                            tempTip.setDuration(4000);
                            tempTip.show('网络错误：'+err)
                        });
                    $("#myModal").modal('hide');
                }
            },
        });
    </script>
@endsection