baoshi-was/resources/views/maintenance/commodity/create.blade.php

@extends('layouts.app')
@section('title')录入-商品@endsection

@section('content')
    <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('maintenance/commodity') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="owner_name" class="col-2 col-form-label text-right">货主名</label>
                        <div class="col-9 form-inline">
                            <select class="form-control form-control-sm col-6 @error('owner_id') is-invalid @enderror" name="owner_id" v-model="owner_id">
                                <option v-for="owner in owners" :value="owner.id">@{{ owner.name }}</option>
                            </select>
                            <input placeholder="搜索货主" @input="seekOwner($event)" class="form-control form-control-sm col-3">
                            @error('owner_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="sku" class="col-2 col-form-label text-right">SKU</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('sku') is-invalid @enderror"
                                   name="sku" autocomplete="off" value="{{ old('sku') }}" required>
                            @error('sku')
                            <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 @error('name') is-invalid @enderror"
                                   name="name" autocomplete="off" value="{{ old('name') }}" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="barcode" class="col-2 col-form-label text-right">条码</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('barcode') is-invalid @enderror"
                                   name="barcode" autocomplete="off" value="{{ old('barcode') }}" required>
                            @error('barcode')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </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>
        new Vue({
            el: "#list",
            data: {
                owners: {!! $owners !!},
                owner_id: '',
            },
            methods: {
                seekOwner(e) {
                    this.owners.some(owner => {
                        if (owner.name.indexOf(e.target.value) !== -1) {
                            this.owner_id = owner.id;
                            return true;
                        }
                    });
                }
            }
        });
    </script>
@endsection