index.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. var $,tab,dataStr,layer;
  2. layui.config({
  3. base : "static/js/"
  4. }).extend({
  5. "bodyTab" : "bodyTab"
  6. })
  7. layui.use(['bodyTab','form','element','layer','jquery'],function(){
  8. var form = layui.form,
  9. element = layui.element;
  10. $ = layui.$;
  11. layer = parent.layer === undefined ? layui.layer : top.layer;
  12. tab = layui.bodyTab({
  13. openTabNum : "50", //最大可打开窗口数量
  14. url : "/menu/navlist" //获取菜单json地址
  15. });
  16. //通过顶部菜单获取左侧二三级菜单 注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
  17. function getData(json){
  18. $.post(tab.tabConfig.url,{'pid':json,'token':csrfToken},function (data) {
  19. if(data.code == 200)
  20. {
  21. dataStr = data.data[json];
  22. tab.render();
  23. }
  24. })
  25. }
  26. //页面加载时判断左侧菜单是否显示
  27. //通过顶部菜单获取左侧菜单
  28. $(".topLevelMenus li,.mobileTopLevelMenus dd").click(function(){
  29. if($(this).parents(".mobileTopLevelMenus").length != "0"){
  30. $(".topLevelMenus li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
  31. }else{
  32. $(".mobileTopLevelMenus dd").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
  33. }
  34. $(".layui-layout-admin").removeClass("showMenu");
  35. $("body").addClass("site-mobile");
  36. getData($(this).data("menu"));
  37. //渲染顶部窗口
  38. tab.tabMove();
  39. })
  40. //隐藏左侧导航
  41. $(".hideMenu").click(function(){
  42. if($(".topLevelMenus li.layui-this a").data("url")){
  43. layer.msg("此栏目状态下左侧菜单不可展开"); //主要为了避免左侧显示的内容与顶部菜单不匹配
  44. return false;
  45. }
  46. $(".layui-layout-admin").toggleClass("showMenu");
  47. //渲染顶部窗口
  48. tab.tabMove();
  49. })
  50. //通过顶部菜单获取左侧二三级菜单 注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
  51. // var idr = ;
  52. getData($('.topLevelMenus li').eq(0).attr('data-menu'));
  53. //手机设备的简单适配
  54. $('.site-tree-mobile').on('click', function(){
  55. $('body').addClass('site-mobile');
  56. });
  57. $('.site-mobile-shade').on('click', function(){
  58. $('body').removeClass('site-mobile');
  59. });
  60. // 添加新窗口
  61. $("body").on("click",".layui-nav .layui-nav-item a:not('.mobileTopLevelMenus .layui-nav-item a')",function(){
  62. //如果不存在子级
  63. if($(this).siblings().length == 0){
  64. addTab($(this));
  65. $('body').removeClass('site-mobile'); //移动端点击菜单关闭菜单层
  66. }
  67. $(this).parent("li").siblings().removeClass("layui-nav-itemed");
  68. })
  69. //清除缓存
  70. $(".clearCache").click(function(){
  71. $.post('/public/resourceclear',{},function (data) {
  72. if(data.code == 200){
  73. layer.msg(data.msg);
  74. // var index = layer.msg(data.msg,{icon: 16,time:false,shade:0.8});
  75. // setTimeout(function(){
  76. // layer.close(index);
  77. // },1000);
  78. }
  79. })
  80. // window.sessionStorage.clear();
  81. // window.localStorage.clear();
  82. // var index = layer.msg('清除缓存中,请稍候',{icon: 16,time:false,shade:0.8});
  83. // setTimeout(function(){
  84. // layer.close(index);
  85. // layer.msg("缓存清除成功!");
  86. // },1000);
  87. })
  88. //刷新后还原打开的窗口
  89. if(cacheStr == "true") {
  90. if (window.sessionStorage.getItem("menu") != null) {
  91. menu = JSON.parse(window.sessionStorage.getItem("menu"));
  92. curmenu = window.sessionStorage.getItem("curmenu");
  93. var openTitle = '';
  94. for (var i = 0; i < menu.length; i++) {
  95. openTitle = '';
  96. if (menu[i].icon) {
  97. if (menu[i].icon.split("-")[0] == 'icon') {
  98. openTitle += '<i class="seraph ' + menu[i].icon + '"></i>';
  99. } else {
  100. openTitle += '<i class="layui-icon">' + menu[i].icon + '</i>';
  101. }
  102. }
  103. openTitle += '<cite>' + menu[i].title + '</cite>';
  104. openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + menu[i].layId + '">&#x1006;</i>';
  105. element.tabAdd("bodyTab", {
  106. title: openTitle,
  107. content: "<iframe src='" + menu[i].href + "' data-id='" + menu[i].layId + "'></frame>",
  108. id: menu[i].layId
  109. })
  110. //定位到刷新前的窗口
  111. if (curmenu != "undefined") {
  112. if (curmenu == '' || curmenu == "null") { //定位到后台首页
  113. element.tabChange("bodyTab", '');
  114. } else if (JSON.parse(curmenu).title == menu[i].title) { //定位到刷新前的页面
  115. element.tabChange("bodyTab", menu[i].layId);
  116. }
  117. } else {
  118. element.tabChange("bodyTab", menu[menu.length - 1].layId);
  119. }
  120. }
  121. //渲染顶部窗口
  122. tab.tabMove();
  123. }
  124. }else{
  125. window.sessionStorage.removeItem("menu");
  126. window.sessionStorage.removeItem("curmenu");
  127. }
  128. })
  129. //打开新窗口
  130. function addTab(_this){
  131. tab.tabAdd(_this);
  132. }
  133. //图片管理弹窗
  134. // function showImg(){
  135. // $.getJSON('json/images.json', function(json){
  136. // var res = json;
  137. // layer.photos({
  138. // photos: res,
  139. // anim: 5
  140. // });
  141. // });
  142. // }