baoshi-was/resources/views/maintenance/expressPrinting/setting/printer/_create.blade.php

<div class="modal " id="create-printer" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center">终端-打印机添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form">
                    <div class="form-group row">
                        <label for="create_printer_terminal_id" class="col-sm-3 col-form-label text-right">所属终端</label>
                        <div class="col-sm-9 form-inline">
                            <select name="printer_terminal_id" id="create_printer_terminal_id"
                                    class="form-control col-sm-5" v-model="printer.terminal_id">
                                <option value=""></option>
                                <template v-for="terminal in filterTerminals">
                                    <option :value="terminal.id">
                                        <span v-text="terminal.name"></span>
                                    </option>
                                </template>
                            </select>
                            <label class="col-sm-2 offset-sm-1">
                                <input type="text" class="form-control offset-sm-1" v-model="terminalFilter"
                                       placeholder="终端筛选">
                            </label>
                            <div class="invalid-feedback" v-if="printerErrors.terminal_id">
                                @{{ printerErrors.terminal_id[0] }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="create_printer_printer_name"
                               class="col-sm-3 col-form-label text-right">打印机名称</label>
                        <div class="col-sm-9 form-inline">
                            <input type="text" id="create_printer_printer_name" class="form-control col-9"
                                   v-model="printer.printer_name"
                                   placeholder="打印机名称"
                                   :class="printerErrors.printer_name?'is-invalid':''"
                                   @focus="printerErrors.printer_name= null">
                            <div class="invalid-feedback" v-if="printerErrors.printer_name">
                                @{{ printerErrors.printer_name[0] }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="create_printer_alias_name" class="col-sm-3 col-form-label text-right">名称</label>
                        <div class="col-sm-9 form-inline">
                            <input type="text" id="create_printer_alias_name" class="form-control col-9"
                                   v-model="printer.alias_name"
                                   placeholder="名称"
                                   :class="printerErrors.alias_name?'is-invalid':''"
                                   @focus="printerErrors.alias_name= null">
                            <div class="invalid-feedback" v-if="printerErrors.alias_name">
                                @{{ printerErrors.alias_name[0] }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="create_printer_print_type" class="col-sm-3 col-form-label text-right">关联</label>
                        <div class="col-sm-9 form-inline">
                            <div class="col-9 form-inline">
                                <div class="card col-6 p-0">
                                    <div class="card-header">
                                        <input class="form-control" type="text" placeholder="筛选" v-model="filter['logistic']">
                                    </div>
                                    <div class="card-body overflow-scrollbar-200 p-0 m-0" style="max-height: 300px">
                                        <ul class="list-group">
                                            <template v-for="logistic in logistics">
                                                <li class="list-group-item"  @dblclick="addToLogistics(logistic)" v-if="includeLogistics(logistic)">
                                                    @{{ logistic.name }}
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card col-6 p-0">
                                    <div class="card-header" style="max-height: 300px">
                                        <input class="form-control" type="text" placeholder="筛选" v-model="filter['printer_logistic']">
                                    </div>
                                    <div class="card-body overflow-scrollbar-200 p-0 m-0" style="max-height: 300px">
                                        <ul class="list-group">
                                            <template v-for="logistic in logistics">
                                                <li class="list-group-item"  @dblclick="removeToLogistics(logistic)" v-if="includePrintLogistic(logistic)">
                                                    @{{ logistic.name }}
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="invalid-feedback" v-if="printerErrors.print_type">
                                @{{ printerErrors.print_type[0] }}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="createPrinter">提交</button>
            </div>
        </div>
    </div>
</div>