baoshi-was/resources/views/customer/ownerSundryFee/create_and_edit.blade.php

@extends('layouts.app')

@section('content')
<div class="container d-none" id="create">
  <div class="col-md-10 offset-md-1">
    <div class="card ">
      <div class="card-body">
        @if($owner_sundry_fee_detail->id)
          <form action="{{ route('ownerSundryFeeDetails.update', $owner_sundry_fee_detail->id) }}" method="POST" accept-charset="UTF-8">
          <input type="hidden" name="_method" value="PUT">
        @else
          <form action="{{ route('ownerSundryFeeDetails.store') }}" method="POST" accept-charset="UTF-8">
        @endif
      @include('shared._error')

          <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <label for="fee_explain-field">作业类型</label>
                    <select class="form-control" name="type" required>
                        <option value="" hidden disabled {{ $owner_sundry_fee_detail->id ? '' : 'selected' }}>请选择作业类型</option>
                        @foreach ($types as $value)
                            <option value="{{ $value }}" {{ $owner_sundry_fee_detail->type == $value ? 'selected' : '' }}>
                                {{ $value }}
                            </option>
                        @endforeach
                    </select>
                </div>
              <div class="form-group">
                  <label for="fee_explain-field">货主</label>
                  <div class="col-sm-10 form-inline">
                      <select class="form-control" name="owner_id" required>
                          <option v-for="owner in filterOwners" :value="owner.id" :selected="owner.id===sundryFee.owner_id">
                              @{{ owner.name }}
                          </option>
                      </select>
                      <input type="text" placeholder="输入货主进行筛选" class="form-control col-sm-4 offset-1" id="filterOwnerName" @input="filterOwner($event,1)">
                  </div>
              </div>
                <div class="form-group">
                	<label for="fee_explain-field">费用描述</label>
                	<input class="form-control" type="text" name="fee_explain" id="fee_explain-field" value="{{ old('fee_explain', $owner_sundry_fee_detail->fee_explain ) }}" />
                </div>
                <div class="form-group">
                	<label for="remark-field">快递单号</label>
                	<input class="form-control" type="text" name="logistic_number" id="logistic_number-field" v-model="sundryFee.logistic_number" @input="logistic_number_returnChange($event)"/>
                </div>
              <div class="form-group">
                  <label for="fee_explain-field">承运商</label>
                  <div class="col-sm-10 form-inline">
                      <select class="form-control" name="logistic_id" required>
                          <option v-for="logistic in filterLogistics" :value="logistic.id" :selected="logistic.id===sundryFee.logistic_id">
                              @{{ logistic.name }}
                          </option>
                      </select>
                      <input type="text" placeholder="输入承运商进行筛选" class="form-control col-sm-4 offset-1" id="filterLogisticName" @input="filterLogistic($event,1)">
                  </div>
              </div>
              <div class="form-group">
                  <label for="remark-field">数量</label>
                  <input class="form-control" type="number" name="amount" id="amount-field" v-model="sundryFee.amount" />
              </div>
              <div class="form-group">
                  <label for="remark-field">单价</label>
                  <input class="form-control" type="number" name="price" id="price-field" v-model="sundryFee.price" />
              </div>
                <div class="form-group">
                    <label for="fee-field">收费金额</label>
                    <input  disabled class="form-control" type="number" name="fee" id="fee-field" v-model="getFee" />
                </div>
              <div class="form-group">
                  <label for="remark-field">备注</label>
                  <input class="form-control" type="text" name="remark" id="remark-field" value="{{ old('remark', $owner_sundry_fee_detail->remark ) }}" />
              </div>
          <div class="well well-sm">
            <button type="submit" class="btn btn-primary">保存</button>
            <a class="btn btn-link float-xs-right" href="{{ route('ownerSundryFeeDetails.index') }}"> <- 返回</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection
@section('lastScript')
    <script>
        let vue = new Vue({
            el: "#create",
            data: {
                sundryFee: {!! $owner_sundry_fee_detail !!},
                logistics:[@foreach($logistics as $logistic){!! $logistic !!},@endforeach],
                owners:[@foreach($owners as $owner){!! $owner !!},@endforeach],
                createSundayFee: {},
                filterOwners: [],
                filterLogistics: []
            },
            created() {
            },
            mounted() {
                $('#create').removeClass('d-none');
                this.filterOwners = this.owners;
                this.filterLogistics = this.logistics;
                this.sundryFee ? this.sundryFee : {};
            },
            computed: {
                getFee() {
                    return this.sundryFee.amount*this.sundryFee.price;
                }
            },
            methods: {
                filterOwner(e,type){
                    let value = $(e.target).val();
                    let owners = this.owners;
                    if(value==='' || value===null)this.filterOwners = owners;
                    else {
                        this.filterOwners = owners.filter(function(item){
                            return item.name.indexOf(value) !== -1;
                        });
                        if(this.filterOwners.length>0){
                            if(type===1)this.sundryFee.owner_id = this.filterOwners[0]['id'];
                            if(type===2)this.sundryFee.owner_id = this.filterOwners[0]['id'];
                        }
                    }
                },
                filterLogistic(e,type){
                    let value = $(e.target).val();
                    let logistics = this.logistics;
                    if(value==='' || value===null)this.filterOwners = logistics;
                    else {
                        this.filterLogistics = logistics.filter(function(item){
                            return item.name.indexOf(value) !== -1;
                        });
                        if(this.filterLogistics.length>0){
                            if(type===1)this.sundryFee.logistic_id = this.filterLogistics[0]['id'];
                            if(type===2)this.sundryFee.logistic_id = this.filterLogistics[0]['id'];
                        }
                    }
                },
                logistic_number_returnChange(e){
                    let number=$(e.target).val();
                    if(!number)return;
                    let url='{{"/apiLocal/logistic/numberFeatures/computeLogisticByNumber"}}';
                    axios.post(url,{logistic_number_return:number}).then(response=> {
                        if(response.data.success==='true'){
                            if(response.data.logistic){
                                this.$set(this.sundryFee,'logistic_id',response.data.logistic.id);
                            }
                        }
                    }).catch(function (response) {
                        console.log(response);
                    });
                },
            },
            filters: {},
        });
    </script>
@endsection