roleManager.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. const $ = require('jquery');
  2. require("../css/roleManager.less");
  3. require('./../resource/jquery-ui/jquery-ui.min.js');
  4. require('./modal.js');
  5. const {api} = require('./api.js')
  6. const {post} = require('./utils.js')
  7. const switchIconOpen = require("./../images/btn_open.png")
  8. const switchIconClose = require("./../images/btn_close.png")
  9. const iconDown= require("./../images/arrow_down.png")
  10. const iconUp = require("./../images/arrow_up.png")
  11. const arrowLeft= require("./../images/arrow_left.png")
  12. const arrowRight = require("./../images/arrow_right.png")
  13. $(function(){
  14. let curId="",curData="",curTreeData=[],permissionIdLis=[],menuIdLis=[];
  15. $(window).resize(function(){
  16. $(".role .leftMenu").css("height",$(window).height()-128+'px')
  17. $(".role .rightMenu").css({"height":$(window).height()-88+'px',"width":$(".filterBox").width()-400+'px'})
  18. })
  19. $(".role .leftMenu").css("height",$(window).height()-128+'px')
  20. $(".role .rightMenu").css({"height":$(window).height()-88+'px',"width":$(".filterBox").width()-400+'px'})
  21. $(".saveRoleSet").click(function(){//保存角色设置
  22. getParams()
  23. $.alerModal({type:"loading"});
  24. let params = {
  25. "roleId": curId,
  26. "sysMenuSaveVOList": menuIdLis,
  27. "sysPermissionSaveVOList": permissionIdLis
  28. }
  29. saveRoleMenu(params)
  30. })
  31. '/sys/role/getRoleMenu'//获取角色菜权限单等数据
  32. '/sys/role/list' //获取角色列表信息
  33. '/sys/role/listForUser'//获取角色下拉列表信息
  34. '/sys/role/saveRoleMenu'//修改角色菜单权限数据
  35. getRoleList()
  36. getRoleMenu()
  37. // saveRoleMenu()
  38. function getRoleMenu(id){
  39. if(!id)return
  40. post('/sys/role/getRoleMenu',{roleId:id}).then(res =>{
  41. let data = res.data;
  42. if(data.code == '0'){
  43. curData = data.data
  44. roleSetLis(data.data)
  45. }else{}
  46. }).catch((e) =>{
  47. })
  48. }
  49. function getRoleList(){
  50. post('/sys/role/list').then(res =>{
  51. let data = res.data;
  52. if(data.code == '0'){
  53. roleLeftLis(data.data)
  54. curId=data.data.length>0&&data.data[0].id||''
  55. getRoleMenu(curId)
  56. }else{}
  57. }).catch((e) =>{
  58. })
  59. }
  60. function saveRoleMenu(params){
  61. post('/sys/role/saveRoleMenu',params).then(res =>{
  62. let data = res.data;
  63. $(".loading").remove()
  64. if(data.code == '0'){
  65. $.alerModal({type:"tip",message:"保存成功"});
  66. }else{
  67. }
  68. }).catch((e) =>{
  69. $(".loading").remove()
  70. })
  71. }
  72. function roleSetLis(data){
  73. let str = '',sonStr=''
  74. for(let i = 0;i < data.length;i++){
  75. let tmp = data[i]
  76. str += `
  77. <div class="mainSys" data-index="${i}" data-menuId="${data[i].menuId}">
  78. <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>
  79. ${
  80. (function(tmp){
  81. if(tmp.sonMenuDTOList&&tmp.sonMenuDTOList.length>0){
  82. return getTwoLis(tmp.sonMenuDTOList)
  83. }else if(tmp.sysPermissionDTOList&&tmp.sysPermissionDTOList.length>0){
  84. return getOneLis(tmp.sysPermissionDTOList)
  85. }
  86. })(tmp)
  87. }
  88. </div>
  89. `
  90. }
  91. $(".mainSysWrap").html(str)
  92. saveAllSet()
  93. }
  94. function saveAllSet(){
  95. $(".selectToggle").click(function(){//点击修改curTreeData,curData
  96. let permissionId = $(this).attr("data-permissionId")
  97. let menuId = $(this).attr("data-menuId")
  98. let parentId = $(this).attr("data-parentId")
  99. let haveMenu = $(this).attr("data-haveMenu")
  100. let grandParentId = $(this).parents(".mainSys").attr("data-menuId")
  101. let grandIndex = $(this).parents(".mainSys").attr("data-index")
  102. let tmpSelectData = null,tmpSelectDataOr=[];
  103. if(grandParentId == 3||grandParentId == 2){//循环
  104. // console.log(curData[grandIndex])
  105. let tmpData = curData[grandIndex];
  106. let tmpDataLis = curData[grandIndex].sonMenuDTOList;
  107. if(parentId == -1&&menuId&&menuId == tmpData.menuId) {//第一层,全选反选,
  108. tmpData.haveMenu = haveMenu==0?'1':'0'
  109. for(let i = 0;i < tmpDataLis.length;i++){
  110. let num = 0
  111. let tmpPer = tmpDataLis[i].sysPermissionDTOList
  112. tmpDataLis[i].haveMenu = haveMenu==0?'1':'0'
  113. for(let m = 0;m < tmpPer.length;m++){//所有相同id联动
  114. tmpPer[m].havePermission = haveMenu==0?'1':'0'
  115. }
  116. }
  117. }else if(permissionId){//第三层
  118. let tmpNum = 0
  119. for(let i = 0;i < tmpDataLis.length;i++){
  120. let num = 0
  121. let tmpPer = tmpDataLis[i].sysPermissionDTOList
  122. for(let m = 0;m < tmpPer.length;m++){//所有相同id联动
  123. if(tmpPer[m].permissionId == permissionId){//当前选中或者取消
  124. tmpPer[m].havePermission = haveMenu==0?'1':'0'
  125. }
  126. if(tmpPer[m].havePermission == 0){
  127. ++num
  128. }
  129. }
  130. // if(num == tmpPer.length){//内层全部都取消了,父级取消选中
  131. // tmpDataLis[i].haveMenu = '0'
  132. // }else{
  133. // tmpDataLis[i].haveMenu = '1'
  134. // }
  135. //二层否有选中,有则第一层选中,否则第一层不选中
  136. if(tmpDataLis[i].haveMenu == 0){
  137. ++tmpNum
  138. }
  139. }
  140. if(tmpNum == tmpDataLis.length){//二层都是取消状态,一层选中取消掉否则选中
  141. tmpData.haveMenu = 0
  142. }else{
  143. tmpData.haveMenu = 1
  144. }
  145. }else{//第二层,内层全选反选
  146. let tmpNum = 0
  147. for(let i = 0;i < tmpDataLis.length;i++){
  148. let tmpPer = tmpDataLis[i].sysPermissionDTOList
  149. if(menuId&&menuId == tmpDataLis[i].menuId){//第二层,里面的全部选中或者全部取消
  150. tmpSelectData = tmpDataLis[i]
  151. tmpDataLis[i].haveMenu = haveMenu==0?'1':'0'
  152. for(let m = 0;m < tmpPer.length;m++){//所有相同id联动
  153. tmpPer[m].havePermission = haveMenu==0?'1':'0'
  154. }
  155. }
  156. //二层否有选中,有则第一层选中,否则第一层不选中
  157. if(tmpDataLis[i].haveMenu == 0){
  158. ++tmpNum
  159. }
  160. }
  161. if(tmpNum == tmpDataLis.length){//二层都是取消状态,一层选中取消掉否则选中
  162. tmpData.haveMenu = 0
  163. }else{
  164. tmpData.haveMenu = 1
  165. }
  166. //全选后遍历统计数据中有相同id的也要选中,三级自动选中后二级要判断是取消还是选中
  167. for(let i = 0;i < tmpDataLis.length;i++){//二级循环
  168. let num = 0
  169. if(menuId&&menuId != tmpDataLis[i].menuId){//第二层,没有点击,自动选中第三层相同id的
  170. let tmpPer = tmpDataLis[i].sysPermissionDTOList
  171. for(let m = 0;m < tmpPer.length;m++){//所有相同id联动,三级循环
  172. for(let n = 0;n < tmpSelectData.sysPermissionDTOList.length;n++){
  173. if(tmpSelectData.sysPermissionDTOList[n].permissionId == tmpPer[m].permissionId){
  174. tmpPer[m].havePermission = haveMenu==0?'1':'0'
  175. }
  176. }
  177. }
  178. }
  179. }
  180. for(let i = 0;i < tmpDataLis.length;i++){//二级循环
  181. let num = 0
  182. let tmpPer = tmpDataLis[i].sysPermissionDTOList
  183. for(let m = 0;m < tmpPer.length;m++){//所有相同id联动,三级循环
  184. if(tmpPer[m].havePermission == 0){
  185. ++num
  186. }
  187. }
  188. if(num == tmpPer.length){//内层全部都取消了,父级取消选中
  189. tmpDataLis[i].haveMenu = '0'
  190. }else{
  191. tmpDataLis[i].haveMenu = '1'
  192. }
  193. }
  194. }
  195. }else{
  196. let tmpData = curData[grandIndex];
  197. let tmpDataLis = curData[grandIndex].sysPermissionDTOList;
  198. if(permissionId&&parentId==tmpData.menuId){//当前第二层
  199. let num = 0;
  200. for(let i = 0;i < tmpDataLis.length;i++){//判断当前点的是第几层
  201. let tmpPer = tmpDataLis[i]
  202. if(tmpPer.permissionId == permissionId){//当前选中或者取消
  203. tmpPer.havePermission = haveMenu==0?'1':'0'
  204. }
  205. if(tmpPer.havePermission == 0){
  206. ++num
  207. }
  208. }
  209. if(num == tmpDataLis.length){//内层全部都取消了,父级取消选中
  210. tmpData.haveMenu = '0'
  211. }else{
  212. tmpData.haveMenu = '1'
  213. }
  214. }else if(menuId&&menuId == tmpData.menuId){//第一层,全选反选
  215. tmpData.haveMenu = haveMenu==0?'1':'0'
  216. for(let i = 0;i < tmpDataLis.length;i++){
  217. let tmpPer = tmpDataLis[i]
  218. tmpPer.havePermission = haveMenu==0?'1':'0'
  219. }
  220. }
  221. }
  222. roleSetLis(curData)
  223. getParams()
  224. })
  225. }
  226. function getParams(){//type=0删除,1添加,共三层
  227. permissionIdLis=[],menuIdLis=[];
  228. for(let i = 0;i < curData.length;i++){//最外层的
  229. let tmpData = curData[i]
  230. if(tmpData.haveMenu == 1){//第一层选中了,继续遍历第二层
  231. menuIdLis.push({menuId:tmpData.menuId})
  232. if(tmpData.sonMenuDTOList&&tmpData.sonMenuDTOList.length > 0){//说明有第三层
  233. let tmpSon = tmpData.sonMenuDTOList
  234. for(let m = 0;m < tmpSon.length;m++){
  235. let tmpSym = tmpSon[m]
  236. if(tmpSym.haveMenu == 1){//有选中,遍历第三层
  237. menuIdLis.push({menuId:tmpSym.menuId})
  238. for(let n =0;n < tmpSym.sysPermissionDTOList.length;n++){
  239. if(tmpSym.sysPermissionDTOList[n].havePermission == 1){
  240. permissionIdLis.push({permissionId:tmpSym.sysPermissionDTOList[n].permissionId})
  241. }
  242. }
  243. }
  244. }
  245. }else{//只有两层
  246. if(tmpData.haveMenu == 1){
  247. for(let j = 0;j < tmpData.sysPermissionDTOList.length;j++){
  248. let tmpS = tmpData.sysPermissionDTOList[j]
  249. if(tmpS.havePermission == 1){
  250. permissionIdLis.push({permissionId:tmpS.permissionId})
  251. }
  252. }
  253. }
  254. }
  255. }
  256. }
  257. // console.log(permissionIdLis,menuIdLis)
  258. }
  259. function getOneLis(data){
  260. let tmpstr = ''
  261. for(let i = 0;i <data.length;i++){
  262. tmpstr += `
  263. <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>
  264. `
  265. }
  266. return '<ul class="sonSet clearfix">'+tmpstr+'</ul>'
  267. }
  268. function getTwoLis(data){
  269. curTreeData = data
  270. let tmpstr = ''
  271. for(let i = 0;i <data.length;i++){
  272. tmpstr += `
  273. <div class="sysWrap">
  274. <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>
  275. <ul class="sonSet clearfix">
  276. ${getTreeLis(data[i].sysPermissionDTOList,data[i].menuId)}
  277. </ul>
  278. </div>
  279. `
  280. }
  281. return tmpstr
  282. }
  283. function getTreeLis(data){
  284. let tmpstr = ''
  285. for(let i = 0;i <data.length;i++){
  286. tmpstr += `
  287. <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>
  288. `
  289. }
  290. return tmpstr
  291. }
  292. function roleLeftLis(data){
  293. let str = ''
  294. for(let i = 0;i < data.length;i++){
  295. str+=`
  296. <li class="ellipsis editRole" style="background:${i == 0?'#F0F5FF':'#fff'}" data-id="${data[i].id}">${data[i].name}</li>
  297. `
  298. }
  299. $(".leftMenu ul").html(str)
  300. changeRole()
  301. }
  302. function changeRole(){
  303. $(".editRole").click(function(){
  304. let id = $(this).attr("data-id")
  305. curId = id
  306. permissionIdLis=[],menuIdLis=[];
  307. $(".rightMenu").scrollTop(0)
  308. $(this).css({"background-color":"#F0F5FF"}).siblings().css("background-color","#fff")
  309. getRoleMenu(id)
  310. })
  311. }
  312. })