admin.js 30 KB

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