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

<div class="modal fade" tabindex="-1" role="dialog" id="detailModal" v-if="models[index]">
    <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">
                    <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
                    <button type="button" class="btn btn-sm btn-outline-dark col-1" @click="exportDetail()">导出</button>
                    <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 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 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" style="min-width: 80px" v-model="detail.unit_id" @change="$forceUpdate()">
                                    <option v-for="unit in units" :value="unit.id" v-if="unit.id == models[index].unitId || unit.id == models[index].otherUnitId">@{{ unit.name }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.unit ? detail.unit.name : '' }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit && !detail.id">
                                <select class="form-control form-control-sm col-6" style="min-width: 80px" v-model="detail.range">
                                    <option v-for="range in (detail.unit_id == models[index].unitId ? models[index].unitRange : models[index].otherUnitRange)" :value="range">@{{ range }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.range }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit && !detail.id">
                                <select class="form-control form-control-sm" v-model="detail.province_id" @change="$forceUpdate()">
                                    <option v-for="province in provinces" :value="province.id">@{{ province.name }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.province ? detail.province.name : '' }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit && !detail.id">
                                <select class="form-control form-control-sm" v-model="detail.city_id" v-if="detail.province_id">
                                    <option v-for="city in cities[detail.province_id]" :value="city.id">@{{ city.name }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.city ? detail.city.name : '' }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                         :id="'unit_price-'+detail.id" v-model="detail.unit_price" :data="detail.unit_price"></label>
                            <label v-else>@{{ detail.unit_price }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                     :id="'delivery_fee-'+detail.id" v-model="detail.delivery_fee" :data="detail.delivery_fee"></label>
                            <label v-else>@{{ detail.delivery_fee }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                     :id="'initial_fee-'+detail.id"  v-model="detail.initial_fee" :data="detail.initial_fee"></label>
                            <label v-else>@{{ detail.initial_fee }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" class="form-control form-control-sm"
                                     :id="'initial_amount-'+detail.id" v-model="detail.initial_amount" :data="detail.initial_amount"></label>
                            <label v-else>@{{ detail.initial_amount }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="number" min="0" step="0.001" class="form-control form-control-sm"
                                     :id="'rate-'+detail.id"  v-model="detail.rate" :data="detail.rate"></label>
                            <label v-else>@{{ detail.rate }}</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>