baoshi-was/resources/views/order/issue/create.blade.php

@extends('layouts.app')
@section('title')问题件-录入@endsection

@section('content')
    @component("order.issue.menu")@endcomponent
    <div id="issue_create_div" class="d-none">
        <div class="container-fluid" id="issue_create_div" >
            <div class="card col-md-8 offset-md-2">
                <div class="card-header">订单问题件录入</div>
                <div class="card-body">
                    <form action="{{url('order/issue/store')}}" method="post" class="form">
                        @csrf
                        @method('POST')

                        <input type="hidden" name="type" :value='createType'>

                        <div class="form-group row">
                            <label for="logistic_number_return" class="col-2 col-form-label text-right te">退回单号</label>
                            <div class="col-8 ">
                                <input type="text" name="logistic_number_return" id="logistic_number_return" class="form-control col-lg-5 @error('logistic_number_return') is-invalid @enderror"
                                       @blur="verifyRejectedBill($event)"
                                       value="@if(old('logistic_number_return')){{old('logistic_number_return')}}@endif">
                                @error('logistic_number_return')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                                <span class="valid-feedback" style="display: none" id="logistic_number_return_feedback"></span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始WMS订单号</label>
                            <div class="col-8">
                                <input type="text" name="wms_order_no" id="wms_order_no" class="form-control col-lg-5 @error('wms_order_no') is-invalid @enderror"
                                       @blur="verifyWMSOrderNo($event)"
                                       :disabled="rejectedBill.order_number"
                                       value="@if(old('wms_order_no')){{old('wms_order_no')}}@endif" >
                                @error('wms_order_no')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                                <span class="valid-feedback" style="display: none" id="wms_order_no_feedback"></span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logistic_number" class="col-2 col-form-label text-right ">退回快递单号</label>
                            <div class="col-8">
                                <input type="text" name="second_logistic_number" id="second_logistic_number" class="form-control col-lg-5 @error('logistic_number') is-invalid @enderror"
                                       value="@if(old('logistic_number')){{old('logistic_number')}}@endif"
                                       :disabled="rejectedBill.logistic_number_return"
                                       @blur="">
                                @error('logistic_number')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="order_issue_type_id"
                                   class="col-2 col-form-label text-right text-primary">问题类别</label>
                            <div class="col-8">
                                <select name="order_issue_type_id" id="order_issue_type_id" class="form-control @error('order_issue_type_id') is-invalid @enderror"
                                        v-model="order_issue_type_id">
                                    <option value></option>
                                    <option v-for="type in types " :value="type.id">@{{ type.name }}</option>
                                </select>
                                @error('order_issue_type_id')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label text-right text-primary">原始快递单号</label>
                            <div class="col-8">
                                <input type="text" name="logstic_number" id="logstic_number" class="form-control col-lg-5"
                                      v-model="order.logstic_number">
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">原始商品详情</label>
                            <div class="col-8" id="">
                                <table class="table table-responsive-sm" v-if="orderDetails">
                                    <tr>
                                        <th>条码</th>
                                        <th>商品名</th>
                                        <th>数量</th>
                                    </tr>
                                    <tr v-for="orderDetail in orderDetails">
                                        <td>@{{ orderDetail.sku.sku }}</td>
                                        <td>@{{ orderDetail.sku.descr_c }}</td>
                                        <td>@{{ orderDetail.qtyshipped }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">退回单商品详情</label>
                            <div class="col-8" id="">
                                <table class="table table-responsive-sm" v-if="rejectedBillItems">
                                    <tr>
                                        <th>条码</th>
                                        <th>商品名</th>
                                        <th>数量</th>
                                        <th>是否正品</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr v-for="item in rejectedBillItems">
                                        <td>@{{ item.barcode_goods }}</td>
                                        <td>@{{ item.name_goods }}</td>
                                        <td>@{{ item.amount }}</td>
                                        <td>@{{ item.name_goods }}</td>
                                        <td>@{{ item.remark }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始承运商</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-5"><input class="form-control" placeholder="输入关键字定位承运商" id="searchLogistic"></div>
                                <div class="form-group col-lg-5">
                                    <select class="form-control " name="logistic_id" v-model="order.carrierid">
                                        <option value></option>
                                        <option v-for="logistic in logistics" :value="logistic.code" >@{{ logistic.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人名称</label>
                            <div class="col-8">
                                <input type="text" name="consignee_name " class="form-control" v-model="order.consignee_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人号码</label>
                            <div class="col-8">
                                <input type="text" name="consignee_phone" class="form-control" v-model="order.consignee_phone">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label  class="col-2 col-form-label text-right ">收货人地址</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-4">
                                    <input type="text" name="province" class="form-control" placeholder="省"  :disabled="orderHeader.province" v-model="order.province"></div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="city" class="form-control" placeholder="市"  :disabled="orderHeader.city" v-model="order.city"></div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="district" class="form-control" placeholder="区"  :disabled="orderHeader.district" v-model="order.district"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label  class="col-2 col-form-label text-right ">详细地址</label>
                            <div class="col-8 ">
                                <input type="text" name="address" class="form-control "  :disabled="orderHeader.address" v-model="order.address">
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="second_order_no" class="col-2 col-form-label text-right">二次订单编号</label>
                            <div class="col-8">
                                <input type="text" name="second_order_no" id="second_order_no" class="form-control"
                                       value="@if(old('second_order_no')){{old('second_order_no')}}@endif">
                                <div class="valid-feedback" style="display: none" id="secondOrderNo_feedback"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="order_issue_type_id"class="col-2 col-form-label text-right ">最终状态</label>
                            <div class="col-8">
                                <select name="final_status" id="order_issue_type_id" class="form-control"v-model="finalStatus">
                                    <option value></option>
                                    <option v-for="type in final_status " :value="type.name">@{{ type.value }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logistic_indemnity_money"
                                   class="col-2 col-form-label text-right ">承运商赔偿金额</label>
                            <div class="col-8">
                                <input type="text" name="logistic_indemnity_money" id="logistic_indemnity_money" class="form-control"
                                    value="@if(old('logistic_indemnity_money')){{old('logistic_indemnity_money')}}@endif">
                                @error('orderId')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="logistic_express_remission"
                                   class="col-2 col-form-label text-right ">承运商快递减免</label>
                            <div class="col-8">
                                <select name="logistic_express_remission" id="logistic_express_remission"class="form-control"
                                        v-model='logistic_express_remission'>
                                    <option value></option>
                                    <option v-for="remission in logisticExpressRemission " :value="remission.name">@{{ remission.value }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="baoshi_indemnity_money"
                                   class="col-2 col-form-label text-right ">宝时赔偿金额</label>
                            <div class="col-8">
                                <input type="text" name="baoshi_indemnity_money" id="baoshi_indemnity_money"class="form-control"
                                       value="@if(old('baoshi_indemnity_money')){{old('baoshi_indemnity_money')}}@endif">
                                @error('orderId')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="baoshi_express_remission"class="col-2 col-form-label text-right ">宝时快递减免</label>
                            <div class="col-8">
                                <select name="baoshi_express_remission" id="baoshi_express_remission" class="form-control" v-model="baoshi_express_remission">
                                    <option value></option>
                                    <option v-for="remission in baoShiExpressRemission " :value="remission.name">@{{
                                        remission.value }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_workgroup_id"
                                   class="col-2 col-form-label text-right ">事故责任方</label>
                            <div class="col-8">
                                <select name="user_workgroup_id" id="user_workgroup_id" class="form-control"  v-model="userWorkgroupId">
                                    <option value></option>
                                    <option v-for="wrokGroup in userWorkGroup " :value="wrokGroup.id">@{{ wrokGroup.name }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-8 offset-2">
                                <button type="submit" class="btn btn-success form-control" :onsubmit="isSubmit">提交
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>
@endsection
@section('lastScript')
    <script type="text/javascript">
        let crete_vue = new Vue({
            el: '#issue_create_div',
            data: {
                logistics:{!! $logistic !!},
                types:{!! $types !!},
                userWorkGroup:{!! $userWorkGroup !!},

                isSubmit: true,
                rejectedBill:'',// 退回单信息
                rejectedBillItems:'',// 退回单商品详情
                orderHeader:'',// 原始订单详情
                orderDetails:'', // 原始订单详情
                createType:'',
                // 原始订单信息
                order:{
                    orderno:'',
                    logstic_number:'',
                    address:'',
                    province:'',
                    city:'',
                    district:'',
                    consignee_name:'',
                    consignee_phone:'',
                    carrierid:'',
                },
                final_status: [ {name: 0, value: '已解决'}, {name: 1, value: '待退回'}, {name: 2, value: '退回中'},],
                logisticExpressRemission: [{name: 0, value: '原单减免'}, {name: 1, value: '部分减免'}, {name: 2, value: '全部减免'},],
                baoShiExpressRemission: [{name: 0, value: '原单减免'}, {name: 1, value: '部分减免'}, {name: 2, value: '全部减免'},],

                order_issue_type_id: @if(old('order_issue_type_id')){{old('order_issue_type_id')}}@else''@endif,
                finalStatus: @if(old('final_status')){{old('final_status')}}@else''@endif,
                logistic_express_remission: @if(old('logistic_express_remission')){{old('logistic_express_remission')}}@else''@endif,
                baoshi_express_remission: @if(old('baoshi_express_remission')){{old('baoshi_express_remission')}}@else''@endif,
                userWorkgroupId: @if(old('user_workgroup_id')){{old('user_workgroup_id')}}@else''@endif,
            },
            mounted: function () {
                $("#issue_create_div").removeClass('d-none');
            },
            watch:{
                orderHeader:function(value){
                    if(value){
                        this.order.orderno = value['orderno'];
                        this.order.province = value['c_province'];
                        this.order.city = value['c_city'];
                        this.order.district =value['c_district'];
                        this.order.address = value['c_address1'];
                        this.order.consignee_name = value['c_contact'];
                        this.order.consignee_phone = value['c_tel2'];
                        this.order.carrierid = value['carrierid'];
                    }
                }
            },
            methods: {
                verifyRejectedBill(event){
                    this.createType = 'RejectedBill';
                    let orderNumber = $(event.target).val()
                    if(!orderNumber){
                        this.rejectedBill = '';
                        this.rejectedBillItems = '';
                    }
                    this.getRejectedBill(orderNumber);
                    let data = {logisticNumberReturn:this.order.orderno,type:'logisticNumberReturn'};
                    this.getWMSOrderInfo(this.order.orderno,data);
                },
                verifyWMSOrderNo(event){
                    this.createTyp = 'WMSOrderNo';
                    let WmsOrderNumber = $(event.target).val()
                    if(!WmsOrderNumber){
                        this.orderHeader = '';
                        this.orderDetails = '';
                    }
                    let data ={orderNo:WmsOrderNumber,type:'WMSOrderNo'};
                    this.getWMSOrderInfo(WmsOrderNumber,data);
                },
                // 通过退单号来填充资料
                getRejectedBill(orderNumber){
                    let _this = this;
                    if(!orderNumber){
                        this.RejectedBillTooltip('hide');
                        return;
                    }
                    axios.post('{{url('rejected/ajaxGetRejected')}}',{orderNumber:orderNumber}).then(function(res){
                        if(res.data.success){
                            _this.rejectedBill = res.data.rejectedBill ;
                            _this.rejectedBillItems = res.data.rejectedBill.items;
                            if(_this.rejectedBill){
                                _this.order.orderno = _this.rejectedBill ? _this.rejectedBill.order_number:'';
                                _this.RejectedBillTooltip();
                            }
                        }else{
                            _this.rejectedBill = '';
                            _this.RejectedBillTooltip('failed');
                        }
                    }).catch(function(err){
                        tempTip.setDuration(4000);
                        tempTip.show('网络链接失败'+err);
                        _this.rejectedBill = '';
                    });
                },
                // 通过wms order no 填充资料
                getWMSOrderInfo(logisticNumberReturn,data){
                    let _this = this;
                    if(!logisticNumberReturn){
                        _this.orderHeaderInfo = '';
                        _this.WMSOrderTooltip('hide');
                        return;
                    }
                    axios.post('{{url('order/issue/ajaxGetOrderHead')}}',data).then(function(res){
                        if(res.data.success){
                            _this.orderHeader = res.data.data.orderHeader ? res.data.data.orderHeader[0]:'';
                            _this.orderDetails =  res.data.data.orderDetails ?  res.data.data.orderDetails : '';
                            _this.order.orderno = _this.orderHeader ? _this.orderHeader.orderno : '' ;
                            _this.WMSOrderTooltip();
                            console.log(_this.orderHeader);
                        }else{
                            tempTip.setDuration(200);
                            tempTip.show('没有对应的WMS数据');
                            _this.WMSOrderTooltip('failed');
                        }
                    }).catch(function(err){
                        tempTip.setDuration(4000);
                        tempTip.show('网络链接失败'+err);
                        _this.orderHeader = '';
                    });
                },
                RejectedBillTooltip(type= 'success'){
                    if(type=== 'success'){
                        $('#logistic_number_return_feedback').addClass('valid-feedback').removeClass('invalid-feedback').text('以查找到对应的退回订单信息').show();
                        $('#logistic_number_return').addClass('is-valid').removeClass('is-invalid');
                    }else if(type=== 'failed'){
                        $('#logistic_number_return_feedback').removeClass('valid-feedback').addClass('invalid-feedback').text('没有查找到对应的退回订单信息').show();
                        $('#logistic_number_return').removeClass('is-valid').addClass('is-invalid');
                    } else if (type=== 'hide'){
                        $('#logistic_number_return_feedback').removeClass('valid-feedback').removeClass('invalid-feedback').text('').hide();
                        $('#logistic_number_return').removeClass('is-valid').removeClass('is-invalid');
                    }
                },
                WMSOrderTooltip(type = 'success') {
                    if (type === 'success') {
                        $('#wms_order_no_feedback').addClass('valid-feedback').removeClass('invalid-feedback').text('以查找到对应的订单信息').show();
                        $('#wms_order_no').addClass('is-valid').removeClass('is-invalid');
                    } else if(type=== 'failed') {
                        $('#wms_order_no_feedback').removeClass('valid-feedback').addClass('invalid-feedback').text('没有查找到对应的订单信息').show();
                        $('#wms_order_no').removeClass('is-valid').addClass('is-invalid');
                    }else if('hide') {
                        $('#wms_order_no_feedback').removeClass('valid-feedback').removeClass('invalid-feedback').text('').hide();
                        $('#wms_order_no').removeClass('is-valid').removeClass('is-invalid');
                    }
                },

            }
        })
    </script>

@endsection