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

<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
    <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
                    <button type="button" class="btn btn-sm btn-outline-dark col-1">导出</button>
                    <div class="font-weight-bolder offset-3">“<label class="text-primary">@{{ 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>
                <table class="table table-sm table-bordered">
                    <tr class="text-success">
                        <th>操作</th>
                        <th>计价单位</th>
                        <th>计价区间</th>
                        <th>省份</th>
                        <th>市</th>
                        <th>单价</th>
                        <th>送货费</th>
                        <th>起始计费</th>
                        <th>起始计数</th>
                        <th>费率</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(detail,i) in details[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 id="unit_id" class="form-control form-control-sm col-6" v-model="detail.unit_id">
                                    <option v-for="unit in units" :value="unit.id">@{{ unit.name }}</option>
                                </select>
                            </label>
                            <label v-else>@{{ detail.unit ? detail.unit.name : '' }}</label>
                        </td>
                        <td>
                            <label v-if="detail.edit"><input type="text" class="form-control form-control-sm" :id="'range-'+detail.id"
                                                             v-model="detail.range" :data="detail.range"></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">
                                    <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">
                                    <option v-for="city in cities" :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>