baoshi-was/resources/views/equipment/_detailInfo.blade.php

<div class="modal fade" id="detailInfo" tabindex="-1" role="dialog" data-keyboard="false" style="z-index: 1042" aria-hidden="true"
     :data-backdrop="current.eqId ? 'true' : 'static'" >
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="z-index: 1043">
        <div class="modal-content">
            <div class="modal-header row m-0">
                <div class="col-4 form-inline h-5 font-weight-bold">
                    设备编号：<input class="form-control" :class="error.code ? 'is-invalid' : ''" v-model="current.code"></input>
                </div>
                <div class="col-4">
                    所属库区：
                    <select class="form-control form-control-sm" v-model="current.repository" :class="error.repositoryId ? 'is-invalid' : ''">
                        <option v-for="repository in repositories" :value="repository.id">@{{ repository.code+'('+repository.name+')' }}</option>
                    </select><br>
                    放置翻转：<input type="checkbox" class="ml-2 switch" v-model="current.turn">
                </div>
            </div>
            <div class="modal-body row">
                <div class="col-6" style="border-right: 1px #D3D3D3 solid">
                    <div v-for="(item,i) in flipChildren" style="border: 1px #000000 solid;height: 70px;cursor: pointer" @click="nextDetail(item.idx)"
                        :style="[{width:100*(current.grid)+'px'}]">
                        <span class="h-100 w-100 el-center">@{{ !!item.code ? item.code : item.idx }}</span>
                    </div>
                </div>
                <div class="col-6 p-0" :style="[error.children ? {border: '2px red solid'} : '']">
                    <div v-for="(item,i) in flipChildren" class="row m-0" style="border-bottom: 1px #D3D3D3 solid;height: 70px">
                        <div class="col-3">
                            高度/M：<input class="form-control" min="0" type="number" step="0.01" :class="error['children['+i+'].height'] ? 'is-invalid' : ''" v-model="item.height"></input>
                        </div>
                        <div class="col-3">
                            库行数<input class="form-control" min="0" :disabled="current.eqId!==undefined" type="number" step="1"
                                        :style="[item.row ? {color:'red'} : '',item.row ? {fontWeight:'bold'} : '']"
                                        :class="error['children['+i+'].row'] ? 'is-invalid' : ''" v-model="item.row"></input>
                        </div>
                        <div class="col-3">
                            库列数<input class="form-control" min="0" :disabled="current.eqId!==undefined" type="number" step="1"
                                        :style="[item.row ? {color:'red'} : '',item.row ? {fontWeight:'bold'} : '']"
                                        :class="error['children['+i+'].column'] ? 'is-invalid' : ''" v-model="item.column"></input>
                        </div>
                        <div class="col-3">
                            面积/M²<input class="form-control" min="0" type="number" step="1"
                                        :class="error['children['+i+'].area'] ? 'is-invalid' : ''" v-model="item.area"></input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="pull-right btn btn-success" @click="saveOrUpdate()">保存设备信息</button>
            </div>
        </div>
    </div>
</div>