roleManager.js 15 KB

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