baoshi-was/resources/views/store/deliveryAppointment/capacityMaintenance.blade.php

@extends('layouts.app')
@section('title')预约管理-入库预约@endsection

@section('content')
    <span id="nav2">
    @component('store.menu')@endcomponent
    @component('store.deliveryAppointment.menu')@endcomponent
    </span>
    <div class="card container" id="container">
        <div class="card-body">
            <div class="row">
                <div class="col-12 font-weight-bold h1 text-center mb-4">产能信息</div>
            </div>
            <div class="row mt-2 offset-2" v-for="(warehouse,i) in warehouses">
                <label class="col-2">@{{ warehouse.name }}</label>
                <label class="col-5"><input :readonly="!warehouse.read" @blur="updateCapacity($event,warehouse)" @focus="readonlyInput(i)" class="form-control" type="number" step="0.01"
                                            :value="warehouse.production_capacity"></label>
            </div>
        </div>
    </div>
@stop

@section("lastScript")
    <script>
        new Vue({
            el:"#container",
            data:{
                warehouses:[@foreach($warehouses as $warehouse)@json($warehouse),@endforeach],
            },
            methods:{
                readonlyInput(index){
                    this.$set(this.warehouses[index],"read",this.warehouses[index].read==='undefined' ? true : !this.warehouses[index].read);
                },
                updateCapacity(e,warehouse){
                    let val = e.target.value;
                    if (Number(val)!==Number(warehouse.production_capacity)){
                        window.tempTip.postBasicRequest("{{url('store/deliveryAppointment/updateCapacity')}}",{id:warehouse.id,production_capacity:val},res=>{
                            warehouse.read = false;
                            warehouse.production_capacity = val;
                            return "产能修改成功";
                        });
                    }
                }
            },
        });
    </script>
@stop