bab-icon/resources/views/admins/menus/create.blade.php

<div style="margin-top: 10px;" id="menus-app">
    <div style="text-align: center;margin-top: 5px;margin-bottom: 10px;font-size: 20px;">
        新增 - 菜单
    </div>
    <el-form action="{{route('admin.menu.save')}}" method="post" id="form-create">
        <!-- image -->

        <!-- link -->
        <ui-input-text label="菜单名称" name="menu_name" placeholder="请输入菜单名称" maxlength="255"
                       autofocus="true"></ui-input-text>
        <ui-input-text label="菜单图标" v-if="level*1==0" name="label_name" placeholder="请输入菜单图标class名称" maxlength="255"
                       autofocus="true"></ui-input-text>
        <ui-select label="菜单层级：" value="{{$p_id>0?'1':'0'}}" @set-keys="setLevel" id="level" name="level" placeholder=""
                   :options="level_list" :free="true"></ui-select>

        <ui-linkage label="父级菜单" v-if="level*1>0" :options="menu_list"></ui-linkage>
        <ui-input-text label="菜单路由" v-if="level*1==1" name="url_name" placeholder="请输入需要绑定的路由地址" maxlength="255"
                       autofocus="true"></ui-input-text>
        <ui-input-number label="排序" checked="checked" value="50" name="sort" min="1" max="1000000" ></ui-input-number>
        <!-- show -->
        <ui-submit></ui-submit>
    </el-form>
</div>

<script type="application/javascript">
    $(function () {
        // 注意：Vue组件一定放在jQuery.validator前面验证
        new Vue({
            el: '#menus-app',
            data: function () {
                return {
                    'p_id':{{$p_id?:0}},
                    'level':{{$level}},
                    'level_list':{!! $level_list !!},
                    menu_list: {
                        'tier_num': {{$level}},
                        'one_id': '{{$one_id}}',
                        'two_id': '{{$two_id}}',
                        'send_url': '{{route('admin.menu.parentMenu')}}',
                        'one_name':'one_name',
                        'two_name':'two_name',
                    }
                }
            },
            methods: {
                setLevel: function (level) {
                    console.log('数据变化:' + level);
                    this.level = level;
                    this.menu_list.tier_num=level;
                    console.log('-------------'+this.menu_list.tier_num)
                }
            },
        });
        jQuery.validator.setDefaults({
            debug: false,         // 调试模式true不会提交,false允许提交
            success: "success",   // 匹配成功的class样式名称
            errorElement: 'div'   // 兼容el标签时使用(兼容el Vue组件label.error标签问题)
        });
        // 前台数据验证 验证需要设置window.form全局变量
        window.form = $('#form-create').validate({
            rules: {
                image: {
                    required: true,
                    maxlength: 255,
                    normalizer: function (value) {
                        return $.trim(value);
                    }
                },
                // link: {
                //     required: true,
                //     url:true,
                //     maxlength: 255,
                //     normalizer: function ( value ) {
                //         return $.trim(value);
                //     }
                // },
                show: {
                    required: true
                },
                sort: {
                    required: true,
                    normalizer: function (value) {
                        return $.trim(value);
                    }
                }
            }
        });
    });
</script>
@include('layouts.admin.form_script')