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 for="tax_rate_id" class="col-3 text-muted">税率</label>
    <select id="tax_rate_id" class="col-3 form-control ml-3" v-model="model.express.tax_rate_id">
        <option v-for="tax in pool.taxRates" :value="tax.id">@{{ tax.value }}%</option>
    </select>
</div>
<div class="row mt-3">
    <label for="isInterval" class="col-3">设定区间</label>
    <label class="col-7"><input id="isInterval" type="checkbox" class="switch"  v-model="model.express.isInterval"></label>
</div>
<div class="row mt-3" v-if="model.express.isInterval">
    <label class="col-3">区间值</label>
    <div class="col-8">
        <div class="scrollbar overflow-scrollbar-200">
            <div class="w-100 text-nowrap">
                <div class="w-25 d-inline-block border border-1 border-secondary rounded rounded-5 font-weight-bold">
                    <span class="pull-right">重量</span><br><span class="pull-left">数量</span>
                </div>
                <label class="w-25 d-inline-block m-0 text-center" v-for="index of model.express.maxDom">
                    第@{{ index }}阶梯
                </label>
            </div>
            <div class="w-100 text-nowrap" v-for="(amount,i) in model.express.amount_interval">
                <label class="w-25 d-inline-block m-0">
                    <input type="number" step="1" min="0" v-model="model.express.amount_interval[i]" class="form-control border-dark"
                        :min="(model.express.amount_interval[i-1]) ? (Number(model.express.amount_interval[i-1])+1) : '0'"
                        :class="errors['amount_interval.'+i] ? 'is-invalid' : ''"
                        :placeholder="'数量:最小'+((model.express.amount_interval[i-1]) ? (Number(model.express.amount_interval[i-1])+1) : '0')">
                </label>
                <label class="w-25 d-inline-block m-0" v-for="(weight,j) in model.express.weight_interval[i]">
                    <input type="number" v-model="model.express.weight_interval[i][j]" step="1" class="form-control"
                    :class="errors['weight_interval.'+i+'.'+j] ? 'is-invalid' : ''"
                    :min="(model.express.weight_interval[i][j-1]) ? (Number(model.express.weight_interval[i][j-1])+1) : 0"
                    :placeholder="'重量:最小'+((model.express.weight_interval[i][j-1]) ? (Number(model.express.weight_interval[i][j-1])+1) : '0')">
                </label>
                <span class="fa fa-plus cursor-pointer" @click="addExpressWeight(i)"></span>
                <span class="fa fa-times cursor-pointer text-danger" @click="delExpressWeight(i)"></span>
            </div>
            <div class="w-100 text-nowrap mt-0 mb-3">
                <label style="width: 12.5%" class="d-inline-block mb-0 p-0 text-center border border-1 cursor-pointer border-info rounded rounded-5" @click="addExpressAmount()">
                    <span class="fa fa-plus" style="font-size: 1rem"></span>
                </label>
                <label style="width: 12.5%" class="d-inline-block mb-0 p-0 text-center border border-1 cursor-pointer text-danger border-danger rounded rounded-5"
                       @click="delExpressAmount()" v-if="model.express.amount_interval.length>1">
                    <span class="fa fa-times" style="font-size: 1rem"></span>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3">
    <label class="col-3 cursor-pointer"><span>详情&nbsp;
        <span @click="show('express-item')" class="fa" :class="upList['express-item'] ? 'fa-angle-double-right' : 'fa-angle-double-down'"></span></span></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" id="expressImport" data-toggle="tooltip" @click="selectFile('expressFile')"
                    title="表头可不填写，会按照下方排列顺序读取数据" @mouseenter="hoverEffect('express',true)" @mouseleave="hoverEffect('express',false)">导入</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 mt-1 ml-1" v-if="model.express.items.length>searchBase">
            <label>
                <input placeholder="定位" class="form-control form-control-sm rounded-pill" @input="searchExpress($event)"/>
            </label>
        </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="font-weight-bold overflow-scrollbar-200" v-if="model.express.items.length>0 || hover.express"
             :class="hover.express ? 'text-danger font-weight-bold text-shadow-stress' : ''">
            <div class="w-100 text-nowrap">
                <label class="w-25 d-inline-block m-0 text-center">省</label>
                <label v-if="model.express.isInterval" class="d-inline-block m-0 text-center" v-for="(amount,i) in model.express.amount_interval" :style="{width:(model.express.weight_interval[i].length<1 ? 1 : model.express.weight_interval[i].length)*25+'%'}">
                    首重价格(@{{ (model.express.amount_interval[i+1]) ? (model.express.amount_interval[i]+'-'+model.express.amount_interval[i+1]) : (model.express.amount_interval[i]+' +') }}单)
                </label>
                <label v-if="model.express.isInterval" class="d-inline-block m-0 text-center" v-for="(amount,i) in model.express.amount_interval" :style="{width:(model.express.weight_interval[i].length<1 ? 1 : model.express.weight_interval[i].length)*25+'%'}">
                    续重价格(@{{ (model.express.amount_interval[i+1]) ? (model.express.amount_interval[i]+'-'+model.express.amount_interval[i+1]) : (model.express.amount_interval[i]+' +') }}单)
                </label>
                <label v-if="!model.express.isInterval" class="w-25 d-inline-block m-0 text-center">首重价格</label>
                <label v-if="!model.express.isInterval" class="w-25 d-inline-block m-0 text-center">续重价格</label>
            </div>
            <div class="w-100 text-nowrap" v-if="model.express.isInterval">
                <label class="w-25 d-inline-block m-0 text-center"></label>
                <label class="d-inline-block m-0 text-center" v-for="(amount,i) in model.express.amount_interval" :style="{width:(model.express.weight_interval[i].length<1 ? 1 : model.express.weight_interval[i].length)*25+'%'}">
                    <label v-if="model.express.weight_interval[i].length>0" v-for="(weight,j) in model.express.weight_interval[i]" :style="{width:100/model.express.weight_interval[i].length+'%'}">重(@{{ model.express.weight_interval[i][j+1] ? (model.express.weight_interval[i][j]+'-'+model.express.weight_interval[i][j+1]) : (model.express.weight_interval[i][j]+' +') }}kg)</label>
                    <label v-if="model.express.weight_interval[i].length<=0" class="w-100">重(0 +kg)</label>
                </label>
                <label class="d-inline-block m-0 text-center" v-for="(amount,i) in model.express.amount_interval" :style="{width:(model.express.weight_interval[i].length<1 ? 1 : model.express.weight_interval[i].length)*25+'%'}">
                    <label v-if="model.express.weight_interval[i].length>0" v-for="(weight,j) in model.express.weight_interval[i]" :style="{width:100/model.express.weight_interval[i].length+'%'}">重(@{{ model.express.weight_interval[i][j+1] ? (model.express.weight_interval[i][j]+'-'+model.express.weight_interval[i][j+1]) : (model.express.weight_interval[i][j]+' +') }}kg)</label>
                    <label v-if="model.express.weight_interval[i].length<=0" class="w-100">重(0 +kg)</label>
                </label>
            </div>
            <div class="w-100 text-nowrap" id="express-item">
                <div class="w-100" v-for="(item,i) in model.express.items" v-if="!searchItem.express || (searchItem.express && searchItem.express.includes(i))">
                    <label class="w-25 d-inline-block m-0 text-center">
                        <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 v-if="model.express.isInterval" class="d-inline-block m-0 text-center" v-for="(amount,j) in model.express.amount_interval" :style="{width:(model.express.weight_interval[j].length<1 ? 1 : model.express.weight_interval[j].length)*25+'%'}">
                        <label v-for="(weight,k) in model.express.weight_interval[j]" :style="{width:100/model.express.weight_interval[j].length+'%'}">
                            <input type="number" step="0.01" min="0" :class="errors['items.'+i+'.initial_weight_price.'+j+'.'+k] ? 'is-invalid' : ''" class="form-control form-control-sm" v-model="item.initial_weight_price[j][k]">
                        </label>
                        <label v-if="model.express.weight_interval[j].length<1">
                            <input type="number" step="0.01" min="0" :class="errors['items.'+i+'.initial_weight_price.'+j+'.0'] ? 'is-invalid' : ''" class="form-control form-control-sm" v-model="model.express.items[i]['initial_weight_price'][j][0]">
                        </label>
                    </label>
                    <label v-if="model.express.isInterval" class="d-inline-block m-0 text-center" v-for="(amount,j) in model.express.amount_interval" :style="{width:(model.express.weight_interval[j].length<1 ? 1 : model.express.weight_interval[j].length)*25+'%'}">
                        <label v-for="(weight,k) in model.express.weight_interval[j]" :style="{width:100/model.express.weight_interval[j].length+'%'}">
                            <input type="number" :class="errors['items.'+i+'.additional_weight_price.'+j+'.'+k] ? 'is-invalid' : ''" step="0.01" min="0" class="form-control form-control-sm" v-model="item.additional_weight_price[j][k]">
                        </label>
                        <label v-if="model.express.weight_interval[j].length<1">
                            <input type="number" :class="errors['items.'+i+'.additional_weight_price.'+j+'.0'] ? 'is-invalid' : ''" step="0.01" min="0" class="form-control form-control-sm" v-model="model.express.items[i]['additional_weight_price'][j][0]">
                        </label>
                    </label>
                    <label v-if="!model.express.isInterval" class="w-25 d-inline-block m-0 text-center">
                        <input type="number" step="0.01" min="0" :class="errors['items.'+i+'.initial_weight_price.0.0'] ? 'is-invalid' : ''" class="form-control form-control-sm" v-model="model.express.items[i]['initial_weight_price'][0][0]">
                    </label>
                    <label v-if="!model.express.isInterval" class="w-25 d-inline-block m-0 text-center">
                        <input type="number" step="0.01" min="0" :class="errors['items.'+i+'.additional_weight_price.0.0'] ? 'is-invalid' : ''" class="form-control form-control-sm" v-model="model.express.items[i]['additional_weight_price'][0][0]">
                    </label>
                    <label class="w-25 d-inline-block m-0 text-center cursor-pointer h3 font-weight-bold text-danger">
                        <span @click="delExpressItem(i)">&times;</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>