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

<div class="modal fade" tabindex="-1" role="dialog" id="logisticModal">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row w-100">
                    <button type="button" class="btn btn-sm btn-outline-dark col-1" @click="addLogisticDetail()">新增</button>
                    <input id="logisticFile" type="file" style="display:none" accept=".csv, .xlsx, .xls" @change="importLogistic($event)"/>
                    <button type="button" class="btn btn-sm btn-outline-info col-1" @click="selectFile('logisticFile')">导入</button>
                    <h5><span class="ml-0 fa fa-question-circle-o cursor-pointer" data-toggle="tooltip" data-placement="top" title="导入与保存时自动过滤重复数据和与当前选择单位不一致数据"></span></h5>
                    <div class="font-weight-bolder offset-3">物流收费标准</div>
                </div>
            </div>
            <div class="modal-body">
                <div class="w-100 text-center mb-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="err in importError">@{{ err }}</div>
                        </div>
                    </div>
                </div>
                <div class="w-100 text-primary text-center mt-0" v-else>
                    <div class="small"><b class="text-dark font-weight-bold">导入表头示例：</b>计数单位,计数区间,省份,市,单价,送货费,起始计费,起始计数,费率</div>
                </div>
                <table class="table table-sm table-bordered">
                    <tr class="text-success">
                        <th>计价单位</th>
                        <th>计价区间</th>
                        <th style="min-width: 100px">省份</th>
                        <th style="min-width: 100px">市</th>
                        <th>单价</th>
                        <th>送货费</th>
                        <th>起始计费</th>
                        <th>起始计数</th>
                        <th>费率(%)</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(detail,i) in model.logistic.items">
                        <td>
                            <label>
                                <select class="form-control form-control-sm col-6" style="min-width: 80px" v-model="detail.unit_id" :class="'items.'+i+'.unit_id' ? 'is-invalid' : ''">
                                    <option v-for="unit in pool.units" :value="unit.id" v-if="unit.id == model.logistic.unit_id || unit.id == model.logistic.other_unit_id">@{{ unit.name }}</option>
                                </select>
                            </label>
                        </td>
                        <td>
                            <label>
                                <select class="form-control form-control-sm col-6" style="min-width: 80px" v-model="detail.range" :class="'items.'+i+'.range' ? 'is-invalid' : ''">
                                    <option v-for="range in (detail.unit_id == model.logistic.unit_id ? model.logistic.ranges : model.logistic.other_ranges)" :value="range">@{{ range }}</option>
                                </select>
                            </label>
                        </td>
                        <td>
                            <label>
                                <select class="form-control form-control-sm" v-model="detail.province_id" :class="'items.'+i+'.province_id' ? 'is-invalid' : ''">
                                    <option v-for="province in pool.provinces" :value="province.id">@{{ province.name }}</option>
                                </select>
                            </label>
                        </td>
                        <td>
                            <label>
                                <select class="form-control form-control-sm" v-model="detail.city_id" :class="'items.'+i+'.city_id' ? 'is-invalid' : ''">
                                    <option v-for="city in pool.cities" v-if="detail.province_id === city.province_id" :value="city.id">@{{ city.name }}</option>
                                </select>
                            </label>
                        </td>
                        <td>
                            <label><input type="number" min="0" step="0.001" class="form-control form-control-sm" v-model="detail.unit_price" :class="'items.'+i+'.unit_price' ? 'is-invalid' : ''"></label>
                        </td>
                        <td>
                            <label><input type="number" min="0" step="0.001" class="form-control form-control-sm" v-model="detail.delivery_fee" :class="'items.'+i+'.delivery_fee' ? 'is-invalid' : ''"></label>
                        </td>
                        <td>
                            <label><input type="number" min="0" step="0.001" class="form-control form-control-sm" v-model="detail.initial_fee" :class="'items.'+i+'.initial_fee' ? 'is-invalid' : ''"></label>
                        </td>
                        <td>
                            <label><input type="number" min="0" class="form-control form-control-sm" v-model="detail.initial_amount" :class="'items.'+i+'.initial_amount' ? 'is-invalid' : ''"></label>
                        </td>
                        <td>
                            <label><input type="number" min="0" step="0.001" class="form-control form-control-sm" v-model="detail.rate" :class="'items.'+i+'.rate' ? 'is-invalid' : ''"></label>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-danger" @click="delLogisticItem(i)">删</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>