roleManager.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  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, initScroll} = 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()-120+'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. getRoleList()
  34. getRoleMenu()
  35. // saveRoleMenu()
  36. function getRoleMenu(id){
  37. if(!id)return
  38. post(api.getRoleMenu,{roleId:id}).then(res =>{
  39. let data = res.data;
  40. if(data.code == '0'){
  41. curData = data.data
  42. roleSetLis(data.data)
  43. }else{}
  44. }).catch((e) =>{
  45. })
  46. }
  47. function getRoleList(){
  48. post(api.list).then(res =>{
  49. let data = res.data;
  50. if(data.code == '0'){
  51. roleLeftLis(data.data)
  52. curId=data.data.length>0&&data.data[0].id||''
  53. getRoleMenu(curId)
  54. }else{}
  55. }).catch((e) =>{
  56. })
  57. }
  58. function saveRoleMenu(params){
  59. post(api.saveRoleMenu,params).then(res =>{
  60. let data = res.data;
  61. $(".loading").remove()
  62. if(data.code == '0'){
  63. $.alerModal({type:"tip",message:"保存成功"});
  64. }else{
  65. }
  66. }).catch((e) =>{
  67. $(".loading").remove()
  68. })
  69. }
  70. // YH-QXGL-JSGL
  71. $(".menu .page", parent.document).removeClass("active")
  72. $(parent.document).find(".menu .page[code=YH-QXGL-JSGL]").addClass("active")
  73. function roleSetLis(data){
  74. let str = '',sonStr=''
  75. for(let i = 0;i < data.length;i++){
  76. let tmp = data[i]
  77. str += `
  78. <div class="mainSys" data-index="${i}" data-menuId="${data[i].menuId}">
  79. <div class="parentSet">
  80. <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>
  81. </div>
  82. ${
  83. (function(tmp){
  84. if(tmp.sonMenuDTOList&&tmp.sonMenuDTOList.length>0){
  85. return getTwoLis(tmp.sonMenuDTOList)
  86. }else if(tmp.sysPermissionDTOList&&tmp.sysPermissionDTOList.length>0){
  87. return getOneLis(tmp.sysPermissionDTOList)
  88. }
  89. })(tmp)
  90. }
  91. </div>
  92. `
  93. }
  94. $(".mainSysWrap").html(str)
  95. saveAllSet()
  96. // initScroll("mainSysWrap","Y",1)
  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||grandParentId==17||grandParentId==18){//循环
  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&&tmpPer.length>0){//内层全部都取消了,父级取消选中
  193. tmpDataLis[i].haveMenu = '0'
  194. }else{
  195. // if(menuId&&menuId == tmpDataLis[i].menuId){
  196. // tmpDataLis[i].haveMenu = '1'
  197. // }
  198. }
  199. }
  200. }
  201. }else{
  202. let tmpData = curData[grandIndex];
  203. let tmpDataLis = curData[grandIndex].sysPermissionDTOList;
  204. if(permissionId&&parentId==tmpData.menuId){//当前第二层
  205. let num = 0;
  206. for(let i = 0;i < tmpDataLis.length;i++){//判断当前点的是第几层
  207. let tmpPer = tmpDataLis[i]
  208. if(tmpPer.permissionId == permissionId){//当前选中或者取消
  209. tmpPer.havePermission = haveMenu==0?'1':'0'
  210. }
  211. if(tmpPer.havePermission == 0){
  212. ++num
  213. }
  214. }
  215. if(num == tmpDataLis.length){//内层全部都取消了,父级取消选中
  216. tmpData.haveMenu = '0'
  217. }else{
  218. tmpData.haveMenu = '1'
  219. }
  220. }else if(menuId&&menuId == tmpData.menuId){//第一层,全选反选
  221. tmpData.haveMenu = haveMenu==0?'1':'0'
  222. for(let i = 0;i < tmpDataLis.length;i++){
  223. let tmpPer = tmpDataLis[i]
  224. tmpPer.havePermission = haveMenu==0?'1':'0'
  225. }
  226. }
  227. }
  228. roleSetLis(curData)
  229. getParams()
  230. })
  231. }
  232. function getParams(){//type=0删除,1添加,共三层
  233. permissionIdLis=[],menuIdLis=[];
  234. for(let i = 0;i < curData.length;i++){//最外层的
  235. let tmpData = curData[i]
  236. if(tmpData.haveMenu == 1){//第一层选中了,继续遍历第二层
  237. menuIdLis.push({menuId:tmpData.menuId})
  238. if(tmpData.sonMenuDTOList&&tmpData.sonMenuDTOList.length > 0){//说明有第三层
  239. let tmpSon = tmpData.sonMenuDTOList
  240. for(let m = 0;m < tmpSon.length;m++){
  241. let tmpSym = tmpSon[m]
  242. if(tmpSym.haveMenu == 1){//有选中,遍历第三层
  243. menuIdLis.push({menuId:tmpSym.menuId})
  244. for(let n =0;n < tmpSym.sysPermissionDTOList.length;n++){
  245. if(tmpSym.sysPermissionDTOList[n].havePermission == 1){
  246. permissionIdLis.push({permissionId:tmpSym.sysPermissionDTOList[n].permissionId})
  247. }
  248. }
  249. }
  250. }
  251. }else{//只有两层
  252. if(tmpData.haveMenu == 1){
  253. for(let j = 0;j < tmpData.sysPermissionDTOList.length;j++){
  254. let tmpS = tmpData.sysPermissionDTOList[j]
  255. if(tmpS.havePermission == 1){
  256. permissionIdLis.push({permissionId:tmpS.permissionId})
  257. }
  258. }
  259. }
  260. }
  261. }
  262. }
  263. // console.log(permissionIdLis,menuIdLis)
  264. }
  265. function getOneLis(data){
  266. let tmpstr = ''
  267. for(let i = 0;i <data.length;i++){
  268. tmpstr += `
  269. <li>
  270. <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>
  271. </li>
  272. `
  273. }
  274. return '<ul class="sonSet clearfix">'+tmpstr+'</ul>'
  275. }
  276. function getTwoLis(data){
  277. curTreeData = data
  278. let tmpstr = ''
  279. for(let i = 0;i <data.length;i++){
  280. tmpstr += `
  281. <div class="sysWrap">
  282. <div class="parentSet">
  283. <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>
  284. </div>
  285. <ul class="sonSet clearfix">
  286. ${getTreeLis(data[i].sysPermissionDTOList,data[i].menuId)}
  287. </ul>
  288. </div>
  289. `
  290. }
  291. return tmpstr
  292. }
  293. function getTreeLis(data){
  294. let tmpstr = ''
  295. for(let i = 0;i <data.length;i++){
  296. tmpstr += `
  297. <li>
  298. <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>
  299. </li>
  300. `
  301. }
  302. return tmpstr
  303. }
  304. function roleLeftLis(data){
  305. let str = ''
  306. for(let i = 0;i < data.length;i++){
  307. str+=`
  308. <li class="ellipsis editRole" style="background:${i == 0?'#F0F5FF':'#fff'}" data-id="${data[i].id}">${data[i].name}</li>
  309. `
  310. }
  311. $(".leftMenu ul").html(str)
  312. changeRole()
  313. }
  314. function changeRole(){
  315. $(".editRole").click(function(){
  316. let id = $(this).attr("data-id")
  317. curId = id
  318. permissionIdLis=[],menuIdLis=[];
  319. $(".mainSysWrap").scrollTop(0)
  320. $(this).css({"background-color":"#F0F5FF"}).siblings().css("background-color","#fff")
  321. getRoleMenu(id)
  322. })
  323. }
  324. })