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">
                    <div class="form-inline h-50">
                        设备宽度/M：<input class="form-control form-control-sm" :class="error.width ? 'is-invalid' : ''" type="number" step="0.01" v-model="current.width"></input>
                    </div>
                    <div class="form-inline h-50 mt-1">
                        设备深度/M：<input class="form-control form-control-sm" :class="error.depth ? 'is-invalid' : ''" type="number" step="0.01" v-model="current.depth"></input>
                    </div>
                </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="layer in flipLayer" style="border: 1px #000000 solid;height: 70px;cursor: pointer" @click="nextDetail(layer)"
                        :style="[layer===1 ? {borderTop:'none'} : '',layer===current.layer ? {borderBottom:'none'} : '',{width:100*(current.grid)+'px'}]">
                        <span class="h-100 w-100 el-center">@{{ layer<10 ? '0'+layer : layer }}</span>
                    </div>
                </div>
                <div class="col-6 p-0" :style="[error.children ? {border: '2px red solid'} : '']">
                    <div v-for="(item,i) in current.children" class="row m-0" style="border-bottom: 1px #D3D3D3 solid;height: 70px">
                        <div class="col-4">
                            设备高度/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-4">
                            库位行数：<input class="form-control" min="0" :disabled="current.eqId!==undefined" type="number" step="1" :class="error['children['+i+'].row'] ? 'is-invalid' : ''" v-model="item.row"></input>
                        </div>
                        <div class="col-4">
                            库位列数：<input class="form-control" min="0" :disabled="current.eqId!==undefined" type="number" step="1" :class="error['children['+i+'].column'] ? 'is-invalid' : ''" v-model="item.column"></input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="pull-right btn btn-success" @click="saveOrUpdate()">保存设备信息</button>
            </div>
        </div>
    </div>
</div>