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

@extends('layouts.app')
@section('title')采购管理-采购-新建@endsection

@section('content')
    @component('procurement.procurement.menu')@endcomponent
    <div class="container-fluid" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <form method="POST" action="{{ url('procurement/procurement/store') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="owner_id" class="col-2 col-form-label text-right text-primary">项目名称{{old('owner_id')}} *</label>
                        <div class="col-8 form-inline">
                            <select id="owner_id" name="owner_id" class="form-control @error('owner_id') is-invalid @enderror col-4" v-model="owner_id" @change="selectOwner" required>
                                <option v-for="owner in owners" :value="owner.id">@{{owner.name}}</option>
                            </select>
                            <input type="text" class="form-control-sm ml-2" placeholder="输入关键字定位项目" @input="owner_seek">
                        </div>
                        <div class="col-sm-5">
                            <p class="form-control-static text-danger small font-weight-bold" >{{ $errors->first('owner_id') }}</p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="owner_material_id" class="col-2 col-form-label text-right text-primary">项目耗材编号{{old('owner_material_id')}} *</label>
                        <div class="col-8">
                            <select id="owner_material_id" name="owner_material_id" class="form-control @error('owner_material_id') is-invalid @enderror col-4" v-model="owner_material_id" @change="ownerMaterial" required>
                                <option v-for="ownerMaterial in ownerMaterials" :value="ownerMaterial.id">@{{ownerMaterial.material_code}}</option>
                            </select>
                            @error('owner_material_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">耗材名称</label>
                        <div class="col-8">
                            <input type="text" class="form-control " name="material_name" autocomplete="off" value="{{ old('material_name') }}" v-model="material_name" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">尺寸大小</label>
                        <div class="col-8">
                            <input type="text" class="form-control " name="size" autocomplete="off" value="{{ old('size') }}" v-model="size" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">特殊要求</label>
                        <div class="col-8">
                            <input type="text" class="form-control " name="special" autocomplete="off" value="{{ old('special') }}" v-model="special" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">材质规格</label>
                        <div class="col-8">
                            <textarea type="text" class="form-control" name="specification" autocomplete="off" value="{{ old('specification') }}" readonly>@{{ specification }}</textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="quantity" class="col-2 col-form-label text-right">采购数量</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('quantity') is-invalid @enderror"
                                   name="quantity" autocomplete="off" value="{{ old('quantity') }}" v-model="quantity" required>
                            @error('quantity')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="amount" class="col-2 col-form-label text-right">销售数量</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('amount') is-invalid @enderror"
                                   name="amount" autocomplete="off" value="{{ old('amount') }}" @input="countTotalPrice" v-model="amount" required>
                            @error('amount')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="unit_price" class="col-2 col-form-label text-right">销售单价</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('unit_price') is-invalid @enderror"
                                   name="unit_price" autocomplete="off" value="{{ old('unit_price') }}" @input="countTotalPrice" v-model="unit_price" required>
                            @error('unit_price')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="total_price" class="col-2 col-form-label text-right">销售总价</label>
                        <div class="col-8">
                            <input type="text" class="form-control" name="total_price" autocomplete="off" value="{{ old('total_price') }}" v-model="total_price" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:'#list',
            data:{
                owners:[
                        @foreach($owners as $owner)
                    {
                        id:'{{$owner->id}}',name:'{{$owner->name}}',
                        ownerMaterials:[
                                @foreach($owner->ownerMaterials ? $owner->ownerMaterials :[] as $ownerMaterial)
                            {
                                id:'{{$ownerMaterial->id}}',material_code:'{{$ownerMaterial->material_code}}',material_name:'{{$ownerMaterial->material->name}}',
                                size:'{{$ownerMaterial->size}}',special:'{{$ownerMaterial->special}}',specification:'{{$ownerMaterial->specification}}',
                            },
                            @endforeach
                        ],
                    },
                    @endforeach
                ],
                owner_id:'{{old('owner_id')}}',
                owner_material_id:'{{old('owner_material_id')}}',
                material_name:'{{old('material_name')}}',
                size:'{{old('size')}}',
                special:'{{old('special')}}',
                specification:'{{old('specification')}}',
                quantity:'{{old('quantity')}}',
                amount:'{{old('amount')}}',
                unit_price:'{{old('unit_price')}}',
                total_price:'{{old('total_price')}}',
                ownerMaterials:[],
            },
            methods:{
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val===''){
                        _this.owner_id='';
                    }else{
                        _this.owners.forEach(function (owner) {
                            if (owner.name.includes($val)){
                                _this.owner_id=owner.id;
                                _this.ownerMaterials=owner.ownerMaterials;
                            }
                        });
                    }
                },
                ownerMaterial:function () {
                    let _this=this;
                    _this.ownerMaterials.forEach(function (ownerMaterial) {
                        if (_this.owner_material_id===ownerMaterial.id){
                            _this.material_name=ownerMaterial.material_name;
                            _this.size=ownerMaterial.size;
                            _this.special=ownerMaterial.special;
                            _this.specification=ownerMaterial.specification;
                        }
                    })
                },
                selectOwner:function () {
                    let _this=this;
                    _this.owners.forEach(function (owner) {
                        if (_this.owner_id===owner.id){
                            _this.ownerMaterials=owner.ownerMaterials;
                        }
                    })
                },
                countTotalPrice:function () {
                    let _this=this;
                    if (_this.unit_price===''|| _this.amount==='')_this.total_price=null;
                    _this.total_price=_this.unit_price*_this.amount;
                }
            },

        });
    </script>
@endsection