admin.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. layui.define([], function (exports) {
  2. let element = layui.element;
  3. let $gouguApp = $("#GouguApp");
  4. let $gouguAppBody = $("#GouguAppBody");
  5. let $gouguMenuList = $("#menuList");
  6. let tab = {
  7. // tab动画加载效果
  8. loading: function() {
  9. let load = '<div class="tab-loading"><div class="tab-loader"></div></div>';
  10. let $iframe = $gouguAppBody.find('.gg-tab-page.layui-show iframe');
  11. if (!$iframe.next().length) {
  12. $iframe.parent().append(load);
  13. let tabLoad = $iframe.parent().find('.tab-loading');
  14. let tab_timestamp = $iframe.data('timestamp');
  15. let timestamp = new Date().getTime();
  16. //console.log(tab_timestamp);
  17. if(timestamp-tab_timestamp<666){
  18. $iframe.on('load', function() {
  19. tabLoad.fadeOut(666, function() {
  20. tabLoad.remove();
  21. });
  22. })
  23. }
  24. else{
  25. tabLoad.fadeOut(666, function() {
  26. tabLoad.remove();
  27. });
  28. }
  29. }
  30. },
  31. //历史tab预加载
  32. tabTem: function (id, url, title) {
  33. element.tabAdd('gg-admin-tab', {
  34. id: id,
  35. url:url,
  36. title: '<span class="gg-tab-active"></span>' + title
  37. });
  38. $gouguAppBody.append('<div class="gg-tab-page" title="'+title+'" id="tabItem' + id + '" data-id="' + id + '" data-url="' + url + '"></div>');
  39. },
  40. /*新增一个Tab页面
  41. * @id,tab页面唯一标识,可是标签中data-id的属性值
  42. * @url,tab页面地址
  43. * @name,tab页面标题,
  44. */
  45. tabAdd: function (id, url, title) {
  46. let thetabs = $('#pageTabUl').find('li');
  47. if (thetabs.length > 15) {
  48. layer.tips('点击LOGO快速关闭已开的TAB页面', $('.layui-logo'));
  49. }
  50. if (thetabs.length > 20) {
  51. layer.msg('你已打开了太多TAB页面了,请关闭部分TAB再使用');
  52. return false;
  53. }
  54. element.tabAdd('gg-admin-tab', {
  55. id: id,
  56. url:url,
  57. title: '<span class="gg-tab-active"></span>' + title
  58. });
  59. // 获取当前时间戳(毫秒数)
  60. let timestamp = new Date().getTime();
  61. $gouguAppBody.append('<div class="gg-tab-page" title="'+title+'" id="tabItem'+id+'" data-id="'+id +'"><iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe></div>');
  62. this.tabChange(id);
  63. },
  64. //从子页面打开新的Tab页面,防止id重复,使用时间戳作为唯一标识
  65. sonAdd: function (url, title,id) {
  66. if ($(".layui-tab-title li[lay-id]").length <= 0) {
  67. //打开新的tab项
  68. this.tabAdd(id, url, title);
  69. } else {
  70. //否则判断该tab项是否以及存在
  71. let isHas = false;
  72. $.each($(".layui-tab-title li[lay-id]"), function () {
  73. //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
  74. if ($(this).attr("lay-id") == id) {
  75. isHas = true;
  76. $('[data-frameid="' + id + '"]').attr('src', url);
  77. //最后不管是否新增tab,最后都转到要打开的选项页面上
  78. tab.tabChange(id);
  79. }
  80. })
  81. if (isHas == false) {
  82. //标志为false 新增一个tab项
  83. tab.tabAdd(id, url, title);
  84. }
  85. }
  86. try {
  87. layer.close(window.openTips);
  88. } catch (e) {
  89. console.log(e.message);
  90. }
  91. },
  92. //根据传入的id传入到指定的tab项,并滚动定位
  93. tabChange: function (id) {
  94. element.tabChange('gg-admin-tab', id);
  95. },
  96. //删除tab页面
  97. tabDelete: function (id) {
  98. if (id == 0) {
  99. return;
  100. }
  101. element.tabDelete('gg-admin-tab', id);
  102. },
  103. /*删除所有tab页面
  104. *@ids 是一个数组,存放多个id,调用tabDelete方法分别删除
  105. */
  106. tabDeleteAll: function (ids) {
  107. let that = this;
  108. $.each(ids, function (i, item) {
  109. that.tabDelete(item);
  110. })
  111. },
  112. //tab页面关闭自己,需要使用父iframe配合一起调用,如:parent.tab.sonClose();
  113. sonClose: function (id) {
  114. $('.layui-tab .layui-tab-title .layui-this i').click();
  115. },
  116. //滚动tab
  117. tabRoll: function (event, index) {
  118. let $tabTitle = $("#pageTabs .layui-tab-title"),
  119. $tabs = $tabTitle.children("li"),
  120. $outerWidth = ($tabTitle.prop("scrollWidth"), $tabTitle.outerWidth()),
  121. $left = parseFloat($tabTitle.css("left"));
  122. if ("left" === event) {
  123. if (!$left && $left <= 0){
  124. return;
  125. }
  126. let roll = -$left - $outerWidth;
  127. $tabs.each(function (item, i) {
  128. let $item = $(i),$itemleft = $item.position().left;
  129. if ($itemleft >= roll) {
  130. return $tabTitle.css("left", -$itemleft), false;
  131. }
  132. })
  133. } else "auto" === event ? ! function () {
  134. let $itemleft, $item = $tabs.eq(index);
  135. if ($item[0]) {
  136. if ($itemleft = $item.position().left, $itemleft < -$left) return $tabTitle.css("left", -$itemleft);
  137. if ($itemleft + $item.outerWidth() >= $outerWidth - $left) {
  138. let $diff = $itemleft + $item.outerWidth() - ($outerWidth - $left);
  139. $tabs.each(function (e, i) {
  140. let $tabitem = $(i),$tabitemleft = $tabitem.position().left;
  141. if ($tabitemleft + $left > 0 && $tabitemleft - $left > $diff) return $tabTitle.css("left", -$tabitemleft), false;
  142. })
  143. }
  144. }
  145. }() : $tabs.each(function (item, i) {
  146. let $item = $(i),$itemleft = $item.position().left;
  147. if ($itemleft + $item.outerWidth() >= $outerWidth - $left) return $tabTitle.css("left", -$itemleft), false;
  148. })
  149. },
  150. tabFollow:function(id){
  151. $gouguMenuList.find('.side-menu-item').removeClass('layui-this');
  152. $gouguMenuList.find('dd').removeClass('layui-this').removeClass('layui-nav-itemed');
  153. $gouguMenuList.find('.menu-li').removeClass('layui-nav-itemed');
  154. $gouguMenuList.find('.gg-second-menu').removeClass('current');
  155. $('#GouguAppBody').removeClass('expand-menu');
  156. $('.side-menu-item').each(function (index,item){
  157. if($(item).data("id") == id) {
  158. //console.log(item);
  159. $(item).addClass('layui-this');
  160. $(item).parents('dd').addClass('layui-nav-itemed');
  161. $(item).parents('dl').addClass('current');
  162. let $menuli = $(item).parents('.menu-li');
  163. $menuli.addClass('layui-nav-itemed');
  164. // 展开菜单模式
  165. if ($('.layout-menu-expand').length) {
  166. $menuli.siblings().find('a').removeClass('layui-this');
  167. $menuli.children('a').addClass('layui-this');
  168. // 子级菜单
  169. $menuli.siblings().find('.gg-second-menu').removeClass('current');
  170. if ($menuli.children('.gg-second-menu').length) {
  171. $('#GouguAppBody').addClass('expand-menu');
  172. let second_menu = $(this).parent().parent();
  173. second_menu.removeClass('show-up');
  174. //console.log(second_menu.html());
  175. }
  176. }
  177. }
  178. })
  179. },
  180. refresh:function(id){
  181. if(parent.document.getElementById(id)){
  182. let src = parent.document.getElementById(id).contentWindow.location.href ? parent.document.getElementById(id).contentWindow.location.href : iframe.src;
  183. document.getElementById(id).src = src;
  184. }
  185. },
  186. tabCookie:function(){
  187. let thetabs = $('#pageTabUl').find('li'),tab_id = 0,tab_array=[];
  188. thetabs.each(function(index,item){
  189. let _id = $(item).attr('lay-id'),_url = $(item).attr('lay-url'),_title = $(item).text();
  190. if(_id>0){
  191. tab_array.push({'id':_id,'url':_url,'title':_title});
  192. }
  193. if($(item).hasClass('layui-this')){
  194. tab_id = _id;
  195. }
  196. })
  197. if(tab_array.length>0){
  198. let tabs_obj = {'tab_id':tab_id,'tab_array':tab_array};
  199. tab.setCookie('gougutab',JSON.stringify(tabs_obj));
  200. }
  201. else{
  202. tab.delCookie('gougutab');
  203. }
  204. },
  205. setCookie: function (name, value, days) {
  206. let expires = "";
  207. if (days) {
  208. let date = new Date();
  209. date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  210. expires = "; expires=" + date.toGMTString();
  211. }
  212. document.cookie = name + "=" + value + expires + "; path=/";
  213. },
  214. getCookie: function (name) {
  215. let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  216. if (arr != null) {
  217. return unescape(arr[ 2 ]);
  218. }
  219. return null;
  220. },
  221. delCookie: function (name) {
  222. this.setCookie(name, "", -1);
  223. },
  224. officeView:function (id,mode){
  225. layer.open({
  226. type: 2,
  227. title: 'OFFICE文件查看(当前使用的是微软官方的OFFICE接口,服务器需要连接外网才能查看)',
  228. id:'officeView',
  229. shadeClose: false,
  230. maxmin: false, //开启最大化最小化按钮
  231. area: ['100%', window.innerHeight+'px'],
  232. offset: 'b',
  233. //zIndex:2999,
  234. resize:false,
  235. anim: 2,
  236. scrollbar:false,
  237. //content: '/api/office/view?id='+id+'&mode='+mode,
  238. content: '/api/office/officeapps?id='+id+'&mode='+mode,
  239. cancel: function(index, layero, that){
  240. //layer.msg('文件在后台保存中,请稍再查看或下载...', {time: 3*1000});
  241. }
  242. });
  243. },
  244. pdfView:function (href){
  245. layer.open({
  246. type: 2,
  247. title: 'PDF文件查看(当前使用的是浏览器自身接口查看)',
  248. id:'pdfView',
  249. shadeClose: false,
  250. anim: 2,
  251. maxmin: false, //开启最大化最小化按钮
  252. area: ['100%', window.innerHeight+'px'],
  253. offset: 'b',
  254. //zIndex:2999,
  255. resize:false,
  256. content: href
  257. });
  258. },
  259. videoView:function (href){
  260. layer.open({
  261. type: 1,
  262. title: '视频文件播放',
  263. id:'videoView',
  264. shadeClose: false,
  265. area: ['810px', '510px'],
  266. content: '<div style="padding:5px 5px 0"><video src="'+href+'" playsinline="" controls="true" style="width:800px; height:450px"></video></div>'
  267. });
  268. },
  269. audioView:function (href){
  270. layer.open({
  271. type: 1,
  272. title: '音频文件播放',
  273. id:'audioView',
  274. shadeClose: false,
  275. area: ['500px', '120px'],
  276. content: '<audio src="'+href+'" playsinline="" controls="true" style="width:500px; height:60px"></audio>'
  277. });
  278. },
  279. photoView:function (href){
  280. let photos = { "data": [{"src": href}]};
  281. layer.photos({
  282. photos: photos,
  283. anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  284. });
  285. }
  286. };
  287. //切换tab
  288. element.on('tab(gg-admin-tab)', function (data) {
  289. let thisPage = $gouguAppBody.find('.gg-tab-page').eq(data.index);
  290. let id = thisPage.data('id');
  291. let url = thisPage.data('url');
  292. if(thisPage.find('iframe').length==0){
  293. // 获取当前时间戳(毫秒数)
  294. let timestamp = new Date().getTime();
  295. thisPage.html('<iframe id="'+id+'" data-frameid="'+id+'" data-timestamp="'+timestamp+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>');
  296. }
  297. tab.tabFollow(id);
  298. $gouguAppBody.find('.gg-tab-page').removeClass('layui-show');
  299. thisPage.addClass('layui-show');
  300. if(data.index==0){
  301. tab.refresh(0);
  302. }
  303. tab.loading();
  304. tab.tabRoll("auto", data.index);
  305. tab.tabCookie();
  306. });
  307. //删除tab
  308. element.on('tabDelete(gg-admin-tab)', function (data) {
  309. $gouguAppBody.find('.gg-tab-page').eq(data.index).remove();
  310. tab.tabRoll("auto", data.index);
  311. tab.tabCookie();
  312. });
  313. //右滚动tab
  314. $('[gg-event="tabRollRight"]').click(function () {
  315. tab.tabRoll("right");
  316. })
  317. //左滚动tab
  318. $('[gg-event="tabRollLeft"]').click(function () {
  319. tab.tabRoll("left");
  320. })
  321. //关闭全部tab,只保留首页
  322. $gouguApp.on('click', '[gg-event="closeAllTabs"]', function () {
  323. let thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
  324. for (let i = 0; i < thetabs.length; i++) {
  325. let id = thetabs.eq(i).attr('lay-id');
  326. ids.push(id);
  327. }
  328. tab.tabDeleteAll(ids);
  329. return false;
  330. })
  331. //关闭其他tab
  332. $gouguApp.on('click', '[gg-event="closeOtherTabs"]', function () {
  333. let thetabs = $('#pageTabs .layui-tab-title').find('li'), ids = [];
  334. let thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
  335. for (let i = 0; i < thetabs.length; i++) {
  336. let id = thetabs.eq(i).attr('lay-id');
  337. if (id != thisid) {
  338. ids.push(id);
  339. }
  340. }
  341. tab.tabDeleteAll(ids);
  342. return false;
  343. })
  344. //关闭当前tab
  345. $gouguApp.on('click', '[gg-event="closeThisTabs"]', function () {
  346. let thisid = $('#pageTabs .layui-tab-title').find('.layui-this').attr('lay-id');
  347. tab.tabDelete(thisid);
  348. return false;
  349. })
  350. //当点击有side-menu-item属性的标签时,即左侧菜单栏中内容 ,触发tab
  351. $('body').on('click', 'a.side-menu-item', function () {
  352. let that = $(this);
  353. let url = that.data("href"), id = that.data("id"), title = that.data("title");
  354. if (url == '' || url == '/') {
  355. return false;
  356. }
  357. //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
  358. //$('.site-menu-active').removeClass('layui-this');
  359. //that.addClass('layui-this');
  360. //$gouguApp.removeClass('side-spread-sm');
  361. if ($(".layui-tab-title li[lay-id]").length <= 0) {
  362. //打开新的tab项
  363. tab.tabAdd(id, url, title);
  364. } else {
  365. //否则判断该tab项是否以及存在
  366. let isHas = false;
  367. $.each($(".layui-tab-title li[lay-id]"), function () {
  368. //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
  369. if ($(this).attr("lay-id") == id) {
  370. isHas = true;
  371. $('[data-frameid="' + id + '"]').attr('src', url);
  372. //最后不管是否新增tab,最后都转到要打开的选项页面上
  373. tab.tabChange(id);
  374. }
  375. })
  376. if (isHas == false) {
  377. //标志为false 新增一个tab项
  378. tab.tabAdd(id, url, title);
  379. }
  380. }
  381. try {
  382. layer.close(window.openTips);
  383. } catch (e) {
  384. console.log(e.message);
  385. }
  386. });
  387. //左侧菜单展开&收缩
  388. $gouguApp.on('click', '[gg-event="shrink"]', function () {
  389. let that_i = $(this).children('i');
  390. if (that_i.hasClass("layui-icon-shrink-right")) {
  391. that_i.removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
  392. }
  393. else{
  394. that_i.removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
  395. }
  396. $gouguApp.toggleClass('side-spread');
  397. })
  398. /*
  399. $gouguApp.on('click', '[gg-event="shade"]', function () {
  400. $gouguApp.removeClass('side-spread-sm');
  401. })
  402. */
  403. //左上角清除缓存
  404. $gouguApp.on('click', '[gg-event="cache"]', function (e) {
  405. let that = $(this);
  406. let url = $(this).data('href');
  407. if (that.attr('class') === 'clearThis') {
  408. layer.tips('正在努力清理中...', this);
  409. return false;
  410. }
  411. layer.tips('正在清理系统缓存...', this);
  412. that.attr('class', 'clearThis');
  413. $.ajax({
  414. url: url,
  415. success: function (res) {
  416. if (res.code == 1) {
  417. setTimeout(function () {
  418. that.attr('class', '');
  419. layer.tips(res.msg, that);
  420. }, 1000)
  421. } else {
  422. layer.tips(res.msg, that);
  423. }
  424. }
  425. })
  426. })
  427. //右上角刷新当前tab页面
  428. $gouguApp.on('click', '[gg-event="refresh"]', function () {
  429. let that = $(this);
  430. if (that.hasClass("refreshThis")) {
  431. that.removeClass("refreshThis");
  432. let iframe = $(".gg-tab-page.layui-show").find("iframe")[0];
  433. if (iframe) {
  434. tab.refresh(iframe.id);
  435. }
  436. setTimeout(function () {
  437. that.attr("class", "refreshThis");
  438. }, 2000)
  439. } else {
  440. layer.tips("每2秒只可刷新一次", this, {
  441. tips: 1
  442. });
  443. }
  444. return false;
  445. })
  446. //右上角全屏&退出全屏
  447. $gouguApp.on("click", ".fullScreen", function () {
  448. if ($(this).hasClass("layui-icon-screen-restore")) {
  449. screenFun(2).then(function () {
  450. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  451. });
  452. } else {
  453. screenFun(1).then(function () {
  454. $(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
  455. });
  456. }
  457. });
  458. //小菜单展现多级菜单
  459. $gouguApp.on("mouseenter", ".layui-nav-tree .menu-li", function () {
  460. let tips = $(this).prop("innerHTML");
  461. if ($gouguApp.hasClass('side-spread') && tips) {
  462. 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>";
  463. window.openTips = layer.tips(tips, $(this), {
  464. tips: [2, '#2f4056'],
  465. time: 300000,
  466. skin: "popup-tips",
  467. success: function (el) {
  468. let left = $(el).position().left - 10;
  469. $(el).addClass('side-layout').css({ left: left });
  470. element.render();
  471. }
  472. });
  473. }
  474. });
  475. $("body").on("mouseleave", ".popup-tips", function () {
  476. try {
  477. layer.close(window.openTips);
  478. } catch (e) {
  479. console.log(e.message);
  480. }
  481. });
  482. function screenFun(num) {
  483. num = num || 1;
  484. num = num * 1;
  485. let docElm = document.documentElement;
  486. switch (num) {
  487. case 1:
  488. if (docElm.requestFullscreen) {
  489. docElm.requestFullscreen();
  490. } else if (docElm.mozRequestFullScreen) {
  491. docElm.mozRequestFullScreen();
  492. } else if (docElm.webkitRequestFullScreen) {
  493. docElm.webkitRequestFullScreen();
  494. } else if (docElm.msRequestFullscreen) {
  495. docElm.msRequestFullscreen();
  496. }
  497. break;
  498. case 2:
  499. if (document.exitFullscreen) {
  500. document.exitFullscreen();
  501. } else if (document.mozCancelFullScreen) {
  502. document.mozCancelFullScreen();
  503. } else if (document.webkitCancelFullScreen) {
  504. document.webkitCancelFullScreen();
  505. } else if (document.msExitFullscreen) {
  506. document.msExitFullscreen();
  507. }
  508. break;
  509. }
  510. return new Promise(function (res, rej) {
  511. res("返回值");
  512. });
  513. }
  514. function isFullscreen() {
  515. return document.fullscreenElement ||
  516. document.msFullscreenElement ||
  517. document.mozFullScreenElement ||
  518. document.webkitFullscreenElement || false;
  519. }
  520. window.onresize = function () {
  521. if (!isFullscreen()) {
  522. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  523. }
  524. }
  525. exports('admin', tab);
  526. });