子使用者-角色-許可權-菜單 淺談：子賬戶設計方案

基於技術：Json.net + Jquery + Jstree

員工：賬戶名（原賬戶：+自訂）  密碼   姓名 部門（樹形） 職務（員工 主管 經理 總監 副總裁 總裁）
            使用角色（多選） （其他：入職時間  工號  花名 手機 郵箱 有線電話 ）
部門：客服（售前 售後） 運營 財務 倉儲 （自訂）
角色：倉儲物流 活動運營  美工設計  商品管理 售前客服  售後客服 等 （自訂）
許可權：基於角色指派許可權+補充許可權
菜單：不同使用者不同許可權對應不同菜單

《一》表設計如下：
Employee 員工
Department 部門
Role 角色
Permission 許可權
RolePermission 為角色標識許可權
Menu 菜單
MenuPermission 為菜單標識許可權

Department  部門:
department_id
department_name
parent_id
level  第一級為1
sort_order
status
main_id 主帳號Id

Employee 子帳號基本資料：
employee_id         子帳號Id
employee_name         使用者名稱（zhangsan:no1）
employee_pwd
full_name    姓名
main_id        主帳號Id
main_name         主帳號使用者名稱
department_id
permissions  多選  ，隔開 補充許可權
roses   多選  ，隔開
…………………………
status         1正常 -1刪除 2凍結
create_time
modified_time

Role 子帳號角色
role_id         角色id
role_name    角色名稱
permissions     所擁有許可權  （ Permission[]）
description    角色描述
main_id      主帳號Id
create_time      建立時間
modified_time 修改時間

 

Permission：許可權資訊
permission_id
permission_code     許可權編碼 string類型
permission_name     許可權名稱
parent_code         父許可權code
is_authorize     1 :允許授權 2：不允許授權 6：不允許授權但預設已有許可權

Menu：菜單
menu_id
menu_name
menu_url
parent_id
sort_order
status

MenuPermission：菜單許可權
id
menu_id
permissions   許可權標識

SubUserPermission 實體 子帳號所擁有的權限物件(直接賦予的許可權和通過角色賦予的許可權的總和對象)
permissions      子帳號被直接賦予的許可權點列表  Permission []
roles    子帳號被賦予的角色資訊(Role)列表。Role []    列表中的角色對象只有role_id，role_name，permissions資訊

 

《二》初始化-綁定-擷取-設定選中 許可權樹

例子：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="jquery.jstree.js"></script><script type="text/javascript">$(function(){var checkNodeIds = "12,22".split(",");$("#roleTree").jstree({ "themes": {"theme": "default",  "dots": true,  "icons": false  },//設定有虛線，不顯示檔案夾表徵圖  "json_data": {  "ajax": {   "url": "jsondata.ashx"  } }, "plugins": ["themes", "json_data", "checkbox", "ui"]   // html_data   json_data 可以用html格式或者json格式 }) .bind("loaded.jstree", function (event, data) {//tree load完才做其他事   $("#roleTree").jstree("open_all");        $("#roleTree").find("li").each(function() {            for (var i = 0; i < checkNodeIds.length; i++) {                if ($(this).attr("id") == checkNodeIds[i]) {                    //alert($(this).attr("id"));                    $("#roleTree").jstree("check_node", $(this));                    break;                }            }        }) });});// 擷取選中idfunction checkForm(obj) {    var ids = checkForm2(obj);    alert(ids);}function checkForm2(obj) {    var ids =[];    $.jstree._reference($("#roleTree")).get_checked(obj).each(function(i, n) {        ids.push(n.id);        if ($(this).find("> ul").length > 0) {            ids.push(checkForm2($(this)));        }    });    return ids;}//根據ids數組 初始化選中 function setCheckedNode(ids){ //$.jstree._reference('#roleTree').uncheck_all();     $("#roleTree").jstree("uncheck_all");//清空        if(ids!=""){                     var tempCheckStr=ids.split(',');            $(tempCheckStr).each(function(i,item){                           //$.jstree._reference('#roleTree').check_node("#"+item);                 $("#roleTree").jstree("check_node","#"+item);            })                    }         }        </script>

 

HTML：

<div id="roleTree" style="text-align:left; background-color:#FFFFFF;">  </div><button onclick="checkForm()">查看選中的節點ID</button><button onclick="setCheckedNode('3,31,32,33')">設定節點ID選中</button>

JSON格式：

[    {        "data": "諸葛亮",        "attr": {            "id": "1"        },        "children": [            {                "data": "諸葛亮1",                "attr": {                    "id": "11"                },                "children": [                    {                        "data": "諸葛亮12",                        "attr": {                            "id": "112"                        }                    },                    {                        "data": "諸葛亮13",                        "attr": {                            "id": "113"                        }                    }                ]            },            {                "data": "諸葛亮2",                "attr": {                    "id": "12"                }            },            {                "data": "諸葛亮3",                "attr": {                    "id": "13"                }            }        ]    },     {        "data": "許可權",        "attr": {            "id": "3"        },        "children": [            {                "data": "許可權1",                "attr": {                    "id": "31"                }            },            {                "data": "許可權2",                "attr": {                    "id": "32"                },                "children": [                    {                        "data": "曹操1",                        "attr": {                            "id": "21"                        }                    }                ]            },            {                "data": "許可權3",                "attr": {                    "id": "33"                },                "children": []            }        ]    }]

部門樹

if(typeof departmentTree === 'undefined'){    departmentTree = {};}jQuery.extend(departmentTree, CustomEvent);//渲染部門列表departmentTree.getDepartmentHtml = function(data, isSub){    var html = '',        ul = (isSub)? '<ul class="sub">': '<ul>';        html += ul;    for(var i = 0, l = data.length; i < l; i++){        var item = data[i];        html += '<li>';        html +=  '<a href="#" key="department" departmentId="' + item.attr.id + '">' + item.attr.title + '</a>';                if(typeof(data[i].children) === 'object'){            //如果有子項，則遞迴            html += departmentTree.getDepartmentHtml(item.children, true);         }        html += '</li>';    }    html += '</ul>';    return html;};

部門樹json格式：

{    "data": [        {            "data": {                "title": "學無止境-曾祥展"            },            "attr": {                "id": 123456,                "parentId": 0,                "title": "學無止境-曾祥展",                "level": 1            },            "state": "open",            "children": [                {                    "data": {                        "title": "xxx"                    },                    "attr": {                        "id": 1212121,                        "parentId": 123456,                        "title": "xxxxx",                        "level": 2                    },                    "children": [                        {                            "data": {                                "title": "子部門"                            },                            "attr": {                                "id": 454545454,                                "parentId": 1212121,                                "title": "子部門",                                "level": 3                            }                        },……

}
主帳號擁有所有許可權，子賬戶分配不同角色（可以多個），可以補充許可權滿足需求，
使用者權限不同，顯示菜單也不同，粒度可到每一個操作許可權……

針對需求，靈活設計……