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

@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('waybill.menu')@endcomponent
        @component('waybill.waybillPriceModel.menu')@endcomponent
    </div>
    <div class="container-fluid" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" action="{{ url('waybill/waybillPriceModel') }}">
                    @if(Session::has('successTip'))
                        <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                    @endif
                    @csrf
                    <div class="form-group row">
                        <label for="logistic_id" class="col-2 col-form-label text-right">承运商</label>
                        <div class="col-8">
                            <select class="form-control" name="WaybillPriceModel[logistic_id]" style="width: 30%;" v-model="inputting.WaybillPriceModel.logistic_id">
                                    <option v-for="logistic in logistics" :value="logistic.id">@{{logistic.name}}</option>
                            </select>
                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.logistic_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="province_id"  class="col-2 col-form-label text-right">选择省份</label>
                        <div class="col-8" >
                            <select class="form-control" name="WaybillPriceModel[province_id]" style="width: 30%;" v-model="inputting.WaybillPriceModel.province_id" @change="changeProvince($event)">
                                <option v-for="province in provinces" :value="province.id">@{{province.name}}</option>
                            </select>
                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.province_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="city_id"  class="col-2 col-form-label text-right">选择城市</label>
                        <div class="col-8" >
                            <select class="form-control" name="WaybillPriceModel[city_id]" style="width: 30%;" v-model="inputting.WaybillPriceModel.city_id">
                                <option v-for="city in cities" :value="city.id">@{{city.name}}</option>
                            </select>

                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.city_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="unit_id"  class="col-2 col-form-label text-right">货物单位</label>
                        <div class="col-8" >
                            <select class="form-control" name="WaybillPriceModel[unit_id]" style="width: 30%;" v-model="inputting.WaybillPriceModel.unit_id">
                                <option v-for="unit in units" :value="unit.id">@{{unit.name}}</option>
                            </select>
                            <div class="col-sm-5">
                                <p class="form-control-static text-danger small font-weight-bold">{{ $errors->first('WaybillPriceModel.unit_id') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="range_min" class="col-2 col-form-label text-right">计价区间</label>
                        <div class="col-8 form-inline">
                            <input  type="text" style="width: 20%" class="form-control @error('WaybillPriceModel.range_min') is-invalid @enderror"
                                   name="WaybillPriceModel[range_min]" autocomplete="off" value="{{ old('WaybillPriceModel')['range_min'] }}" >&nbsp;&nbsp;--&nbsp;&nbsp;
                            <input type="text" style="width: 20%" class="form-control @error('WaybillPriceModel.range_max') is-invalid @enderror"
                                   name="WaybillPriceModel[range_max]" autocomplete="off" value="{{ old('WaybillPriceModel')['range_max'] }}" >
                            @error('WaybillPriceModel.range_min')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                            @error('WaybillPriceModel.range_max')
                            <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('WaybillPriceModel.unit_price') is-invalid @enderror"
                                   name="WaybillPriceModel[unit_price]" autocomplete="off" value="{{ old('WaybillPriceModel')['unit_price'] }}" >
                            @error('WaybillPriceModel.unit_price')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="base_fee" class="col-2 col-form-label text-right">起步费(元)</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('WaybillPriceModel.base_fee') is-invalid @enderror"
                                   name="WaybillPriceModel[base_fee]" autocomplete="off" value="{{ old('WaybillPriceModel')['base_fee'] }}" >
                            @error('WaybillPriceModel.base_fee')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="initial_weight" class="col-2 col-form-label text-right">最低计数</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('WaybillPriceModel.initial_weight') is-invalid @enderror"
                                   name="WaybillPriceModel[initial_weight]" autocomplete="off" value="{{ old('WaybillPriceModel')['initial_weight'] }}" >
                            @error('WaybillPriceModel.initial_weight')
                            <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>
        let insertVue=new Vue({
            el:'#list',
            data:{
                inputting:{
                    WaybillPriceModel:{
                        @if(isset(old('WaybillPriceModel')['province_id']))
                        province_id:'{{old('WaybillPriceModel')['province_id']}}',
                        @endif
                        @if(isset(old('WaybillPriceModel')['city_id']))
                        city_id:'{{old('WaybillPriceModel')['city_id']}}',
                        @endif
                        @if(isset(old('WaybillPriceModel')['logistic_id']))
                        logistic_id:'{{old('WaybillPriceModel')['logistic_id']}}',
                        @endif
                        @if(isset(old('WaybillPriceModel')['unit_id']))
                        unit_id:'{{old('WaybillPriceModel')['unit_id']}}',
                        @endif
                    }
                },
                provinces:[
                    @foreach($provinces as $province)
                        {id:'{{$province->id}}',name:'{{$province->name}}' },
                    @endforeach
                ],
                cities:[
                ],
                logistics:[
                    @foreach($logistics as $logistic)
                        {id:'{{$logistic->id}}',name:'{{$logistic->name}}'},
                    @endforeach
                ],
                units:[
                    @foreach($units as $unit)
                    {id:'{{$unit->id}}',name:'{{$unit->name}}'},
                    @endforeach
                ],
            },
           methods:{
               changeProvince(e){
                   let _this=this;
                   let val=e.target.value;
                   axios.get('cities/'+val).then(
                        function (response) {
                            _this.cities=response.data.cities;
                        }
                   );
                   /*let _this=this;
                   let province_id=this.inputting.WaybillPriceModel.province_id;
                   this.provinces.forEach(function (province) {
                       if(province.id+''===province_id+''){
                           _this.cities=province.cities;
                           return
                       }
                       return null
                   })*/
               }
           },
        });

    </script>
@endsection