| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <!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; }
- .menu-tree { border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px; max-height: 350px; overflow-y: auto; }
- .menu-tree .layui-form-checkbox { display: block; margin: 5px 0; }
- .menu-tree .layui-form-checkbox[lay-skin="primary"] { padding-left: 22px; }
- </style>
- </head>
- <body>
- <div class="layui-form" id="menuForm">
- <div class="menu-tree" id="menuTree"></div>
-
- <div class="layui-form-item" style="margin-top: 20px;">
- <div class="layui-input-block">
- <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">保存</button>
- <button type="button" class="layui-btn layui-btn-primary" id="checkAll">全选</button>
- <button type="button" class="layui-btn layui-btn-primary" id="uncheckAll">取消</button>
- </div>
- </div>
- </div>
-
- <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 roleId = Common.getQueryString('roleId');
-
- loadMenuTree();
-
- function loadMenuTree() {
- Common.get(Config.api.menu.tree + '?roleId=' + roleId, function(res) {
- if (res.code === 200) {
- var menus = res.data || [];
- var html = buildMenuTree(menus);
- $('#menuTree').html(html);
- form.render('checkbox');
- }
- });
- }
-
- function buildMenuTree(menus, level) {
- level = level || 0;
- var html = '';
- menus.forEach(function(menu) {
- var indent = level * 20;
- var checked = menu.checked ? 'checked' : '';
- html += '<div style="padding-left: ' + indent + 'px;">';
- html += '<input type="checkbox" name="menuIds" value="' + menu.id + '" lay-skin="primary" title="' + menu.menuName + '" ' + checked + '>';
- html += '</div>';
- if (menu.children && menu.children.length > 0) {
- html += buildMenuTree(menu.children, level + 1);
- }
- });
- return html;
- }
-
- $('#checkAll').click(function() {
- $('#menuTree input[name="menuIds"]').prop('checked', true);
- form.render('checkbox');
- });
-
- $('#uncheckAll').click(function() {
- $('#menuTree input[name="menuIds"]').prop('checked', false);
- form.render('checkbox');
- });
-
- form.on('submit(submitForm)', function() {
- var menuIds = [];
- $('#menuTree input[name="menuIds"]:checked').each(function() {
- menuIds.push($(this).val());
- });
-
- layer.msg('保存中...', { icon: 16, shade: 0.3, time: 0 });
-
- // 获取角色信息并更新
- Common.get(Config.api.role.getInfo + '/' + roleId, function(res) {
- if (res.code === 200) {
- var roleData = res.data;
- roleData.menuIds = menuIds;
-
- Common.ajax({
- url: Config.api.role.update,
- type: 'PUT',
- data: roleData,
- success: function(res) {
- layer.closeAll();
- Common.success('保存成功', function() {
- var index = parent.layer.getFrameIndex(window.name);
- parent.layer.close(index);
- });
- }
- });
- }
- });
-
- return false;
- });
- });
- </script>
- </body>
- </html>
|