baoshi-was/resources/views/maintenance/expressPrinting/template/_edit.blade.php

<div class="modal " tabindex="-1" id="edit-template">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">模板关联</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body row">
                <div class="col">
                    <div class="card">
                        <div class="card-header">已关联货主</div>
                        <div class="card-body p-0">
                            <ul v-if="editTemplate && isChecking" class="list-group">
                                <template v-for="model in editTemplate.data">
                                    <li v-if="model.isActivation" class="list-group-item" :class="{active : model.selected}" @click="selectOwner(model,editTemplate.data)" >
                                        <span>@{{ model.name }}</span>
                                        <button type="button" class="btn btn-sm btn-outline-primary float-right" @click="cancelOwnerRelation(model)">取消</button>
                                    </li>
                                    {{--承运商--}}
                                    <li class="list-group-item" v-if="model.selected && model.isActivation">
                                        <ul class="list-group ml-1">
                                            <template v-for="logistic in model.logistics">
                                                {{--承运商关联货主取消--}}
                                                <li class="list-group-item" v-if="logistic.isActivation" @click="selectOwnerLogistic(logistic,model)" :class="{active : logistic.selected }">
                                                    @{{ logistic.name }}
                                                    <button type="button" class="btn btn-sm btn-outline-primary float-right" @click="cancelOwnerLogisticRelation(logistic,model)">取消</button>
                                                </li>
                                            </template>
                                        </ul>
                                    </li>
                                </template>
                            </ul>
                            <div v-if="isChecking() === false" style="height: 150px" class="d-flex justify-content-center align-items-center">
                                <div class="alert alert-light">
                                    未关联货主
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="card">
                            <div class="card-header">未关联货主</div>
                            <div class="card-body p-0" v-if="editTemplate">
                                <ul class="list-group" v-for="model in editTemplate.data">
                                    {{--关联货主--}}
                                    <li class="list-group-item" v-if="model.isActivation===false" @dblclick="linkOwnerRelation(model)">
                                        @{{ model.name }}
                                        <button type="button" class="btn btn-sm btn-outline-success float-right" @click="linkOwnerRelation(model)">关联</button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col" :class="{'d-flex justify-content-center align-items-center': !editTemplateOwner}">
                    <div class="card" v-if="editTemplateOwner">
                        <div class="card-header">
                            @{{ editTemplateOwner.name }} -- 承运商
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <template v-for="logistic in editTemplateOwner.logistics">
                                    {{--关联承运商--}}
                                    <li class="list-group-item" v-if="logistic.isActivation === false">
                                        @{{ logistic.name }}
                                        <button type="button" class="btn btn-sm btn-outline-success float-right" @click="logistic.isActivation = true">关联</button>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </div>
                    <div v-else >
                        <div class="container" >
                            <div class="alert alert-light">
                                选中货主之后进行关联
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col" :class="{'d-flex justify-content-center align-items-center': !editTemplateLogistic}">
                    <div class="card" v-if="editTemplateLogistic !==null">
                        <div class="card-header">
                            @{{ editTemplateOwner.name }}-@{{ editTemplateLogistic.name }}-接口
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item" v-for="item in editTemplateLogistic.interfaces">
                                    @{{  item.interface }}
                                    <template v-if="item.isActivation === true">
{{--                                        <button type="button" class="btn btn-sm btn-outline-primary float-right"  @click="item.isActivation = false" @click="saveOwnerLogisticPrinteTempRelation(item,false)" >取消</button>--}}
                                        <button type="button" class="btn btn-sm btn-outline-primary float-right"   @click="saveOwnerLogisticPrinterTempRelation(item,false)" >取消</button>
                                    </template>
                                    <template v-else>
{{--                                        <button type="button" class="btn btn-sm btn-outline-success float-right"  @click="item.isActivation = true">关联</button>--}}
                                        <button type="button" class="btn btn-sm btn-outline-success float-right"   @click="saveOwnerLogisticPrinterTempRelation(item,true)">关联</button>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div v-else>
                        <div class="container" >
                            <div class="alert alert-light">
                                选中承运商之后进行关联
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>