优化分配模块菜单；

优化用户分配角色；
2025-09-18 09:44:28 +08:00 · 2018-04-10 10:46:23 +08:00
parent b7b883eab5
commit b7e1dca8e2
6 changed files with 185 additions and 91 deletions
--- a/OpenAuth.Mvc/Controllers/RoleManagerController.cs
+++ b/OpenAuth.Mvc/Controllers/RoleManagerController.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Web.Http;
 using System.Web.Mvc;
 using Infrastructure;
@@ -12,6 +13,7 @@ namespace OpenAuth.Mvc.Controllers
    public class RoleManagerController : BaseController
    {
        public RoleApp App { get; set; }
+        public RevelanceManagerApp RevelanceManagerApp { get; set; }

        //
        // GET: /UserManager/
@@ -60,6 +62,28 @@ namespace OpenAuth.Mvc.Controllers
            return JsonHelper.Instance.Serialize(Result);
        }

+        /// <summary>
+        /// 加载用户的角色
+        /// </summary>
+        public string LoadForUser(string userId)
+        {
+            try
+            {
+                var result = new Response<List<string>>
+                {
+                    Result = RevelanceManagerApp.Get(Define.USERROLE, true, userId)
+                };
+                return JsonHelper.Instance.Serialize(result);
+            }
+            catch (Exception e)
+            {
+                Result.Code = 500;
+                Result.Message = e.Message;
+            }
+
+            return JsonHelper.Instance.Serialize(Result);
+        }
+
        /// <summary>
        /// 加载组织下面的所有用户
        /// </summary>
--- a/OpenAuth.Mvc/Views/ModuleManager/Assign.cshtml
+++ b/OpenAuth.Mvc/Views/ModuleManager/Assign.cshtml
@@ -3,9 +3,28 @@
    <link rel="stylesheet" href="/css/treetable.css" />
 }

-<div>
-    <ul id="tree" class="ztree layui-nav-side" style="border-right: 1px solid #eee;" ></ul>
-    <ul id="menutree" class="ztree" style="margin-left: 200px; " ></ul>
+<div class="layui-row">
+    <div class="layui-col-xs3">
+        <ul id="tree" class="ztree"
+            style="padding: 2px; border: 1px solid #ddd; overflow: auto;"></ul>
+    </div>
+    <div class="layui-col-xs9">
+        <table class="layui-table"
+               lay-data="{height: 'full-5', page:true, id:'mainList'}"
+               lay-filter="list" lay-size="sm">
+            <thead>
+            <tr>
+                <th lay-data="{checkbox:true, fixed: true}"></th>
+                <th lay-data="{field:'Name', width:150}">菜单名称</th>
+                <th lay-data="{field:'DomId', width:150}">DomID</th>
+                <th lay-data="{templet:'#icontmpl', width:150}">按钮图标</th>
+            </tr>
+            </thead>
+        </table>
+        <script type="text/html" id="icontmpl">
+            <i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">{{ d.Icon }}</i>
+        </script>
+    </div>
 </div>

 <script type="text/javascript" src="/layui/layui.js"></script>
--- a/OpenAuth.Mvc/Views/RoleManager/Assign.cshtml
+++ b/OpenAuth.Mvc/Views/RoleManager/Assign.cshtml
@@ -0,0 +1,27 @@
+@section header
+{
+    <link rel="stylesheet" href="/css/treetable.css" />
+}
+
+<div class="layui-row">
+    <div class="layui-col-xs3">
+        <ul id="tree" class="ztree"
+            style="padding: 2px; border: 1px solid #ddd; overflow: auto;"></ul>
+    </div>
+    <div class="layui-col-xs9">
+        <table class="layui-table"
+               lay-data="{height: 'full-5', page:true, id:'mainList'}"
+               lay-filter="list" lay-size="sm">
+            <thead>
+            <tr>
+                <th lay-data="{checkbox:true, fixed: true}"></th>
+                <th lay-data="{field:'Name', width:150}">角色名称</th>
+                <th lay-data="{field:'Organizations', width:250}">所属部门</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
+</div>
+
+<script type="text/javascript" src="/layui/layui.js"></script>
+<script type="text/javascript" src="/userJs/assignRole.js"></script>
--- a/OpenAuth.Mvc/userJs/assignModule.js
+++ b/OpenAuth.Mvc/userJs/assignModule.js
@@ -1,88 +1,70 @@
 layui.config({
    base: "/js/"
-}).use(['form','vue', 'ztree', 'layer', 'jquery','utils'], function () {
+}).use(['form','vue', 'ztree', 'layer', 'jquery','utils','table'], function () {
    var layer = (top == undefined || top.layer === undefined )? layui.layer : top.layer,
        $ = layui.jquery;
+    var table = layui.table;
    var id = $.getUrlParam("id");      //待分配的id
    var type = $.getUrlParam("type");  //待分配的类型
    var menuType = $.getUrlParam("menuType");  //待分配菜单的类型
  
    //菜单列表
    var menucon = {};  //table的参数，如搜索key，点击tree的id
-    //菜单树状列表，等lay table没问题了，可以换成table
-    var menutree = function () {
-        var url = '/ModuleManager/LoadMenus';
-        var menuTree;
-        var setting = {
-            view: { selectedMulti: true },
-            check: {
-                enable: true,
-                chkStyle: "checkbox",
-                chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
-            },
-            data: {
-                key: {
-                    name: 'Name',
-                    title: 'Name'
-                },
-                simpleData: {
-                    enable: true,
-                    idKey: 'Id',
-                    pIdKey: 'ParentId',
-                    rootPId: 'null'
-                }
-            },
-            callback: {
-                onClick: function (event, treeId, treeNode) {
-                   //
-                },
-                onCheck: function (event, treeId, treeNode) {
-                    var url = "/RelevanceManager/Assign";
-                    if (!treeNode.checked) {
-                        url = "/RelevanceManager/UnAssign";
-                    }

-                    $.post(url, { type: menuType, firstId: id, secIds: [treeNode.Id] }
-                        , function (data) {
-                            layer.msg(data.Message);
-                        }
-                       , "json");
-                }
-            }
-        };
-        var load = function (options) {
+    var mainList = function (options) {
        if (options != undefined) {
            $.extend(menucon, options);
        }
-
-            $.getJSON(url, menucon, function (json) {
-                menuTree = $.fn.zTree.init($("#menutree"), setting);
-                menuTree.addNodes(null, json.data);
-                //如果该用户已经分配菜单了，则设置相应的状态
+        table.reload('mainList', {
+            url: '/ModuleManager/LoadMenus',
+            where: menucon
+            , done: function (res, curr, count) {
+                //如果是异步请求数据方式，res即为你接口返回的信息。
+                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                var url = "/ModuleManager/LoadMenusForUser";
                if (type.indexOf("Role") != -1) {
                    url = "/ModuleManager/LoadMenusForRole";
                }
-                $.getJSON(url,
-                    {
+
+                $.ajax(url, {
+                    async: false
+                    , data: {
                        firstId: id
                        , moduleId: options.moduleId
                    }
-                    , function (data) {
-                        $.each(data,
-                            function (i) {
-                                var that = this;
-                                var node = menuTree.getNodeByParam("Id", that.Id, null);
-                                menuTree.checkNode(node, true, false);
-                            });
-                    });
-                menuTree.expandAll(true);
-            });
-        };
-        return {
-            load: load
+                    ,dataType:"json"
+                    , success: function (roles) {
+                       
+                        //循环所有数据，找出对应关系，设置checkbox选中状态
+                        for (var i = 0; i < res.data.length; i++) {
+                            for (var j = 0; j < roles.length; j++) {
+                                if (res.data[i].Id != roles[j].Id) continue;
+
+                                //这里才是真正的有效勾选
+                                res.data[i]["LAY_CHECKED"] = true;
+                                //找到对应数据改变勾选样式，呈现出选中效果
+                                var index = res.data[i]['LAY_TABLE_INDEX'];
+                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
+                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
+                            }
+
+                        }
+
+                        //如果构成全选
+                        var checkStatus = table.checkStatus('mainList');
+                        if (checkStatus.isAll) {
+                            $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
+                            $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
+                        }
+                    }
+                });
+
+
+
+
+            }
+        });
    }
-    }();

    //模块列表
    var ztree = function () {
@@ -109,7 +91,7 @@ layui.config({
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
-                    menutree.load({ moduleId: treeNode.Id });
+                    mainList({ moduleId: treeNode.Id });
                },
                onCheck: function (event, treeId, treeNode) {
                    var url = "/RelevanceManager/Assign";
@@ -143,8 +125,7 @@ layui.config({
                                zTreeObj.checkNode(node, true, false);
                            });
                    });
-                $("#menutree").html("点击左边的模块开始分配菜单");
-               // menutree.load({ moduleId: json[0].Id });
+             
                zTreeObj.expandAll(true);
            });
        };
@@ -153,5 +134,26 @@ layui.config({
            reload: load
        }
    }();
+    
+
+    $("#tree").height($("div.layui-table-view").height());
+
+
+    //分配及取消分配
+    table.on('checkbox(list)', function (obj) {
+        console.log(obj.checked); //当前是否选中状态
+        console.log(obj.data); //选中行的相关数据
+        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
+
+        var url = "/RelevanceManager/Assign";
+        if (!obj.checked) {
+            url = "/RelevanceManager/UnAssign";
+        }
+        $.post(url, { type: menuType, firstId: id, secIds: [obj.data.Id] }
+                       , function (data) {
+                           layer.msg(data.Message);
+                       }
+                      , "json");
+    });
    //监听页面主按钮操作 end
 })
--- a/OpenAuth.Mvc/userJs/assignRole.js
+++ b/OpenAuth.Mvc/userJs/assignRole.js
@@ -6,6 +6,7 @@ layui.config({
        $ = layui.jquery;
    var table = layui.table;
    var openauth = layui.openauth;
+    var id = $.getUrlParam("id");      //待分配的id
    layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds");
   
    //主列表加载，可反复调用进行刷新
@@ -21,15 +22,16 @@ layui.config({
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

-                $.ajax("",{
+                $.ajax("/RoleManager/LoadForUser?userId=" + id,{
                    async: false
                    , success: function (data) {
                        var json = JSON.parse(data);
-                        
+                        if (json.Code == 500) return;
+                        var roles = json.Result;
                        //循环所有数据，找出对应关系，设置checkbox选中状态
                        for (var i = 0; i < res.data.length; i++) {
-                            for (var j = 0; j < json.length; j++) {
-                                if (res.data[i].Id != json[j].Id) continue;
+                            for (var j = 0; j < roles.length; j++) {
+                                if (res.data[i].Id != roles[j]) continue;

                                //这里才是真正的有效勾选
                                res.data[i]["LAY_CHECKED"] = true;
@@ -40,9 +42,6 @@ layui.config({
                            }
                            
                        }
-                    }
-                });
-                

                        //如果构成全选
                        var checkStatus = table.checkStatus('mainList');
@@ -50,6 +49,11 @@ layui.config({
                            $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                            $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                        }
+                    }
+                });
+                
+
+                

            }
        });
@@ -95,5 +99,22 @@ layui.config({
    }();
    $("#tree").height($("div.layui-table-view").height());

+
+    //分配及取消分配
+    table.on('checkbox(list)', function (obj) {
+        console.log(obj.checked); //当前是否选中状态
+        console.log(obj.data); //选中行的相关数据
+        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
+
+        var url = "/RelevanceManager/Assign";
+        if (!obj.checked) {
+            url = "/RelevanceManager/UnAssign";
+        }
+        $.post(url, { type: "UserRole", firstId: id, secIds: [obj.data.Id] }
+                       , function (data) {
+                           layer.msg(data.Message);
+                       }
+                      , "json");
+    });
    //监听页面主按钮操作 end
 })
--- a/OpenAuth.Mvc/userJs/users.js
+++ b/OpenAuth.Mvc/userJs/users.js
@@ -6,6 +6,7 @@ layui.config({
        $ = layui.jquery;
    var table = layui.table;
    var openauth = layui.openauth;
+    var toplayer = (top == undefined || top.layer === undefined) ? layer : top.layer;  //顶层的LAYER
    layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds");
   
    $("#menus").loadMenus("User");
@@ -158,14 +159,14 @@ layui.config({
            var checkStatus = table.checkStatus('mainList')
               , data = checkStatus.data;
            if (data.length != 1) {
-                layer.msg("请选择要分配的用户");
+                toplayer.msg("请选择要分配的用户");
                return;
            }

-            var index = layer.open({
-                title: "为用户分配模块",
+            var index = toplayer.open({
+                title: "为用户【" + data[0].Name + "】分配模块",
                type: 2,
-                area: ['450px', '400px'],
+                area: ['750px', '600px'],
                content: "/ModuleManager/Assign?type=UserModule&menuType=UserElement&id=" + data[0].Id,
                success: function(layero, index) {
                    
@@ -176,14 +177,14 @@ layui.config({
            var checkStatus = table.checkStatus('mainList')
               , data = checkStatus.data;
            if (data.length != 1) {
-                layer.msg("请选择要分配的用户");
+                toplayer.msg("请选择要分配的用户");
                return;
            }

-            var index = layer.open({
-                title: "为用户分配角色",
+            var index = toplayer.open({
+                title: "为用户【"+ data[0].Name + "】分配角色",
                type: 2,
-                area: ['450px', '400px'],
+                area: ['750px', '600px'],
                content: "/RoleManager/Assign?type=UserRole&id=" + data[0].Id,
                success: function (layero, index) {