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

<div class="row">
    <label class="col-3"><b class="text-danger">* </b>价格名称</label>
    <label class="col-7"><input type="text" class="form-control"
           v-model="model.express.name" :class="errors.name ? 'is-invalid' : ''"></label>
</div>
<div class="row mt-3">
    <label class="col-3">承运商</label>
    <label class="col-5"><select class="selectpicker express" multiple data-live-search="true" title="承运商(多选)"
            v-model="model.express.logistics" :class="errors.logistic_id ? 'is-invalid' : ''">
        <option v-for="logistic in pool.logistics" :value="logistic.id" v-if="logistic.type != '物流'">@{{ logistic.name }}</option>
    </select></label>
</div>
<div class="row mt-3">
    <label class="col-3"><b class="text-danger">* </b>首重值(KG)</label>
    <label class="col-7"><input type="number" min="0" step="0.01" class="form-control"
           v-model="model.express.initial_weight" :class="errors.initial_weight ? 'is-invalid' : ''"></label>
</div>
<div class="row mt-3">
    <label class="col-3"><b class="text-danger">* </b>续重值(KG)</label>
    <label class="col-7"><input type="number" min="0" step="0.01" class="form-control"
           v-model="model.express.additional_weight" :class="errors.additional_weight ? 'is-invalid' : ''"></label>
</div>
<div class="row mt-3">
    <label class="col-3">详情</label>
    <div class="col-9">
        <div class="w-100 form-inline">
            <input id="expressFile" type="file" class="d-none" accept=".csv, .xlsx, .xls" @change="importExpress($event)"/>
            <button type="button" class="btn btn-sm btn-outline-info w-25" @click="addExpressItem()">新增</button>
            <button type="button" class="btn btn-sm btn-outline-primary w-25 ml-2" @click="selectFile('expressFile')">导入</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.express.items.length>0">
            <label class="col-3">省</label>
            <label class="col-3">首重价格</label>
            <label class="col-3">续重价格</label>
            <label class="col-3"></label>
        </div>
        <div class="row" v-for="(item,i) in model.express.items">
            <label class="col-3">
                <select class="form-control form-control-sm" v-model="item.province_id" :class="errors['items.'+i+'.province_id'] ? 'is-invalid' : ''">
                    <option v-for="province in pool.provinces" :value="province.id">@{{ province.name }}</option>
                </select>
            </label>
            <label class="col-3">
                <input type="number" step="0.01" min="0" class="form-control form-control-sm" v-model="item.initial_weight_price" :class="errors['items.'+i+'.initial_weight_price'] ? 'is-invalid' : ''">
            </label>
            <label class="col-3">
                <input type="number" step="0.01" min="0" class="form-control form-control-sm" v-model="item.additional_weight_price" :class="errors['items.'+i+'.additional_weight_price'] ? 'is-invalid' : ''">
            </label>
            <label class="col-3 cursor-pointer h3 font-weight-bold text-danger" @click="delExpressItem(i)">
                &times;
            </label>
        </div>
    </div>
</div>