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 for="name" class="col-2">名称</label>
    <input id="name" type="text" name="name" :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">
    <label class="col-2">特征：</label>
    <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>
</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-body">
            <div class="row">
                <label class="col-3">子策略：</label>
                <label class="col-5"><select disabled v-model="model.operation.items[0].strategy" class="form-control">
                    <option>起步</option>
                </select></label>
            </div>
            <div class="row mt-2">
                <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">@{{ errors['items.0.amount'][0] }}</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[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">@{{ errors['items.0.unit_id'][0] }}</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">@{{ errors['items.0.unit_price'][0] }}</small></div>
            </div>
        </div>
    </div>

    {{--默认--}}
    <div class="card row text-white offset-1 col-9 bg-info">
        <div class="card-header">
            <div class="pull-left"><span @click="addOperationItem()" class="fa fa-plus-square-o" style="cursor: pointer"></span></div>
        </div>
        <div class="card-body">
            <div class="row">
                <label class="col-3">子策略：</label>
                <label class="col-5"><select disabled v-model="model.operation.items[1].strategy" class=" form-control">
                    <option>默认</option>
                </select></label>
            </div>
            <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">@{{ errors['items.1.amount'][0] }}</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">@{{ errors['items.1.unit_id'][0] }}</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">@{{ errors['items.1.unit_price'][0] }}</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">
            <div class="pull-left"><span @click="addOperationItem()" class="fa fa-plus-square-o" style="cursor: pointer"></span></div>
            <div class="pull-right"><span @click="delOperationItem(i)" class="fa fa-window-close-o" style="cursor: pointer"></span></div>
        </div>
        <div class="card-body">
            <div class="row">
                <label class="col-3">子策略</label>
                <label class="col-5"><select disabled v-model="item.strategy" class="form-control">
                    <option>特征</option>
                </select></label>
            </div>
            <div class="row mt-2">
                <label class="col-3">数量</label>
                <label class="col-5 mb-0"><input type="number" step="1" :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">@{{ errors['items.'+i+'.amount'][0] }}</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">@{{ errors['items.'+i+'.unit_id'][0] }}</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">@{{ errors['items.'+i+'.unit_price'][0] }}</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>