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

@extends('layouts.app')
@section('title')编辑-退货管理@endsection

@section('content')

    <div id="nav2">
        {{--@component('rejected.menu')
            @can('退货管理-录入')
                <li class="nav-item">
                    <a class="nav-link" href="javascript:;" :class="{active:isActive('edit',3)}">修改</a>
                </li> @endcan
        @endcomponent--}}
    </div>
    <div class="container-fluid d-none" id="editPanel">
        <div class="card mb-2">
            <div style="position: relative" v-if="status.lockingBillPanel">
                <div style="background-color: #aaa; height: 535px; opacity: 0.5;
                width:100%;z-index: 9; position: absolute" class="d-flex ">
                </div>
                <div style="height: 530px;
                width:100%;z-index: 10; position: absolute" class="d-flex align-items-center ">
                    <button class="btn btn-info flex-fill" @click="cancelPackCommitEdit">取消锁定</button>
                </div>
            </div>
            <div class="row">
                <div class="col-7">
                    <div class="card-body">
                        <div class="list-group" style="max-height: 415px;overflow-y: scroll">
                            <table class="table table-sm table-striped table-info table-hover table-bordered">
                                <tr>
                                    <th class="text-center">创建时间</th>
                                    <th class="text-center">客户名称</th>
                                    <th class="text-center">退回单号</th>
                                    <th class="text-center">退回公司</th>
                                    <th class="text-center">姓名</th>
                                    <th class="text-center">电话</th>
                                    <th class="text-center">到付费用</th>
                                    <th class="text-center">订单号</th>
                                    <th class="text-center">原单号</th>
                                    <th class="text-center">是否入库</th>
                                    <th class="text-center">备注</th>
                                </tr>
                                <tr :class="[rejectedBill.isEditing?'bg-info':'']"
                                    :data-id="rejectedBill.id" @click="editBill">
                                    <td>@{{rejectedBill.created_at | dateNoYear}}</td>
                                    <td>@{{rejectedBill.owner_name }}</td>
                                    <td>@{{rejectedBill.logistic_number_return }}</td>
                                    <td>@{{rejectedBill.logistic_name}}</td>
                                    <td>@{{rejectedBill.sender}}</td>
                                    <td>@{{rejectedBill.mobile_sender}}</td>
                                    <td>@{{rejectedBill.fee_collected}}</td>
                                    <td>@{{rejectedBill.order_number}}</td>
                                    <td>@{{rejectedBill.logistic_number}}</td>
                                    <td>@{{rejectedBill.is_loaded|isLoaded}}</td>
                                    <td>@{{rejectedBill.remark}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-5 disabled">
                    <div class="card-body ml-n4">
                        <table class="table table-striped table-sm table-bordered" :class="[status.billEditing?'bg-info':'']">
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="id_owner" class="col-form-label text-right">客户名称</label>
                                        <div class="input-group">
                                            <select name="id_owner" id="id_owner" class="form-control" :class="[errors.id_owner?'is-invalid':'']"
                                                    v-model="billInputting.id_owner" required data-focusOrder="1">
                                                <option value=""></option>
                                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                                            </select>
                                            <input type="text" class="form-control input-group-prepend" placeholder="输入关键字定位客户名称"
                                                   name="locateOwnerSearch" autocomplete="off" @input="locateIdOwner" v-model="billInputting.locateOwnerSearch">
                                            <span class="invalid-feedback" v-if="errors.id_owner"><strong>@{{ errors.id_owner[0] }}</strong></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="sender" class="col-form-label text-right">姓名</label>
                                        <input type="text" class="form-control" :class="[errors.sender?'is-invalid':'']"
                                               data-focusOrder="5"
                                               name="sender" id="sender" autocomplete="off" v-model="billInputting.sender">
                                        <span class="invalid-feedback" v-if="errors.sender"><strong>@{{errors.sender[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="logistic_number_return" class="col-form-label text-right">退回单号</label>
                                        <input type="text" class="form-control" :class="[errors.logistic_number_return?'is-invalid':'']"
                                               data-focusOrder="2"
                                               name="logistic_number_return" id="logistic_number_return" autocomplete="off" v-model="billInputting.logistic_number_return"
                                               @change="logistic_number_returnChange"
                                               required>
                                        <span class="invalid-feedback" v-if="errors.logistic_number_return"><strong>@{{errors.logistic_number_return[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="fee_collected" class="col-form-label text-right">到付费用</label>
                                        <input type="text" class="form-control" :class="[errors.fee_collected?'is-invalid':'']"
                                               data-focusOrder=""
                                               v-model="billInputting.fee_collected" name="fee_collected" id="fee_collected" autocomplete="off">
                                        <span class="invalid-feedback" v-if="errors.fee_collected"><strong>@{{errors.fee_collected[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="id_logistic_return" class="col-form-label text-right">退回公司</label>
                                        <div class="input-group">
                                            <select name="id_logistic_return" id="id_logistic_return" class="form-control"
                                                    data-focusOrder="3"
                                                    :class="[errors.id_logistic_return?'is-invalid':'']" v-model="billInputting.id_logistic_return" required>
                                                <option value=""></option>
                                                <option v-for="logistic in logistics" :value="logistic.id">@{{logistic.name}}</option>
                                            </select>
                                            <input type="text" class="form-control input-group-prepend" placeholder="输入关键字定位物流公司"
                                                   name="locateLogisticSearch" autocomplete="off" @input="locateLogistic" v-model="billInputting.locateLogisticSearch">
                                            <span class="invalid-feedback" v-if="errors.id_logistic_return"><strong>@{{errors.id_logistic_return[0] }}</strong></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="order_number" class="col-form-label text-right">订单号</label>
                                        <input type="text" class="form-control" :class="[errors.order_number?'is-invalid':'']"
                                               data-focusOrder="6"
                                               name="order_number" id="order_number" autocomplete="off" v-model="billInputting.order_number">
                                        <span class="invalid-feedback" v-if="errors.order_number"><strong>@{{ errors.order_number[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="mobile_sender" class="col-form-label text-right">电话</label>
                                        <input type="text"  class="form-control" :class="[errors.mobile_sender?'is-invalid':'']"
                                               data-focusOrder="4"
                                               name="mobile_sender" id="mobile_sender" autocomplete="off" v-model="billInputting.mobile_sender" required>
                                        <span class="invalid-feedback" v-if="errors.mobile_sender"><strong>@{{ errors.mobile_sender[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="logistic_number" class="col-form-label text-right">原单号</label>
                                        <button class="btn btn-outline-primary btn-sm" @click="billInputting.logistic_number='原单退回'" style="transform: scale(0.9)">原单退回</button>
                                        <input type="text" class="form-control" :class="[errors.logistic_number?'is-invalid':'']"
                                               data-focusOrder="7"
                                               name="logistic_number" id="logistic_number" autocomplete="off"
                                               v-model="billInputting.logistic_number"
                                        >
                                        <span class="invalid-feedback" v-if="errors.logistic_number"><strong>@{{errors.logistic_number[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="bill_remark" class="col-form-label text-right">备注</label>
                                        <input type="text"  class="form-control" :class="[errors.bill_remark?'is-invalid':'']"
                                               data-focusOrder="9"
                                               name="remark" id="bill_remark" autocomplete="off" v-model="billInputting.remark" required>
                                        <span class="invalid-feedback" v-if="errors.bill_remark"><strong>@{{ errors.remark[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="is_loaded" class="col-form-label text-right">是否入库</label>
                                        <select name="is_loaded" id="is_loaded" class="form-control" :class="[errors.is_loaded?'is-invalid':'']"
                                                data-focusOrder="8" :disabled="status.lockingIsLoadedInput"
                                                v-model="billInputting.is_loaded" required>
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                            <option value="null">无需入库</option>
                                        </select>
                                        <span class="invalid-feedback" v-if="errors.is_loaded"><strong>@{{errors.is_loaded[0]}}</strong></span>
                                    </div>
                                </td>
                            </tr>

                                <tr v-if="billInputting.id_owner==='94'">
                                    <td>
                                        <div class="form-group mb-0">
                                            <label for="common_01" class="col-form-label text-right">寄件方省</label>
                                            <input type="text"  class="form-control" :class="[errors.common_01?'is-invalid':'']"
                                                   data-focusOrder="10"
                                                   name="common_01" id="common_01" autocomplete="off" v-model="billInputting.common_01" required>
                                            <span class="invalid-feedback" v-if="errors.common_01"><strong>@{{ errors.common_01[0] }}</strong></span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group mb-0">
                                            <label for="common_02" class="col-form-label text-right">重量</label>
                                            <input type="text"  class="form-control" :class="[errors.common_02?'is-invalid':'']"
                                                   data-focusOrder="11"
                                                   name="common_02" id="common_02" autocomplete="off" v-model="billInputting.common_02" required>
                                            <span class="invalid-feedback" v-if="errors.common_02"><strong>@{{ errors.common_02[0] }}</strong></span>
                                        </div>
                                    </td>
                                </tr>

                            <tr>
                                <td>
                                    <div class="form-group mb-0 align-items-center row" >
                                        <div class="col-8" :class="[status.billCreating?'offset-2':'']">
                                            <input type="button" class="btn btn-dark form-control" value="修改" @click="commitEditHeader">
                                        </div>
                                    </div>
                                </td>
                                <td>

                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="card" v-if="status.editingBill">
            <div class="row">
                <div class="col-7">
                    <div class="card-body">
                        <div class="list-group">
                            <table class="table table-sm table-striped table-warning table-hover table-bordered">
                                <tr>
                                    <th class="text-center">序号</th>
                                    <th class="text-center">商品条码</th>
                                    <th class="text-center">商品名称</th>
                                    <th class="text-center">数量</th>
                                    <th class="text-center">是否正品</th>
                                    <th class="text-center">生产日期</th>
                                    <th class="text-center">效期</th>
                                    <th class="text-center">批次号</th>
                                    <th class="text-center">备注</th>
                                    <th class="text-center">照片</th>
                                    @can('退货管理-删除')<th class="text-center">操作</th>@endcan
                                </tr>
                                <tr :class="[item.isEditing?'bg-warning':'']"
                                    v-for="(item,i) in items" :data-id="item.id" @click="editItem">
                                    <td>@{{i+1}}</td>
                                    <td>@{{item.barcode_goods }}</td>
                                    <td>@{{item.name_goods }}</td>
                                    <td>@{{item.amount}}</td>
                                    <td>@{{item.quality_label}}</td>
                                    <td>@{{item.made_at}}</td>
                                    <td>@{{item.validity_at}}</td>
                                    <td>@{{item.batch_number}}</td>
                                    <td>@{{item.remark}}</td>
                                    <td>
                                        <div align="center" @mouseleave="removeCommonImg('common_img_'+item.id)" @mouseenter="commonImg('img_'+item.id,item.upload_files)">
                                            <button class="btn btn-outline-secondary btn-sm" @click="takePhoto(item.id,i)">拍照上传</button>
                                            <div :id="'img_'+item.id">
                                                <img v-for="uploadFile in item.upload_files"  :src="imgPrefix+uploadFile.url+'-thumbnail.'+uploadFile.type">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <button class="btn btn-outline-success btn-sm" @click="enableCamera(true);">开启摄像头</button>
                                        @can('退货管理-删除') <button class="btn btn-outline-danger btn-sm" @click="deleteItem">删</button>@endcan
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-5"><div class="card-body ml-n4">
                        <table class="table table-striped table-sm table-bordered" :class="[status.itemEditing?'bg-warning':'']">
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="barcode_goods" class="col-form-label text-right">商品条码</label>
                                        <input type="text" class="form-control" :class="[errors.barcode_goods?'is-invalid':'']"
                                               data-focusOrder="11"
                                               name="barcode_goods" id="barcode_goods" autocomplete="off" v-model="itemInputting.barcode_goods"
                                               @change="barcode_goodsChange"
                                        >
                                        <span class="invalid-feedback" v-if="errors.barcode_goods"><strong>@{{errors.barcode_goods[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="name_goods" class="col-form-label text-right">商品名称</label>
                                        <input type="text" class="form-control" :class="[errors.name_goods?'is-invalid':'']"
                                               data-focusOrder="12"
                                               name="name_goods" id="name_goods" autocomplete="off" v-model="itemInputting.name_goods"
                                               @change="name_goodsChange"
                                        >
                                        <span class="invalid-feedback" v-if="errors.name_goods"><strong>@{{errors.name_goods[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="amount" class="col-form-label text-right">数量</label>
                                        <input type="" class="form-control" :class="[errors.amount?'is-invalid':'']"
                                               data-focusOrder="15"
                                               name="amount" id="amount" autocomplete="off" v-model="itemInputting.amount" required>
                                        <span class="invalid-feedback" v-if="errors.amount"><strong>@{{errors.amount[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="qualityLabel.name" class="col-form-label text-right">是否正品</label>
                                        <div class="form-control" :class="[errors.id_quality_label?'is-invalid':'']">
                                            <span><input type="radio" name="id_quality_label" data-focusOrder="12" required="required" checked>留空&nbsp;</span>
                                            <span v-for="qualityLabel in qualityLabels">
                                                <input type="radio" name="id_quality_label" :value="qualityLabel.id" data-focusOrder="12"
                                                       v-model="itemInputting.id_quality_label" required>@{{qualityLabel.name}}&nbsp;</span>
                                        </div>
                                        <span class="invalid-feedback" v-if="errors.id_quality_label"><strong>@{{errors.id_quality_label[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="made_at" class="col-form-label text-right">生产日期</label>
                                        <input type="date" class="form-control" :class="[errors.made_at?'is-invalid':'']"
                                               data-focusOrder="13"
                                               name="made_at" id="made_at" autocomplete="off" v-model="itemInputting.made_at">
                                        <span class="invalid-feedback" v-if="errors.made_at"><strong>@{{errors.made_at[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="validity_at" class="col-form-label text-right">效期</label>
                                        <input type="date" class="form-control" :class="[errors.validity_at?'is-invalid':'']"
                                               data-focusOrder="17"
                                               name="validity_at" id="validity_at" autocomplete="off" v-model="itemInputting.validity_at">
                                        <span class="invalid-feedback" v-if="errors.validity_at"><strong>@{{errors.validity_at[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="batch_number" class="col-form-label text-right">批次号</label>
                                        <input type="text" class="form-control" :class="[errors.batch_number?'is-invalid':'']"
                                               data-focusOrder="14"
                                               name="batch_number" id="batch_number" autocomplete="off" v-model="itemInputting.batch_number"
                                            {{--                                                   placeholder="可扫码枪输入"--}}
                                        >
                                        <span class="invalid-feedback" v-if="errors.batch_number"><strong>@{{errors.batch_number[0] }}</strong></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0">
                                        <label for="remark" class="col-form-label text-right">备注</label>
                                        <input type="text" class="form-control" :class="[errors.remark?'is-invalid':'']"
                                               data-focusOrder="15"
                                               name="remark" id="remark" autocomplete="off" v-model="itemInputting.remark">
                                        <span class="invalid-feedback" v-if="errors.remark"><strong>@{{errors.remark[0] }}</strong></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="form-group mb-0 align-items-center row" >
                                        <div class="col-2" v-if="status.itemEditing">
                                            <button class="btn btn-success btn-sm tooltipOn" @click="shiftToCreateItem"
                                                    title="点击取消编辑，进入新增状态">取消</button>
                                        </div>
                                        <div class="col-8" :class="[status.itemCreating?'offset-2':'']">
                                            <button v-if="status.itemCreating" class="btn btn-success form-control" @click="commitItem">添加明细</button>
                                            <input v-if="status.itemEditing" type="button" class="btn btn-dark form-control" value="修改" @click="commitEditItem">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="form-group mb-0">
                                        <div class="col-8 offset-2 mt-2 mb-2">
                                            <button class="btn btn-dark form-control" @click="endAndPackCommitEdit">
                                                结束添加并提交
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="drag" class="col-4 p-0 " style="position:fixed;bottom: 30px;left: 10px;">
            <div class="text-left text-success">连接摄像头拍照</div>
            <video id="photo" width="50%" height="auto" controls></video>
            <canvas id='canvas'width='400' height='300' hidden></canvas>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        //鼠标拖动 drag
        $(function() {
            let posX,posY;
            let drag = document.getElementById("drag");
            drag.onmousedown = function(e) {
                posX = event.x - drag.offsetLeft; //获得横坐标x
                posY = event.y - drag.offsetTop; //获得纵坐标y
                document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用
            }
            document.onmouseup = function() {
                document.onmousemove = null; //鼠标举起，停止
            }
            function mousemove(ev) {
                if (ev == null) ev = window.event;
                let left= (ev.clientX - posX);
                let top= (ev.clientY - posY);
                let pageWidth=document.body.scrollWidth;//网页正文宽度
                let pageHeight=window.screen.availHeight;//屏幕工作区高度
                //限定拖动区域
                if (left <0)left=0;
                if (left >pageWidth)left=pageWidth;
                if (top <0)top=0;
                if (top >pageHeight)top=pageHeight;
                drag.style.left = left + "px";
                drag.style.top = top + "px";
            }
        })
        let MediaUtils = {
            /**
             * 获取用户媒体设备(处理兼容的问题)
             * @param videoEnable {boolean} - 是否启用摄像头
             * @param audioEnable {boolean} - 是否启用麦克风
             * @param callback {Function} - 处理回调
             */
            getUserMedia: function (videoEnable, audioEnable, callback) {
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
                    || navigator.msGetUserMedia || window.getUserMedia;
                let constraints = {video: videoEnable, audio: audioEnable};
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                        callback(false, stream);
                    })['catch'](function (err) {
                        callback(err);
                    });
                } else if (navigator.getUserMedia) {
                    navigator.getUserMedia(constraints, function (stream) {
                        callback(false, stream);
                    }, function (err) {
                        callback(err);
                    });
                } else {
                    callback(new Error('Not support userMedia'));
                }
            },
            /**
             * 关闭媒体流
             * @param stream {MediaStream} - 需要关闭的流
             */
            closeStream: function (stream) {
                if (typeof stream.stop === 'function') {
                    stream.stop();
                } else {
                    let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

                    for (let i = 0; i < trackList.length; i++) {
                        let tracks = trackList[i];
                        if (tracks && tracks.length > 0) {
                            for (let j = 0; j < tracks.length; j++) {
                                let track = tracks[j];
                                if (typeof track.stop === 'function') {
                                    track.stop();
                                }
                            }
                        }
                    }
                }
            }
        };

        let vueList=new Vue({
            el: "#editPanel",
            data:{
                imgPrefix:"{{asset("/storage")}}",
                // 用于存放 MediaRecorder 对象和音频Track，关闭录制和关闭媒体设备需要用到
                recorder:'',
                mediaStream:'',
                // 用于存放录制后的音频文件对象和录制结束回调
                recorderFile:'',
                stopRecordCallback:'',
                // 用于存放是否开启了视频录制
                videoEnabled:false,

                status: {billCreating:true,billEditing:false,itemCreating:true,itemEditing:false
                    ,editingBill:null,editingBillId:'',editingItem:null,editingItemId:''
                    ,inputtingId_owner:'',endAndPackCommitEdited:false,lockingBillPanel:false,lockingIsLoadedInput:false,
                    existItemsBeforeAdd:0},
                itemInputting:{
                    barcode_goods:"",name_goods:"",amount:"1",id_quality_label:"",
                    batch_number:"",validity_at:"",remark:"",made_at:"",
                },
                billInputting:{
                    id_owner:"",mobile_sender:"",sender:"",order_number:"",remark:"",
                    logistic_number_return:"",logistic_number:"",id_logistic_return:"",
                    fee_collected:"",is_loaded:"0",locateLogisticSearch:"",locateOwnerSearch:""
                },
                errors:{
                    id_owner:"",mobile_sender:"",sender:"",bill_remark:"",
                    logistic_number_return:"",logistic_number:"",id_logistic_return:"",
                    fee_collected:"",is_loaded:"",
                    barcode_goods:"",name_goods:"",amount:"",id_quality_label:"",
                    batch_number:"",validity_at:"",remark:"",made_at:"",
                },
                rejectedBill:{!! $rejectedBill ??''!!},
                items:[
                ],
                owners:[
                        @foreach($owners as $owner)
                    {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                    @endforeach
                ],
                logistics:[
                        @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}'},
                    @endforeach
                ],
                qualityLabels:[
                        @foreach($qualityLabels as $qualityLabel)
                    {id:'{{$qualityLabel->id}}',name:'{{$qualityLabel->name}}'},
                    @endforeach
                ]
            },
            mounted:function () {
                let _this=this;
                this.editBill();
                $('#editPanel').removeClass('d-none');
                $('.tooltipOn').tooltip({'trigger':'hover'});
                $(document).on('keypress',function(e){
                    if(_this.itemInputting.barcode_goods){
                        if(e.key==='*'){
                            _this.commitItem();
                            return false;
                        }
                    }
                });
                this.listenEnterAndJump();
            },
            methods:{
                logistic_number_returnChange:function(e){
                    let _this=this;
                    let number=$(e.target).val();
                    if(!number)return;
                    let url='{{"/apiLocal/logistic/numberFeatures/computeLogisticByNumber"}}';
                    axios.post(url,{logistic_number_return:number}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            if(response.data.logistic){
                                _this.billInputting.id_logistic_return=response.data.logistic.id;
                            }
                        }
                    }).catch(function (response) {
                        console.log(response);
                    });
                },
                barcode_goodsChange:function(e){
                    let _this=this;
                    let barcode=$(e.target).val();
                    let url='{{"/apiLocal/commodity/getCommodityByBarcode"}}';
                    axios.post(url,{barcode:barcode}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            if(response.data.commodity){
                                _this.itemInputting.name_goods=response.data.commodity.name;
                            }
                        }else{
                            tempTip.setDuration(3000);
                            tempTip.show('查找商品条码错误：'+response.data.fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('未连接至商品表，检查网络');
                    });
                },
                name_goodsChange:function(e){
                    let _this=this;
                    let name=$(e.target).val();
                    this.items.forEach(function(item){
                        if(item.barcode_goods+''===_this.itemInputting.barcode_goods+''){
                            console.log(name)
                            item.name_goods=name;
                        }
                    });
                },
                listenEnterAndJump:function(){
                    // let targets=$('select,input');
                    // targets.off('keypress');
                    // targets.on('keypress',function(e){
                    //     if(e.key!=="Enter")return;
                    //     let target=$(e.target);
                    //     let currentOrder = target.attr('data-focusOrder');
                    //     if(currentOrder){
                    //         targets.each(function($i,$val){
                    //             let checkingTarget = $($val);
                    //             let checkingOrder = checkingTarget.attr('data-focusOrder');
                    //             if(parseInt(currentOrder)+1===parseInt(checkingOrder)){
                    //                 checkingTarget.focus();
                    //             }
                    //         })
                    //     }
                    // });
                    // targets.off('change');
                    // targets.on('change',function(e){
                    //     let target=$(e.target);
                    //     let currentOrder = target.attr('data-focusOrder');
                    //     if(currentOrder){
                    //         targets.each(function($i,$val){
                    //             let checkingTarget = $($val);
                    //             let checkingOrder = checkingTarget.attr('data-focusOrder');
                    //             if(parseInt(currentOrder)+1===parseInt(checkingOrder)){
                    //                 checkingTarget.focus();
                    //             }
                    //         })
                    //     }
                    // })
                },
                cleanHeader:function(){
                    for(let key in this.billInputting){
                        this.billInputting[key]='';
                    }
                    this.billInputting.id_owner=this.status.inputtingId_owner;
                    this.billInputting.is_loaded="0";
                },
                cleanItem:function(){
                    for(let key in this.itemInputting){
                        this.itemInputting[key]='';
                    }
                    this.itemInputting['amount']='1';
                },
                cleanError:function(){
                    for(let key in this.errors){
                        this.errors[key]='';
                    }
                },
                setEditingBill:function(id){
                    let _this=this;
                    this.status.editingBillId=id;
                    _this.status.editingBill=_this.rejectedBill;
                    this.$forceUpdate();
                },
                setEditingItem:function(id){
                    let _this=this;
                    this.status.editingItemId=id;
                    this.items.forEach(function (item) {
                        if(item.id+''===id+''){
                            _this.status.editingItem=item;
                            item.isEditing=true;
                        }else{
                            item.isEditing=false
                        }
                    });
                    this.$forceUpdate();
                },
                commitHeader:function () {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBill/store')}}';
                    axios.post(url,_this.billInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功录入退单号：'+_this.billInputting.logistic_number_return);
                            _this.status.inputtingId_owner=_this.billInputting.id_owner;
                            _this.setEditingBill(response.data.id);
                            _this.getItemsUnderBill(response.data.id);
                            _this.cleanHeader();
                            _this.lockBillPanel();
                            _this.status.existItemsBeforeAdd=0;
                            $('#barcode_goods').focus();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                                if(_this.errors.remark){
                                    _this.errors.bill_remark=_this.errors.remark;
                                    _this.errors.remark='';
                                }
                            }else{
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('录入失败，请重试或刷新：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                commitEditItem:function () {
                    let _this=this;
                    if(!confirm("确定要提交修改吗？")){return;}
                    let url='{{url('apiLocal/rejectedBillItem/update')}}';
                    axios.post(url,_this.itemInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功修改商品：'+_this.itemInputting.barcode_goods);
                            _this.cleanItem();
                            _this.getItemsUnderBill(_this.status.editingBillId);
                            _this.shiftToCreateItem();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('修改失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                                if(_this.errors.remark){
                                    _this.errors.bill_remark=_this.errors.remark;
                                    _this.errors.remark='';
                                }
                            }else{
                                tempTip.show('修改失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('录入失败，请重试或刷新：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                commitEditHeader:function () {
                    let _this=this;
                    if(!confirm("确定要提交修改吗？")){return;}
                    let url='{{url('apiLocal/rejectedBill/update')}}';
                    axios.post(url,_this.billInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功修改退单号：'+_this.billInputting.logistic_number_return);
                            _this.changeBill();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('修改失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                            }else{
                                tempTip.show('修改失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('录入失败，请重试或刷新')
                        alert('连接错误：'+response)
                    });
                },
                commitItem:function () {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBillItem/store')}}';
                    _this.itemInputting.id_rejected_bill=_this.status.editingBill.id;
                    axios.post(url,_this.itemInputting).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功录入退单商品：'+_this.itemInputting.name_goods);
                            _this.status.endAndPackCommitEdited=false;
                            _this.lockBillPanel();
                            _this.getItemsUnderBill(_this.status.editingBill.id);
                            _this.cleanItem();
                            $('#barcode_goods').focus();
                        }else{
                            if(response.data.error_fields){
                                tempTip.setDuration(3000);
                                tempTip.show('录入失败，字段填写错误');
                                _this.errors=response.data.error_fields;
                            }else{
                                tempTip.show('录入失败：'+response.data.fail_info)
                            }
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('录入失败，请重试或刷新：'+response.data.fail_info)
                        alert('连接错误：'+response)
                    });
                },
                endAndPackCommitEdit:function () {
                    let _this=this;
                    if(_this.items.length===0){
                        if(confirm('没有填加明细项，确定要退出详细编辑模式吗？')){
                            _this.cancelPackCommitEdit();
                        }
                        return;
                    }else{
                        if(!confirm('确定要提交填加的明细项吗？提交后即不可修改')){
                            return;
                        }
                    }
                    let ids=[];
                    _this.items.forEach(function(item){
                        ids.push(item.id);
                    });
                    let url='{{url('apiLocal/rejectedBillItem/packConfirm')}}';
                    tempTip.setDuration(5000);
                    tempTip.waitingTip('与外部交互中，请稍候');
                    axios.post(url,{'ids':ids}).then(function (response) {
                        _this.cleanError();
                        tempTip.cancelWaitingTip();
                        if(response&&response.data&&response.data.success!=='false'){
                            if(typeof(response.data.bill_is_loaded)!='undefined'){
                                if(response.data.bill_is_loaded===true){
                                    _this.status.editingBill.is_loaded=1;
                                    _this.billInputting.is_loaded=1;
                                    _this.billInputting.isLoadSign=true;
                                    // _this.status.lockingIsLoadedInput=true;
                                    tempTip.okWindow('该批商品状态已改为“入库”','已处理');
                                }
                            }
                            tempTip.setDuration(5000);
                            switch(response.data.remote_result){
                                case 'fail': tempTip.show('与客户服务器通讯异常，明细未被外部处理，请联系系统相关同事');break;
                                case 'none': tempTip.show('客户未返回明细处理信息，请联系系统相关同事检查');break;
                                case 'received':tempTip.show('该单之前已提交过给客户服务器');break;
                                case 'storable': tempTip.showSuccess('WMS尚未推单，客户返回可以入库，所以状态为“待推单”','已处理该待推单');break;
                                default: tempTip.showSuccess('成功录入所有退单商品并已上传至外部');break;
                            }
                            _this.status.endAndPackCommitEdited=true;
                            _this.cancelPackCommitEdit();
                        }else{
                            tempTip.setDuration(4000);
                            let fail_info='';
                            if(response.data)
                                fail_info=response.data.fail_info;
                            tempTip.show('录入明细列表失败，请重试：'+fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.cancelWaitingTip();
                        tempTip.setDuration(3000);
                        let fail_info='';
                        if(response.data)
                            fail_info=response.data.fail_info;
                        tempTip.show('提交失败，请重试：'+fail_info);
                        alert('连接错误：'+response)
                    });
                },
                cancelPackCommitEdit:function () {
                    let _this=this;
                    if(_this.items.length===0&&!_this.status.endAndPackCommitEdited){
                        _this.unlockBillPanel();
                        return;
                    }else{
                        if(_this.status.endAndPackCommitEdited){
                            _this.unlockBillPanel();
                            return;
                        }else{
                            if(!confirm('已填加的明细尚未提交，回到表头编辑将取消已填加明细，是否确定？')){
                                return;
                            }
                        }
                    }
                    let ids=[];
                    for(let i=_this.status.existItemsBeforeAdd;i<_this.items.length;i++){
                        ids.push(_this.items[i].id);
                    }
                    if(ids.length===0){_this.unlockBillPanel();return;}
                    let url='{{url('apiLocal/rejectedBillItem/packDestroy')}}';
                    axios.post(url,{'ids':ids}).then(function (response) {
                        _this.cleanError();
                        if(response.data.success==='true'){
                            _this.status.editingBill=null;
                            _this.unlockBillPanel();
                            location.reload();
                        }else{
                            tempTip.show('数据操作失败，请重试：'+response.data.fail_info)
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response)
                    });
                },
                lockBillPanel:function () {
                    this.status.lockingBillPanel=true;
                    $('input,select').blur();
                },
                unlockBillPanel:function () {
                    location.reload();
                    this.status.lockingBillPanel=false;
                    this.status.editingBill=null;
                    this.status.editingBillId='';
                    this.shiftToCreate();
                },
                changeBill:function () {
                    history.back();
                    {{--location.href='{{url('rejected')}}';--}}
                },
                getItemsUnderBill:function (billId,func) {
                    let _this=this;
                    let url='{{url('apiLocal/rejectedBillItem/apiGet')}}';
                    axios.post(url,{id_rejected_bill:billId}).then(function (response) {
                        if(response.data.success==='true'){
                            if(response.data.items)
                                response.data.items.forEach(function(item){
                                    item.isEditing=false;
                                });
                            _this.items=response.data.items;
                            if(typeof func!=='undefined'){
                                func()
                            }
                            _this.listenEnterAndJump();
                            setTimeout(function(){$('#barcode_goods').focus();},500)
                        }else{
                            tempTip.show('加载相关明细失败，可尝试刷新页面');
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response);
                        tempTip.show('加载相关明细失败，可尝试刷新页面!');
                    });
                },
                deleteItem:function (e) {
                    if(!confirm('确定要删除该明细吗？不可恢复')){return}
                    let _this=this;
                    let id = $(e.target).parents('tr').attr('data-id');
                    let url='{{url('apiLocal/rejectedBillItem/apiDelete')}}';
                    axios.post(url,{id:id}).then(function (response) {
                        if(response.data.success==='true'){
                            if(_this.items)
                                _this.items.forEach(function(item,i){
                                    if(item.id+''===id+''){
                                        _this.items.splice(i, 1);
                                    }
                                });
                        }else{
                            tempTip.show('删除失败，可尝试刷新页面再操作');
                        }
                    }).catch(function (response) {
                        alert('连接错误：'+response);
                        tempTip.show('删除失败，可尝试刷新页面!');
                    });
                },
                editBill:function (e) {
                    let _this=this;
                    let billTarget=this.rejectedBill;
                    if(billTarget){
                        this.billInputting = JSON.parse(JSON.stringify(billTarget));
                        this.shiftToEdit();
                        this.setEditingBill(billTarget.id)
                    }
                    this.getItemsUnderBill(billTarget.id,function () {
                        _this.status.existItemsBeforeAdd=_this.items.length;
                    });
                },
                editItem:function (e) {
                    let _this=this;
                    let itemId = $(e.target).parent('tr').attr('data-id');
                    let itemTarget='';
                    this.items.every(function(item){
                        if(item.id+''===itemId+''){
                            itemTarget=item;
                            return false;
                        }
                        return true;
                    });
                    if(itemTarget){
                        this.itemInputting = JSON.parse(JSON.stringify(itemTarget));
                        this.shiftToEditItem();
                        this.setEditingItem(itemTarget.id)
                    }
                    // this.getItemsUnderBill(this.status.editingBillId,function () {});
                },
                shiftToEditItem:function () {
                    this.cleanError();
                    this.status.itemCreating=false;
                    this.status.itemEditing=true;
                    setTimeout(function () {
                        $('.tooltipOn').tooltip({'trigger':'hover'});
                    },50)
                },
                shiftToEdit:function () {
                    this.cleanError();
                    this.status.billCreating=false;
                    this.status.billEditing=true;
                    setTimeout(function () {
                        $('.tooltipOn').tooltip({'trigger':'hover'});
                    },50)
                },
                shiftToCreateItem:function () {
                    this.cleanError();
                    this.cleanItem();
                    this.status.itemCreating=true;
                    this.status.itemEditing=false;
                    if(this.items)
                        this.items.forEach(function (item) {
                            item.isEditing=false;
                        });
                    $('.tooltipOn').tooltip('hide').tooltip({'trigger':'hover'});
                },
                shiftToCreate:function () {
                    this.cleanError();
                    this.cleanHeader();
                    this.status.billCreating=true;
                    this.status.billEditing=false;
                    if(this.rejectedBills)
                        this.rejectedBills.forEach(function(rejectedBill){
                            if(rejectedBill.isEditing===true){
                                rejectedBill.isEditing=false;
                                return false;
                            }
                        });
                    $('.tooltipOn').tooltip('hide').tooltip({'trigger':'hover'});
                },
                locateIdOwner:function (e) {
                    let _this=this;
                    let $target=$(e.target);
                    if(this.owners)
                        this.owners.forEach(function(owner){
                            if(owner.name.includes($target.val())){
                                _this.billInputting.id_owner=owner.id;
                            }
                        });
                },
                locateLogistic:function (e) {
                    let _this=this;
                    let $target=$(e.target);
                    if(this.logistics)
                    this.logistics.forEach(function(logistic){
                        if(logistic.name.includes($target.val())){
                            _this.billInputting.id_logistic_return=logistic.id;
                        }
                    });
                },
                // 开启摄像头
                enableCamera(enableVideo) {
                    this.videoEnabled = enableVideo;
                    MediaUtils.getUserMedia(enableVideo, false, function (err, stream) {
                        if (err) {
                            throw err;
                        } else {
                            let photo=document.getElementById('photo');
                            photo.srcObject = stream;
                            photo.play();
                        }
                    });
                },
                // 关闭摄像头
                closeCamera() {
                    let stream = document.getElementById('photo').srcObject;
                    let tracks = stream.getTracks();
                    tracks.forEach(function(track) {
                        track.stop();
                    });
                    document.getElementById('photo').srcObject = null;
                },
                //拍照
                takePhoto(id,index){
                    let photo=document.getElementById('photo');
                    let canvas=document.getElementById('canvas');
                    //绘制canvas图形
                    canvas.getContext('2d').drawImage(photo, 0, 0, 400, 300);
                    let img = document.getElementById('canvas').toDataURL();
                    // 这里的img就是得到的图片
                    this.closeCamera();
                    let blob=this.dataUrlToBlob(img);
                    this.submitFile(blob,id,index);
                },
                dataUrlToBlob(imgDataUrl) {
                    let imgUrl = window.atob(imgDataUrl.split(',')[1])
                    let ab = new ArrayBuffer(imgUrl.length)
                    let ia = new Uint8Array(ab)
                    for (let i = 0; i < imgUrl.length; i++) {
                        ia[i] = imgUrl.charCodeAt(i)
                    }
                    return new Blob([ab],{type:'image/jpeg'})
                },
                submitFile(blob,id,index){
                    window.tempTip.setDuration(3000);
                    let formData=new FormData();
                    formData.append('files[]', blob,'rejected_bill_item'+id+'.jpg')
                    formData.append("id",id);
                    window.tempTip.postBasicRequest('{{url('apiLocal/rejectedBillItem/apiUpload')}}',formData,res=>{
                        if (this.items[index].upload_files.length===0) this.$set(this.items[index],'upload_files',res);
                        else this.$set(this.items[index],'upload_files',this.items[index].upload_files.concat(res));
                        return "上传成功";
                    },false,true);
                },
                removeCommonImg(id){
                    $('#'+id).remove();
                },
                commonImg(id,uploadFiles){
                    let div = "";
                    let isBtn = '@can('运输管理-运单-图片删除') true @endcan ';
                    for(let i=0;i<uploadFiles.length;i++){
                        let btn = isBtn ? "<button type='button' class='btn btn-sm btn-danger' onclick='vueList.btnDeleteImg(this)' data-url='"+uploadFiles[i].url+"' value='"+id+"' style='position: relative;float: right;margin-top: -30px;' >删除</button>" : "";
                        let href = this.imgPrefix+uploadFiles[i].url+'-bulky.'+uploadFiles[i].type;
                        let src = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                        div += "<div><a target='_blank' href='"+href+"'><img alt='#' src='"+src+"' style='position: relative;' ></a>"+btn+"</div>"
                    }
                    $('#'+id).after(
                        "<div id=\"common_"+id+"\" style='position: absolute;padding-bottom: 2px;z-index: 99'>" +
                        "<div style='position:absolute;left: -50px' class='overflow-y-scrollbar-200'>"+div+
                        "</div></div>");
                },
                btnDeleteImg(e){
                    let idstr = $(e).val();
                    let id =  idstr.substr( idstr.indexOf('_')+1);
                    let url = e.getAttribute("data-url");
                    if (!confirm('确定要删除所选图片吗？'))return;
                    this.destroyImg(id,url);
                },
                destroyImg(id,url = null){
                    window.tempTip.postBasicRequest('{{url('apiLocal/rejectedBillItem/apiDeleteImg')}}',{id:id,url:url},()=>{
                        if (url){
                            this.items.some((item,i)=>{
                                if (item.id==id){
                                    item.upload_files.some((file,j)=>{
                                        if (file.url === url){this.$delete(this.items[i].upload_files,j);return true;}
                                    });
                                    return true;
                                }
                            });
                        }else{
                            this.items.forEach((item,i)=>{
                                if (id.includes(item.id))this.$set(this.items[i],'upload_files',[]);
                            });
                        }
                        return "删除成功";
                    });
                },
            },
            filters:{
                isLoaded:function (value) {
                    return value==1?'是':'否';
                },
                dateNoYear:function (value) {
                    if(!value)return '';
                    return value.substr(5,11);
                }
            }
        });
    </script>
@endsection