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 for="tax_rate_id" class="col-3 text-muted">税率</label>
    <select id="tax_rate_id" class="col-3 form-control ml-3" v-model="model.directLogistic.tax_rate_id" :class="errors.tax_rate_id ? 'is-invalid' : ''">
        <option> </option>
        <option v-for="tax in pool.taxRates" :value="tax.id">@{{ tax.value }}%</option>
    </select>
</div>
<div class="row mt-3">
    <label class="col-3 cursor-pointer" @click="show('directLogistic-item-card')"><span @click="show('directLogistic-item-card')">详情&nbsp;
        <span class="fa" :class="upList['express-item'] ? 'fa-angle-double-right' : 'fa-angle-double-down'"></span></span></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')" @mouseenter="hoverEffect('directLogistic',true)" @mouseleave="hoverEffect('directLogistic',false)">导入</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 mt-1 ml-1" v-if="model.directLogistic.items.length>searchBase">
            <label>
                <input placeholder="  定位" class="form-control form-control-sm rounded-pill" @input="searchDirectLogistic($event)"/>
            </label>
        </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 || hover.directLogistic"
             :class="hover.directLogistic ? 'text-danger font-weight-bold text-shadow-stress' : ''">
            <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" id="directLogistic-item-card">
            <div class="row" v-for="(item,i) in model.directLogistic.items" v-if="!searchItem.directLogistic || (searchItem.directLogistic && searchItem.directLogistic.includes(i))">
                <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>
</div>