lijian541x
/
ema_project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单表单</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <style>
        body { padding: 20px; }
        .required { color: #ff5722; }
        .layui-icon-list { font-size: 20px; }
        .icon-item { float: left; margin: 5px; cursor: pointer; padding: 5px; border: 1px solid #e6e6e6; border-radius: 4px; }
        .icon-item:hover { border-color: #667eea; background: #f5f5f5; }
        .icon-item.selected { border-color: #667eea; background: rgba(102, 126, 234, 0.1); }
    </style>
</head>
<body>
    <form class="layui-form" lay-filter="menuForm" id="menuForm">
        <input type="hidden" name="id" id="menuId">
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>菜单类型</label>
            <div class="layui-input-block">
                <input type="radio" name="menuType" value="M" title="目录" checked>
                <input type="radio" name="menuType" value="C" title="菜单">
                <input type="radio" name="menuType" value="F" title="按钮">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="menuName" lay-verify="required" placeholder="请输入菜单名称" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>上级菜单</label>
            <div class="layui-input-block">
                <select name="parentId" id="parentSelect" class="layui-select" style="width: 300px;">
                    <option value="0">顶级菜单</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">路由地址</label>
            <div class="layui-input-block">
                <input type="text" name="path" placeholder="请输入路由地址" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">组件路径</label>
            <div class="layui-input-block">
                <input type="text" name="component" placeholder="如: user/user_list.html" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input type="text" name="perms" placeholder="如: system:user:list" class="layui-input" style="width: 300px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" id="iconInput" placeholder="选择图标" class="layui-input" style="width: 200px;" readonly>
                <button type="button" class="layui-btn layui-btn-primary" id="selectIcon">选择</button>
                <i class="layui-icon" id="iconPreview" style="margin-left: 10px; font-size: 24px;"></i>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="0" class="layui-input" style="width: 150px;">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常" checked>
                <input type="radio" name="status" value="0" title="停用">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea" style="width: 350px; height: 80px;"></textarea>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            
            var id = Common.getQueryString('id');
            var isEdit = !!id;
            
            // 加载菜单树
            loadMenuTree();
            
            if (isEdit) {
                Common.get(Config.api.menu.getInfo + '/' + id, function(res) {
                    if (res.code === 200) {
                        var data = res.data;
                        form.val('menuForm', data);
                        if (data.icon) {
                            $('#iconInput').val(data.icon);
                            $('#iconPreview').addClass(data.icon);
                        }
                    }
                });
            }
            
            function loadMenuTree() {
                Common.get(Config.api.menu.list, function(res) {
                    if (res.code === 200) {
                        var menus = res.data || [];
                        var html = '<option value="0">顶级菜单</option>';
                        menus.forEach(function(menu) {
                            if (menu.id !== id) {
                                html += '<option value="' + menu.id + '">' + menu.menuName + '</option>';
                            }
                        });
                        $('#parentSelect').html(html);
                        form.render('select');
                    }
                });
            }
            
            // 图标选择
            $('#selectIcon').click(function() {
                var icons = [
                    'layui-icon-home', 'layui-icon-user', 'layui-icon-set', 'layui-icon-group',
                    'layui-icon-friends', 'layui-icon-app', 'layui-icon-admin', 'layui-icon-file',
                    'layui-icon-find-fill', 'layui-icon-set-fill', 'layui-icon-util', 'layui-icon-search',
                    'layui-icon-set', 'layui-icon-chart', 'layui-icon-chart-screen', 'layui-icon-rate',
                    'layui-icon-log', 'layui-icon-note', 'layui-icon-list', 'layui-icon-table',
                    'layui-icon-form', 'layui-icon-upload', 'layui-icon-upload-circle', 'layui-icon-download-circle',
                    'layui-icon-wulian', 'layui-icon-404', 'layui-icon-refresh', 'layui-icon-refresh-1',
                    'layui-icon-circle', 'layui-icon EdmondSans', 'layui-icon-snowflake', 'layui-icon-edit'
                ];
                
                var html = '<div style="padding:10px; max-height:300px; overflow-y:auto;">';
                icons.forEach(function(icon) {
                    html += '<div class="icon-item" data-icon="' + icon + '"><i class="layui-icon ' + icon + '"></i></div>';
                });
                html += '</div>';
                
                layer.open({
                    type: 1,
                    title: '选择图标',
                    area: ['400px', '350px'],
                    content: html
                });
            });
            
            $(document).on('click', '.icon-item', function() {
                var icon = $(this).data('icon');
                $('#iconInput').val(icon);
                $('#iconPreview').attr('class', 'layui-icon ' + icon);
                layer.closeAll();
            });
            
            form.on('submit(submitForm)', function(data) {
                Common.ajax({
                    url: isEdit ? Config.api.menu.update : Config.api.menu.save,
                    type: isEdit ? 'PUT' : 'POST',
                    data: data.field,
                    success: function(res) {
                        Common.success(isEdit ? '修改成功' : '添加成功', function() {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.table.reload('tableList');
                        });
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>