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

@extends('layouts.app')
@section('title')订单管理@endsection

@section('content')
    @component('order.index.menu')@endcomponent
    <div class="container-fluid">
        <div style="min-width: 4070px;">
            <div id="list" class="d-none">
                <div id="form_div"></div>
                <div class="ml-3 form-inline">
                    <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="orderExport(false)" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="orderExport(true)" href="javascript:">导出所有页</a>
                        </div>
                    </span>
                    @can('订单管理-批量备注')<button @click="modal()" type="button" class="btn btn-sm ml-2 btn-outline-primary">批量备注追加</button>@endcan
                    @can('订单管理-编辑')
                        <span class="btn btn-sm tooltipTarget ml-2" @click="freezeAll" style="cursor: pointer" title="订单的冻结条件要只局限在“创建订单”,“分配完成”,“拣货完成”,“播种完成”"
                              :class="[checkData.length>0?'btn-dark':'btn-outline-dark']">冻结</span>
                        <span class="btn btn-sm tooltipTarget ml-2" @click="deAllocationAll" style="cursor: pointer"  title="订单的取消分配条件要只局限在“分配完成”或“部分分配”"
                              :class="[checkData.length>0?'btn-dark':'btn-outline-dark']">取消分配</span>
                    @endcan
                </div>
                <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 card-body mt-2 ml-3">
                    <tr class="text-nowrap">
                        <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 style="min-width:320px;">收货人地址</th>
                        <th>波次编号</th>
                        <th>仓库</th>
                        <th>快递获取标记</th>
                        <th>快递获取时间</th>
                        <th style="min-width: 150px">产品代码</th>
                        <th style="min-width: 150px">产品条码</th>
                        <th style="min-width: 180px">产品名称</th>
                        <th>订单数量</th>
                        <th style="min-width: 150px">明细状态</th>
                        <th>复核时间</th>
                        <th style="min-width:260px;">备注</th>
                        <th>接口取消标记</th>
                        <th>拣货单打印标记</th>
                        <th>接口回传标记</th>
                        <th>接口回传异常备注</th>
                        <th>订单冻结</th>
                        <th>取消分配</th>

                    </tr>
                    <tr v-for="(order,i) in orders" @click="selectedColor(order.orderno)" :style="{'font-weight': order.orderno==selectedStyle?'bold':''}">
                        <td>
                            <input class="checkItem" type="checkbox" :value="order.orderno" v-model="checkData">
                        </td>
                        <td>@{{ i+1 }}</td>
                        <td class="text-dark font-weight-bold text-nowrap">@{{ order.orderno }}</td>
                        <td class="text-muted text-nowrap">@{{ order.ordercodename }}</td>
                        <td class="text-nowrap">@{{ order.addtime }}</td>
                        <td class="text-nowrap">@{{ order.issuepartyname }}</td>
                        <td class="text-nowrap">@{{ order.customer_descr_c }}</td>
                        <td class="text-nowrap">@{{ order.soreference1 }}</td>
                        <td class="text-muted text-nowrap">@{{ order.carriername }}</td>
                        <td class="text-nowrap">
                            <div v-if="picktotraceidMap[order.orderno] && picktotraceidMap[order.orderno].length>1" class="text-center">
                                <span v-for="picktotraceid in picktotraceidMap[order.orderno]" v-if="order.is_unfold">
                                    @{{ picktotraceid }}<br>
                                </span>
                                <button class="btn btn-sm btn-outline-info" :style="order.is_unfold ? 'opacity:0.7' : ''" @click="isUnfold(order)">
                                    <span v-if="order.is_unfold" class="mt-1">收起</span>
                                    <span v-else>分箱 @{{ picktotraceidMap[order.orderno].length }} 件,展开单号</span>
                                </button>
                            </div>
                            <span v-else>@{{ order.soreference5 }}</span>
                        </td>
                        <td class="text-muted text-nowrap">@{{ order.c_contact }}</td>
                        <td class="text-muted text-nowrap">@{{ order.c_tel2 }}</td>
                        <td class="text-nowrap"> @{{ order.c_province }}</td>
                        <td class="text-nowrap"> @{{ order.c_city }}</td>
                        <td class="text-nowrap"> @{{ order.c_district }}</td>
                        <td class="text-muted">@{{ order.c_address1 }}</td>
                        <td class="text-nowrap">@{{ order.waveno }}</td>
                        <td class="text-nowrap"> @{{ order.warehouseid }}</td>
                        <td class="text-nowrap"><span v-if="order.edisendflag2=='Y'">是</span><span v-if="order.edisendflag2=='N'">否</span><span v-if="order.edisendflag2=='W'">错误</span></td>
                        <td class="text-nowrap">@{{ order.edisendtime2 }}</td>
                        <td colspan="6" class="text-center">
                            <table v-if="commodities[order.orderno]&&commodities[order.orderno].length==1 || isBtn[order.orderno]" class="table text-nowrap table-sm">
                                <tr v-for="oracleDOCOrderDetail in commodities[order.orderno]">
                                    <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>
                                    <td><div style="width: 180px;overflow: hidden">@{{ oracleDOCOrderDetail.orderdetailcodename }}</div></td>
                                    <td><div style="width: 180px;overflow: hidden">@{{ oracleDOCOrderDetail.checktime }}</div></td>
                                </tr>
                                <tr v-if="isBtn[order.orderno]">
                                    <td colspan="5">
                                        <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="commodities[order.orderno]&&commodities[order.orderno].length>1 && !isBtn[order.orderno]">共有 @{{ commodities[order.orderno].length }}  件商品，点击展开</b>
                        </td>
                        <td>@{{ order.notes }}</td>
                        <td>@{{ order.erpcancelflag }}</td>
                        <td>@{{ order.picking_print_flag }}</td>
                        <td>@{{ order.edisendflag }}</td>
                        <td>@{{ order.ediremarks2}}</td>
                        <td>
                            @can('订单管理-编辑')
                                <button v-if="order.releasestatus!=='H'" @click="freeze(order.orderno,order.waveno)" class="btn btn-sm btn-outline-dark text-nowrap"
                                        :disabled="!(order.ordercodename==='创建订单'||order.ordercodename==='分配完成'||order.ordercodename==='拣货完成'||order.ordercodename==='播种完成')">冻结</button>
                                <button v-else @click="thaw(order.orderno,order.waveno)" class="btn btn-sm btn-outline-danger text-nowrap"
                                        :disabled="!(order.ordercodename==='创建订单'||order.ordercodename==='分配完成'||order.ordercodename==='拣货完成'||order.ordercodename==='播种完成')">解冻</button>
                            @else
                                @{{ order.releasestatus }}
                            @endcan
                        </td>
                        <td>
                            @can('订单管理-编辑')
                                <button v-if="order.sostatus=='40'||'30'"  @click="deAllocation(order.orderno,order.waveno)" class="btn btn-sm btn-outline-dark text-nowrap"
                                        {{--                                        :disabled="!(order.codename_c==='分配完成'||order.codename_c==='部分分配')">取消分配</button>--}}
                                        :disabled="!(order.sostatus==='40'|| order.sostatus==='30')">取消分配</button>
                            @else
                                @{{ order.sostatus }}
                            @endcan
                        </td>

                    </tr>
                </table>
                <button type="button" @click="pageUp()" :readonly="page>1?false:true" class="btn btn-sm " :class="page>1?'btn-outline-info':''">上一页</button>
                <button type="button" @click="pageDown()" :readonly="page<maxPage?false:true" class="btn btn-sm m-3" :class="page<maxPage?'btn-outline-info':''">下一页</button>
                <input  @keyup.enter="pageSkip($event)" class="form-control-sm ml-3 tooltipTarget" :placeholder="'当前页数：'+page+'/'+maxPage" title="去往指定页">
                <span class="text-muted m-1">共 @{{ sum }} 条</span>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{asset('js/queryForm/export200804.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/queryForm200804.js')}}"></script>
    <script>
        new Vue({
            el:"#list",
            data:{
                page:Number('{{$page}}'),
                maxPage:1,
                sum:0,
                checkData:[],
                owners:[
                        @foreach($customers as $customer)
                    { name:'{{$customer->customerid}}',value:'{{$customer->descr_c}}' },
                    @endforeach
                ],
                orders:{!! $orders !!},
                commodities:{!! $commodities !!},
                isBtn:{},
                content:'',
                codes:[
                        @foreach($codes as $code)
                    {name:'{{$code->code}}',value:'{{$code->codename_c}}'},
                    @endforeach
                ],
                selectedStyle:'',
                picktotraceidMap:{!! $picktotraceids !!},
            },
            mounted:function () {
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $("#list").removeClass('d-none');
                if (this.orders.length>0){
                    this.maxPage=Math.ceil(this.orders[0].counted/50);
                    this.sum=this.orders[0].counted;
                }
                let data=[
                    [   {name:'codename_c',type:'select',placeholder:'订单状态',data:this.codes},
                        {name:'orderdate_start',type:'time',tip:['选择显示日期的起始时间','选择显示日期的起始时间']},
                        {name:'orderno',type:'input',tip:'编号，糊模查找需要在左边打上%符号',placeholder: '编号'},
                        {name:'carriername',type:'input',tip:'',placeholder:'承运人'},
                        {name:['notes','addtime'],type:'input_select',tip:['右侧选择查询范围，默认为一天内','查询范围，范围越短搜索越快'],placeholder: ['客户',''],
                            data:[{name:'31',value:'近一月'},{name:'92',value:'近三月'},{name:'183',value:'近半年'},{name:'366',value:'近一年'},{name:'0',value:'不限'},]},
                        {name:'issuepartyname',type:'input',tip:'',placeholder: '店铺名称'},
                        {name:'edisendflag2',type:'select',tip:'快递获取标记',placeholder: '快递获取标记',data:[{name:'Y',value:'是'},{name:'N',value:'否'},{name:'W',value:'错误'},]},
                        {name:'edisendflag',type:'select',tip:'接口回传标记',placeholder: '接口回传标记',data:[{name:'Y',value:'Y'},{name:'N',value:'N'},{name:'W',value:'W'},{name:'R',value:'R'},]}
                    ],
                    [
                        {name:'codename_c_end',type:'select',placeholder:'订单状态范围',data:this.codes},
                        {name:'customerid',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'orderdate_end',type:'time',tip:['选择显示指定日期的结束时间','选择显示指定日期的结束时间']},
                        {name:'soreference5',type:'input',tip:'可支持多快递单号，糊模查找需要在左边打上%符号',placeholder: '多快递单号'},
                        {name:'soreference1',type:'input',tip:'客户订单号，糊模查找需要在左边打上%符号',placeholder: '客户订单号'},
                        {name:'waveno',type:'input',tip:'波次编号，模糊查找需要在左边打上%的符号',placeholder: '波次编号'},
                        {name:'alternate_sku1',type:'input',tip:'产品条码，模糊查找需要在左边打上%的符号',placeholder: '产品条码'},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.orders.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                pageUp(){
                    if (this.page<=1)return;
                    this.href(this.page-1);
                },
                pageDown(){
                    if (this.page>=this.maxPage)return;
                    this.href(this.page+1);
                },
                pageSkip(e){
                    if (Number(e.target.value)<=0 || Number(e.target.value)>this.maxPage){
                        tempTip.setDuration(2000);
                        tempTip.show('页数不存在！ ');
                        return
                    }
                    this.href(e.target.value);
                },
                href(page){
                    let url = document.URL;
                    if (url.indexOf('page='+this.page) != -1){
                        url = url.replace("page="+this.page,"page="+page);
                    }else{
                        if (url.indexOf('?') == -1) url += "?page="+page;
                        else url += "&page="+page;
                    }
                    window.location.href=url;
                },
                //全选事件
                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 = [];
                    }
                },
                unfold(orderno){
                    this.$set(this.isBtn,orderno,true);
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },1);
                },
                orderExport(checkAllSign){
                    let url = '{{url('order/index/delivering')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
                modal(){
                    $("#myModal").modal('show');
                },
                //批量冻结
                freezeAll:function(){
                    let _this=this;
                    if(_this.checkData.length===0){
                        tempTip.show('没有勾选记录');
                        return
                    }
                    if(!confirm("确定要标记所有勾选内容为'冻结'吗")){return;}
                    axios.post('{{url('order/freezeAll')}}',{checkData:_this.checkData}).then(function(response){
                        if(response.data.success){
                            _this.orders.forEach(function(order){
                                _this.checkData.forEach(function (checkedId) {
                                    if(order.orderno===checkedId){
                                        order.releasestatus='H';
                                        order.waveno='*';
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('标记勾选内容为冻结成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('标记勾选内容冻结失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        alert('网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('标记勾选内容冻结失败，网络连接错误：'+e);
                    })
                },
                //批量取消分配
                deAllocationAll(){
                    let _this=this;
                    if(_this.checkData.length===0){
                        tempTip.show('没有勾选记录');
                        return
                    }
                    if(!confirm("确定要所有勾选内容'取消分配'吗")){return;}
                    axios.post('{{url('order/deAllocationAll')}}',{checkData:_this.checkData}).then(function(response){
                        if(response.data.success){
                            _this.orders.forEach(function(order){
                                _this.checkData.forEach(function (checkedId) {
                                    if(order.orderno===checkedId){
                                        order.sostatus='00';
                                        order.waveno='*';
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('标记勾选内容取消分配成功');
                            window.location.reload();
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('标记勾选内容取消分配失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        alert('网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('标记勾选内容取消分配失败，网络连接错误：'+e);
                    })
                },
                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('order/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');
                },
                selectedColor(orderno){
                    if (orderno==this.selectedStyle){
                        this.selectedStyle='';
                        return;
                    }
                    this.selectedStyle=orderno;
                },
                freeze(orderno,waveno){
                    if(!confirm('确定要冻结“'+orderno+'”吗？'))return;
                    let _this=this;
                    axios.post('{{url('order/freeze')}}',{orderno:orderno,waveno:waveno})
                        .then(function (response) {
                            if (response.data.success){
                                _this.orders.some(function (order) {
                                    if (order.orderno===orderno){
                                        order.releasestatus='H';
                                        order.waveno='*';
                                        return true;
                                    }
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('订单已被冻结！');
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('网络异常：'+err);
                    });
                },
                thaw(orderno,waveno){
                    if(!confirm('确定要解冻“'+orderno+'”吗？'))return;
                    let _this=this;
                    axios.post('{{url('order/thaw')}}',{orderno:orderno,waveno:waveno})
                        .then(function (response) {
                            if (response.data.success){
                                _this.orders.some(function (order) {
                                    if (order.orderno===orderno){
                                        order.releasestatus='N';
                                        return true;
                                    }
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('订单已成功解冻！');
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('网络异常：'+err);
                    });
                },
                deAllocation(orderno,waveno){
                    if(!confirm('确定要取消分配“'+orderno+'”吗？'))return;
                    let _this=this;
                    axios.post('{{url('order/deAllocation')}}',{orderno:orderno,waveno:waveno})
                        .then(function (response) {
                            if (response.data.success){
                                _this.orders.some(function (order) {
                                    if (order.orderno===orderno){
                                        order.sostatus='00';
                                        order.waveno='*';
                                        return true;
                                    }
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('订单已被取消分配！');
                                window.location.reload();
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('网络异常：'+err);
                    });
                },
                isUnfold(order){
                    if (!order.is_unfold){
                        this.$set(order,'is_unfold',true);
                        return
                    }
                    order.is_unfold=false;
                }
            },
        });
    </script>
@endsection