miniAdmin.js 15 KB

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