miniAdmin.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. /**
  2. * date:2020/02/27
  3. * author:Mr.Chung
  4. * version:2.0
  5. * description:layuimini 主体框架扩展
  6. */
  7. define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, miniTheme, miniTab) {
  8. var $ = layui.$,
  9. layer = layui.layer,
  10. element = layui.element;
  11. if (!/http(s*):\/\//.test(location.href)) {
  12. var tips = "请先将项目部署至web容器(Apache/Tomcat/Nginx/IIS/等),否则部分数据将无法显示";
  13. return layer.alert(tips);
  14. }
  15. var miniAdmin = {
  16. /**
  17. * 后台框架初始化
  18. * @param options.iniUrl 后台初始化接口地址
  19. * @param options.clearUrl 后台清理缓存接口
  20. * @param options.urlHashLocation URL地址hash定位
  21. * @param options.bgColorDefault 默认皮肤
  22. * @param options.multiModule 是否开启多模块
  23. * @param options.menuChildOpen 是否展开子菜单
  24. * @param options.loadingTime 初始化加载时间
  25. * @param options.pageAnim iframe窗口动画
  26. * @param options.maxTabNum 最大的tab打开数量
  27. */
  28. render: function (options) {
  29. options.iniUrl = options.iniUrl || null;
  30. options.clearUrl = options.clearUrl || null;
  31. options.urlHashLocation = options.urlHashLocation || false;
  32. options.bgColorDefault = options.bgColorDefault || 1;
  33. options.multiModule = options.multiModule || false;
  34. options.menuChildOpen = options.menuChildOpen || false;
  35. options.loadingTime = options.loadingTime || 1;
  36. options.pageAnim = options.pageAnim || false;
  37. options.maxTabNum = options.maxTabNum || 20;
  38. $.getJSON(options.iniUrl, function (data) {
  39. if (data == null) {
  40. miniAdmin.error('暂无菜单信息')
  41. } else {
  42. miniAdmin.renderLogo(data.logoInfo);
  43. miniAdmin.renderClear(options.clearUrl);
  44. miniAdmin.renderHome(data.homeInfo);
  45. miniAdmin.renderAnim(options.pageAnim);
  46. miniAdmin.listen();
  47. miniMenu.render({
  48. menuList: data.menuInfo,
  49. multiModule: options.multiModule,
  50. menuChildOpen: options.menuChildOpen
  51. });
  52. miniTab.render({
  53. filter: 'layuiminiTab',
  54. urlHashLocation: options.urlHashLocation,
  55. multiModule: options.multiModule,
  56. menuChildOpen: options.menuChildOpen,
  57. maxTabNum: options.maxTabNum,
  58. menuList: data.menuInfo,
  59. homeInfo: data.homeInfo,
  60. listenSwichCallback: function () {
  61. miniAdmin.renderDevice();
  62. }
  63. });
  64. miniTheme.render({
  65. bgColorDefault: options.bgColorDefault,
  66. listen: true,
  67. });
  68. miniAdmin.deleteLoader(options.loadingTime);
  69. }
  70. }).fail(function () {
  71. miniAdmin.error('菜单接口有误');
  72. });
  73. },
  74. /**
  75. * 初始化logo
  76. * @param data
  77. */
  78. renderLogo: function (data) {
  79. var html = '<a href="' + data.href + '"><h1>' + data.title + '</h1></a>';
  80. $('.layuimini-logo').html(html);
  81. },
  82. /**
  83. * 初始化首页
  84. * @param data
  85. */
  86. renderHome: function (data) {
  87. sessionStorage.setItem('layuiminiHomeHref', data.href);
  88. $('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
  89. $('#layuiminiHomeTabId').attr('lay-id', data.href);
  90. $('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
  91. },
  92. /**
  93. * 初始化缓存地址
  94. * @param clearUrl
  95. */
  96. renderClear: function (clearUrl) {
  97. $('.layuimini-clear').attr('data-href',clearUrl);
  98. },
  99. /**
  100. * 初始化iframe窗口动画
  101. * @param anim
  102. */
  103. renderAnim: function (anim) {
  104. if (anim) {
  105. $('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
  106. '.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
  107. '@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
  108. ' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
  109. '}\n' +
  110. '@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
  111. ' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
  112. '}\n' +
  113. '@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
  114. ' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
  115. '}\n' +
  116. '@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
  117. ' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
  118. '}' +
  119. '</style>');
  120. }
  121. },
  122. fullScreen: function () {
  123. var el = document.documentElement;
  124. var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
  125. if (typeof rfs != "undefined" && rfs) {
  126. rfs.call(el);
  127. } else if (typeof window.ActiveXObject != "undefined") {
  128. var wscript = new ActiveXObject("WScript.Shell");
  129. if (wscript != null) {
  130. wscript.SendKeys("{F11}");
  131. }
  132. } else if (el.msRequestFullscreen) {
  133. el.msRequestFullscreen();
  134. } else if (el.oRequestFullscreen) {
  135. el.oRequestFullscreen();
  136. } else if (el.webkitRequestFullscreen) {
  137. el.webkitRequestFullscreen();
  138. } else if (el.mozRequestFullScreen) {
  139. el.mozRequestFullScreen();
  140. } else {
  141. miniAdmin.error('浏览器不支持全屏调用!');
  142. }
  143. },
  144. /**
  145. * 退出全屏
  146. */
  147. exitFullScreen: function () {
  148. var el = document;
  149. var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
  150. if (typeof cfs != "undefined" && cfs) {
  151. cfs.call(el);
  152. } else if (typeof window.ActiveXObject != "undefined") {
  153. var wscript = new ActiveXObject("WScript.Shell");
  154. if (wscript != null) {
  155. wscript.SendKeys("{F11}");
  156. }
  157. } else if (el.msExitFullscreen) {
  158. el.msExitFullscreen();
  159. } else if (el.oRequestFullscreen) {
  160. el.oCancelFullScreen();
  161. }else if (el.mozCancelFullScreen) {
  162. el.mozCancelFullScreen();
  163. } else if (el.webkitCancelFullScreen) {
  164. el.webkitCancelFullScreen();
  165. } else {
  166. miniAdmin.error('浏览器不支持全屏调用!');
  167. }
  168. },
  169. /**
  170. * 初始化设备端
  171. */
  172. renderDevice: function () {
  173. if (miniAdmin.checkMobile()) {
  174. $('.layuimini-tool i').attr('data-side-fold', 1);
  175. $('.layuimini-tool i').attr('class', 'fa fa-outdent');
  176. $('.layui-layout-body').removeClass('layuimini-mini');
  177. $('.layui-layout-body').addClass('layuimini-all');
  178. }
  179. },
  180. /**
  181. * 初始化加载时间
  182. * @param loadingTime
  183. */
  184. deleteLoader: function (loadingTime) {
  185. $('.layuimini-loader').fadeOut();
  186. },
  187. /**
  188. * 成功
  189. * @param title
  190. * @returns {*}
  191. */
  192. success: function (title) {
  193. return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
  194. },
  195. /**
  196. * 失败
  197. * @param title
  198. * @returns {*}
  199. */
  200. error: function (title) {
  201. return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
  202. },
  203. /**
  204. * 判断是否为手机
  205. * @returns {boolean}
  206. */
  207. checkMobile: function () {
  208. var ua = navigator.userAgent.toLocaleLowerCase();
  209. var pf = navigator.platform.toLocaleLowerCase();
  210. var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
  211. || (/ucweb.*linux/i.test(ua));
  212. var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
  213. var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
  214. var clientWidth = document.documentElement.clientWidth;
  215. if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
  216. return false;
  217. } else {
  218. return true;
  219. }
  220. },
  221. /**
  222. * 监听
  223. */
  224. listen: function () {
  225. /**
  226. * 清理
  227. */
  228. $('body').on('click', '[data-clear]', function () {
  229. var loading = layer.load(0, {shade: false, time: 2 * 1000});
  230. sessionStorage.clear();
  231. // 判断是否清理服务端
  232. var clearUrl = $(this).attr('data-href');
  233. if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
  234. $.getJSON(clearUrl, function (data, status) {
  235. layer.close(loading);
  236. if (data.code != 1) {
  237. return miniAdmin.error(data.msg);
  238. } else {
  239. return miniAdmin.success(data.msg);
  240. }
  241. }).fail(function () {
  242. layer.close(loading);
  243. return miniAdmin.error('清理缓存接口有误');
  244. });
  245. } else {
  246. layer.close(loading);
  247. return miniAdmin.success('清除缓存成功');
  248. }
  249. });
  250. /**
  251. * 刷新
  252. */
  253. $('body').on('click', '[data-refresh]', function () {
  254. $(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
  255. miniAdmin.success('刷新成功');
  256. });
  257. /**
  258. * 监听提示信息
  259. */
  260. $("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
  261. if (miniAdmin.checkMobile()) {
  262. return false;
  263. }
  264. var classInfo = $(this).attr('class'),
  265. tips = $(this).prop("innerHTML"),
  266. isShow = $('.layuimini-tool i').attr('data-side-fold');
  267. if (isShow == 0 && tips) {
  268. 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>" ;
  269. window.openTips = layer.tips(tips, $(this), {
  270. tips: [2, '#2f4056'],
  271. time: 300000,
  272. skin:"popup-tips",
  273. success:function (el) {
  274. var left = $(el).position().left - 10 ;
  275. $(el).css({ left:left });
  276. element.render();
  277. }
  278. });
  279. }
  280. });
  281. $("body").on("mouseleave", ".popup-tips", function () {
  282. if (miniAdmin.checkMobile()) {
  283. return false;
  284. }
  285. var isShow = $('.layuimini-tool i').attr('data-side-fold');
  286. if (isShow == 0) {
  287. try {
  288. layer.close(window.openTips);
  289. } catch (e) {
  290. console.log(e.message);
  291. }
  292. }
  293. });
  294. /**
  295. * 全屏
  296. */
  297. $('body').on('click', '[data-check-screen]', function () {
  298. var check = $(this).attr('data-check-screen');
  299. if (check == 'full') {
  300. miniAdmin.fullScreen();
  301. $(this).attr('data-check-screen', 'exit');
  302. $(this).html('<i class="fa fa-compress"></i>');
  303. } else {
  304. miniAdmin.exitFullScreen();
  305. $(this).attr('data-check-screen', 'full');
  306. $(this).html('<i class="fa fa-arrows-alt"></i>');
  307. }
  308. });
  309. /**
  310. * 点击遮罩层
  311. */
  312. $('body').on('click', '.layuimini-make', function () {
  313. miniAdmin.renderDevice();
  314. });
  315. }
  316. };
  317. return miniAdmin;
  318. });