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

@extends('layouts.app')
@section('title')录入-退货管理@endsection
@section('content')
    <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: 550px;
                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: 477px;overflow-y: scroll">
                            <table class="table table-sm table-striped table-info table-hover table-bordered">
                                <tr>
                                    <th>创建时间</th>
                                    <th>客户名称</th>
                                    <th>退回单号</th>
                                    <th>退回公司</th>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>到付费用</th>
                                    <th>订单号</th>
                                    <th>原单号</th>
                                    <th>是否入库</th>
                                    {{--                                    <th>备注</th>--}}
                                    <th>操作</th>
                                </tr>
                                <tr :class="[rejectedBill.isEditing?'bg-info':'']"
                                    v-for="rejectedBill in rejectedBills" :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>--}}
                                    @can('退货管理-删除')
                                        <td>
                                            <button class="btn btn-sm btn-outline-danger"
                                                    @click.stop="deleteBill(rejectedBill)">删
                                            </button>
                                        </td>@endcan
                                </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>
                                        <div v-if="status.isLoadSign" class="text-danger">系统标计为入库</div>
                                        <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>
                                            <option value="3">上传异常</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-2" v-if="status.billEditing">
                                            <button class="btn btn-success btn-sm tooltipOn" @click="shiftToCreate"
                                                    title="点击取消编辑，进入新增状态">取消
                                            </button>
                                        </div>
                                        <div class="col-8" :class="[status.billCreating?'offset-2':'']">
                                            <input v-if="status.billCreating" type="button"
                                                   class="btn btn-success form-control" value="提交新条目"
                                                   @click="commitHeader">
                                            <input v-if="status.billEditing" 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" @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>
                                    @can('退货管理-删除')
                                        <td>
                                            <button class="btn btn-outline-danger" @click="deleteItem">删</button>
                                        </td>
                                    @endcan
                                </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="14"
                                               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="12"
                                               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 id="id_quality_label_space" type="radio"
                                                         name="id_quality_label"
                                                         data-focusOrder="13" required="required" checked><label
                                                    for="id_quality_label_space">留空</label>&nbsp;</span>
                                            <span v-for="qualityLabel in qualityLabels">
                                                <input type="radio" name="id_quality_label" :value="qualityLabel.id"
                                                       data-focusOrder="13"
                                                       :id="'id_quality_label_'+qualityLabel.id"
                                                       v-model="itemInputting.id_quality_label" required><label
                                                    for="'id_quality_label_'+qualityLabel.id">@{{qualityLabel.name}}</label>&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="16"
                                               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="15"
                                               name="batch_number" id="batch_number" autocomplete="off"
                                               v-model="itemInputting.batch_number"
                                        >
                                        <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: "",
                    isLoadSign: false,
                },
                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: "",
                },
                rejectedBills: {!! $rejectedBills??[] !!},
                items: [],
                owners: [
                        @foreach($owners as $owner)
                    {
                        id: '{{$owner->id}}', name: '{{$owner->name}}', code: '{{$owner->code}}'
                    },
                    @endforeach
                ],
                logistics: [
                        @foreach($logistics as $logistic)
                    {
                        id: '{{$logistic->id}}', name: '{{$logistic->name}}', code: '{{$logistic->code}}'
                    },
                    @endforeach
                ],
                qualityLabels: [
                        @foreach($qualityLabels as $qualityLabel)
                    {
                        id: '{{$qualityLabel->id}}', name: '{{$qualityLabel->name}}'
                    },
                    @endforeach
                ],
                commodityOwnerId: '',
            },
            mounted: function () {
                let _this = this;
                $('#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);
                    });
                    if (_this.status.editingBill) return;
                    let url_isUnique = '{{"/apiLocal/logistic/logisticNumberReturnIsUnique"}}';
                    axios.post(url_isUnique, {logistic_number_return: number}).then(function (response) {
                        _this.cleanError();
                        if (response.data.success === 'true') {
                            if (response.data.result === 'true') {
                                tempTip.okWindow('该退回单号"' + number + '"已有录入其他单', '知道了')
                            } else _this.seek_order();
                        }
                    }).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,
                        owner_id: _this.billInputting.id_owner
                    }).then(function (response) {
                        _this.cleanError();
                        if (response.data.success === 'true') {
                            if (response.data.commodity) {
                                // _this.itemInputting.name_goods=response.data.name;
                                _this.itemInputting.name_goods = response.data.commodity.name;
                                _this.commodityOwnerId = response.data.commodity.owner_id;
                            }
                        } 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 + '') {
                            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";
                    this.billInputting.isLoadSign = false;
                },
                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.rejectedBills.forEach(function (bill) {
                        if (bill.id + '' === id + '') {
                            _this.status.editingBill = bill;
                            bill.isEditing = true;
                        } else {
                            bill.isEditing = false
                        }
                    });
                    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')}}';
                    tempTip.setDuration(99999);
                    tempTip.waitingTip('提交中')
                    axios.post(url, _this.billInputting).then(function (response) {
                        tempTip.cancelWaitingTip();
                        _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.getRecentRejectedBills();
                            _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')}}';
                    tempTip.setDuration(99999);
                    tempTip.waitingTip('提交中')
                    axios.post(url, _this.billInputting).then(function (response) {
                        tempTip.cancelWaitingTip();
                        _this.cleanError();
                        if (response.data.success === 'true') {
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('成功修改退单号：' + _this.billInputting.logistic_number_return);
                            _this.cleanHeader();
                            _this.getRecentRejectedBills();
                            _this.shiftToCreate();
                        } 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)
                    });
                },
                commitItem: function () {
                    let _this = this;
                    let url = '{{url('apiLocal/rejectedBillItem/store')}}';
                    _this.itemInputting.id_rejected_bill = _this.status.editingBill.id;
                    if (_this.items.length < 1) {
                        let baoShiBuFaOwnerId = '';
                        _this.owners.forEach(function (owner) {
                            if (owner.name === '宝时补发') baoShiBuFaOwnerId = owner.id;
                        });
                        if (_this.commodityOwnerId != _this.billInputting.id_owner && _this.billInputting.id_owner != baoShiBuFaOwnerId) {
                            _this.isChangeOwner(_this.itemInputting.id_rejected_bill);
                        }
                    }
                    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)
                    });
                },
                isChangeOwner(id_rejected_bill) {
                    let _this = this;
                    let url = '{{url('apiLocal/rejectedBillItem/reviseOwner')}}';
                    window.tempTip.confirm('当前退货记录货主名与录入商品的货主不匹配！ ' + '确定校正退货记录货主名吗？', () => {
                        window.axios.post(url, {
                            commodityOwnerId: _this.commodityOwnerId,
                            id_rejected_bill: id_rejected_bill
                        }).then(res => {
                            if (res.data.success === 'true') {
                                let owner_name = '';
                                _this.owners.forEach(function (owner) {
                                    if (owner.id == _this.commodityOwnerId) {
                                        owner_name = owner.name;
                                    }
                                })
                                _this.billInputting.id_owner = _this.commodityOwnerId;
                                _this.rejectedBills.forEach(function (rejectedBill) {
                                    if (id_rejected_bill == rejectedBill.id) rejectedBill.owner_name = owner_name;
                                })
                            } else {
                                tempTip.setDuration(3000);
                                tempTip.show(res.data.message);
                                return;
                            }
                        }).catch(err => {
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误：" + err);
                            return;
                        });
                    });
                },
                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 (response.data.success == 'exception') {
                                _this.status.lockingIsLoadedInput = true;
                                _this.billInputting.is_loaded = 3;
                                tempTip.show('富勒入库异常，请手动校对');
                            } else 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();
                        } else {
                            tempTip.show('数据操作失败，请重试：' + response.data.fail_info)
                        }
                    }).catch(function (response) {
                        tempTip.setDuration(3000);
                        tempTip.show('提交失败，请重试：' + response.data.fail_info)
                        alert('连接错误：' + response)
                    });
                },
                lockBillPanel: function () {
                    this.status.lockingBillPanel = true;
                    $('input,select').blur();
                },
                unlockBillPanel: function () {
                    this.status.lockingBillPanel = false;
                    this.status.editingBill = null;
                    this.status.editingBillId = '';
                    this.shiftToCreate();
                },
                getRecentRejectedBills: function () {
                    let _this = this;
                    let url = '{{url('apiLocal/rejectedBill/apiGetRecent')}}';
                    axios.post(url).then(function (response) {
                        if (response.data.success === 'true') {
                            _this.rejectedBills = response.data.rejectedBills;
                            _this.setEditingBill(_this.status.editingBillId)
                        } else {
                            tempTip.show('加载新增内容失败，可尝试刷新页面');
                        }
                    }).catch(function (response) {
                        alert('连接错误：' + response);
                        tempTip.show('加载新增内容失败，可尝试刷新页面！');
                    });
                },
                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') {
                            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('加载相关明细失败，可尝试刷新页面!');
                    });
                },
                deleteBill: function (rejectedBill) {
                    if (!confirm('确定要删除退货信息“' + rejectedBill.owner_name + ':' + rejectedBill.logistic_number_return + '”吗？')) {
                        return;
                    }
                    let _this = this;
                    let url = "{{url('rejectedBill')}}/" + rejectedBill.id;
                    axios.delete(url, {id: rejectedBill.id})
                        .then(function (response) {
                            if (response.data.success) {
                                for (let i = 0; i < _this.rejectedBills.length; i++) {
                                    if (_this.rejectedBills[i].id === rejectedBill.id) {
                                        _this.rejectedBills.splice(i, 1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除退货信息"' + rejectedBill.owner_name + ':' + rejectedBill.logistic_number_return + '"成功!')
                            } else {
                                tempTip.setDuration(1000);
                                tempTip.show('删除退货信息"' + rejectedBill.owner_name + ':' + rejectedBill.logistic_number_return + '"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除退货信息失败!' + '网络错误：' + err);
                        });
                },
                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') {
                            _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 billId = $(e.target).parent('tr').attr('data-id');
                    let billTarget = '';
                    this.rejectedBills.every(function (bill) {
                        if (bill.id + '' === billId + '') {
                            billTarget = bill;
                            return false;
                        }
                        return true;
                    });
                    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;
                    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;
                    this.status.editingBill = null;
                    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);
                    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);
                    this.logistics.forEach(function (logistic) {
                        if (logistic.name.includes($target.val())) {
                            _this.billInputting.id_logistic_return = logistic.id;
                        }
                    });
                },
                //根据退回单寻找WMS订单填充已有字段
                seek_order() {
                    let _this = this;
                    let logistic_number_return = this.billInputting.logistic_number_return;
                    if (!logistic_number_return) return;
                    axios.post('{{url('apiLocal/rejectedBill/seekOrder')}}', {logistic_number_return: logistic_number_return})
                        .then(function (response) {
                            if (response.data.success) {
                                if (response.data.data.owner_id) _this.billInputting.id_owner = response.data.data.owner_id;
                                if (response.data.data.logistic_id) _this.billInputting.id_logistic_return = response.data.data.logistic_id;
                                if (response.data.data.consignee_name) _this.billInputting.sender = response.data.data.consignee_name;
                                if (response.data.data.consignee_phone) _this.billInputting.mobile_sender = response.data.data.consignee_phone;
                                if (response.data.data.client_code) _this.billInputting.order_number = response.data.data.client_code;
                                if (response.data.data.logistic_number) _this.billInputting.logistic_number = response.data.data.logistic_number;
                                tempTip.setDuration(2000);
                                tempTip.showSuccess('原单信息已填充');
                                return;
                            }
                            tempTip.setDuration(2000);
                            tempTip.show('没有找到对应的数据，可手动填写 ');
                        });
                },
                // 开启摄像头
                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){
                    this.enableCamera(true);
                    setTimeout(()=>{
                        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);
                        // photo.style.display='none';
                    },2500)
                },
                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