baoshi-was/resources/views/maintenance/menu/_modal.blade.php

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="font-weight-bold">新增</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-2 offset-1" for="parent_id">父级</label>
                    <select :disabled="!!menu.id" class="col-5 form-control" id="parent_id" type="text" v-model="menu.parent_id">
                        <option selected value="" class="bg-success">顶级</option>
                        <option v-for="m in menuList" :value="m.id" v-if="!m.hide" v-html="m.name" :class="m.level==1 ? 'bg-success' : ''"></option>
                    </select>
                    <label class="col-3"><input type="text" class="form-control form-control-sm rounded-pill" placeholder="检索" @keydown.enter="seekMenu($event)"/></label>
                </div>
                <div class="row mt-2">
                    <label class="col-2 offset-1" for="name"><b class="text-danger">*&nbsp;</b>菜单名称</label>
                    <input class="col-5 form-control" :class="errors.name ? 'is-invalid' : ''" id="name" type="text" v-model="menu.name">
                    <span class="invalid-feedback mt-0 offset-3" role="alert" v-if="errors.name">
                        <strong>@{{ errors.name[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-2">
                    <label class="col-2 offset-1" for="route"><b class="text-danger">*&nbsp;</b>URL</label>
                    <input class="col-5 form-control" :class="errors.route ? 'is-invalid' : ''" id="route" type="text" v-model="menu.route">
                    <span class="invalid-feedback mt-0 offset-3" role="alert" v-if="errors.route">
                        <strong>@{{ errors.route[0] }}</strong>
                    </span>
                </div>
                <div class="row mt-2">
                    <label class="col-2 offset-1" for="font">图标</label>
                    <div class="input-group mb-3 col-3 p-0">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i :class="'fa '+menu.font" :style="{color:menu.font_style}"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" id="font" placeholder="font" v-model="menu.font" data-toggle="dropdown" @input="seekIcon($event)">
                        <div class="dropdown-menu overflow-y-scrollbar-200 row" role="menu">
                            <a role="button" v-for="icon in filterIcons" class="icon-item ml-1" :class="menu.font==icon ? 'bg-info' : ''" @click.stop="selectedIcon(icon)">
                                <i :class="'fa fa-lg '+icon"></i>
                            </a>
                        </div>
                    </div>
                    <label class="col-1" for="font_style" style="top: 0.25rem">调色</label>
                    <div class="input-group mb-3 col-3 p-0">
                        <div class="input-group-prepend">
                            <span class="input-group-text" :style="{backgroundColor:menu.font_style}"></span>
                        </div>
                        <input type="text" class="form-control" id="font_style" placeholder="颜色代码，RGB值，英文" v-model="menu.font_style">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" @click="submitMenu()">  提  交  </button>
            </div>
        </div>
    </div>
</div>