roleManager.js 16 KB

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