baoshi-was/resources/views/maintenance/priceModel/directLogistic/_detailModal.blade.php

<div class="modal fade" tabindex="-1" role="dialog" id="detailModal" v-if="models[index]">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row w-100">
                    <input id="file" type="file" style="display:none" accept=".csv, .xlsx, .xls" @change="importDetail($event)"/>
                    @can("计费模型-直发-录入")<button type="button" class="btn btn-sm btn-outline-info col-1" @click="selectFile()">导入</button>@endcan
                    <div class="font-weight-bolder offset-3">“<label class="text-primary">@{{ models[index].name }}</label>”物流收费标准</div>
                </div>
            </div>
            <div class="modal-body">
                <div class="w-100 text-center mb-1" v-if="errors.length > 0">
                    <button class="btn btn-sm btn-danger mb-1" @click="isShowError = true" v-if="!isShowError">@{{ errors.length }}条错误,点击展开</button>
                    <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 errors">@{{ error }}</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>起步费</th>
                        <th>续费(元/KM)</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(detail,i) in details[models[index].id]">
                        <td>
                            <div v-if="detail.edit">
                                <button type="button" class="btn btn-sm btn-success" @click="submitDetail(detail)">确定</button>
                                <button type="button" class="btn btn-sm btn-danger" @click="delDetail(detail,i)">取消</button>
                            </div>
                            <div v-else>
                                @can("计费模型-直发-录入")<button type="button" class="btn btn-sm btn-outline-info" @click="addDetail()" v-if="i == 0">新增</button>@endcan
                                @can("计费模型-直发-编辑")<button type="button" class="btn btn-sm btn-outline-primary" v-if="detail.id" @click="updateDetail(detail)">修改</button>@endcan
                            </div>
                        </td>
                        <td>
                            <label v-if="detail.edit && !detail.id">
                                <select class="form-control form-control-sm col-6" v-model="detail.car_type_id" style="min-width: 80px">
                                    <option v-for="car in carTypes" :value="car.id">@{{ car.name }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.car_type ? detail.car_type.name : '' }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                     :id="'base_fee-'+detail.id" v-model="detail.base_fee" :data="detail.base_fee"></label>
                            <label v-else>@{{ detail.base_fee }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                     :id="'additional_fee-'+detail.id"  v-model="detail.additional_fee" :data="detail.additional_fee"></label>
                            <label v-else>@{{ detail.additional_fee }}</label>
                        </td>
                        <td>
                            @can("计费模型-直发-编辑")<button type="button" class="btn btn-sm btn-outline-danger" @click="deletePriceModel(detail.id,i)" v-if="detail.id">删</button>@endcan
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>