roleMenu.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="renderer" content="webkit" />
  7. <title>角色菜单</title>
  8. <link rel="stylesheet" href="../cross/css/cross.css" type="text/css" />
  9. <link rel="stylesheet" href="../cross/css/cross.ui.css" type="text/css" />
  10. <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" />
  11. <link rel="stylesheet" href="../widget/artDialog/4.1.7/css/artDialog.css" type="text/css" />
  12. <link rel="stylesheet" href="../widget/zTree/3.5.18/css/zTreeStyle.min.css" type="text/css" />
  13. </head>
  14. <style>
  15. .add-del-w { width: 100px; margin:150px 10px 0;}
  16. .w420 {width: 420px;}
  17. .w970 {width: 970px;}
  18. </style>
  19. <body>
  20. <div>
  21. <div class="ptb10 c-f14 c-666" id="sysHtml">
  22. </div>
  23. <div class="bgc-f9f9f9">
  24. <div class="c-main w970 ptb15">
  25. <div class="clearfix">
  26. <div class="fl w420 bgc-fff">
  27. <div class="c-border list">
  28. <div class="plr15 ptb10 c-f14 c-666 c-border-b">角色</div>
  29. <div class="ptb10" style="height:380px; overflow:auto;">
  30. <div class="c-line-h2" id="role-radio-list">
  31. <ul id="rolelist">
  32. </ul>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="fl add-del-w">
  38. </div>
  39. <div class="fl w420 bgc-fff">
  40. <div class="c-border list">
  41. <div class="plr15 ptb10 c-f14 c-666 c-border-b">菜单</div>
  42. <div class="ptb10" style="height:380px; overflow:auto;">
  43. <ul id="menuTree" class="ztree"></ul>
  44. <!-- <ul>
  45. <li class="c-999 c-f15"><label class="chooseAllSelected"><input type="checkbox" name="" id="" />全选</label></li>
  46. <div id="menuList"></div>
  47. </ul> -->
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="c-t-center">
  55. <a href="javascript:saveRoleMenu();" class="c-btn c-btn-blue"><i class="iconfont">&#xe652;</i>保存</a>
  56. </div>
  57. </div>
  58. <script type="text/javascript" src="../cross/js/jquery/1.8.3/jquery.js"></script>
  59. <script type="text/javascript" src="../cross/js/cross.ui.js"></script>
  60. <script type="text/javascript" src="../widget/artDialog/4.1.7/js/artDialog.js"></script>
  61. <script type="text/javascript" src="../widget/zTree/3.5.18/js/jquery.ztree.min.js"></script>
  62. <script type="text/javascript">
  63. var artLoading = null;
  64. var roleMenu;
  65. $(function(){
  66. getRole();
  67. getMenu();
  68. //选中角色事件
  69. $('#role-radio-list').on('click','label.radio',function(){
  70. var $this = $(this);
  71. var value = $this.find('input:radio').val();
  72. getRoleMenu(value);
  73. });
  74. //菜单全选
  75. $('.chooseAllSelected').click(function(){
  76. if($(this).find(':checkbox').is(':checked')) {
  77. $(this).parent().siblings().find(':checkbox').prop({'checked':true});
  78. } else {
  79. $(this).parent().siblings().find(':checkbox').prop({'checked':false});
  80. }
  81. });
  82. });
  83. //获取角色
  84. function getRole() {
  85. var param = {};
  86. param.typeName = "roles";
  87. artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  88. $.ajax({
  89. url : "/JkEdu/configDict/getDict",
  90. cache : false,
  91. async : false,
  92. data: param,
  93. success:function(data){
  94. artLoading.close();
  95. var data = eval("(" + data + ")");
  96. if (data.Code == 10000) {
  97. var ret = data.result;
  98. var html = '';
  99. $.each(ret, function(i, v) {
  100. html += '<li><label class="radio demo-radio-elem"><input type="radio" name="radiogroup" value="'+v.code+'" data-id="'+v.codeName+'">';
  101. html += '<i class="icon-radio"></i>' + v.codeName;
  102. html += '</label></li>';
  103. });
  104. $("#rolelist").append(html);
  105. $('#role-radio-list').radioGroup({elemClass:'.demo-radio-elem'});
  106. } else {
  107. ask(data.Message);
  108. }
  109. }
  110. });
  111. }
  112. var setting = {
  113. check: {
  114. enable: true
  115. },
  116. data: {
  117. simpleData: {
  118. enable: true
  119. }
  120. }
  121. };
  122. //获取菜单
  123. function getMenu() {
  124. artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  125. $.post("/JkEdu/menu/getMenu", {}, function(result) {
  126. artLoading.close();
  127. var data = eval("(" + result + ")");
  128. if (data.Code == 1) {
  129. var ret = data.Result;
  130. var html = '';
  131. var zNodes = new Array();
  132. var temp = {};
  133. $.each(ret, function(i, v) {
  134. //获取角色是否配置菜单
  135. var flag = 0;
  136. if (roleMenu != null && roleMenu != "") {
  137. $.each(roleMenu, function(j, t) {
  138. if (t.menuid == v.menuid) {
  139. flag = 1;
  140. return false;
  141. }
  142. });
  143. }
  144. //配置菜单树形
  145. temp = {};
  146. if (v.fathermenuid && v.fathermenuid != null && v.fathermenuid != "") {
  147. if (flag == 1) {
  148. temp = {
  149. id : v.menuid,
  150. pId : v.fathermenuid,
  151. name : v.menuname,
  152. checked : true,
  153. open : true
  154. }
  155. } else {
  156. temp = {
  157. id : v.menuid,
  158. pId : v.fathermenuid,
  159. name : v.menuname,
  160. open : true
  161. }
  162. }
  163. zNodes.push(temp);
  164. } else {
  165. if (flag == 1) {
  166. temp = {
  167. id : v.menuid,
  168. pId : 0,
  169. name : v.menuname,
  170. checked : true,
  171. open : true
  172. }
  173. } else {
  174. temp = {
  175. id : v.menuid,
  176. pId : 0,
  177. name : v.menuname,
  178. open : true
  179. }
  180. }
  181. zNodes.push(temp);
  182. }
  183. });
  184. $.fn.zTree.init($("#menuTree"), setting, zNodes);
  185. } else {
  186. ask(data.Message);
  187. }
  188. });
  189. }
  190. //获取该角色配置的菜单
  191. function getRoleMenu(roleId) {
  192. var param = {};
  193. param.roleId = roleId;
  194. artLoading = art.dialog({lock: true, content:'<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  195. $.post("/JkEdu/menu/getMenuRole", param, function(data){
  196. artLoading.close();
  197. var data = eval("(" + data + ")");
  198. if (data.Code == 1) {
  199. roleMenu = data.Result;
  200. getMenu();
  201. } else {
  202. ask(data.Message);
  203. }
  204. });
  205. }
  206. //保存角色配置菜单
  207. function saveRoleMenu() {
  208. //获取角色ID和角色名称
  209. var roleId = $('#role-radio-list').radioGroup({operate:'getKey'});
  210. var roleName = $('#role-radio-list').radioGroup({operate:'other',opreateDataOther:'data-id'});
  211. if (roleId == null || roleId == "") {
  212. ask("请选中要配置的角色!");
  213. return;
  214. }
  215. //获取配置的菜单ID
  216. var menuId = "";
  217. var treeObj = $.fn.zTree.getZTreeObj("menuTree");
  218. var nodes = treeObj.getCheckedNodes(true);
  219. $.each(nodes, function(i, v) {
  220. if (v.id != 0) {
  221. menuId += v.id + ",";
  222. }
  223. });
  224. if (menuId != "") {
  225. menuId = menuId.substring(0, menuId.length-1);
  226. }
  227. var param = {};
  228. param.roleId = roleId;
  229. param.roleName = roleName;
  230. param.menuId = menuId;
  231. artLoading = art.dialog({lock: true, content:'<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  232. $.post("/JkEdu/menu/saveMenuRole", param, function(data){
  233. artLoading.close();
  234. var data = eval("(" + data + ")");
  235. ask(data.Message);
  236. });
  237. }
  238. //提示信息
  239. function ask(message){
  240. art.dialog({
  241. lock : true,
  242. artIcon : 'ask',
  243. opacity : 0.4,
  244. width : 250,
  245. title : '提示',
  246. content : message,
  247. ok : function() {
  248. }
  249. });
  250. }
  251. </script>
  252. </body>
  253. </html>