基本完成

src/css/itemManager.less

@@ -218,6 +218,7 @@
 }
 .managerContainer.usrContain .moduleTypeList {
     width: 170px;
+    height: 400px;
 }
 .managerContainer.usrContain .selectReject {
     width: 140px;

src/css/roleManager.less

@@ -1,6 +1,82 @@
 .leftMenu {
     border: 1px solid #E2E5EF;
     padding: 20px;
-    width: 450px;
+    width: 350px;
     height: 700px;
+    background-color: #fff;
+}
+.pubStyleMeun {
+    .roleLis li {
+        padding: 0 10px;
+        height: 50px;
+        line-height: 50px;
+        &:hover {
+            background-color: #F0F5FF;
+        }
+    }
+    .editRole {
+        float: right;
+        width: 52px;
+        height: 30px;
+        line-height: 30px;
+        color: #5A8EEE;
+        border: 1px solid #5A8EEE;
+        border-radius: 4px;
+        text-align: center;
+        position: relative;
+        top: 10px;
+    }
+}
+.rightMenu {
+    position: absolute;
+    width: 100%;
+    top: 64px;
+    right: 40px;
+    border: 1px solid #ccc;
+    overflow: auto;
+    .toptools {
+        height: 56px;
+        line-height: 56px;
+        border-bottom: 1px solid #E2E5EF;
+        padding: 0 20px;
+        border-radius: 4px;
+    }
+    .saveRoleSet {
+        width: 60px;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        background-color: #5A8EEE;
+        color: #fff;
+        float: right;
+        margin-top: 10px;
+        border-radius: 4px;
+    }
+    .mainSysWrap {
+        padding: 0 15px;
+    }
+    .mainSys {
+        border-bottom: 1px solid #E2E5EF;
+        padding: 10px 0 0 0;
+        img {
+            width: 14px;
+            position: relative;
+            top: 2px;
+        }
+        .parentSet {
+            padding-bottom: 15px;
+            cursor: pointer;
+        }
+        .sysWrap {
+            margin-left: 30px;
+        }
+        .sonSet {
+            li {
+                padding-bottom: 15px;
+                float: left;
+                margin-left: 30px;
+                cursor: pointer;
+            }
+        }
+    }
 }

src/html/roleManager.html

@@ -12,12 +12,19 @@
     <div class="managerContainer role">
         <h2>角色管理</h2>
         <div class="main-body">
-            <div class="filterBox">
-                <div class="leftMenu">
-                    
+            <div class="filterBox clearfix">
+                <div class="leftMenu pubStyleMeun">
+                    <ul class="roleLis">
+                        
+                    </ul>
                 </div>
-                <div class="rightMenu">
-                    
+                <div class="rightMenu pubStyleMeun">
+                    <div class="toptools">
+                        <span class="saveRoleSet">保存</span>
+                    </div>
+                    <div class="mainSysWrap">
+                        
+                    </div>
                 </div>
             </div>
         </div>

src/js/roleManager.js

@@ -12,21 +12,27 @@ const arrowLeft= require("./../images/arrow_left.png")
 const arrowRight = require("./../images/arrow_right.png")
 
 $(function(){
+    let curId="",curData="",curTreeData=[];
+    $(window).resize(function(){
+        $(".role .leftMenu").css("height",$(window).height()-128+'px')
+        $(".role .rightMenu").css({"height":$(window).height()-88+'px',"width":$(".filterBox").width()-400+'px'})
+    })
     $(".role .leftMenu").css("height",$(window).height()-128+'px')
+    $(".role .rightMenu").css({"height":$(window).height()-88+'px',"width":$(".filterBox").width()-400+'px'})
     '/sys/role/getRoleMenu'//获取角色菜权限单等数据
     '/sys/role/list' //获取角色列表信息
     '/sys/role/listForUser'//获取角色下拉列表信息
     '/sys/role/saveRoleMenu'//修改角色菜单权限数据
     getRoleList()
-    listForUser()
     getRoleMenu()
     // saveRoleMenu()
-    function getRoleMenu(){
-        post('/sys/role/getRoleMenu',{roleId:-1}).then(res =>{
+    function getRoleMenu(id){
+        if(!id)return
+        post('/sys/role/getRoleMenu',{roleId:id}).then(res =>{
             let data = res.data;
-            console.log(data)
             if(data.code == '0'){
-
+                curData = data.data
+                roleSetLis(data.data)
             }else{}
         }).catch((e) =>{
         
@@ -35,18 +41,18 @@ $(function(){
     function getRoleList(){
         post('/sys/role/list').then(res =>{
             let data = res.data;
-            console.log(data)
             if(data.code == '0'){
-
+                roleLeftLis(data.data)
+                curId=data.data.length>0&&data.data[0].id||''
+                getRoleMenu(curId)
             }else{}
         }).catch((e) =>{
         
         })
     }
-    function listForUser(){
-        post('/sys/role/listForUser').then(res =>{
+    function saveRoleMenu(params){
+        post('/sys/role/saveRoleMenu',params).then(res =>{
             let data = res.data;
-            console.log(data)
             if(data.code == '0'){
                 
             }else{}
@@ -54,15 +60,186 @@ $(function(){
         
         })
     }
-    function saveRoleMenu(){
-        post('/sys/role/saveRoleMenu').then(res =>{
-            let data = res.data;
-            console.log(data)
-            if(data.code == '0'){
-                
-            }else{}
-        }).catch((e) =>{
-        
+    function roleSetLis(data){
+        let str = '',sonStr=''
+        for(let i = 0;i < data.length;i++){
+            let tmp = data[i]
+            str += `
+                <div class="mainSys" data-index="${i}" data-menuId="${data[i].menuId}">
+                    <div data-menuId="${data[i].menuId}" data-haveMenu="${data[i].haveMenu}" data-parentId="${data[i].parentId}" class="parentSet selectToggle"><img src="${data[i].haveMenu == 1?require('../images/icon_check.png'):require('../images/icon_unchecked.png')}" alt=""> ${data[i].menuName}</div>
+                    ${
+                        (function(tmp){
+                            if(tmp.sonMenuDTOList&&tmp.sonMenuDTOList.length>0){
+                                return getTwoLis(tmp.sonMenuDTOList)
+                            }else if(tmp.sysPermissionDTOList&&tmp.sysPermissionDTOList.length>0){
+                                return getOneLis(tmp.sysPermissionDTOList)
+                            }
+                        })(tmp)
+                    }
+                </div>
+            `
+        }
+        $(".mainSysWrap").html(str)
+        saveAllSet()
+    }
+    function saveAllSet(){
+        $(".selectToggle").click(function(){//点击修改curTreeData，curData
+            let permissionId = $(this).attr("data-permissionId")
+            let menuId = $(this).attr("data-menuId")
+            let parentId = $(this).attr("data-parentId")
+            let haveMenu = $(this).attr("data-haveMenu")
+            let grandParentId = $(this).parents(".mainSys").attr("data-menuId")
+            let grandIndex = $(this).parents(".mainSys").attr("data-index")
+            let tmpSelectData = null,tmpSelectDataOr=[];
+            if(grandParentId == 3||grandParentId == 2){//循环
+                // console.log(curData[grandIndex])
+                let tmpData = curData[grandIndex];
+                let tmpDataLis = curData[grandIndex].sonMenuDTOList;
+                if(parentId == -1&&menuId&&menuId == tmpData.menuId) {//第一层，全选反选
+                    tmpData.haveMenu = haveMenu==0?'1':'0'
+                }else if(permissionId){//第三层
+                    for(let i = 0;i < tmpDataLis.length;i++){
+                        let num = 0
+                        let tmpPer = tmpDataLis[i].sysPermissionDTOList
+                        for(let m = 0;m < tmpPer.length;m++){//所有相同id联动
+                            if(tmpPer[m].permissionId == permissionId){//当前选中或者取消
+                                tmpPer[m].havePermission = haveMenu==0?'1':'0'
+                            }
+                            if(tmpPer[m].havePermission == 0){
+                                ++num
+                            }
+                        }
+                        if(num == tmpPer.length){//内层全部都取消了，父级取消选中
+                            tmpDataLis[i].haveMenu = '0'
+                        }else{
+                            tmpDataLis[i].haveMenu = '1'
+                        }
+                    }
+                }else{//第二层,内层全选反选
+                    for(let i = 0;i < tmpDataLis.length;i++){
+                        let tmpPer = tmpDataLis[i].sysPermissionDTOList
+                        if(menuId&&menuId == tmpDataLis[i].menuId){//第二层,里面的全部选中或者全部取消
+                            tmpSelectData = tmpDataLis[i]
+                            // console.log(tmpDataLis[i],788787878)
+                            tmpDataLis[i].haveMenu = haveMenu==0?'1':'0'
+                            for(let m = 0;m < tmpPer.length;m++){//所有相同id联动
+                                tmpPer[m].havePermission = haveMenu==0?'1':'0'
+                            }
+                        }
+                    }
+                    //麻烦，全选后遍历统计数据中有相同id的也要选中,三级自动选中后二级要判断是取消还是选中
+                    for(let i = 0;i < tmpDataLis.length;i++){//二级循环
+                        let num = 0
+                        if(menuId&&menuId != tmpDataLis[i].menuId){//第二层,没有点击，自动选中第三层相同id的
+                            let tmpPer = tmpDataLis[i].sysPermissionDTOList
+                            for(let m = 0;m < tmpPer.length;m++){//所有相同id联动,三级循环
+                                for(let n = 0;n < tmpSelectData.sysPermissionDTOList.length;n++){
+                                    if(tmpSelectData.sysPermissionDTOList[n].permissionId == tmpPer[m].permissionId){
+                                       tmpPer[m].havePermission = haveMenu==0?'1':'0'
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    for(let i = 0;i < tmpDataLis.length;i++){//二级循环
+                        let num = 0
+                        let tmpPer = tmpDataLis[i].sysPermissionDTOList
+                        for(let m = 0;m < tmpPer.length;m++){//所有相同id联动，三级循环
+                            if(tmpPer[m].havePermission == 0){
+                                ++num
+                            }
+                        }
+                        if(num == tmpPer.length){//内层全部都取消了，父级取消选中
+                            tmpDataLis[i].haveMenu = '0'
+                        }else{
+                            tmpDataLis[i].haveMenu = '1'
+                        }
+                    }
+                }
+            }else{
+                let tmpData = curData[grandIndex];
+                let tmpDataLis = curData[grandIndex].sysPermissionDTOList;
+                if(permissionId&&parentId==tmpData.menuId){//当前第二层
+                    let num = 0;
+                    for(let i = 0;i < tmpDataLis.length;i++){//判断当前点的是第几层
+                        let tmpPer = tmpDataLis[i]
+                        if(tmpPer.permissionId == permissionId){//当前选中或者取消
+                            tmpPer.havePermission = haveMenu==0?'1':'0'
+                        }
+                        if(tmpPer.havePermission == 0){
+                            ++num
+                        }
+                    }
+                    if(num == tmpDataLis.length){//内层全部都取消了，父级取消选中
+                        tmpData.haveMenu = '0'
+                    }else{
+                        tmpData.haveMenu = '1'
+                    }
+                }else if(menuId&&menuId == tmpData.menuId){//第一层，全选反选
+                    tmpData.haveMenu = haveMenu==0?'1':'0'
+                    for(let i = 0;i < tmpDataLis.length;i++){
+                        let tmpPer = tmpDataLis[i]
+                        tmpPer.havePermission = haveMenu==0?'1':'0'
+                    }
+                }
+            }
+            // getParams()
+            // let params = {
+            //     "roleId": curId,
+            //     "sysMenuSaveVOList": menuIdLis,
+            //     "sysPermissionSaveVOList": permissionIdLis
+            // }
+
+            roleSetLis(curData)
         })
     }
+    function getParams(){//type=0删除，1添加
+        console.log(curData)
+        let permissionIdLis=[],menuIdLis=[];
+        for(let i = 0;i < curData.length;i++){
+            let tmpData = curData[i]
+        }
+    }
+    function getOneLis(data){
+        let tmpstr = ''
+        for(let i = 0;i <data.length;i++){
+            tmpstr += `
+                <li data-permissionId="${data[i].permissionId}" data-haveMenu="${data[i].havePermission}" data-parentId="${data[i].parentId}" class="selectToggle"><img src="${data[i].havePermission==1?require('../images/icon_check.png'):require('../images/icon_unchecked.png')}" alt=""> ${data[i].permissionName}</li>
+            `
+        }
+        return '<ul class="sonSet clearfix">'+tmpstr+'</ul>'
+    }
+    function getTwoLis(data){
+        curTreeData = data
+        let tmpstr = ''
+        for(let i = 0;i <data.length;i++){
+            tmpstr += `
+                <div class="sysWrap">
+                    <div data-menuId="${data[i].menuId}" data-haveMenu="${data[i].haveMenu}" data-parentId="${data[i].parentId}" class="parentSet selectToggle"><img src="${data[i].haveMenu == 1?require('../images/icon_check.png'):require('../images/icon_unchecked.png')}" alt=""> ${data[i].menuName}</div>
+                    <ul class="sonSet clearfix">
+                        ${getTreeLis(data[i].sysPermissionDTOList,data[i].menuId)}
+                    </ul>
+                </div>
+            `
+        }
+        return tmpstr
+    }
+    function getTreeLis(data){
+        let tmpstr = ''
+        for(let i = 0;i <data.length;i++){
+            tmpstr += `
+                <li data-permissionId="${data[i].permissionId}" data-haveMenu="${data[i].havePermission}" data-parentId="${data[i].parentId}" class="selectToggle"><img src="${data[i].havePermission==1?require('../images/icon_check.png'):require('../images/icon_unchecked.png')}" alt=""> ${data[i].permissionName}</li>
+            `
+        }
+        return tmpstr
+    }
+    function roleLeftLis(data){
+        let str = ''
+        for(let i = 0;i < data.length;i++){
+            str+=`
+                <li class="ellipsis" data-id="${data[i].id}">${data[i].name} <span class="editRole">编辑</span></li>
+            `
+        }
+        $(".leftMenu ul").html(str)
+    }
 })