roleManager.js 16 KB

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