baoshi-was/resources/views/store/handInStorage/putaway.blade.php

@extends('layouts.app')
@section('title')手持入库-上架@endsection

@section('content')
    <div class="d-none" id="container">
        <div class="card offset-md-3 col-md-6">
            <div class="card-header text-center mt-2 bg-transparent" id="header_title">
                <span class="font-weight-bold h4">上架</span>
            </div>
            <div class="card-body">
                <div class="form-group row m-1">
                        <span class="text-right">
                            <label for="trackNumber" class="text-right font-weight-bold">容器号:</label>
                        </span>
                    <input type="text" class="form-control form-control-sm col-8" id="trackNumber" autocomplete="off"
                           :class="errors.trackNumber ? 'is-invalid' : ''" @keydown.enter="enterVal($event)"
                           v-model="info.trackNumber">
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.trackNumber">
                            <strong>@{{ errors.trackNumber[0] }}</strong>
                    </span>
                </div>
                <div class="form-group row m-1">
                        <span class="text-right">
                            <label for="barCode" class="text-right font-weight-bold">商品条码:</label>
                        </span>
                    <input type="text" class="form-control form-control-sm col-8" id="barCode" autocomplete="off"
                           :class="errors.barCode ? 'is-invalid' : ''" @keydown.enter="enterVal($event)"
                           v-model="info.barCode" @blur="getTsk()">
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.barCode">
                            <strong>@{{ errors.barCode[0] }}</strong>
                    </span>
                </div>
                <div class="card border-bottom-0">
                    <div class="card-body">
                        <div class="form-group row m-1">
                            <label for="name" class="text-right">商品品名:</label>
                            <span id="name">@{{ info.name }}</span>
                        </div>
                        <div class="form-group row m-1">
                            <label for="amount" class="text-right">上架总数:</label>
                            <input type="text" class="form-control form-control-sm col-4" style="width: 10px"
                                   id="amount" autocomplete="off"
                                   :class="errors.amount ? 'is-invalid' : ''"
                                   @keydown.enter="enterVal($event)" v-model="info.amount"><span id="paTotal"
                                                                                                 v-if="info.paTotal">&nbsp;&nbsp;/&nbsp;&nbsp;@{{ info.paTotal }}</span>
                            <span class="invalid-feedback offset-3" role="alert" v-if="errors.amount">
                            <strong>@{{ errors.amount[0] }}</strong>
                    </span>
                        </div>
                        <div class="form-group row m-1">
                            <label for="location" class="text-right">目标库位:</label>
                            <input type="text" class="form-control form-control-sm col-8" id="location"
                                   autocomplete="off"
                                   :class="errors.location ? 'is-invalid' : ''"
                                   @keydown.enter="enterVal($event)" v-model="info.location">
                            <span class="invalid-feedback offset-3" role="alert" v-if="errors.location">
                            <strong>@{{ errors.location[0] }}</strong>
                    </span>
                        </div>
                    </div>
                </div>
                <div style="overflow: auto;overflow-x: hidden" id="cardTable" v-if="tasks.length>0">
                    <table class="table-sm table-striped table-bordered table-hover mb-3"
                           style="background: rgb(255, 255, 255);">
                        <tr v-for="(task,i) in tasks">
                            <td style="filter:grayscale(30%);">
                                <div>
                                    <div style="transform:scale(1)" class="pl-0">
                                        <span><span class="text-black">货主:</span><span
                                                class="text-black font-weight-bold">@{{ task.customerid }}</span></span>
                                        <span><span class="text-black">批次:</span><span
                                                class="text-danger">@{{ task.plantolotnum }}</span></span>
                                        <span class="text-right float-right">选中:<input type="checkbox" :id="'task_'+i"
                                                                                       @click="checked($event,task)"></span>
                                        <br>
                                        <span><span>容器号:</span><span class="">@{{ task.plantoid }} </span></span>
                                        <span><span class="text-lowercase">数量:</span><span
                                                class="text-lowercase">@{{ task.qty }} </span></span>
                                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span><span class="text-black">商品名:</span><span class="text-black">@{{ task.skudescrc }}</span></span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="card-footer bg-transparent">
                    <button type="button" id="confirm" class="btn btn-md btn-outline-success float-right"
                            @click="ensure()">确定
                    </button>
                    <button type="button" id="cancel" class="btn btn-md btn-outline-info float-left" @click="cancel()">
                        取消
                    </button>
                </div>
            </div>
        </div>
        @stop

        @section('lastScript')
            <script type="text/javascript">
                new Vue({
                    el: "#container",
                    data: {
                        height: 0,//屏幕高度
                        info: {},
                        errors: {},
                        tasks: [],
                        checkData: [],
                        selectTr: '',
                        isAndroid: false,
                        element: [
                            "trackNumber","barCode", "amount", "location",
                        ],
                    },
                    mounted() {
                        if (navigator.userAgent.indexOf("Android") !== -1) this.isAndroid = true;
                        this.pageInit();
                        $("#container").removeClass("d-none");
                        document.getElementById("trackNumber").focus();
                    },
                    methods: {
                        //页面初始化
                        pageInit() {
                            if (!this.isAndroid) return;
                            let element = document.getElementById("navbarSupportedContent").parentElement;
                            element.className = "row";
                            element.children[0].className += " col-5";
                            element.innerHTML = element.children[0].outerHTML;
                            let e1 = document.getElementById("menu");
                            let e2 = document.getElementById("demand-div");
                            if (e1) e1.remove();
                            if (e2) e2.remove();
                        },
                        checked(e, task, element = undefined) {
                            if (!element)element = e.target;
                            let _this = this;
                            if (element.checked) {
                                if (_this.checkData.length === 0) {
                                    _this.checkData.push(task);
                                    _this.fillInfo(task);
                                } else if (_this.checkData.length > 0) {
                                    this.checkData.some(function (item, i) {
                                        if (item.customerid == task.customerid
                                            && item.plantolotnum == task.plantolotnum
                                            && item.sku == task.sku) {
                                            _this.checkData.push(task)
                                            _this.fillInfo(task);
                                            return true;
                                        } else {
                                            $('#'+element.id).prop('checked', false);
                                            window.tempTip.setDuration(3000);
                                            window.tempTip.show('货主,批次不同,不可同时上架');
                                        }
                                    });
                                }
                            }else {
                                _this.checkData.some(function (item, i) {
                                    if (item.taskid == task.taskid
                                    && item.taskid_sequence == task.taskid_sequence) {
                                        _this.checkData.splice(i, 1);
                                        _this.updateInfo(task);
                                        return true;
                                    }
                                });
                            }
                            _this.$forceUpdate();
                        },
                        fillInfo(task){
                            this.info.name=task.skudescrc;
                            if (this.info.paTotal==''||this.info.paTotal==null||this.info.paTotal==undefined){this.info.paTotal=0;}
                            this.info.paTotal+=Number(task.qty);
                            // this.info.location=task.plantolocation;
                        },
                        updateInfo(task){
                            this.info.name=task.skudescrc;
                            this.info.paTotal-=Number(task.qty);
                            // this.info.location=task.plantolocation;
                        },
                        getTsk() {
                            let _this=this;
                            _this.clearChecked();
                            if (!this.info.barCode)return;
                            let url = '{{url('store/handInStorage/getTsk')}}';
                            window.axios.post(url, {trackNumber:this.info.trackNumber,barCode: this.info.barCode})
                                .then(res => {
                                    if (res.data.success) {
                                        this.tasks = res.data.data;
                                        this.$forceUpdate();
                                        setTimeout(function () {
                                            document.getElementById("task_0").checked=true;
                                            let element={};
                                            element.checked=true;
                                            _this.checked(1,_this.tasks[0],element)
                                        }, 100);
                                        return;
                                    }
                                    window.tempTip.setDuration(3000);
                                    window.tempTip.show(res.data.data);
                                }).catch(err => {
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("网络错误：" + err);
                            })
                        },
                        clearChecked(){
                            this.checkData=[];
                            this.info.paTotal=0;//设置上架总数
                            $('input[type=checkbox]').each(function() {
                                let self = $(this);
                                self.prop('checked', false);
                            });
                        },
                        ensure() {
                            this.errors={};//初始errors状态
                            this.verifyInfoAndCheckData();
                            let url = '{{url('store/handInStorage/handFluxPa')}}';
                            if (JSON.stringify(this.errors)==='{}') window.axios.post(url,{info:this.info,checkData:this.checkData})
                                .then(res=>{
                                    if (res.data.success){
                                        window.tempTip.setDuration(3000);
                                        window.tempTip.showSuccess(res.data.data);
                                        this.info={};
                                        this.checkData=[];
                                        this.tasks=[];
                                        this.$forceUpdate()
                                        document.getElementById("trackNumber").focus();
                                        return;
                                    }
                                    window.tempTip.setDuration(3000);
                                    window.tempTip.show(res.data.data);
                                }).catch(err=>{
                                window.tempTip.setDuration(3000);
                                window.tempTip.show("网络错误："+err);
                            })

                        },
                        cancel() {
                            setTimeout(function () {
                                window.location.reload();
                                document.getElementById("trackNumber").focus();
                            }, 100);
                        },
                        enterVal(e) {
                            let index = this.element.indexOf(e.target.id) + 1;
                            let element = document.getElementById(this.element[index]);
                            if (element) element.focus();
                            e.preventDefault();
                            return false;
                        },
                        verifyInfoAndCheckData(){
                            let error = {};
                            if (!this.info.trackNumber) error.trackNumber = ["容器号必填"];
                            if (!this.info.barCode) error.barCode = ["条码必填"];
                            if (!this.info.amount) error.amount = ["上架数量必填"];
                            if (Number(this.info.paTotal)!==0 && Number(this.info.amount)>Number(this.info.paTotal)) error.amount = ["上架数量不能超过上架总数必填"];
                            if (!this.info.location) error.location = ["目标库位必填"];
                            if (JSON.stringify(error) !== '{}') {this.errors = error;return;}
                        },
                    },
                });
            </script>
@stop