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

<div class="modal fade" id="locationModal" v-if="currentEqChildIndex!==null" style="z-index: 1044" tabindex="1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="z-index: 1045">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="offset-5" v-if="!batchSign">@{{ current.code+'-'+(currentEqChildIndex+1) }}</h1>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0">
                <div class="text-center h1" v-if="isLoadLocation">
                    <i class="fa fa-spinner fa-pulse"></i>
                </div>
                <div class="w-100" v-else>
                    <table class="table table-bordered w-100 h-100 m-0"
                        v-if="!batchSign && (current.children && current.children[currentEqChildIndex] && current.children[currentEqChildIndex].row>0 && current.children[currentEqChildIndex].column>0)">
                        <tr v-for="row in current.children[currentEqChildIndex].row">
                            <td v-for="column in current.children[currentEqChildIndex].column" v-if="locations[(row-1)*current.children[currentEqChildIndex].column+(column-1)]"
                                class="p-0 text-center position-relative">
                                <div style="min-height: 120px" :style="locations[(row-1)*current.children[currentEqChildIndex].column+(column-1)].code|childStyle">
                                    <div class="w-100 h-100 text-secondary font-weight-bold">
                                        @{{ locations[(row-1)*current.children[currentEqChildIndex].column+(column-1)].code }}</div>
                                    <div style="position: absolute;bottom: 0" class="w-100 row">
                                        <div class="col-5 offset-1">
                                            <h6 class="text-muted">在库数量：</h6><b>@{{ locations[(row-1)*current.children[currentEqChildIndex].column+(column-1)].code | qty }}</b>
                                        </div>
                                        <div class="col-5">
                                            <h6 class="text-muted">待动数量：</h6><b>@{{ locations[(row-1)*current.children[currentEqChildIndex].column+(column-1)].code | qtyOver }}</b>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="w-100 mt-3" v-else>
                        <div class="row">
                            <div class="input-group m-3 col-5">
                                <input type="number" step="1" class="form-control" placeholder="构建行数" v-model="buildPool.row">
                                <div class="input-group-append">
                                    <span class="input-group-text">行</span>
                                </div>
                            </div>
                            <div class="col-1 mt-4 h5 font-weight-bold">×</div>
                            <div class="input-group m-3 col-5">
                                <input type="number" step="1" class="form-control" placeholder="构建列数" v-model="buildPool.column">
                                <div class="input-group-append">
                                    <span class="input-group-text">列</span>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-5">
                            <label class="offset-1 col-4 text-right" for="usage">用途</label>
                            <select class="col-5 form-control" id="usage" v-model="buildPool.usage">
                                <option v-for="(msg,key) in locationAttr.usage" :value="key">@{{ key+'('+msg+')' }}</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="handling">处理方式</label>
                            <select class="col-5 form-control" id="handling" v-model="buildPool.handling">
                                <option v-for="(msg,key) in locationAttr.handling" :value="key">@{{ key+'('+msg+')' }}</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="attribute">属性</label>
                            <select class="col-5 form-control" id="attribute" v-model="buildPool.attribute">
                                <option v-for="(msg,key) in locationAttr.attribute" :value="key">@{{ key+'('+msg+')' }}</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="category">类别</label>
                            <select class="col-5 form-control" id="category" v-model="buildPool.category">
                                <option v-for="(msg,key) in locationAttr.category" :value="key">@{{ key+'('+msg+')' }}</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="demand">需求</label>
                            <select class="col-5 form-control" id="demand" v-model="buildPool.demand">
                                <option v-for="(msg,key) in locationAttr.demand" :value="key">@{{ key+'('+msg+')' }}</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="mixFlag">是否允许产品混放</label>
                            <div class="col-5">
                                <input class="switch" type="checkbox" id="mixFlag" v-model="buildPool.mixFlag" />
                            </div>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="mixLotFlag">是否允许批次混放</label>
                            <div class="col-5">
                                <input class="switch" type="checkbox" id="mixLotFlag" v-model="buildPool.mixLotFlag" />
                            </div>
                        </div>
                        <div class="row mt-3">
                            <label class="offset-1 col-4 text-right" for="loseIdFlag">上架后是否释放跟踪号</label>
                            <div class="col-5">
                                <input class="switch" type="checkbox" id="loseIdFlag" v-model="buildPool.loseIdFlag" />
                            </div>
                        </div>
                        <div class="row mt-3 mb-2">
                            <label class="offset-1 col-4 text-right">纵数</label>
                            <div class="col-5">
                                <input min="1" type="number" step="1" max="26" class="form-control" v-model="buildPool.tandem" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div v-if="!batchSign && (current.children && current.children[currentEqChildIndex] &&
                current.children[currentEqChildIndex].row>0 && current.children[currentEqChildIndex].column>0)">
                    <button  @click="removeLocationBind()"
                             class="pull-right btn btn-danger">解除该设备库位绑定</button>
                    <button  @click="relieveBind()"
                             class="pull-right btn btn-warning small">取消关联库位</button>
                </div>

                <button v-else @click="locationBind()" class="pull-right btn btn-success">根据行列自动构建库位</button>
            </div>
        </div>
    </div>
</div>