index.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. /**
  2. * 首页方法封装处理
  3. * Copyright (c) 2019 ruoyi
  4. */
  5. layer.config({
  6. extend: 'moon/style.css',
  7. skin: 'layer-ext-moon'
  8. });
  9. $(function() {
  10. // MetsiMenu
  11. $('#side-menu').metisMenu();
  12. //固定菜单栏
  13. $(function() {
  14. $('.sidebar-collapse').slimScroll({
  15. height: '100%',
  16. railOpacity: 0.9,
  17. alwaysVisible: false
  18. });
  19. });
  20. // 菜单切换
  21. $('.navbar-minimalize').click(function() {
  22. $("body").toggleClass("mini-navbar");
  23. SmoothlyMenu();
  24. });
  25. $('#side-menu>li').click(function() {
  26. if ($('body').hasClass('mini-navbar')) {
  27. NavToggle();
  28. }
  29. });
  30. $('#side-menu>li li a').click(function() {
  31. if ($(window).width() < 769) {
  32. NavToggle();
  33. }
  34. });
  35. $('.nav-close').click(NavToggle);
  36. //ios浏览器兼容性处理
  37. if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  38. $('#content-main').css('overflow-y', 'auto');
  39. }
  40. });
  41. $(window).bind("load resize",
  42. function() {
  43. if ($(this).width() < 769) {
  44. $('body').addClass('mini-navbar');
  45. $('.navbar-static-side').fadeIn();
  46. $(".sidebar-collapse .logo").addClass("hide");
  47. }
  48. });
  49. function NavToggle() {
  50. $('.navbar-minimalize').trigger('click');
  51. }
  52. function SmoothlyMenu() {
  53. if (!$('body').hasClass('mini-navbar')) {
  54. $('#side-menu').hide();
  55. $(".sidebar-collapse .logo").removeClass("hide");
  56. setTimeout(function() {
  57. $('#side-menu').fadeIn(500);
  58. },
  59. 100);
  60. } else if ($('body').hasClass('fixed-sidebar')) {
  61. $('#side-menu').hide();
  62. $(".sidebar-collapse .logo").addClass("hide");
  63. setTimeout(function() {
  64. $('#side-menu').fadeIn(500);
  65. },
  66. 300);
  67. } else {
  68. $('#side-menu').removeAttr('style');
  69. }
  70. }
  71. /**
  72. * iframe处理
  73. */
  74. $(function() {
  75. //计算元素集合的总宽度
  76. function calSumWidth(elements) {
  77. var width = 0;
  78. $(elements).each(function() {
  79. width += $(this).outerWidth(true);
  80. });
  81. return width;
  82. }
  83. // 激活指定选项卡
  84. function setActiveTab(element) {
  85. if (!$(element).hasClass('active')) {
  86. var currentId = $(element).data('id');
  87. // 显示tab对应的内容区
  88. $('.RuoYi_iframe').each(function() {
  89. if ($(this).data('id') == currentId) {
  90. $(this).show().siblings('.RuoYi_iframe').hide();
  91. }
  92. });
  93. $(element).addClass('active').siblings('.menuTab').removeClass('active');
  94. scrollToTab(element);
  95. }
  96. }
  97. //滚动到指定选项卡
  98. function scrollToTab(element) {
  99. var marginLeftVal = calSumWidth($(element).prevAll()),
  100. marginRightVal = calSumWidth($(element).nextAll());
  101. // 可视区域非tab宽度
  102. var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
  103. //可视区域tab宽度
  104. var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
  105. //实际滚动宽度
  106. var scrollVal = 0;
  107. if ($(".page-tabs-content").outerWidth() < visibleWidth) {
  108. scrollVal = 0;
  109. } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
  110. if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
  111. scrollVal = marginLeftVal;
  112. var tabElement = element;
  113. while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
  114. scrollVal -= $(tabElement).prev().outerWidth();
  115. tabElement = $(tabElement).prev();
  116. }
  117. }
  118. } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
  119. scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
  120. }
  121. $('.page-tabs-content').animate({
  122. marginLeft: 0 - scrollVal + 'px'
  123. },
  124. "fast");
  125. }
  126. //查看左侧隐藏的选项卡
  127. function scrollTabLeft() {
  128. var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
  129. // 可视区域非tab宽度
  130. var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
  131. //可视区域tab宽度
  132. var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
  133. //实际滚动宽度
  134. var scrollVal = 0;
  135. if (($(".page-tabs-content").width()) < visibleWidth) {
  136. return false;
  137. } else {
  138. var tabElement = $(".menuTab:first");
  139. var offsetVal = 0;
  140. while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
  141. offsetVal += $(tabElement).outerWidth(true);
  142. tabElement = $(tabElement).next();
  143. }
  144. offsetVal = 0;
  145. if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
  146. while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
  147. offsetVal += $(tabElement).outerWidth(true);
  148. tabElement = $(tabElement).prev();
  149. }
  150. scrollVal = calSumWidth($(tabElement).prevAll());
  151. }
  152. }
  153. $('.page-tabs-content').animate({
  154. marginLeft: 0 - scrollVal + 'px'
  155. },
  156. "fast");
  157. }
  158. //查看右侧隐藏的选项卡
  159. function scrollTabRight() {
  160. var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
  161. // 可视区域非tab宽度
  162. var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
  163. //可视区域tab宽度
  164. var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
  165. //实际滚动宽度
  166. var scrollVal = 0;
  167. if ($(".page-tabs-content").width() < visibleWidth) {
  168. return false;
  169. } else {
  170. var tabElement = $(".menuTab:first");
  171. var offsetVal = 0;
  172. while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
  173. offsetVal += $(tabElement).outerWidth(true);
  174. tabElement = $(tabElement).next();
  175. }
  176. offsetVal = 0;
  177. while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
  178. offsetVal += $(tabElement).outerWidth(true);
  179. tabElement = $(tabElement).next();
  180. }
  181. scrollVal = calSumWidth($(tabElement).prevAll());
  182. if (scrollVal > 0) {
  183. $('.page-tabs-content').animate({
  184. marginLeft: 0 - scrollVal + 'px'
  185. },
  186. "fast");
  187. }
  188. }
  189. }
  190. //通过遍历给菜单项加上data-index属性
  191. $(".menuItem").each(function(index) {
  192. if (!$(this).attr('data-index')) {
  193. $(this).attr('data-index', index);
  194. }
  195. });
  196. function menuItem() {
  197. // 获取标识数据
  198. var dataUrl = $(this).attr('href'),
  199. dataIndex = $(this).data('index'),
  200. menuName = $.trim($(this).text()),
  201. flag = true;
  202. if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
  203. // 选项卡菜单已存在
  204. $('.menuTab').each(function() {
  205. if ($(this).data('id') == dataUrl) {
  206. if (!$(this).hasClass('active')) {
  207. $(this).addClass('active').siblings('.menuTab').removeClass('active');
  208. scrollToTab(this);
  209. // 显示tab对应的内容区
  210. $('.mainContent .RuoYi_iframe').each(function() {
  211. if ($(this).data('id') == dataUrl) {
  212. $(this).show().siblings('.RuoYi_iframe').hide();
  213. return false;
  214. }
  215. });
  216. }
  217. flag = false;
  218. return false;
  219. }
  220. });
  221. // 选项卡菜单不存在
  222. if (flag) {
  223. var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
  224. $('.menuTab').removeClass('active');
  225. // 添加选项卡对应的iframe
  226. var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
  227. $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
  228. $.modal.loading("数据加载中,请稍后...");
  229. $('.mainContent iframe:visible').load(function () {
  230. $.modal.closeLoading();
  231. });
  232. // 添加选项卡
  233. $('.menuTabs .page-tabs-content').append(str);
  234. scrollToTab($('.menuTab.active'));
  235. }
  236. return false;
  237. }
  238. function menuBlank() {
  239. // 新窗口打开外网以http://开头,如http://ruoyi.vip
  240. var dataUrl = $(this).attr('href');
  241. window.open(dataUrl);
  242. return false;
  243. }
  244. $('.menuItem').on('click', menuItem);
  245. $('.menuBlank').on('click', menuBlank);
  246. // 关闭选项卡菜单
  247. function closeTab() {
  248. var closeTabId = $(this).parents('.menuTab').data('id');
  249. var currentWidth = $(this).parents('.menuTab').width();
  250. var panelUrl = $(this).parents('.menuTab').data('panel');
  251. // 当前元素处于活动状态
  252. if ($(this).parents('.menuTab').hasClass('active')) {
  253. // 当前元素后面有同辈元素,使后面的一个元素处于活动状态
  254. if ($(this).parents('.menuTab').next('.menuTab').size()) {
  255. var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
  256. $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');
  257. $('.mainContent .RuoYi_iframe').each(function() {
  258. if ($(this).data('id') == activeId) {
  259. $(this).show().siblings('.RuoYi_iframe').hide();
  260. return false;
  261. }
  262. });
  263. var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
  264. if (marginLeftVal < 0) {
  265. $('.page-tabs-content').animate({
  266. marginLeft: (marginLeftVal + currentWidth) + 'px'
  267. },
  268. "fast");
  269. }
  270. // 移除当前选项卡
  271. $(this).parents('.menuTab').remove();
  272. // 移除tab对应的内容区
  273. $('.mainContent .RuoYi_iframe').each(function() {
  274. if ($(this).data('id') == closeTabId) {
  275. $(this).remove();
  276. return false;
  277. }
  278. });
  279. }
  280. // 当前元素后面没有同辈元素,使当前元素的上一个元素处于活动状态
  281. if ($(this).parents('.menuTab').prev('.menuTab').size()) {
  282. var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
  283. $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
  284. $('.mainContent .RuoYi_iframe').each(function() {
  285. if ($(this).data('id') == activeId) {
  286. $(this).show().siblings('.RuoYi_iframe').hide();
  287. return false;
  288. }
  289. });
  290. // 移除当前选项卡
  291. $(this).parents('.menuTab').remove();
  292. // 移除tab对应的内容区
  293. $('.mainContent .RuoYi_iframe').each(function() {
  294. if ($(this).data('id') == closeTabId) {
  295. $(this).remove();
  296. return false;
  297. }
  298. });
  299. if($.common.isNotEmpty(panelUrl)){
  300. $('.menuTab[data-id="' + panelUrl + '"]').addClass('active').siblings('.menuTab').removeClass('active');
  301. $('.mainContent .RuoYi_iframe').each(function() {
  302. if ($(this).data('id') == panelUrl) {
  303. $(this).show().siblings('.RuoYi_iframe').hide();
  304. return false;
  305. }
  306. });
  307. }
  308. }
  309. }
  310. // 当前元素不处于活动状态
  311. else {
  312. // 移除当前选项卡
  313. $(this).parents('.menuTab').remove();
  314. // 移除相应tab对应的内容区
  315. $('.mainContent .RuoYi_iframe').each(function() {
  316. if ($(this).data('id') == closeTabId) {
  317. $(this).remove();
  318. return false;
  319. }
  320. });
  321. }
  322. scrollToTab($('.menuTab.active'));
  323. return false;
  324. }
  325. $('.menuTabs').on('click', '.menuTab i', closeTab);
  326. //滚动到已激活的选项卡
  327. function showActiveTab() {
  328. scrollToTab($('.menuTab.active'));
  329. }
  330. $('.tabShowActive').on('click', showActiveTab);
  331. // 点击选项卡菜单
  332. function activeTab() {
  333. if (!$(this).hasClass('active')) {
  334. var currentId = $(this).data('id');
  335. // 显示tab对应的内容区
  336. $('.mainContent .RuoYi_iframe').each(function() {
  337. if ($(this).data('id') == currentId) {
  338. $(this).show().siblings('.RuoYi_iframe').hide();
  339. return false;
  340. }
  341. });
  342. $(this).addClass('active').siblings('.menuTab').removeClass('active');
  343. scrollToTab(this);
  344. }
  345. }
  346. // 点击选项卡菜单
  347. $('.menuTabs').on('click', '.menuTab', activeTab);
  348. // 刷新iframe
  349. function refreshTab() {
  350. var currentId = $('.page-tabs-content').find('.active').attr('data-id');
  351. var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
  352. var url = target.attr('src');
  353. target.attr('src', url).ready();
  354. }
  355. // 关闭当前选项卡
  356. function tabCloseCurrent() {
  357. $('.page-tabs-content').find('.active i').trigger("click");
  358. }
  359. //关闭其他选项卡
  360. function tabCloseOther() {
  361. $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
  362. $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
  363. $(this).remove();
  364. });
  365. $('.page-tabs-content').css("margin-left", "0");
  366. }
  367. // 关闭全部选项卡
  368. function tabCloseAll() {
  369. $('.page-tabs-content').children("[data-id]").not(":first").each(function() {
  370. $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
  371. $(this).remove();
  372. });
  373. $('.page-tabs-content').children("[data-id]:first").each(function() {
  374. $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
  375. $(this).addClass("active");
  376. });
  377. $('.page-tabs-content').css("margin-left", "0");
  378. }
  379. // 全屏显示
  380. $('#fullScreen').on('click', function () {
  381. $(document).toggleFullScreen();
  382. });
  383. // 刷新按钮
  384. $('.tabReload').on('click', refreshTab);
  385. // 双击选项卡全屏显示
  386. $('.menuTabs').on('dblclick', '.menuTab', activeTabMax);
  387. // 左移按扭
  388. $('.tabLeft').on('click', scrollTabLeft);
  389. // 右移按扭
  390. $('.tabRight').on('click', scrollTabRight);
  391. // 关闭当前
  392. $('.tabCloseCurrent').on('click', tabCloseCurrent);
  393. // 关闭其他
  394. $('.tabCloseOther').on('click', tabCloseOther);
  395. // 关闭全部
  396. $('.tabCloseAll').on('click', tabCloseAll);
  397. // tab全屏显示
  398. $('.tabMaxCurrent').on('click', function () {
  399. $('.page-tabs-content').find('.active').trigger("dblclick");
  400. });
  401. // 关闭全屏
  402. $('#ax_close_max').click(function(){
  403. $('#content-main').toggleClass('max');
  404. $('#ax_close_max').hide();
  405. })
  406. // 双击选项卡全屏显示
  407. function activeTabMax() {
  408. $('#content-main').toggleClass('max');
  409. $('#ax_close_max').show();
  410. }
  411. $(window).keydown(function(event) {
  412. if (event.keyCode == 27) {
  413. $('#content-main').removeClass('max');
  414. $('#ax_close_max').hide();
  415. }
  416. });
  417. // 右键菜单实现
  418. $.contextMenu({
  419. selector: ".menuTab",
  420. trigger: 'right',
  421. autoHide: true,
  422. items: {
  423. "close_current": {
  424. name: "关闭当前",
  425. icon: "fa-close",
  426. callback: function(key, opt) {
  427. opt.$trigger.find('i').trigger("click");
  428. }
  429. },
  430. "close_other": {
  431. name: "关闭其他",
  432. icon: "fa-window-close-o",
  433. callback: function(key, opt) {
  434. setActiveTab(this);
  435. tabCloseOther();
  436. }
  437. },
  438. "close_left": {
  439. name: "关闭左侧",
  440. icon: "fa-reply",
  441. callback: function(key, opt) {
  442. setActiveTab(this);
  443. this.prevAll('.menuTab').not(":last").each(function() {
  444. if ($(this).hasClass('active')) {
  445. setActiveTab(this);
  446. }
  447. $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
  448. $(this).remove();
  449. });
  450. $('.page-tabs-content').css("margin-left", "0");
  451. }
  452. },
  453. "close_right": {
  454. name: "关闭右侧",
  455. icon: "fa-share",
  456. callback: function(key, opt) {
  457. setActiveTab(this);
  458. this.nextAll('.menuTab').each(function() {
  459. $('.menuTab[data-id="' + $(this).data('id') + '"]').remove();
  460. $(this).remove();
  461. });
  462. }
  463. },
  464. "close_all": {
  465. name: "全部关闭",
  466. icon: "fa-window-close",
  467. callback: function(key, opt) {
  468. tabCloseAll();
  469. }
  470. },
  471. "step": "---------",
  472. "full": {
  473. name: "全屏显示",
  474. icon: "fa-arrows-alt",
  475. callback: function(key, opt) {
  476. setActiveTab(this);
  477. var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
  478. target.fullScreen(true);
  479. }
  480. },
  481. "refresh": {
  482. name: "刷新页面",
  483. icon: "fa-refresh",
  484. callback: function(key, opt) {
  485. setActiveTab(this);
  486. var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
  487. var url = target.attr('src');
  488. target.attr('src', url).ready();
  489. $.modal.loading("数据加载中,请稍后...");
  490. target.attr('src', url).load(function () {
  491. $.modal.closeLoading();
  492. });
  493. }
  494. },
  495. "open": {
  496. name: "新窗口打开",
  497. icon: "fa-link",
  498. callback: function(key, opt) {
  499. var target = $('.RuoYi_iframe[data-id="' + this.data('id') + '"]');
  500. window.open(target.attr('src'));
  501. }
  502. },
  503. }
  504. })
  505. });