admin.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868
  1. define(['jquery', 'layui','pearTab','pearMenu','pearFrame','pearFullscreen','pearTheme'], function($, layui, pearTab,pearMenu,pearFrame,fullscreen,pearTheme) {
  2. "use strict";
  3. const element = layui.element,
  4. form = layui.form;
  5. let bodyFrame;
  6. let sideMenu;
  7. let bodyTab;
  8. let config;
  9. let logout = function() {};
  10. let msgInstance;
  11. const body = $('body');
  12. const pearAdmin = {
  13. render : function(initConfig) {
  14. applyConfig(initConfig);
  15. },
  16. menuRender : function(param) {
  17. sideMenu = pearMenu.render({
  18. elem: 'sideMenu',
  19. async: param.menu.async !== undefined ? param.menu.async : true,
  20. theme: "dark-theme",
  21. height: '100%',
  22. method: param.menu.method,
  23. control: isControl(param) === 'true' || isControl(param) === true ? 'control' : false, // control
  24. defaultMenu: 0,
  25. accordion: param.menu.accordion,
  26. url: param.menu.data,
  27. data: param.menu.data,
  28. parseData: false,
  29. change: function() {
  30. compatible();
  31. },
  32. done: function() {
  33. sideMenu.isCollapse = param.menu.collapse;
  34. sideMenu.selectItem(param.menu.select);
  35. pearAdmin.collapse(param);
  36. }
  37. });
  38. },
  39. bodyRender : function(param) {
  40. body.on("click", ".refresh", function() {
  41. refresh();
  42. })
  43. if (isMuiltTab(param) === "true" || isMuiltTab(param) === true) {
  44. bodyTab = pearTab.render({
  45. container: 'content',
  46. elem: 'contentTabs',
  47. roll: true,
  48. tool: true,
  49. width: '100%',
  50. height: '100%',
  51. session: param.tab.session,
  52. index: 0,
  53. tabMax: param.tab.max,
  54. preload: param.tab.preload,
  55. closeEvent: function(id) {
  56. sideMenu.selectItem(id);
  57. },
  58. data: [{
  59. id: param.tab.index.id,
  60. url: param.tab.index.href,
  61. title: param.tab.index.title,
  62. close: false
  63. }],
  64. success: function(id) {
  65. if (param.tab.session) {
  66. setTimeout(function() {
  67. sideMenu.selectItem(id);
  68. //bodyTab.positionTab();
  69. }, 500)
  70. }
  71. }
  72. });
  73. bodyTab.click(function(id) {
  74. if (!param.tab.keepState) {
  75. bodyTab.refresh(false);
  76. }
  77. //bodyTab.positionTab();
  78. sideMenu.selectItem(id);
  79. })
  80. sideMenu.click(function(dom, data, change) {
  81. bodyTab.addTabOnly({
  82. id: data.menuId,
  83. title: data.menuTitle,
  84. url: data.menuUrl,
  85. icon: data.menuIcon,
  86. close: true
  87. }, 300);
  88. change !== false && compatible();
  89. })
  90. } else {
  91. bodyFrame = pearFrame.render({
  92. elem: 'content',
  93. title: '首页',
  94. url: param.tab.index.href,
  95. width: '100%',
  96. height: '100%'
  97. });
  98. sideMenu.click(function(dom, data) {
  99. bodyFrame.changePage(data.menuUrl, true);
  100. compatible()
  101. })
  102. }
  103. },
  104. keepLoad : function(param) {
  105. compatible()
  106. setTimeout(function() {
  107. $(".loader-main").fadeOut(200);
  108. }, param.other.keepLoad)
  109. },
  110. themeRender : function(option) {
  111. if (option.theme.allowCustom === false) {
  112. $(".setting").remove();
  113. }
  114. const colorId = localStorage.getItem("theme-color");
  115. const currentColor = getColorById(colorId);
  116. localStorage.setItem("theme-color", currentColor.id);
  117. localStorage.setItem("theme-color-color", currentColor.color);
  118. localStorage.setItem("theme-color-second", currentColor.second);
  119. pearTheme.changeTheme();
  120. let menu = localStorage.getItem("theme-menu");
  121. if (menu === null) {
  122. menu = option.theme.defaultMenu;
  123. } else {
  124. if (option.theme.allowCustom === false) {
  125. menu = option.theme.defaultMenu;
  126. }
  127. }
  128. let header = localStorage.getItem("theme-header");
  129. if (header === null) {
  130. header = option.theme.defaultHeader;
  131. } else {
  132. if (option.theme.allowCustom === false) {
  133. header = option.theme.defaultHeader;
  134. }
  135. }
  136. let banner = localStorage.getItem("theme-banner");
  137. if (banner === null) {
  138. banner = option.theme.banner;
  139. } else {
  140. if (option.theme.allowCustom === false) {
  141. banner = option.theme.banner;
  142. }
  143. }
  144. let autoHead = localStorage.getItem("auto-head");
  145. if (autoHead === null) {
  146. autoHead = option.other.autoHead;
  147. } else {
  148. if (option.theme.allowCustom === false) {
  149. autoHead = option.other.autoHead;
  150. }
  151. }
  152. let muiltTab = localStorage.getItem("muilt-tab");
  153. if (muiltTab === null) {
  154. muiltTab = option.tab.enable;
  155. } else {
  156. if (option.theme.allowCustom === false) {
  157. muiltTab = option.tab.enable;
  158. }
  159. }
  160. let control = localStorage.getItem("control");
  161. if (control === null) {
  162. control = option.menu.control;
  163. } else {
  164. if (option.theme.allowCustom === false) {
  165. control = option.menu.control;
  166. }
  167. }
  168. let footer = localStorage.getItem("footer");
  169. if( footer === null) {
  170. footer = option.other.footer;
  171. }else{
  172. if (option.theme.allowCustom === false) {
  173. footer = option.other.footer;
  174. }
  175. }
  176. localStorage.setItem("muilt-tab", muiltTab);
  177. localStorage.setItem("theme-banner", banner);
  178. localStorage.setItem("theme-menu", menu);
  179. localStorage.setItem("theme-header", header);
  180. localStorage.setItem("control", control);
  181. localStorage.setItem("footer", footer);
  182. this.menuSkin(menu);
  183. this.headerSkin(header);
  184. this.bannerSkin(banner);
  185. this.footer(footer);
  186. },
  187. footer : function(footer){
  188. const bodyDOM = $(".pear-admin .layui-body");
  189. const footerDOM = $(".pear-admin .layui-footer");
  190. if (footer === true || footer === "true") {
  191. footerDOM.removeClass("close");
  192. bodyDOM.css("bottom", footerDOM.outerHeight());
  193. } else {
  194. footerDOM.addClass("close");
  195. bodyDOM.css("bottom", "");
  196. }
  197. },
  198. bannerSkin : function(theme) {
  199. const pearAdmin = $(".pear-admin");
  200. pearAdmin.removeClass("banner-layout");
  201. if (theme === true || theme === "true") {
  202. pearAdmin.addClass("banner-layout");
  203. }
  204. },
  205. collapse : function(param) {
  206. if (param.menu.collapse) {
  207. if ($(window).width() >= 768) {
  208. collapse()
  209. }
  210. }
  211. },
  212. menuSkin : function(theme) {
  213. const pearAdmin = $(".pear-admin .layui-side");
  214. pearAdmin.removeClass("light-theme");
  215. pearAdmin.removeClass("dark-theme");
  216. pearAdmin.addClass(theme);
  217. },
  218. headerSkin : function(theme) {
  219. const pearAdmin = $(".pear-admin .layui-header");
  220. pearAdmin.removeClass("light-theme");
  221. pearAdmin.removeClass("dark-theme");
  222. pearAdmin.removeClass("auto-theme");
  223. pearAdmin.addClass(theme);
  224. },
  225. logout : function(callback) {
  226. logout = callback;
  227. },
  228. message : function(callback) {
  229. if (callback != null) {
  230. msgInstance.click(callback);
  231. }
  232. },
  233. collapseSide : function() {
  234. collapse()
  235. },
  236. refreshThis : function() {
  237. refresh()
  238. },
  239. refresh : function(id) {
  240. $("iframe[id='"+ id +"']").attr('src', $("iframe[id='"+ id +"']").attr('src'));
  241. },
  242. addTab : function(id, title, url) {
  243. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  244. bodyTab.addTabOnly({
  245. id: id,
  246. title: title,
  247. url: url,
  248. icon: null,
  249. close: true
  250. }, 400);
  251. } else {
  252. return;
  253. }
  254. },
  255. closeTab : function(id) {
  256. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  257. bodyTab.delTabByElem('content', id, function(currentId){
  258. sideMenu.selectItem(currentId);
  259. });
  260. } else {
  261. return;
  262. }
  263. },
  264. closeCurrentTab : function() {
  265. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  266. bodyTab.delCurrentTabByElem('content', function(id){
  267. sideMenu.selectItem(id);
  268. });
  269. } else {
  270. return;
  271. }
  272. },
  273. closeOtherTab : function() {
  274. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  275. bodyTab.delOtherTabByElem('content', function(id){
  276. sideMenu.selectItem(id);
  277. });
  278. } else {
  279. return;
  280. }
  281. },
  282. closeAllTab : function() {
  283. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  284. bodyTab.delAllTabByElem('content', function(id){
  285. sideMenu.selectItem(id);
  286. });
  287. } else {
  288. return;
  289. }
  290. },
  291. changeTabTitle : function(id, title) {
  292. bodyTab.changeTabTitleById('content', id ,title);
  293. },
  294. changeIframe : function(id, title, url) {
  295. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  296. return;
  297. } else {
  298. sideMenu.selectItem(id);
  299. bodyFrame.changePage(url, true);
  300. }
  301. },
  302. jump : function(id, title, url) {
  303. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  304. pearAdmin.addTab(id, title, url)
  305. } else {
  306. pearAdmin.changeIframe(id, title, url)
  307. }
  308. },
  309. };
  310. function refresh() {
  311. const refreshA = $(".refresh a");
  312. refreshA.removeClass("layui-icon-refresh-1");
  313. refreshA.addClass("layui-anim");
  314. refreshA.addClass("layui-anim-rotate");
  315. refreshA.addClass("layui-anim-loop");
  316. refreshA.addClass("layui-icon-loading");
  317. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) bodyTab.refresh(true);
  318. else bodyFrame.refresh(true);
  319. setTimeout(function() {
  320. refreshA.addClass("layui-icon-refresh-1");
  321. refreshA.removeClass("layui-anim");
  322. refreshA.removeClass("layui-anim-rotate");
  323. refreshA.removeClass("layui-anim-loop");
  324. refreshA.removeClass("layui-icon-loading");
  325. }, 600)
  326. }
  327. function collapse() {
  328. sideMenu.collapse();
  329. const admin = $(".pear-admin");
  330. const left = $(".layui-icon-spread-left")
  331. const right = $(".layui-icon-shrink-right")
  332. if (admin.is(".pear-mini")) {
  333. left.addClass("layui-icon-shrink-right")
  334. left.removeClass("layui-icon-spread-left")
  335. admin.removeClass("pear-mini");
  336. sideMenu.isCollapse = false;
  337. } else {
  338. right.addClass("layui-icon-spread-left")
  339. right.removeClass("layui-icon-shrink-right")
  340. admin.addClass("pear-mini");
  341. sideMenu.isCollapse = true;
  342. }
  343. }
  344. body.on('refresh', '.pear-menu', function () {
  345. sideMenu.refresh();
  346. })
  347. body.on("click", ".logout", function() {
  348. if (logout() && bodyTab) {
  349. bodyTab.clear();
  350. }
  351. })
  352. body.on("click", ".collapse,.pear-cover", function() {
  353. collapse();
  354. });
  355. body.on("click", ".menuSearch", function () {
  356. // 过滤菜单
  357. const filterHandle = function (filterData, val) {
  358. if (!val) return [];
  359. const filteredMenus = [];
  360. filterData = $.extend(true, {}, filterData);
  361. $.each(filterData, function (index, item) {
  362. if (item.childlist && item.childlist.length) {
  363. var childlist = filterHandle(item.childlist, val)
  364. var obj = $.extend({}, item, { childlist: childlist });
  365. if (childlist && childlist.length) {
  366. filteredMenus.push(obj);
  367. } else if (item.title.indexOf(val) >= 0) {
  368. item.childlist = []; // 父级匹配但子级不匹配,就去除子级
  369. filteredMenus.push($.extend({}, item));
  370. }
  371. } else if (item.title.indexOf(val) >= 0) {
  372. filteredMenus.push(item);
  373. }
  374. })
  375. return filteredMenus;
  376. }
  377. // 树转路径
  378. const tiledHandle = function (data) {
  379. const tiledMenus = [];
  380. const treeTiled = function (data, content) {
  381. let path = "";
  382. const separator = " / ";
  383. // 上级路径
  384. if (!content) content = "";
  385. $.each(data, function (index, item) {
  386. if (item.childlist && item.childlist.length) {
  387. path += content + item.title + separator;
  388. const childPath = treeTiled(item.childlist, path);
  389. path += childPath;
  390. if (!childPath) path = ""; // 重置路径
  391. } else {
  392. path += content + item.title
  393. tiledMenus.push({ path: path, info: item });
  394. path = ""; //重置路径
  395. }
  396. })
  397. return path;
  398. };
  399. treeTiled(data);
  400. return tiledMenus;
  401. }
  402. // 创建搜索列表
  403. const createList = function (data) {
  404. let _listHtml = '';
  405. $.each(data, function (index, item) {
  406. _listHtml += '<li smenu-id="' + item.info.id + '" smenu-icon="' + item.info.icon + '" smenu-url="' + item.info.href + '" smenu-title="' + item.info.title + '" smenu-type="' + item.info.type + '">';
  407. _listHtml += ' <span><i style="margin-right:10px" class=" ' + item.info.icon + '"></i>' + item.path + '</span>';
  408. _listHtml += ' <i class="layui-icon layui-icon-right"></i>';
  409. _listHtml += '</li>'
  410. })
  411. return _listHtml;
  412. }
  413. const _html = [
  414. '<div class="menu-search-content">',
  415. ' <div class="layui-form menu-search-input-wrapper">',
  416. ' <div class=" layui-input-wrap layui-input-wrap-prefix">',
  417. ' <div class="layui-input-prefix">',
  418. ' <i class="layui-icon layui-icon-search"></i>',
  419. ' </div>',
  420. ' <input type="text" name="menuSearch" value="" placeholder="搜索菜单" autocomplete="off" class="layui-input" lay-affix="clear">',
  421. ' </div>',
  422. ' </div>',
  423. ' <div class="menu-search-no-data">暂无搜索结果</div>',
  424. ' <ul class="menu-search-list">',
  425. ' </ul>',
  426. ' <div class="menu-search-tips"><div><span class="mr-1">选择</span><kbd class="mr-1 w-5"> ↑ </kbd><kbd class="mr-5 w-5"> ↓ </kbd>',
  427. '<span class="mr-1">确定</span><kbd class="mr-5"> Enter </kbd><span class="mr-1">关闭</span><kbd class="mr-1"> Esc </kbd></div></div>',
  428. '</div>'
  429. ].join('');
  430. layer.open({
  431. type: 1,
  432. offset: "10%",
  433. area: ['600px'],
  434. title: false,
  435. closeBtn: 0,
  436. shadeClose: true,
  437. anim: 0,
  438. move: false,
  439. content: _html,
  440. success: function(layero,layeridx){
  441. const $layer = layero;
  442. const $content = $(layero).children('.layui-layer-content');
  443. const $input = $(".menu-search-input-wrapper input");
  444. const $noData = $(".menu-search-no-data");
  445. const $list = $(".menu-search-list");
  446. const menuData = sideMenu.option.data;
  447. $layer.css("border-radius", "6px");
  448. $input.off("focus").focus();
  449. // 搜索菜单
  450. $input.off("input").on("input", debounce(function(){
  451. const keywords = $input.val().trim();
  452. const filteredMenus = filterHandle(menuData, keywords);
  453. if(filteredMenus.length){
  454. const tiledMenus = tiledHandle(filteredMenus);
  455. const listHtml = createList(tiledMenus);
  456. $noData.css("display", "none");
  457. $list.html("").append(listHtml).children(":first").addClass("this")
  458. }else{
  459. $list.html("");
  460. $noData.css("display", "flex");
  461. }
  462. const currentHeight = $(".menu-search-content").outerHeight()
  463. $layer.css("height", currentHeight);
  464. $content.css("height", currentHeight);
  465. }, 500)
  466. )
  467. // 搜索列表点击事件
  468. $list.off("click").on("click", "li", function () {
  469. const menuId = $(this).attr("smenu-id");
  470. const menuUrl = $(this).attr("smenu-url");
  471. const menuIcon = $(this).attr("smenu-icon");
  472. const menuTitle = $(this).attr("smenu-title");
  473. const menuType = $(this).attr("smenu-type");
  474. const openableWindow = menuType === "1" || menuType === 1;
  475. if(sideMenu.isCollapse){
  476. collapse();
  477. }
  478. if (openableWindow) {
  479. pearAdmin.jump(menuId, menuTitle, menuUrl)
  480. } else {
  481. sideMenu.selectItem(menuId);
  482. }
  483. compatible();
  484. layer.close(layeridx);
  485. })
  486. $list.off('mouseenter').on("mouseenter", "li", function () {
  487. $(".menu-search-list li.this").removeClass("this");
  488. $(this).addClass("this");
  489. }).off("mouseleave").on("mouseleave", "li", function(){
  490. $(this).removeClass("this");
  491. })
  492. // 监听键盘事件
  493. // Enter:13 Spacebar:32 UpArrow:38 DownArrow:40 Esc:27
  494. $(document).off("keydown").keydown(function (e) {
  495. const $menuSearchList = $(".menu-search-list li.this");
  496. if (e.keyCode === 13 || e.keyCode === 32) {
  497. e.preventDefault();
  498. const menuId = $menuSearchList.attr("smenu-id");
  499. const menuUrl = $menuSearchList.attr("smenu-url");
  500. const menuTitle = $menuSearchList.attr("smenu-title");
  501. const menuType = $menuSearchList.attr("smenu-type");
  502. const openableWindow = menuType === "1" || menuType === 1;
  503. if (sideMenu.isCollapse) {
  504. collapse();
  505. }
  506. if (openableWindow) {
  507. pearAdmin.jump(menuId, menuTitle, menuUrl)
  508. } else {
  509. sideMenu.selectItem(menuId);
  510. }
  511. compatible();
  512. layer.close(layeridx);
  513. }else if(e.keyCode === 38){
  514. e.preventDefault();
  515. const prevEl = $menuSearchList.prev();
  516. $menuSearchList.removeClass("this");
  517. if(prevEl.length !== 0){
  518. prevEl.addClass("this");
  519. }else{
  520. $list.children().last().addClass("this");
  521. }
  522. }else if(e.keyCode === 40){
  523. e.preventDefault();
  524. const nextEl = $menuSearchList.next();
  525. $menuSearchList.removeClass("this");
  526. if(nextEl.length !== 0){
  527. nextEl.addClass("this");
  528. }else{
  529. $list.children().first().addClass("this");
  530. }
  531. }else if(e.keyCode === 27){
  532. e.preventDefault();
  533. layer.close(layeridx);
  534. }
  535. })
  536. }
  537. })
  538. });
  539. body.on("click", ".fullScreen", function() {
  540. if ($(this).hasClass("layui-icon-screen-restore")) {
  541. fullscreen.fullClose().then(function() {
  542. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  543. });
  544. } else {
  545. fullscreen.fullScreen().then(function() {
  546. $(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
  547. });
  548. }
  549. });
  550. body.on("click", '[user-menu-id]', function() {
  551. if (isMuiltTab(config) === "true" || isMuiltTab(config) === true) {
  552. bodyTab.addTabOnly({
  553. id: $(this).attr("user-menu-id"),
  554. title: $(this).attr("user-menu-title"),
  555. url: $(this).attr("user-menu-url"),
  556. icon: "",
  557. close: true
  558. }, 300);
  559. } else {
  560. bodyFrame.changePage($(this).attr("user-menu-url"), true);
  561. }
  562. });
  563. body.on("click", ".setting", function() {
  564. let menuItem =
  565. '<li class="layui-this" data-select-bgcolor="dark-theme" >' +
  566. '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
  567. '<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
  568. '<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
  569. '</a>' +
  570. '</li>';
  571. menuItem +=
  572. '<li data-select-bgcolor="light-theme" >' +
  573. '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
  574. '<div><span style="display:block; width: 20%; float: left; height: 12px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
  575. '<div><span style="display:block; width: 20%; float: left; height: 40px; background: white;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
  576. '</a>' +
  577. '</li>';
  578. const menuHtml =
  579. '<div class="pearone-color">\n' +
  580. '<div class="color-title">菜单风格</div>\n' +
  581. '<div class="color-content">\n' +
  582. '<ul>\n' + menuItem + '</ul>\n' +
  583. '</div>\n' +
  584. '</div>';
  585. let headItem =
  586. '<li class="layui-this" data-select-header="light-theme" >' +
  587. '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
  588. '<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: white;"></span></div>' +
  589. '<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
  590. '</a>' +
  591. '</li>';
  592. headItem +=
  593. '<li data-select-header="dark-theme" >' +
  594. '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
  595. '<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: #28333E;"></span></div>' +
  596. '<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
  597. '</a>' +
  598. '</li>';
  599. headItem +=
  600. '<li data-select-header="auto-theme" >' +
  601. '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">' +
  602. '<div><span style="display:block; width: 20%; float: left; height: 12px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 12px; background: var(--lay-color-primary);" ></span></div>' +
  603. '<div><span style="display:block; width: 20%; float: left; height: 40px; background: #28333E;"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;"></span></div>' +
  604. '</a>' +
  605. '</li>';
  606. const headHtml =
  607. '<div class="pearone-color">\n' +
  608. '<div class="color-title">顶栏风格</div>\n' +
  609. '<div class="color-content">\n' +
  610. '<ul>\n' + headItem + '</ul>\n' +
  611. '</div>\n' +
  612. '</div>';
  613. let moreItem =
  614. '<div class="layui-form-item"><div class="layui-input-inline" style="width:220px;"><input type="checkbox" name="control" lay-filter="control" lay-skin="switch" lay-text="开|关"></div><span class="set-text">菜单</span></div>';
  615. moreItem +=
  616. '<div class="layui-form-item"><div class="layui-input-inline" style="width:220px;"><input type="checkbox" name="muilt-tab" lay-filter="muilt-tab" lay-skin="switch" lay-text="开|关"></div><span class="set-text">视图</span></div>';
  617. moreItem +=
  618. '<div class="layui-form-item"><div class="layui-input-inline" style="width:220px;"><input type="checkbox" name="banner" lay-filter="banner" lay-skin="switch" lay-text="开|关"></div><span class="set-text">通栏</span></div>';
  619. moreItem +=
  620. '<div class="layui-form-item"><div class="layui-input-inline" style="width:220px;"><input type="checkbox" name="footer" lay-filter="footer" lay-skin="switch" lay-text="开|关"></div><span class="set-text">页脚</span></div>';
  621. const moreHtml = '<br><div class="pearone-color">\n' +
  622. '<div class="color-title">更多设置</div>\n' +
  623. '<div class="color-content">\n' +
  624. '<form class="layui-form">\n' + moreItem + '</form>\n' +
  625. '</div>\n' +
  626. '</div>';
  627. layer.open({
  628. type: 1,
  629. offset: 'r',
  630. area: ['320px', '100%'],
  631. title: false,
  632. shade: 0.1,
  633. closeBtn: 0,
  634. shadeClose: true,
  635. anim: 'slideLeft',
  636. move: false,
  637. content: menuHtml + headHtml + buildColorHtml() + moreHtml,
  638. success: function(layero, index) {
  639. form.render();
  640. const color = localStorage.getItem("theme-color");
  641. const menu = localStorage.getItem("theme-menu");
  642. const header = localStorage.getItem("theme-header");
  643. if (color !== "null") {
  644. $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
  645. $("*[color-id='" + color + "']").addClass("layui-icon").addClass("layui-icon-ok");
  646. }
  647. if (menu !== "null") {
  648. $("*[data-select-bgcolor]").removeClass("layui-this");
  649. $("[data-select-bgcolor='" + menu + "']").addClass("layui-this");
  650. }
  651. if (header !== "null") {
  652. $("*[data-select-header]").removeClass("layui-this");
  653. $("[data-select-header='" + header + "']").addClass("layui-this");
  654. }
  655. form.on('switch(control)', function(data) {
  656. localStorage.setItem("control", this.checked);
  657. window.location.reload();
  658. })
  659. form.on('switch(muilt-tab)', function(data) {
  660. localStorage.setItem("muilt-tab", this.checked);
  661. window.location.reload();
  662. })
  663. form.on('switch(banner)', function(data) {
  664. localStorage.setItem("theme-banner", this.checked);
  665. pearAdmin.bannerSkin(this.checked);
  666. })
  667. form.on('switch(footer)', function (data) {
  668. localStorage.setItem("footer", this.checked);
  669. pearAdmin.footer(this.checked);
  670. })
  671. if (localStorage.getItem('theme-banner') === 'true') {
  672. $('input[name="banner"]').attr('checked', 'checked')
  673. } else {
  674. $('input[name="banner"]').removeAttr('checked')
  675. }
  676. if (localStorage.getItem('control') === 'true') {
  677. $('input[name="control"]').attr('checked', 'checked')
  678. } else {
  679. $('input[name="control"]').removeAttr('checked')
  680. }
  681. if (localStorage.getItem('muilt-tab') === 'true') {
  682. $('input[name="muilt-tab"]').attr('checked', 'checked')
  683. } else {
  684. $('input[name="muilt-tab"]').removeAttr('checked')
  685. }
  686. if (localStorage.getItem('footer') === 'true') {
  687. $('input[name="footer"]').attr('checked', 'checked')
  688. } else {
  689. $('input[name="footer"]').removeAttr('checked')
  690. }
  691. form.render('checkbox');
  692. }
  693. });
  694. });
  695. body.on('click', '[data-select-bgcolor]', function() {
  696. const theme = $(this).attr('data-select-bgcolor');
  697. $('[data-select-bgcolor]').removeClass("layui-this");
  698. $(this).addClass("layui-this");
  699. localStorage.setItem("theme-menu", theme);
  700. pearAdmin.menuSkin(theme);
  701. });
  702. body.on('click', '[data-select-header]', function() {
  703. const theme = $(this).attr('data-select-header');
  704. $('[data-select-header]').removeClass("layui-this");
  705. $(this).addClass("layui-this");
  706. localStorage.setItem("theme-header", theme);
  707. pearAdmin.headerSkin(theme);
  708. });
  709. body.on('click', '.select-color-item', function() {
  710. $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
  711. $(this).addClass("layui-icon").addClass("layui-icon-ok");
  712. const colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
  713. const currentColor = getColorById(colorId);
  714. localStorage.setItem("theme-color", currentColor.id);
  715. localStorage.setItem("theme-color-color", currentColor.color);
  716. localStorage.setItem("theme-color-second", currentColor.second);
  717. pearTheme.changeTheme();
  718. });
  719. function applyConfig(param) {
  720. config = param;
  721. pearAdmin.menuRender(param);
  722. pearAdmin.bodyRender(param);
  723. pearAdmin.themeRender(param);
  724. pearAdmin.keepLoad(param);
  725. }
  726. function getColorById(id) {
  727. let color;
  728. let flag = false;
  729. $.each(config.colors, function(i, value) {
  730. if (value.id === id) {
  731. color = value;
  732. flag = true;
  733. }
  734. })
  735. if (flag === false || config.theme.allowCustom === false) {
  736. $.each(config.colors, function(i, value) {
  737. if (value.id === config.theme.defaultColor) {
  738. color = value;
  739. }
  740. })
  741. }
  742. return color;
  743. }
  744. function buildColorHtml() {
  745. let colors = "";
  746. $.each(config.colors, function(i, value) {
  747. colors += "<span class='select-color-item' color-id='" + value.id + "' style='background-color:" + value.color +
  748. ";'></span>";
  749. })
  750. return "<div class='select-color'><div class='select-color-title'>主题配色</div><div class='select-color-content'>" +
  751. colors + "</div></div>"
  752. }
  753. function compatible() {
  754. if ($(window).width() <= 768) {
  755. collapse()
  756. }
  757. }
  758. function isControl(option) {
  759. if (option.theme.allowCustom) {
  760. if (localStorage.getItem("control") != null) {
  761. return localStorage.getItem("control")
  762. } else {
  763. return option.menu.control
  764. }
  765. } else {
  766. return option.menu.control
  767. }
  768. }
  769. function isMuiltTab(option) {
  770. if (option.theme.allowCustom) {
  771. if (localStorage.getItem("muilt-tab") != null) {
  772. return localStorage.getItem("muilt-tab")
  773. } else {
  774. return option.tab.enable
  775. }
  776. } else {
  777. return option.tab.enable
  778. }
  779. }
  780. window.onresize = function() {
  781. if (!fullscreen.isFullscreen()) {
  782. $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
  783. }
  784. }
  785. $(window).on('resize', debounce(function () {
  786. if (sideMenu && !sideMenu.isCollapse && $(window).width() <= 768) {
  787. collapse();
  788. }
  789. },50));
  790. function debounce(fn, awaitTime) {
  791. let timerID = null;
  792. return function () {
  793. const arg = arguments[0];
  794. if (timerID) {
  795. clearTimeout(timerID)
  796. }
  797. timerID = setTimeout(function () {
  798. fn(arg)
  799. }, awaitTime)
  800. }
  801. }
  802. return pearAdmin;
  803. })