admin.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. layui.define(['element'], function (exports) {
  2. var element = layui.element;
  3. var tab = {
  4. /*新增一个Tab页面
  5. * @id,tab页面唯一标识,可是标签中data-id的属性值
  6. * @url,tab页面地址
  7. * @name,tab页面标题,
  8. */
  9. tabTem: function (id, url, title) {
  10. element.tabAdd('gg-admin-tab', {
  11. id: id,
  12. url:url,
  13. title: '<span class="gg-tab-active"></span>' + title
  14. });
  15. $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '" data-url="' + url + '"></div>');
  16. },
  17. tabAdd: function (id, url, title) {
  18. var thetabs = $('#pageTabUl').find('li');
  19. if (thetabs.length > 12) {
  20. layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
  21. }
  22. if (thetabs.length > 16) {
  23. layer.msg('你已打开了太多TAB页面了,请关闭部分TAB再使用');
  24. return false;
  25. }
  26. element.tabAdd('gg-admin-tab', {
  27. id: id,
  28. url:url,
  29. title: '<span class="gg-tab-active"></span>' + title
  30. });
  31. $('#GouguAppBody').append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '"><iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
  32. this.tabChange(id);
  33. },
  34. //从子页面打开新的Tab页面,防止id重复,使用时间戳作为唯一标识
  35. sonAdd: function (url, title,id) {
  36. if ($(".layui-tab-title li[lay-id]").length <= 0) {
  37. //打开新的tab项
  38. this.tabAdd(id, url, title);
  39. } else {
  40. //否则判断该tab项是否以及存在
  41. var isHas = false;
  42. $.each($(".layui-tab-title li[lay-id]"), function () {
  43. //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
  44. if ($(this).attr("lay-id") == id) {
  45. isHas = true;
  46. $('[data-frameid="' + id + '"]').attr('src', url);
  47. //最后不管是否新增tab,最后都转到要打开的选项页面上
  48. tab.tabChange(id);
  49. }
  50. })
  51. if (isHas == false) {
  52. //标志为false 新增一个tab项
  53. tab.tabAdd(id, url, title);
  54. }
  55. }
  56. try {
  57. layer.close(window.openTips);
  58. } catch (e) {
  59. console.log(e.message);
  60. }
  61. },
  62. //根据传入的id传入到指定的tab项,并滚动定位
  63. tabChange: function (id) {
  64. element.tabChange('gg-admin-tab', id);
  65. },
  66. //删除tab页面
  67. tabDelete: function (id) {
  68. if (id == 0) {
  69. return;
  70. }
  71. element.tabDelete('gg-admin-tab', id);
  72. },
  73. /*删除所有tab页面
  74. *@ids 是一个数组,存放多个id,调用tabDelete方法分别删除
  75. */
  76. tabDeleteAll: function (ids) {
  77. var that = this;
  78. $.each(ids, function (i, item) {
  79. that.tabDelete(item);
  80. })
  81. },
  82. //tab页面关闭自己,需要使用父iframe配合一起调用,如:parent.tab.sonClose();
  83. sonClose: function (id) {
  84. $('.layui-tab .layui-tab-title .layui-this i').click();
  85. },
  86. //滚动tab
  87. tabRoll: function (event, index) {
  88. var $tabTitle = $("#pageTabs .layui-tab-title"),
  89. $tabs = $tabTitle.children("li"),
  90. $outerWidth = ($tabTitle.prop("scrollWidth"), $tabTitle.outerWidth()),
  91. $left = parseFloat($tabTitle.css("left"));
  92. if ("left" === event) {
  93. if (!$left && $left <= 0) return;
  94. var roll = -$left - $outerWidth;
  95. $tabs.each(function (item, i) {
  96. var $item = $(i),
  97. $itemleft = $item.position().left;
  98. if ($itemleft >= roll) {
  99. return $tabTitle.css("left", -$itemleft), false;
  100. }
  101. })
  102. } else "auto" === event ? ! function () {
  103. var $itemleft, $item = $tabs.eq(index);
  104. if ($item[0]) {
  105. if ($itemleft = $item.position().left, $itemleft < -$left) return $tabTitle.css("left", -$itemleft);
  106. if ($itemleft + $item.outerWidth() >= $outerWidth - $left) {
  107. var $diff = $itemleft + $item.outerWidth() - ($outerWidth - $left);
  108. $tabs.each(function (e, i) {
  109. var $tabitem = $(i),
  110. $tabitemleft = $tabitem.position().left;
  111. if ($tabitemleft + $left > 0 && $tabitemleft - $left > $diff) return $tabTitle.css("left", -$tabitemleft), false;
  112. })
  113. }
  114. }
  115. }() : $tabs.each(function (item, i) {
  116. var $item = $(i),
  117. $itemleft = $item.position().left;
  118. if ($itemleft + $item.outerWidth() >= $outerWidth - $left) return $tabTitle.css("left", -$itemleft), false;
  119. })
  120. },
  121. tabFollow:function(id){
  122. $('.layui-nav-tree').find('.side-menu-item').removeClass('layui-this');
  123. $('.layui-nav-tree').find('dd').removeClass('layui-this');
  124. $('.layui-nav-tree').find('dd').removeClass('layui-nav-itemed');
  125. $('.layui-nav-tree').find('.menu-li').removeClass('layui-nav-itemed');
  126. $('.side-menu-item').each(function (index,item){
  127. if($(item).data("id") == id) {
  128. //console.log(item);
  129. $(item).addClass('layui-this');
  130. $(item).parents('dd').addClass('layui-nav-itemed');
  131. $(item).parents('.menu-li').addClass('layui-nav-itemed');
  132. }
  133. })
  134. },
  135. refresh:function(id){
  136. if(parent.document.getElementById(id)){
  137. var src = parent.document.getElementById(id).contentWindow.location.href ? parent.document.getElementById(id).contentWindow.location.href : iframe.src;
  138. document.getElementById(id).src = src;
  139. }
  140. },
  141. tabCookie:function(){
  142. let thetabs = $('#pageTabUl').find('li');
  143. let tab_id = 0,tab_array=[];
  144. $('#pageTabUl li').each(function(index,item){
  145. let _id = $(item).attr('lay-id'),_url = $(item).attr('lay-url'),_title = $(item).text();
  146. if(_id>0){
  147. tab_array.push({'id':_id,'url':_url,'title':_title});
  148. }
  149. if($(item).hasClass('layui-this')){
  150. tab_id = _id;
  151. }
  152. })
  153. if(tab_array.length>0){
  154. let tabs_obj = {
  155. 'tab_id':tab_id,
  156. 'tab_array':tab_array
  157. }
  158. //console.log(tabs_obj);
  159. tab.setCookie('gougutab',JSON.stringify(tabs_obj));
  160. }
  161. else{
  162. tab.delCookie('gougutab');
  163. }
  164. },
  165. setCookie: function (name, value, days) {
  166. if (days) {
  167. var date = new Date();
  168. date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  169. var expires = "; expires=" + date.toGMTString();
  170. }
  171. else {
  172. var expires = "";
  173. }
  174. document.cookie = name + "=" + value + expires + "; path=/";
  175. },
  176. getCookie: function (name) {
  177. var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  178. if (arr != null) {
  179. return unescape(arr[ 2 ]);
  180. }
  181. return null;
  182. },
  183. delCookie: function (name) {
  184. this.setCookie(name, "", -1);
  185. }
  186. };
  187. //切换tab
  188. element.on('tab(gg-admin-tab)', function (data) {
  189. let thisPage = $('#GouguAppBody').find('.gg-tab-page').eq(data.index);
  190. let id = thisPage.data('id');
  191. let url = thisPage.data('url');
  192. if(thisPage.find('iframe').length==0){
  193. thisPage.html('<iframe id="' + id + '" data-frameid="' + id + '" src="' + url + '" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
  194. }
  195. tab.tabFollow(id);
  196. $('#GouguAppBody').find('.gg-tab-page').removeClass('layui-show');
  197. thisPage.addClass('layui-show');
  198. if(data.index==0){
  199. tab.refresh(0);
  200. }
  201. tab.tabRoll("auto", data.index);
  202. tab.tabCookie();
  203. });
  204. //删除tab
  205. element.on('tabDelete(gg-admin-tab)', function (data) {
  206. $('#GouguAppBody').find('.gg-tab-page').eq(data.index).remove();
  207. tab.tabRoll("auto", data.index);
  208. tab.tabCookie();
  209. });
  210. //右滚动tab
  211. $('[gg-event="tabRollRight"]').click(function () {
  212. tab.tabRoll("right");
  213. })
  214. //左滚动tab
  215. $('[gg-event="tabRollLeft"]').click(function () {
  216. tab.tabRoll("left");
  217. })
  218. //关闭全部tab,只保留首页
  219. $("#GouguApp").on('click', '[gg-event="closeAllTabs"]', function () {
  220. var thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
  221. for (var i = 0; i < thetabs.length; i++) {
  222. var id = thetabs.eq(i).attr('lay-id');
  223. ids.push(id);
  224. }
  225. tab.tabDeleteAll(ids);
  226. return false;
  227. })
  228. //关闭其他tab
  229. $("#GouguApp").on('click', '[gg-event="closeOtherTabs"]', function () {
  230. var thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
  231. var thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
  232. for (var i = 0; i < thetabs.length; i++) {
  233. var id = thetabs.eq(i).attr('lay-id');
  234. if (id != thisid) {
  235. ids.push(id);
  236. }
  237. }
  238. tab.tabDeleteAll(ids);
  239. return false;
  240. })
  241. //关闭当前tab
  242. $("#GouguApp").on('click', '[gg-event="closeThisTabs"]', function () {
  243. var thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
  244. tab.tabDelete(thisid);
  245. return false;
  246. })
  247. //当点击有side-menu-item属性的标签时,即左侧菜单栏中内容 ,触发tab
  248. $('body').on('click', 'a.side-menu-item', function () {
  249. var that = $(this);
  250. var url = that.data("href"), id = that.data("id"), title = that.data("title");
  251. if (url == '' || url == '/') {
  252. return false;
  253. }
  254. //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
  255. $('.site-menu-active').removeClass('layui-this');
  256. that.addClass('layui-this');
  257. $('#GouguApp').removeClass('side-spread-sm');
  258. if ($(".layui-tab-title li[lay-id]").length <= 0) {
  259. //打开新的tab项
  260. tab.tabAdd(id, url, title);
  261. } else {
  262. //否则判断该tab项是否以及存在
  263. var isHas = false;
  264. $.each($(".layui-tab-title li[lay-id]"), function () {
  265. //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
  266. if ($(this).attr("lay-id") == id) {
  267. isHas = true;
  268. $('[data-frameid="' + id + '"]').attr('src', url);
  269. //最后不管是否新增tab,最后都转到要打开的选项页面上
  270. tab.tabChange(id);
  271. }
  272. })
  273. if (isHas == false) {
  274. //标志为false 新增一个tab项
  275. tab.tabAdd(id, url, title);
  276. }
  277. }
  278. try {
  279. layer.close(window.openTips);
  280. } catch (e) {
  281. console.log(e.message);
  282. }
  283. });
  284. //左侧菜单展开&收缩
  285. $('#GouguApp').on('click', '[gg-event="shrink"]', function () {
  286. if (window.innerWidth > 992) {
  287. $('#GouguApp').toggleClass('side-spread');
  288. } else {
  289. $('#GouguApp').toggleClass('side-spread-sm');
  290. }
  291. })
  292. $('#GouguApp').on('click', '[gg-event="shade"]', function () {
  293. $('#GouguApp').removeClass('side-spread-sm');
  294. })
  295. //左上角清除缓存
  296. $('#GouguApp').on('click', '[gg-event="cache"]', function (e) {
  297. let that = $(this);
  298. let url = $(this).data('href');
  299. if (that.attr('class') === 'clearThis') {
  300. layer.tips('正在努力清理中...', this);
  301. return false;
  302. }
  303. layer.tips('正在清理系统缓存...', this);
  304. that.attr('class', 'clearThis');
  305. $.ajax({
  306. url: url,
  307. success: function (res) {
  308. if (res.code == 1) {
  309. setTimeout(function () {
  310. that.attr('class', '');
  311. layer.tips(res.msg, that);
  312. }, 1000)
  313. } else {
  314. layer.tips(res.msg, that);
  315. }
  316. }
  317. })
  318. })
  319. //右上角刷新当前tab页面
  320. $('#GouguApp').on('click', '[gg-event="refresh"]', function () {
  321. var that = $(this);
  322. if ($(this).hasClass("refreshThis")) {
  323. that.removeClass("refreshThis");
  324. var iframe = $(".gg-tab-page.layui-show").find("iframe")[0];
  325. if (iframe) {
  326. tab.refresh(iframe.id);
  327. }
  328. setTimeout(function () {
  329. that.attr("class", "refreshThis");
  330. }, 2000)
  331. } else {
  332. layer.tips("每2秒只可刷新一次", this, {
  333. tips: 1
  334. });
  335. }
  336. return false;
  337. })
  338. //右上角全屏&退出全屏
  339. $('#GouguApp').on("click", ".fullScreen", function () {
  340. if ($(this).hasClass("layui-icon-screen-restore")) {
  341. screenFun(2).then(function () {
  342. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  343. });
  344. } else {
  345. screenFun(1).then(function () {
  346. $(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
  347. });
  348. }
  349. });
  350. //小菜单展现多级菜单
  351. $("#GouguApp").on("mouseenter", ".layui-nav-tree .menu-li", function () {
  352. var tips = $(this).prop("innerHTML");
  353. if ($('#GouguApp').hasClass('side-spread') && tips) {
  354. tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
  355. window.openTips = layer.tips(tips, $(this), {
  356. tips: [2, '#2f4056'],
  357. time: 300000,
  358. skin: "popup-tips",
  359. success: function (el) {
  360. var left = $(el).position().left - 10;
  361. $(el).addClass('side-layout').css({ left: left });
  362. element.render();
  363. }
  364. });
  365. }
  366. });
  367. $("body").on("mouseleave", ".popup-tips", function () {
  368. try {
  369. layer.close(window.openTips);
  370. } catch (e) {
  371. console.log(e.message);
  372. }
  373. });
  374. function screenFun(num) {
  375. num = num || 1;
  376. num = num * 1;
  377. var docElm = document.documentElement;
  378. switch (num) {
  379. case 1:
  380. if (docElm.requestFullscreen) {
  381. docElm.requestFullscreen();
  382. } else if (docElm.mozRequestFullScreen) {
  383. docElm.mozRequestFullScreen();
  384. } else if (docElm.webkitRequestFullScreen) {
  385. docElm.webkitRequestFullScreen();
  386. } else if (docElm.msRequestFullscreen) {
  387. docElm.msRequestFullscreen();
  388. }
  389. break;
  390. case 2:
  391. if (document.exitFullscreen) {
  392. document.exitFullscreen();
  393. } else if (document.mozCancelFullScreen) {
  394. document.mozCancelFullScreen();
  395. } else if (document.webkitCancelFullScreen) {
  396. document.webkitCancelFullScreen();
  397. } else if (document.msExitFullscreen) {
  398. document.msExitFullscreen();
  399. }
  400. break;
  401. }
  402. return new Promise(function (res, rej) {
  403. res("返回值");
  404. });
  405. }
  406. function isFullscreen() {
  407. return document.fullscreenElement ||
  408. document.msFullscreenElement ||
  409. document.mozFullScreenElement ||
  410. document.webkitFullscreenElement || false;
  411. }
  412. window.onresize = function () {
  413. if (!isFullscreen()) {
  414. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  415. }
  416. }
  417. exports('admin', tab);
  418. });