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

<div class="row mt-3">
    <label for="operation_type" class="col-2">操作类型</label>
    <select id="operation_type" :class="errors.operation_type ? 'is-invalid' : ''" v-model="model.operation.operation_type"  class="col-3 form-control">
        <option value="入库">入库</option>
        <option value="出库">出库</option>
    </select>
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.operation_type">
        <strong>@{{ errors.operation_type[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label for="strategy" class="col-2">计费策略</label>
    <select id="strategy" :class="errors.strategy ? 'is-invalid' : ''" class="col-3 form-control" v-model="model.operation.strategy">
        <option value="默认">默认</option>
        <option value="特征">特征</option>
    </select>
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.strategy">
        <strong>@{{ errors.strategy[0] }}</strong>
    </span>
</div>
<div class="row mt-3">
    <label class="col-2">名称</label>
    <input type="text" :class="errors.name ? 'is-invalid' : ''" class="col-6 form-control" v-model="model.operation.name">
    <span class="invalid-feedback mt-0 offset-2" role="alert" v-if="errors.name">
        <strong>@{{ errors.name[0] }}</strong>
    </span>
</div>
<div class="row mt-3" v-if="model.operation.strategy == '特征'">
    <label class="col-2">特征：</label>
    <label class="col-8">
        <label v-if="model.operation.feature">@{{ model.operation.featureFormat }}</label><br>
        <button type="button" class="btn btn-dark col-2 ml-2" @click="showAddFeatureModal(-1,model.operation.feature)">调整特征</button>
    </label>
</div>
<div class="row mt-3">
    {{--起步--}}
    <div class="card row text-white offset-1 col-9 bg-dark" v-if="model.operation.operation_type === '出库'">
        <div class="card-header" style="max-height: 50px">
            <div class="row">
                <div class="col-6 offset-3 text-center">起&nbsp;&nbsp;&nbsp;&nbsp;步</div>
            </div>
        </div>
        <div class="card-body">
            <div class="row mt-2">
                <div class="col-3">
                    <label>
                        <select class="form-control form-control-sm mt-1" v-model="model.operation.items[0].type">
                            <option value="0">起步数</option>
                            <option value="1">起步费</option>
                        </select>
                    </label>
                </div>
                <div class="col-9">
                    <div class="row" v-if="model.operation.items[0].type == 0">
                        <label class="col-3">起步数</label>
                        <label class="col-5 mb-0"><input id="amount" type="number" :class="errors['items.0.amount'] ? 'is-invalid' : ''"
                                                         v-model="model.operation.items[0].amount" class="form-control" step="1"></label>
                    </div>
                    <div class="row mt-0" v-if="errors['items.0.amount']">
                        <div class="offset-3"><small class="text-danger font-weight-bold ml-3">起步数为必填项</small></div>
                    </div>
                    <div class="row mt-2" v-if="model.operation.items[0].type == 0">
                        <label class="col-3">单位</label>
                        <label class="col-5 mb-0"><select v-model="model.operation.items[0].unit_id" class="form-control" :class="errors['items.0.unit_id'] ? 'is-invalid' : ''">
                                <option v-for="unit in pool.units" :value="unit.id">@{{ unit.name }}</option>
                            </select></label>
                    </div>
                    <div class="row mt-0" v-if="errors['items.0.unit_id']">
                        <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单位为必选项</small></div>
                    </div>
                    <div class="row mt-2">
                        <label class="col-3">起步费</label>
                        <label class="col-5 mb-0"><input type="number" min="0" step="0.001" class="form-control" v-model="model.operation.items[0].unit_price"
                                                         :class="errors['items.0.unit_price'] ? 'is-invalid' : ''"></label>
                    </div>
                    <div class="row mt-0" v-if="errors['items.0.unit_price']">
                        <div class="offset-3"><small class="text-danger font-weight-bold ml-3">起步费为必填项</small></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--默认--}}
    <div class="card row text-white offset-1 col-9 bg-info">
        <div class="card-header" style="max-height: 50px">
            <div class="row">
                <div class="col-3">
                    <div class="pull-left cursor-pointer text-white" @click="addOperationItem()"><small>新增</small>&nbsp;<span class="fa fa-plus-square-o"></span></div>
                </div>
                <div class="col-6 text-center">
                    默&nbsp;&nbsp;&nbsp;&nbsp;认
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row mt-2">
                <label class="col-3">数量</label>
                <label class="col-5 mb-0"><input id="amount" type="number" :class="errors['items.1.amount'] ? 'is-invalid' : ''"
                       v-model="model.operation.items[1].amount" class="form-control" step="1">
                </label>
                <div class="col-4"></div>
            </div>
            <div class="row mt-0" v-if="errors['items.1.amount']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">数量为必填项</small></div>
            </div>
            <div class="row mt-2">
                <label class="col-3">单位</label>
                <label class="col-5 mb-0"><select v-model="model.operation.items[1].unit_id" class="form-control" :class="errors['items.1.unit_id'] ? 'is-invalid' : ''">
                    <option v-for="unit in pool.units" :value="unit.id">@{{ unit.name }}</option>
                </select></label>
            </div>
            <div class="row mt-0" v-if="errors['items.1.unit_id']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单位为必填项</small></div>
            </div>
            <div class="row mt-2">
                <label class="col-3">单价</label>
                <label class="col-5 mb-0"><input type="number" min="0" step="0.001" class="form-control" v-model="model.operation.items[1].unit_price"
                           :class="errors['items.1.unit_price'] ? 'is-invalid' : ''"></label>
            </div>
            <div class="row mt-0" v-if="errors['items.1.unit_price']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单价为必填项</small></div>
            </div>
        </div>
    </div>

    {{--特征--}}
    <div v-for="(item,i) in model.operation.items" class="card row text-white offset-1 col-9 bg-secondary" v-if="i>1">
        <div class="card-header" style="max-height: 50px">
            <div class="row">
                <div class="col-3">
                    <div class="pull-left cursor-pointer text-white" @click="addOperationItem()"><small>新增</small>&nbsp;<span class="fa fa-plus-square-o"></span></div>
                </div>
                <div class="col-6 text-center">
                    特&nbsp;&nbsp;&nbsp;&nbsp;征
                </div>
                <div class="col-3">
                    <div class="pull-right cursor-pointer text-white" @click="delOperationItem(i)"><small>删除</small>&nbsp;<span class="fa fa-window-close-o"></span></div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row mt-2">
                <label class="col-3">数量</label>
                <label class="col-5 mb-0"><input type="number" step="1" min="0" :class="errors['items.'+i+'.amount'] ? 'is-invalid' : ''" v-model="item.amount" class="form-control"></label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.amount']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">数量为必填项</small></div>
            </div>
            <div class="row mt-2">
                <label class="col-3">单位</label>
                <label class="col-5 mb-0"><select v-model="item.unit_id" class="form-control" :class="errors['items.'+i+'.unit_id'] ? 'is-invalid' : ''">
                    <option v-for="unit in pool.units" :value="unit.id">@{{ unit.name }}</option>
                </select></label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.unit_id']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单位为必选项</small></div>
            </div>
            <div class="row mt-2">
                <label class="col-3">单价</label>
                <label class="col-5 mb-0"><input type="number" min="0" step="0.001" class="form-control" v-model="item.unit_price"
                       :class="errors['items.'+i+'.unit_price'] ? 'is-invalid' : ''"></label>
            </div>
            <div class="row mt-0" v-if="errors['items.'+i+'.unit_price']">
                <div class="offset-3"><small class="text-danger font-weight-bold ml-3">单价为必填项</small></div>
            </div>
            <div class="row mt-2">
                <label class="col-3">特征：</label>
                <label class="col-5">
                    <label v-if="item.feature">@{{ item.featureFormat }}</label><br>
                    <button type="button" class="btn btn-dark ml-2" @click="showAddFeatureModal(i)">调整特征</button>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3">
    <label for="remark" class="col-2">备注</label>
    <textarea id="remark" class="col-6 form-control" v-model="model.operation.remark"></textarea>
</div>