index.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. /** EasyWeb spa v3.1.6 date:2020-03-11 License By http://easyweb.vip */
  2. layui.define(['layer', 'element', 'setter', 'layRouter', 'admin'], function (exports) {
  3. var $ = layui.jquery;
  4. var layer = layui.layer;
  5. var element = layui.element;
  6. var setter = layui.setter;
  7. var layRouter = layui.layRouter;
  8. var admin = layui.admin;
  9. var headerDOM = '.layui-layout-admin>.layui-header';
  10. var sideDOM = '.layui-layout-admin>.layui-side>.layui-side-scroll';
  11. var bodyDOM = '.layui-layout-admin>.layui-body';
  12. var tabDOM = bodyDOM + '>.layui-tab';
  13. var titleDOM = bodyDOM + '>.layui-body-header';
  14. var tabFilter = 'admin-pagetabs';
  15. var navFilter = 'admin-side-nav';
  16. var index = {mTabList: []};
  17. /* 注册路由 */
  18. index.regRouter = function (menus) {
  19. $.each(menus, function (i, data) {
  20. if (data.url && data.url.indexOf('#') === 0) {
  21. layRouter.reg(data.url, function (info) {
  22. info.name = data.name;
  23. info.iframe = data.iframe;
  24. index.changeView(info);
  25. });
  26. }
  27. if (data.subMenus) index.regRouter(data.subMenus);
  28. });
  29. };
  30. /* 处理路由改变 */
  31. index.changeView = function (info) {
  32. var hashPath = index.getHashPath(info);
  33. var contentDom = bodyDOM + '>div[lay-id]';
  34. if (setter.pageTabs) { // 多标签模式
  35. var flag; // 选项卡是否已经添加
  36. $(tabDOM + '>.layui-tab-title>li').each(function (i) {
  37. if ($(this).attr('lay-id') === hashPath) {
  38. flag = true;
  39. return false;
  40. }
  41. });
  42. if (!flag) { // 添加选项卡
  43. if ((index.mTabList.length + 1) >= setter.maxTabNum) {
  44. layer.msg('最多打开' + setter.maxTabNum + '个选项卡', {icon: 2, anim: 6});
  45. history.back();
  46. return;
  47. }
  48. element.tabAdd(tabFilter, {
  49. id: hashPath,
  50. title: '<span class="title">' + (info.name || '') + '</span>',
  51. content: '<div lay-id="' + hashPath + '" lay-url="' + info.href + '"></div>'
  52. });
  53. if (hashPath !== layRouter.index) index.mTabList.push(info); // 记录tab
  54. if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList); // 缓存tab
  55. }
  56. contentDom = tabDOM + '>.layui-tab-content>.layui-tab-item>div[lay-id="' + hashPath + '"]';
  57. var oldHref = $(contentDom).attr('lay-url');
  58. if (info.href !== oldHref) { // 同一个hash参数不同
  59. // 页面卸载事件回调
  60. layui.event.call(this, 'admin', 'destroy(' + hashPath + ')');
  61. //
  62. $(contentDom).attr('lay-url', info.href);
  63. flag = false; // 同一个hash参数不同刷新内容
  64. for (var i = 0; i < index.mTabList.length; i++) {
  65. if (index.mTabList[i].href === oldHref) index.mTabList[i] = info;
  66. }
  67. if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList); // 缓存tab
  68. }
  69. if (!flag || info.refresh) {
  70. if (info.refresh) layui.event.call(this, 'admin', 'destroy(' + hashPath + ')'); // 页面卸载事件回调
  71. index.renderView(info, contentDom); // 渲染内容页面
  72. }
  73. if (!info.noChange) element.tabChange(tabFilter, hashPath); // 切换到此tab
  74. } else { // 单标签模式
  75. admin.activeNav(info.href);
  76. if ($(contentDom).length <= 0) { // 第一次补充标题栏
  77. var contentHtml = '<div class="layui-body-header">';
  78. contentHtml += ' <span class="layui-body-header-title"></span>';
  79. contentHtml += ' <span class="layui-breadcrumb pull-right" lay-filter="admin-body-breadcrumb" style="visibility: visible;"></span>';
  80. contentHtml += ' </div>';
  81. contentHtml += ' <div lay-id="' + hashPath + '" lay-url="' + info.href + '"></div>';
  82. $(bodyDOM).html(contentHtml);
  83. } else {
  84. // 页面卸载事件回调
  85. layui.event.call(this, 'admin', 'destroy(' + $(contentDom).attr('lay-id') + ')');
  86. $(contentDom).attr('lay-id', hashPath);
  87. $(contentDom).attr('lay-url', info.href);
  88. }
  89. $('[lay-filter="admin-body-breadcrumb"]').html(index.getBreadcrumbHtml(hashPath));
  90. var title = info.name;
  91. if (hashPath === layRouter.index) {
  92. title = $(info.name).text() || $(sideDOM + ' [href="#/' + layRouter.index + '"]').text() || '主页';
  93. }
  94. index.setTabTitle(title);
  95. index.mTabList.splice(0, index.mTabList.length);
  96. if (layRouter.index !== hashPath) index.mTabList.push(info); // 记录tab
  97. if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList); // 缓存tab
  98. index.renderView(info, contentDom); // 渲染内容页面
  99. }
  100. if (admin.getPageWidth() <= 768) admin.flexible(true); // 移动端自动收起侧导航
  101. $('.layui-table-tips-c').trigger('click'); // 切换tab关闭表格内浮窗
  102. };
  103. /* 渲染组件 */
  104. index.renderView = function (info, contentDom, loadingDOM) {
  105. var $contentDom = $(contentDom);
  106. if (!loadingDOM) loadingDOM = $contentDom.parent();
  107. if (!info.iframe) {
  108. admin.showLoading({elem: loadingDOM, size: ''});
  109. admin.ajax({
  110. url: setter.viewPath + '/' + info.path.join('/') + setter.viewSuffix,
  111. data: info.search,
  112. dataType: 'html',
  113. success: function (res) {
  114. admin.removeLoading(loadingDOM);
  115. if (typeof res !== 'string') res = JSON.stringify(res);
  116. if (res.indexOf('<tpl') === 0) {
  117. res = admin.util.tpl(res, info, setter.tplOpen, setter.tplClose);
  118. }
  119. $contentDom.html(res);
  120. admin.renderPerm(); // 移除没有权限的元素
  121. }
  122. });
  123. } else {
  124. $contentDom.html('<div class="admin-iframe" style="-webkit-overflow-scrolling: touch;"><iframe src="' + info.iframe + '" class="admin-iframe" frameborder="0"></iframe></div>');
  125. }
  126. };
  127. /* 加载主页 */
  128. index.loadHome = function (data) {
  129. var cacheTabs = admin.getTempData('indexTabs'); // 获取缓存tab
  130. index.regRouter([data]);
  131. if (setter.pageTabs) {
  132. var info = layRouter.routerInfo(data.url);
  133. layRouter.index = index.getHashPath(info);
  134. info.name = data.name;
  135. info.iframe = data.iframe;
  136. info.noChange = true;
  137. index.changeView(info);
  138. // 恢复缓存tab
  139. if (data.loadSetting !== false && setter.cacheTab && cacheTabs) {
  140. for (var i = 0; i < cacheTabs.length; i++) {
  141. cacheTabs[i].noChange = true;
  142. index.changeView(cacheTabs[i]);
  143. }
  144. }
  145. }
  146. // 初始化路由
  147. layRouter.init({index: data.url, notFound: setter.routerNotFound});
  148. };
  149. /* 打开tab */
  150. index.openNewTab = function (param) {
  151. index.regRouter([param]);
  152. layRouter.go(param.url);
  153. };
  154. /* 关闭tab */
  155. index.closeTab = function (hash) {
  156. element.tabDelete(tabFilter, index.getHashPath(hash));
  157. };
  158. /* 获取hash路径 */
  159. index.getHashPath = function (hash) {
  160. if (!hash || typeof hash === 'string') {
  161. return layRouter.routerInfo(hash).path.join('/');
  162. }
  163. return hash.path.join('/');
  164. };
  165. /* 跳转tab */
  166. index.go = function (hash) {
  167. layRouter.go(hash);
  168. };
  169. /* 修改Tab标题 */
  170. index.setTabTitle = function (title, hash) {
  171. if (setter.pageTabs) {
  172. if (!title) title = '';
  173. if (!hash) hash = index.getHashPath();
  174. if (hash) $(tabDOM + '>.layui-tab-title>li[lay-id="' + hash + '"] .title').html(title);
  175. } else {
  176. if (title) {
  177. $(titleDOM + '>.layui-body-header-title').html(title);
  178. $(titleDOM).addClass('show');
  179. $(headerDOM).css('box-shadow', '0 1px 0 0 rgba(0, 0, 0, .03)');
  180. } else {
  181. $(titleDOM).removeClass('show');
  182. admin.util.removeStyle(headerDOM, 'box-shadow');
  183. }
  184. }
  185. };
  186. /* 自定义Tab标题 */
  187. index.setTabTitleHtml = function (html) {
  188. if (setter.pageTabs) return;
  189. if (html) {
  190. $(titleDOM).addClass('show');
  191. $(titleDOM).html(html);
  192. } else {
  193. $(titleDOM).removeClass('show');
  194. }
  195. };
  196. /* 获取面包屑 */
  197. index.getBreadcrumb = function (hash) {
  198. if (!hash) hash = $(bodyDOM + '>div[lay-id]').attr('lay-id');
  199. var breadcrumb = [];
  200. var $href = $(sideDOM).find('[href="#/' + hash + '"]');
  201. breadcrumb.push($href.text().replace(/(^\s*)|(\s*$)/g, ''));
  202. while (true) {
  203. $href = $href.parent('dd').parent('dl').prev('a');
  204. if ($href.length === 0) break;
  205. breadcrumb.unshift($href.text().replace(/(^\s*)|(\s*$)/g, ''));
  206. }
  207. return breadcrumb;
  208. };
  209. /* 获取面包屑结构 */
  210. index.getBreadcrumbHtml = function (hash) {
  211. var breadcrumb = index.getBreadcrumb(hash);
  212. var htmlStr = (hash === layRouter.index ? '' : ('<a href="#/' + layRouter.index + '">首页</a>'));
  213. for (var i = 0; i < breadcrumb.length - 1; i++) {
  214. if (htmlStr) htmlStr += '<span lay-separator="">/</span>';
  215. htmlStr += '<a><cite>' + breadcrumb[i] + '</cite></a>';
  216. }
  217. return htmlStr;
  218. };
  219. /* 渲染侧边栏 */
  220. index.renderSide = function (data, tpl, callback, tplOpen, tplClose) {
  221. if (typeof tpl === 'function') {
  222. tplClose = tplOpen;
  223. tplOpen = callback;
  224. callback = tpl;
  225. tpl = undefined;
  226. }
  227. function removeHide(menus) {
  228. for (var i = menus.length - 1; i >= 0; i--) {
  229. if (menus[i].subMenus) {
  230. removeHide(menus[i].subMenus);
  231. }
  232. if (menus[i].type === 1) {
  233. menus.splice(i, 1);
  234. } else {
  235. if (!menus[i].target) menus[i].target = '_self';
  236. if (!menus[i].url) menus[i].url = 'javascript:;';
  237. }
  238. }
  239. }
  240. removeHide(data); // 处理数据
  241. var html = admin.util.tpl(tpl || $('#sideNav').html() || '', data, tplOpen || setter.tplOpen, tplClose || setter.tplClose);
  242. if (callback) {
  243. callback(html, {
  244. data: data,
  245. side: sideDOM,
  246. render: function () {
  247. element.render('nav', 'admin-side-nav');
  248. }
  249. });
  250. } else {
  251. $(sideDOM + '>.layui-nav').html(html);
  252. element.render('nav', 'admin-side-nav');
  253. }
  254. };
  255. /* 移动设备遮罩层 */
  256. var siteShadeDom = '.layui-layout-admin .site-mobile-shade';
  257. if ($(siteShadeDom).length === 0) {
  258. $('.layui-layout-admin').append('<div class="site-mobile-shade"></div>');
  259. }
  260. $(siteShadeDom).click(function () {
  261. admin.flexible(true);
  262. });
  263. /* 补充tab的dom */
  264. if (setter.pageTabs && $(tabDOM).length === 0) {
  265. var tabDomHtml = '<div class="layui-tab" lay-allowClose="true" lay-filter="' + tabFilter + '">';
  266. tabDomHtml += ' <ul class="layui-tab-title"></ul>';
  267. tabDomHtml += ' <div class="layui-tab-content"></div>';
  268. tabDomHtml += ' </div>';
  269. tabDomHtml += ' <div class="layui-icon admin-tabs-control layui-icon-prev" ew-event="leftPage"></div>';
  270. tabDomHtml += ' <div class="layui-icon admin-tabs-control layui-icon-next" ew-event="rightPage"></div>';
  271. tabDomHtml += ' <div class="layui-icon admin-tabs-control layui-icon-down">';
  272. tabDomHtml += ' <ul class="layui-nav" lay-filter="admin-pagetabs-nav">';
  273. tabDomHtml += ' <li class="layui-nav-item" lay-unselect>';
  274. tabDomHtml += ' <dl class="layui-nav-child layui-anim-fadein">';
  275. tabDomHtml += ' <dd ew-event="closeThisTabs" lay-unselect><a>关闭当前标签页</a></dd>';
  276. tabDomHtml += ' <dd ew-event="closeOtherTabs" lay-unselect><a>关闭其它标签页</a></dd>';
  277. tabDomHtml += ' <dd ew-event="closeAllTabs" lay-unselect><a>关闭全部标签页</a></dd>';
  278. tabDomHtml += ' </dl>';
  279. tabDomHtml += ' </li>';
  280. tabDomHtml += ' </ul>';
  281. tabDomHtml += ' </div>';
  282. $(bodyDOM).html(tabDomHtml);
  283. element.render('nav', 'admin-pagetabs-nav');
  284. }
  285. /* tab切换监听 */
  286. element.on('tab(' + tabFilter + ')', function () {
  287. var hash = $(this).attr('lay-id');
  288. var url = $(tabDOM + '>.layui-tab-content>.layui-tab-item>div[lay-id="' + hash + '"]').attr('lay-url');
  289. admin.activeNav(url); // 选中侧边栏
  290. layRouter.go(url); // 改变hash地址
  291. admin.resizeTable(0);
  292. admin.rollPage('auto');
  293. layui.event.call(this, 'admin', 'show(' + hash + ')');
  294. });
  295. /* tab删除监听 */
  296. element.on('tabDelete(' + tabFilter + ')', function (data) {
  297. if (data.index > 0 && data.index <= index.mTabList.length) {
  298. // 页面卸载事件回调
  299. var hashPath = index.getHashPath(index.mTabList[data.index - 1].href);
  300. layui.event.call(this, 'admin', 'destroy(' + hashPath + ')');
  301. //
  302. index.mTabList.splice(data.index - 1, 1);
  303. if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList);
  304. }
  305. // 解决偶尔出现关闭后没有选中任何Tab的bug
  306. if ($(tabDOM + '>.layui-tab-title>li.layui-this').length <= 0) {
  307. $(tabDOM + '>.layui-tab-title>li:last').trigger('click');
  308. }
  309. });
  310. /* 多系统切换事件 */
  311. $(document).off('click.navMore').on('click.navMore', '[nav-bind]', function () {
  312. var navId = $(this).attr('nav-bind');
  313. $('ul[lay-filter="' + navFilter + '"]').addClass('layui-hide');
  314. $('ul[nav-id="' + navId + '"]').removeClass('layui-hide');
  315. $(headerDOM + '>.layui-nav .layui-nav-item').removeClass('layui-this');
  316. $(this).parent('.layui-nav-item').addClass('layui-this');
  317. if (admin.getPageWidth() <= 768) admin.flexible(false); // 展开侧边栏
  318. });
  319. /* 开启Tab右键菜单 */
  320. if (setter.openTabCtxMenu && setter.pageTabs) {
  321. layui.use('contextMenu', function () {
  322. var contextMenu = layui.contextMenu;
  323. if (!contextMenu) return; // contextMenu模块可能会不存在
  324. $(tabDOM + '>.layui-tab-title').off('contextmenu.tab').on('contextmenu.tab', 'li', function (e) {
  325. var layId = $(this).attr('lay-id');
  326. contextMenu.show([{
  327. icon: 'layui-icon layui-icon-refresh',
  328. name: '刷新当前',
  329. click: function () {
  330. element.tabChange(tabFilter, layId);
  331. var url = $(tabDOM + '>.layui-tab-content>.layui-tab-item>div[lay-id="' + layId + '"]').attr('lay-url');
  332. admin.refresh(url);
  333. }
  334. }, {
  335. icon: 'layui-icon layui-icon-close-fill ctx-ic-lg',
  336. name: '关闭当前',
  337. click: function () {
  338. admin.closeThisTabs(layId);
  339. }
  340. }, {
  341. icon: 'layui-icon layui-icon-unlink',
  342. name: '关闭其他',
  343. click: function () {
  344. admin.closeOtherTabs(layId);
  345. }
  346. }, {
  347. icon: 'layui-icon layui-icon-close ctx-ic-lg',
  348. name: '关闭全部',
  349. click: function () {
  350. admin.closeAllTabs();
  351. }
  352. }], e.clientX, e.clientY);
  353. return false;
  354. });
  355. });
  356. }
  357. exports('index', index);
  358. });