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

@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.menu')@endcomponent
        <div class="container">
            <div class="card menu-third" style="background: #f9f0f0;transform: scale(0.95)">
                <ul class="nav nav-pills">
                    @can('运输管理-录入')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/create/ZX')}}" :class="{active:isActive('ZX',3)}">专线</a>
                        </li> @endcan
                    @can('运输管理-录入')
                        <li class="nav-item">
                            <a class="nav-link" href="{{url('waybill/create/ZF')}}" :class="{active:isActive('ZF',3)}">直发车</a>
                        </li> @endcan
                </ul>
            </div>
        </div>
    </div>
    <div class="container mt-3" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" action="{{ url('waybill') }}">
                    @csrf
                    <input name="type" hidden value="{{$type}}">
                    <div class="form-group row">
                        <label for="owner_id" class="col-2 col-form-label text-right text-primary">货主 *</label>
                        <div class="col-8 form-inline">
                            <select name="owner_id" class="form-control @error('owner_id') is-invalid @enderror" v-model="owner_name"  style="width: 30%">
                                   <option v-for="owner in owners" :value="owner.id">@{{owner.name}}</option>
                            </select>
                            <input class="form-control-sm ml-2" placeholder="输入关键字定位" @input="owner_id">
                        </div>
                        <div class="col-sm-5">
                            <p class="form-control-static text-danger small font-weight-bold" style="margin-left: 50%">{{ $errors->first('owner_id') }}</p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="wms_bill_number" class="col-2 col-form-label text-right text-muted">WMS单号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('wms_bill_number') is-invalid @enderror"
                                   name="wms_bill_number" autocomplete="off" value="{{ old('wms_bill_number') }}"  >
                            @error('wms_bill_number')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="origination" class="col-2 col-form-label text-right text-primary">始发地址 *</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('origination') is-invalid @enderror"
                                       name="origination" autocomplete="off" value="{{ old('origination') }}"  required>
                                @error('origination')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="destination" class="col-2 col-form-label text-right text-primary">目的地址 *</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('destination') is-invalid @enderror"
                                       name="destination" autocomplete="off" value="{{ old('destination') }}"  required>
                                @error('destination')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="recipient" class="col-2 col-form-label text-right text-primary">收件人 *</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('recipient') is-invalid @enderror"
                                       name="recipient" autocomplete="off" value="{{ old('recipient') }}"  required>
                                @error('recipient')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="recipient_mobile" class="col-2 col-form-label text-right text-primary">收件人电话 *</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('recipient_mobile') is-invalid @enderror"
                                       name="recipient_mobile" autocomplete="off" value="{{ old('recipient_mobile') }}"  required>
                                @error('recipient_mobile')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="charge" class="col-2 col-form-label text-right text-primary">收费(元) *</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('charge') is-invalid @enderror"
                                       name="charge" autocomplete="off" value="{{ old('charge') }}"  required>
                                @error('charge')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="collect_fee" class="col-2 col-form-label text-right text-muted">到付金额(元)</label>
                            <div class="col-8">
                                <input type="text" class="form-control @error('collect_fee') is-invalid @enderror"
                                       name="collect_fee" autocomplete="off" value="{{ old('collect_fee') }}"  >
                                @error('collect_fee')
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="ordering_remark" class="col-2 col-form-label text-right text-muted">下单备注</label>
                            <div class="col-8">
                            <textarea class="form-control @error('ordering_remark') is-invalid @enderror"
                                      name="ordering_remark" autocomplete="off"  >{{ old('ordering_remark') }}</textarea>
                                @error('ordering_remark')
                                <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>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:'#list',
            data:{
                owners:[
                        @foreach($owners as $owner)
                        {id:'{{$owner->id}}',name:'{{$owner->name}}'},
                        @endforeach
                ],
                owner_name:'',
            },
            methods:{
                owner_id:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    _this.owner_name='';
                    _this.owners.forEach(function (owner) {
                        if (owner.name.includes($val)){
                            _this.owner_name=owner.id;
                        }
                    });
                },
            },
        });
    </script>
@endsection