baoshi-was/resources/views/customer/project/part/_directLogistic.blade.php

<div class="row">
    <label class="col-3"><b class="text-danger">* </b>价格名称</label>
    <label class="col-6"><input v-model="model.directLogistic.name" type="text" class="form-control form-control-sm"
           :class="errors.name ? 'is-invalid' : ''"></label>
    <span class="small text-danger mt-0 offset-3 ml-1" role="alert" v-if="errors.name">
        <strong>@{{ errors.name[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label class="col-3"><b class="text-danger">* </b>起步公里数</label>
    <label class="col-6"><input v-model="model.directLogistic.base_km" type="number" min="0" step="0.01" class="form-control form-control-sm"
           :class="errors.base_km ? 'is-invalid' : ''"></label>
    <span class="small text-danger mt-0 offset-3 ml-1" role="alert" v-if="errors.base_km">
        <strong>@{{ errors.base_km[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label class="col-3">详情</label>
    <div class="col-9">
        <div class="w-100 form-inline">
            <input id="directLogisticFile" type="file" class="d-none" accept=".csv, .xlsx, .xls" @change="importDirectLogistic($event)"/>
            <button type="button" class="btn btn-sm btn-outline-info w-25" @click="addDirectLogisticItem()">新增</button>
            <button type="button" class="btn btn-sm btn-outline-primary w-25 ml-2" @click="selectFile('directLogisticFile')">导入</button>
            <h5><span class="ml-0 fa fa-question-circle-o cursor-pointer" data-toggle="tooltip" data-placement="top" title="导入与保存时自动过滤重复数据"></span></h5>
        </div>
        <div class="w-100 text-center mb-1 mt-1" v-if="importError.length > 0">
            <button type="button" class="btn btn-sm btn-danger mb-1" @click="isShowError = true" v-if="!isShowError">@{{ importError.length }}条错误,点击展开</button>
            <button type="button" class="btn btn-sm btn-dark mb-1" @click="isShowError = false" v-else>收起错误展示</button>
            <div v-if="isShowError" class="container-fluid text-danger font-weight-bolder">
                <div class="row text-left">
                    <div class="col-6" v-for="error in importError">@{{ error }}</div>
                </div>
            </div>
        </div>
        <div class="row font-weight-bold" v-if="model.directLogistic.items.length>0">
            <label class="col-3">车型</label>
            <label class="col-3">起步费</label>
            <label class="col-4">续费(元/KM)</label>
            <label class="col-2"></label>
        </div>
        <div class="row" v-for="(item,i) in model.directLogistic.items">
            <label class="col-3">
                <select class="form-control form-control-sm" v-model="item.car_type_id" :class="errors['items.'+i+'.car_type_id'] ? 'is-invalid' : ''">
                    <option v-for="car in pool.cars" :value="car.id">@{{ car.name }}</option>
                </select>
            </label>
            <label class="col-3">
                <input type="number" step="0.01" class="form-control form-control-sm" v-model="item.base_fee" :class="errors['items.'+i+'.base_fee'] ? 'is-invalid' : ''">
            </label>
            <label class="col-4">
                <input type="number" step="0.01" class="form-control form-control-sm" v-model="item.additional_fee" :class="errors['items.'+i+'.additional_fee'] ? 'is-invalid' : ''">
            </label>
            <label class="col-2 cursor-pointer h3 font-weight-bold text-danger" @click="delDirectLogisticItem(i)">
                &times;
            </label>
        </div>
    </div>
</div>