From fe2c29592a1a87c4b6cebd66b9e7b5533187c7cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?dotnet=E7=88=B1=E5=A5=BD=E8=80=85?= Date: Tue, 12 Sep 2023 14:24:20 +0000 Subject: [PATCH 1/3] =?UTF-8?q?!125=20=E5=A2=9E=E5=8A=A0=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E5=92=8C=20url=E5=9C=B0=E5=9D=80=E8=81=94=E5=8A=A8=20=E9=87=87?= =?UTF-8?q?=E7=94=A8=20url=20hash=20=E5=9C=B0=E5=9D=80=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=20*=20Merge=20branch=20'4.x'=20of=20https://gitee.com/dotnetfa?= =?UTF-8?q?ns/Pear-Admin-Layui=20into=204.x=20*=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=85=B3=E9=97=AD=E6=97=B6=E7=9A=84=E6=BF=80?= =?UTF-8?q?=E6=B4=BB=E9=80=BB=E8=BE=91=20*=20Merge=20branch=20'4.x'=20of?= =?UTF-8?q?=20gitee.com:pear-admin/Pear-Admin-Layui=20into=204.x=20*=20?= =?UTF-8?q?=E5=B0=86hash=E8=81=94=E5=8A=A8=E7=9A=84=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=88=B0admin.js=E9=87=8C=20*=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=8F=9C=E5=8D=95=E5=92=8Chash=E5=9C=B0=E5=9D=80?= =?UTF-8?q?=E8=81=94=E5=8A=A8=20*=20add=20view/grid.html.=20*=20update=20c?= =?UTF-8?q?omponent/pear/module/tabPage.js.=20*=20update=20component/pear/?= =?UTF-8?q?module/admin.js.=20*=20update=20index.html.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/data/menu.json | 10 +- api/table.json | 127 +++ component/pear/module/admin.js | 1732 ++++++++++++++++-------------- component/pear/module/tabPage.js | 218 ++-- config/pear.config.json | 2 +- index.html | 10 +- view/component/table.html | 181 ++++ view/component/toast.html | 2 +- 8 files changed, 1331 insertions(+), 951 deletions(-) create mode 100644 api/table.json create mode 100644 view/component/table.html diff --git a/admin/data/menu.json b/admin/data/menu.json index f164d08..7640e7c 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -36,6 +36,14 @@ "type": 1, "openType": "_component", "href": "view/listing/table.html" + }, + { + "id":"table1", + "title": "常用列表", + "icon": "layui-icon layui-icon-face-smile", + "type": 1, + "openType": "_component", + "href": "view/component/table.html" } ] }, @@ -163,7 +171,7 @@ }, { "id": "deep", - "title": "深度测试", + "title": "菜单深度测试", "icon": "layui-icon layui-icon-auz", "type": 0, "href": "", diff --git a/api/table.json b/api/table.json new file mode 100644 index 0000000..7bda61b --- /dev/null +++ b/api/table.json @@ -0,0 +1,127 @@ +{ + "code": 0, + "msg": "", + "count": 1000, + "data": [ + { + "id": 10000, + "username": "user-0", + "sex": "女", + "city": "城市-0", + "sign": "签名-0", + "experience": 255, + "logins": 24, + "wealth": 82830700, + "classify": "作家", + "score": 57 + }, + { + "id": 10001, + "username": "user-1", + "sex": "男", + "city": "城市-1", + "sign": "签名-1", + "experience": 884, + "logins": 58, + "wealth": 64928690, + "classify": "词人", + "score": 27 + }, + { + "id": 10002, + "username": "user-2", + "sex": "女", + "city": "城市-2", + "sign": "签名-2", + "experience": 650, + "logins": 77, + "wealth": 6298078, + "classify": "酱油", + "score": 31 + }, + { + "id": 10003, + "username": "user-3", + "sex": "女", + "city": "城市-3", + "sign": "签名-3", + "experience": 362, + "logins": 157, + "wealth": 37117017, + "classify": "诗人", + "score": 68 + }, + { + "id": 10004, + "username": "user-4", + "sex": "男", + "city": "城市-4", + "sign": "签名-4", + "experience": 807, + "logins": 51, + "wealth": 76263262, + "classify": "作家", + "score": 6 + }, + { + "id": 10005, + "username": "user-5", + "sex": "女", + "city": "城市-5", + "sign": "签名-5", + "experience": 173, + "logins": 68, + "wealth": 60344147, + "classify": "作家", + "score": 87 + }, + { + "id": 10006, + "username": "user-6", + "sex": "女", + "city": "城市-6", + "sign": "签名-6", + "experience": 982, + "logins": 37, + "wealth": 57768166, + "classify": "作家", + "score": 34 + }, + { + "id": 10007, + "username": "user-7", + "sex": "男", + "city": "城市-7", + "sign": "签名-7", + "experience": 727, + "logins": 150, + "wealth": 82030578, + "classify": "作家", + "score": 28 + }, + { + "id": 10008, + "username": "user-8", + "sex": "男", + "city": "城市-8", + "sign": "签名-8", + "experience": 951, + "logins": 133, + "wealth": 16503371, + "classify": "词人", + "score": 14 + }, + { + "id": 10009, + "username": "user-9", + "sex": "女", + "city": "城市-9", + "sign": "签名-9", + "experience": 484, + "logins": 25, + "wealth": 86801934, + "classify": "词人", + "score": 75 + } + ] +} \ No newline at end of file diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js index 7c8d821..f0e5bcf 100644 --- a/component/pear/module/admin.js +++ b/component/pear/module/admin.js @@ -1,822 +1,914 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', 'page', 'fullscreen', 'messageCenter', 'menuSearch'], function (exports) { - "use strict"; - - var $ = layui.jquery, - form = layui.form, - yaml = layui.yaml, - page = layui.page, - menu = layui.menu, - messageCenter = layui.messageCenter, - menuSearch = layui.menuSearch, - fullscreen = layui.fullscreen, - tools = layui.tools, - tabPage = layui.tabPage; - - var sideMenu; - - var configurationCache; - - var bodyTab; - - var bodyFrame; - - var logout = function () { }; - - var body = $('body'); - - var pearAdmin = new function () { - - this.configuration = {}; - - this.configurationPath = "pear.config.yml"; - - this.instances = {}; - - /** - * @since Pear Admin 4.0 - * - * 获取 pear.config 实现 [ default ] - */ - this.configurationProvider = () => { - return new Promise((resolve) => { - if (this.configurationPath.indexOf("json") > -1) { - $.ajax({ - type: 'get', - url: this.configurationPath, - dataType: 'json', - async: false, - success: (result) => { - resolve(result); - } - }); - } else { - resolve(yaml.load(this.configurationPath)); - } - }) - } - - /** - * @since Pear Admin 4.0 - * - * 配置 pear.config 路径 - */ - this.setConfigurationPath = (path) => { - this.configurationPath = path; - } - - /** - * @since Pear Admin 4.0 - * - * 获取 pear.config 实现 [ implement ] - */ - this.setConfigurationProvider = (provider) => { - this.configurationProvider = provider; - } - - /** - * @since Pear Admin 4.0 - * - * 获取 pear.config 配置 - */ - this.getConfiguration = () => { - return this.configuration; - } - - /** - * @since Pear Admin 4.0 - * - * Core Function. - * - * @param {*} options - */ - this.render = (options) => { - if (options !== undefined) { - pearAdmin.apply(options); - } else { - this.configurationProvider().then((result) => { - pearAdmin.apply(result); - }) - } - } - - /** - * @since Pear Admin 4.0 - * - * 启动构建 - */ - this.apply = function (configuration) { - configurationCache = configuration; - pearAdmin.logoRender(configuration); - pearAdmin.menuRender(configuration); - pearAdmin.menuSearchRender(configuration); - pearAdmin.bodyRender(configuration); - pearAdmin.messageCenterRender(configuration); - pearAdmin.themeRender(configuration); - pearAdmin.keepLoad(configuration); - } - - /** - * @since Pear Admin 4.0 - */ - this.menuSearchRender = function (options) { - menuSearch.render({ - elem: ".menuSearch", - dataProvider: () => sideMenu.cache(), - select: (node) => { - if (node.type == "1") { - sideMenu.selectItem(node.id); - if (node.openType === "_layer") { - layer.open({ - type: 2, - title: data.title, - content: data.url, - area: ['80%', '80%'], - maxmin: true - }) - } else { - if (isMuiltTab(options) === "true" || - isMuiltTab(options) === true) { - bodyTab.addTabOnly({ - id: node.id, - title: node.title, - type: node.openType, - url: node.url, - icon: node.icon, - close: true - }); - } else { - bodyFrame.changePage({ - href: node.url, - type: node.openType - }); - } - } - } - } - }) - } - - this.messageCenterRender = function (options) { - messageCenter.render({ - elem: '.message', - url: options.header.message, - height: '250px' - }); - } - - this.logoRender = function (param) { - $(".layui-logo .logo").attr("src", param.logo.image); - $(".layui-logo .title").html(param.logo.title); - } - - this.menuRender = function (param) { - sideMenu = menu.render({ - elem: 'sideMenu', - async: param.menu.async, - method: param.menu.method, - control: isControl(param) === 'true' || isControl(param) === true ? 'control' : false, - controlWidth: param.menu.controlWidth, - accordion: param.menu.accordion, - data: param.menu.data, - url: param.menu.data, - parseData: false, - defaultMenu: 0, - change: function () { - compatible(); - }, - done: function () { - sideMenu.isCollapse = param.menu.collapse; - sideMenu.selectItem(param.menu.select); - pearAdmin.collapse(param); - } - }); - } - - this.bodyRender = function (param) { - - body.on("click", ".refresh", function () { - refresh(); - }) - - if (isMuiltTab(param) === "true" || isMuiltTab(param) === true) { - - bodyTab = tabPage.render({ - elem: 'content', - session: param.tab.session, - index: 0, - tabMax: param.tab.max, - preload: param.tab.preload, - closeEvent: function (id) { - sideMenu.selectItem(id); - }, - data: [{ - id: param.tab.index.id, - url: param.tab.index.href, - title: param.tab.index.title, - close: false - }], - success: function (id) { - if (param.tab.session) { - setTimeout(function () { - sideMenu.selectItem(id); - bodyTab.positionTab(); - }, 500) - } - } - }); - - bodyTab.click(function (id) { - if (!param.tab.keepState) { - bodyTab.refresh(false); - } - bodyTab.positionTab(); - sideMenu.selectItem(id); - }) - - sideMenu.click(function (dom, data) { - if (data.menuOpenType === "_layer") { - layer.open({ type: 2, title: data.menuTitle, content: data.menuUrl, area: ['80%', '80%'], maxmin: true }) - } else { - bodyTab.addTabOnly({ - id: data.menuId, - title: data.menuTitle, - type: data.menuOpenType, - url: data.menuUrl, - icon: data.menuIcon, - close: true - }); - } - compatible(); - }) - - } else { - - bodyFrame = page.render({ - elem: 'content', - title: '首页', - url: param.tab.index.href - }); - - sideMenu.click(function (dom, data) { - if (data.menuOpenType === "_layer") { - layer.open({ type: 2, title: data.menuTitle, content: data.menuUrl, area: ['80%', '80%'], maxmin: true }) - } else { - bodyFrame.changePage({ href: data.menuUrl, type: data.menuOpenType }); - } - compatible() - }) - } - } - - this.keepLoad = function (param) { - compatible() - setTimeout(function () { - $(".loader-wrapper").fadeOut(200); - }, param.other.keepLoad) - } - - this.changeTheme = function () { - const variableKey = "--global-primary-color"; - const variableVal = localStorage.getItem("theme-color-color"); - document.documentElement.style.setProperty(variableKey, variableVal); - } - - this.themeRender = function (option) { - if (option.theme.allowCustom === false) { - $(".setting").remove(); - } - var colorId = localStorage.getItem("theme-color"); - var currentColor = getColorById(colorId); - localStorage.setItem("theme-color", currentColor.id); - localStorage.setItem("theme-color-color", currentColor.color); - localStorage.setItem("theme-color-second", currentColor.second); - pearAdmin.changeTheme(); - - var menu = localStorage.getItem("theme-menu"); - if (menu === null) { - menu = option.theme.defaultMenu; - } else { - if (option.theme.allowCustom === false) { - menu = option.theme.defaultMenu; - } - } - - var header = localStorage.getItem("theme-header"); - if (header === null) { - header = option.theme.defaultHeader; - } else { - if (option.theme.allowCustom === false) { - header = option.theme.defaultHeader; - } - } - - var banner = localStorage.getItem("theme-banner"); - if (banner === null) { - banner = option.theme.banner; - } else { - if (option.theme.allowCustom === false) { - banner = option.theme.banner; - } - } - - var autoHead = localStorage.getItem("auto-head"); - if (autoHead === null) { - autoHead = option.other.autoHead; - } else { - if (option.theme.allowCustom === false) { - autoHead = option.other.autoHead; - } - } - - var muiltTab = localStorage.getItem("muilt-tab"); - if (muiltTab === null) { - muiltTab = option.tab.enable; - } else { - if (option.theme.allowCustom === false) { - muiltTab = option.tab.enable; - } - } - - var control = localStorage.getItem("control"); - if (control === null) { - control = option.menu.control; - } else { - if (option.theme.allowCustom === false) { - control = option.menu.control; - } - } - - var footer = localStorage.getItem("footer"); - if (footer === null) { - footer = option.other.footer; - } else { - if (option.theme.allowCustom === false) { - footer = option.other.footer; - } - } - - var dark = localStorage.getItem("dark"); - if (dark === null) { - dark = option.theme.dark; - } else { - if (option.theme.allowCustom === false) { - dark = option.theme.dark; - } - } - - localStorage.setItem("muilt-tab", muiltTab); - localStorage.setItem("theme-banner", banner); - localStorage.setItem("theme-menu", menu); - localStorage.setItem("theme-header", header); - localStorage.setItem("auto-head", autoHead); - localStorage.setItem("control", control); - localStorage.setItem("footer", footer); - localStorage.setItem("dark", dark); - this.menuSkin(menu); - this.headerSkin(header); - this.bannerSkin(banner); - this.enableDark(dark); - this.footer(footer); - } - - this.footer = function (footer) { - var bodyDOM = $(".pear-admin .layui-body"); - var footerDOM = $(".pear-admin .layui-footer"); - if (footer === true || footer === "true") { - footerDOM.removeClass("close"); - bodyDOM.css("bottom", footerDOM.outerHeight()); - } else { - footerDOM.addClass("close"); - bodyDOM.css("bottom", ""); - } - } - - this.bannerSkin = function (theme) { - var pearAdmin = $(".pear-admin"); - pearAdmin.removeClass("banner-layout"); - if (theme === true || theme === "true") { - pearAdmin.addClass("banner-layout"); - } - } - - this.enableDark = function (checked) { - var $pearAdmin = $(".pear-admin"); - $pearAdmin.removeClass("pear-admin-dark"); - if (checked === true || checked === "true") { - $pearAdmin.addClass("pear-admin-dark"); - } - } - - this.collapse = function (param) { - if (param.menu.collapse) { - if ($(window).width() >= 768) { - collapse() - } - } - } - - this.menuSkin = function (theme) { - var pearAdmin = $(".pear-admin .layui-side"); - pearAdmin.removeClass("light-theme"); - pearAdmin.removeClass("dark-theme"); - pearAdmin.addClass(theme); - } - - this.headerSkin = function (theme) { - var pearAdmin = $(".pear-admin .layui-header"); - pearAdmin.removeClass("dark-theme"); - pearAdmin.removeClass("light-theme"); - pearAdmin.removeClass("auto-theme"); - pearAdmin.addClass(theme); - } - - this.logout = function (callback) { - logout = callback; - } - }; - - function refresh() { - var refreshA = $(".refresh a"); - refreshA.removeClass("layui-icon-refresh-1"); - refreshA.addClass("layui-anim"); - refreshA.addClass("layui-anim-rotate"); - refreshA.addClass("layui-anim-loop"); - refreshA.addClass("layui-icon-loading"); - if (isMuiltTab(configurationCache) === "true" || isMuiltTab(configurationCache) === true) bodyTab.refresh(true); - else bodyFrame.refresh(true); - setTimeout(function () { - refreshA.addClass("layui-icon-refresh-1"); - refreshA.removeClass("layui-anim"); - refreshA.removeClass("layui-anim-rotate"); - refreshA.removeClass("layui-anim-loop"); - refreshA.removeClass("layui-icon-loading"); - }, 600) - } - - function collapse() { - sideMenu.collapse(); - var admin = $(".pear-admin"); - var left = $(".layui-icon-spread-left") - var right = $(".layui-icon-shrink-right") - if (admin.is(".pear-mini")) { - left.addClass("layui-icon-shrink-right") - left.removeClass("layui-icon-spread-left") - admin.removeClass("pear-mini"); - sideMenu.isCollapse = false; - } else { - right.addClass("layui-icon-spread-left") - right.removeClass("layui-icon-shrink-right") - admin.addClass("pear-mini"); - sideMenu.isCollapse = true; - } - } - - /** - * @since Pear Admin 4.0 - * - * 使用 admin.logout(Function) 实现注销 - * - * Promise 作为返回值类型时，泛型内容为 true 时视为注销成功，则清除 bodyTab 缓存 - * - * 否则视为注销失败，不做任何处置。 - */ - body.on("click", ".logout", function () { - var promise = logout(); - if (promise != undefined) { - promise.then((asyncResult) => { - if (asyncResult) { - bodyTab.clear(); - } - }) - } else { - bodyTab.clear(); - } - }) - - body.on("click", ".collapse,.pear-cover", function () { - collapse(); - }); - - body.on("click", ".fullScreen", function () { - if ($(this).hasClass("layui-icon-screen-restore")) { - fullscreen.fullClose().then(function () { - $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); - }); - } else { - fullscreen.fullScreen().then(function () { - $(".fullScreen").eq(0).addClass("layui-icon-screen-restore"); - }); - } - }); - - body.on("click", '[user-menu-id]', function () { - if (isMuiltTab(configurationCache) === "true" || isMuiltTab(configurationCache) === true) { - bodyTab.addTabOnly({ - id: $(this).attr("user-menu-id"), - title: $(this).attr("user-menu-title"), - url: $(this).attr("user-menu-url"), - icon: "", - close: true - }, 300); - } else { - bodyFrame.changePage($(this).attr("user-menu-url"), true); - } - }); - - body.on("click", ".setting", function () { - - var menuItem = - '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; - - menuItem += - '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; - - var menuHtml = - '
    \n' + - '
    菜单风格
    \n' + - '
    \n' + - '
      \n' + menuItem + '
    \n' + - '
    \n' + - '
    '; - - var headItem = - '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; - - headItem += - '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; - - headItem += - '
  • ' + - '' + - '
    ' + - '
    ' + - '    ' + - '
    • '; - - var headHtml = - '
    \n' + - '
    顶栏风格
    \n' + - '
    \n' + - '
      \n' + headItem + '
    \n' + - '
    \n' + - '
    '; - - var moreItem = - '
    菜单分割
    '; - - moreItem += - '
    多选项卡
    '; - - moreItem += - '
    通栏布局
    '; - - moreItem += - '
    开启页脚
    '; - - moreItem += - '
    夜间模式
    '; - - var moreHtml = '
    \n' + - '
    更多设置
    \n' + - '
    \n' + - '
    \n' + moreItem + '
    \n' + - '
    \n' + - '
    '; - - layer.open({ - type: 1, - offset: 'r', - area: ['320px', '100%'], - title: false, - shade: 0.1, - closeBtn: 0, - shadeClose: false, - anim: -1, - skin: 'layer-anim-right', - move: false, - content: menuHtml + headHtml + buildColorHtml() + moreHtml, - success: function (layero, index) { - - form.render(); - - var color = localStorage.getItem("theme-color"); - var menu = localStorage.getItem("theme-menu"); - var header = localStorage.getItem("theme-header"); - - if (color !== "null") { - $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok"); - $("*[color-id='" + color + "']").addClass("layui-icon").addClass("layui-icon-ok"); - } - - if (menu !== "null") { - $("*[data-select-bgcolor]").removeClass("layui-this"); - $("[data-select-bgcolor='" + menu + "']").addClass("layui-this"); - } - - if (header !== "null") { - $("*[data-select-header]").removeClass("layui-this"); - $("[data-select-header='" + header + "']").addClass("layui-this"); - } - - $('#layui-layer-shade' + index).click(function () { - var $layero = $('#layui-layer' + index); - $layero.animate({ - left: $layero.offset().left + $layero.width() - }, 200, function () { - layer.close(index); - }); - }) - - form.on('switch(control)', function (data) { - localStorage.setItem("control", this.checked); - window.location.reload(); - }) - - form.on('switch(muilt-tab)', function (data) { - localStorage.setItem("muilt-tab", this.checked); - window.location.reload(); - }) - - form.on('switch(auto-head)', function (data) { - localStorage.setItem("auto-head", this.checked); - pearAdmin.changeTheme(); - }) - - form.on('switch(banner)', function (data) { - localStorage.setItem("theme-banner", this.checked); - pearAdmin.bannerSkin(this.checked); - }) - - form.on('switch(footer)', function (data) { - localStorage.setItem("footer", this.checked); - pearAdmin.footer(this.checked); - }) - - form.on('switch(dark)', function (data) { - localStorage.setItem("dark", this.checked); - pearAdmin.enableDark(this.checked); - }) - - if (localStorage.getItem('theme-banner') === 'true') { - $('input[name="banner"]').attr('checked', 'checked') - } else { - $('input[name="banner"]').removeAttr('checked') - } - - if (localStorage.getItem('control') === 'true') { - $('input[name="control"]').attr('checked', 'checked') - } else { - $('input[name="control"]').removeAttr('checked') - } - - if (localStorage.getItem('muilt-tab') === 'true') { - $('input[name="muilt-tab"]').attr('checked', 'checked') - } else { - $('input[name="muilt-tab"]').removeAttr('checked') - } - - if (localStorage.getItem('footer') === 'true') { - $('input[name="footer"]').attr('checked', 'checked') - } else { - $('input[name="footer"]').removeAttr('checked') - } - - if (localStorage.getItem('dark') === 'true') { - $('input[name="dark"]').attr('checked', 'checked') - } else { - $('input[name="dark"]').removeAttr('checked') - } - - form.render('checkbox'); - } - }); - }); - - body.on('click', '[data-select-bgcolor]', function () { - var theme = $(this).attr('data-select-bgcolor'); - $('[data-select-bgcolor]').removeClass("layui-this"); - $(this).addClass("layui-this"); - localStorage.setItem("theme-menu", theme); - pearAdmin.menuSkin(theme); - }); - - body.on('click', '[data-select-header]', function () { - var headerColor = $(this).attr('data-select-header'); - $('[data-select-header]').removeClass("layui-this"); - $(this).addClass("layui-this"); - localStorage.setItem("theme-header", headerColor); - if (headerColor == "auto-theme") { - localStorage.setItem("auto-head", true); - pearAdmin.changeTheme(); - } else { - localStorage.setItem("auto-head", false); - pearAdmin.changeTheme(); - } - pearAdmin.headerSkin(headerColor); - }); - - body.on('click', '.select-color-item', function () { - $(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok"); - $(this).addClass("layui-icon").addClass("layui-icon-ok"); - var colorId = $(".select-color-item.layui-icon-ok").attr("color-id"); - var currentColor = getColorById(colorId); - localStorage.setItem("theme-color", currentColor.id); - localStorage.setItem("theme-color-color", currentColor.color); - localStorage.setItem("theme-color-second", currentColor.second); - pearAdmin.changeTheme(); - }); - - function getColorById(id) { - var color; - var flag = false; - $.each(configurationCache.colors, function (i, value) { - if (value.id === id) { - color = value; - flag = true; - } - }) - if (flag === false || configurationCache.theme.allowCustom === false) { - $.each(configurationCache.colors, function (i, value) { - if (value.id === configurationCache.theme.defaultColor) { - color = value; - } - }) - } - return color; - } - - function buildColorHtml() { - var colors = ""; - $.each(configurationCache.colors, function (i, value) { - colors += ""; - }) - return "
    主题颜色
    " + - colors + "
    " - } - - function compatible() { - if ($(window).width() <= 768) { - collapse() - } - } - - function isControl(option) { - if (option.theme.allowCustom) { - if (localStorage.getItem("control") != null) { - return localStorage.getItem("control") - } else { - return option.menu.control - } - } else { - return option.menu.control - } - } - - function isMuiltTab(option) { - if (option.theme.allowCustom) { - if (localStorage.getItem("muilt-tab") != null) { - return localStorage.getItem("muilt-tab") - } else { - return option.tab.enable - } - } else { - return option.tab.enable - } - } - - window.onresize = function () { - if (!fullscreen.isFullscreen()) { - $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); - } - } - - $(window).on('resize', tools.debounce(function () { - if (sideMenu && !sideMenu.isCollapse && $(window).width() <= 768) { - collapse(); - } - }, 50)); - - exports('admin', pearAdmin); - }) + ("use strict"); + + var $ = layui.jquery, + form = layui.form, + yaml = layui.yaml, + page = layui.page, + menu = layui.menu, + messageCenter = layui.messageCenter, + menuSearch = layui.menuSearch, + fullscreen = layui.fullscreen, + tools = layui.tools, + tabPage = layui.tabPage; + + var sideMenu; + + var configurationCache; + + var bodyTab; + + var bodyFrame; + + var logout = function () {}; + + var body = $("body"); + + var pearAdmin = new (function () { + this.configuration = {}; + + this.configurationPath = "pear.config.yml"; + + this.instances = {}; + + /** + * @since Pear Admin 4.0 + * + * 获取 pear.config 实现 [ default ] + */ + this.configurationProvider = () => { + return new Promise((resolve) => { + if (this.configurationPath.indexOf("json") > -1) { + $.ajax({ + type: "get", + url: this.configurationPath, + dataType: "json", + async: false, + success: (result) => { + resolve(result); + }, + }); + } else { + let json = yaml.load(this.configurationPath); + console.log(json); + resolve(json); + } + }); + }; + + /** + * @since Pear Admin 4.0 + * + * 配置 pear.config 路径 + */ + this.setConfigurationPath = (path) => { + this.configurationPath = path; + }; + + /** + * @since Pear Admin 4.0 + * + * 获取 pear.config 实现 [ implement ] + */ + this.setConfigurationProvider = (provider) => { + this.configurationProvider = provider; + }; + + /** + * @since Pear Admin 4.0 + * + * 获取 pear.config 配置 + */ + this.getConfiguration = () => { + return this.configuration; + }; + + /** + * @since Pear Admin 4.0 + * + * Core Function. + * + * @param {*} options + */ + this.render = (options) => { + if (options !== undefined) { + pearAdmin.apply(options); + } else { + this.configurationProvider().then((result) => { + pearAdmin.apply(result); + }); + } + }; + + /** + * @since Pear Admin 4.0 + * + * 启动构建 + */ + this.apply = function (configuration) { + configurationCache = configuration; + pearAdmin.logoRender(configuration); + pearAdmin.menuRender(configuration); + pearAdmin.menuSearchRender(configuration); + pearAdmin.bodyRender(configuration); + pearAdmin.messageCenterRender(configuration); + pearAdmin.themeRender(configuration); + pearAdmin.keepLoad(configuration); + }; + + /** + * @since Pear Admin 4.0 + */ + this.menuSearchRender = function (options) { + menuSearch.render({ + elem: ".menuSearch", + dataProvider: () => sideMenu.cache(), + select: (node) => { + if (node.type == "1") { + sideMenu.selectItem(node.id); + if (node.openType === "_layer") { + layer.open({ + type: 2, + title: data.title, + content: data.url, + area: ["80%", "80%"], + maxmin: true, + }); + } else { + if ( + isMuiltTab(options) === "true" || + isMuiltTab(options) === true + ) { + bodyTab.addTabOnly({ + id: node.id, + title: node.title, + type: node.openType, + url: node.url, + icon: node.icon, + close: true, + }); + } else { + bodyFrame.changePage({ + href: node.url, + type: node.openType, + }); + } + } + } + }, + }); + }; + + this.messageCenterRender = function (options) { + messageCenter.render({ + elem: ".message", + url: options.header.message, + height: "250px", + }); + }; + + this.logoRender = function (param) { + $(".layui-logo .logo").attr("src", param.logo.image); + $(".layui-logo .title").html(param.logo.title); + }; + + this.menuRender = function (param) { + sideMenu = menu.render({ + elem: "sideMenu", + async: param.menu.async, + method: param.menu.method, + control: + isControl(param) === "true" || isControl(param) === true + ? "control" + : false, + controlWidth: param.menu.controlWidth, + accordion: param.menu.accordion, + data: param.menu.data, + url: param.menu.data, + parseData: false, + defaultMenu: 0, + change: function () { + compatible(); + }, + done: function () { + sideMenu.isCollapse = param.menu.collapse; + sideMenu.selectItem(param.menu.select); + pearAdmin.collapse(param); + }, + }); + }; + + this.bodyRender = function (param) { + body.on("click", ".refresh", function () { + refresh(); + }); + + if (isMuiltTab(param) === "true" || isMuiltTab(param) === true) { + bodyTab = tabPage.render({ + elem: "content", + session: param.tab.session, + index: 0, + tabMax: param.tab.max, + preload: param.tab.preload, + closeEvent: function (id) { + sideMenu.selectItem(id); + }, + data: [ + { + id: param.tab.index.id, + url: param.tab.index.href, + title: param.tab.index.title, + close: false, + }, + ], + success: function (id) { + if (param.tab.session) { + setTimeout(function () { + sideMenu.selectItem(id); + bodyTab.positionTab(); + handlerHash(bodyTab); + }, 500); + } + }, + }); + + bodyTab.click(function (id) { + if (!param.tab.keepState) { + bodyTab.refresh(false); + } + bodyTab.positionTab(); + sideMenu.selectItem(id); + let tab = $(`li[lay-id='${id}']`); + location.hash = tab.attr("lay-pageurl") || ""; + }); + + sideMenu.click(function (dom, data) { + if (data.menuOpenType === "_layer") { + layer.open({ + type: 2, + title: data.menuTitle, + content: data.menuUrl, + area: ["80%", "80%"], + maxmin: true, + }); + } else { + bodyTab.addTabOnly({ + id: data.menuId, + title: data.menuTitle, + type: data.menuOpenType, + url: data.menuUrl, + icon: data.menuIcon, + close: true, + }); + } + compatible(); + }); + } else { + bodyFrame = page.render({ + elem: "content", + title: "首页", + url: param.tab.index.href, + }); + + sideMenu.click(function (dom, data) { + if (data.menuOpenType === "_layer") { + layer.open({ + type: 2, + title: data.menuTitle, + content: data.menuUrl, + area: ["80%", "80%"], + maxmin: true, + }); + } else { + bodyFrame.changePage({ + href: data.menuUrl, + type: data.menuOpenType, + }); + } + compatible(); + }); + } + }; + + this.keepLoad = function (param) { + compatible(); + setTimeout(function () { + $(".loader-wrapper").fadeOut(200); + }, param.other.keepLoad); + }; + + this.changeTheme = function () { + const variableKey = "--global-primary-color"; + const variableVal = localStorage.getItem("theme-color-color"); + document.documentElement.style.setProperty(variableKey, variableVal); + }; + + this.themeRender = function (option) { + if (option.theme.allowCustom === false) { + $(".setting").remove(); + } + var colorId = localStorage.getItem("theme-color"); + var currentColor = getColorById(colorId); + localStorage.setItem("theme-color", currentColor.id); + localStorage.setItem("theme-color-color", currentColor.color); + localStorage.setItem("theme-color-second", currentColor.second); + pearAdmin.changeTheme(); + + var menu = localStorage.getItem("theme-menu"); + if (menu === null) { + menu = option.theme.defaultMenu; + } else { + if (option.theme.allowCustom === false) { + menu = option.theme.defaultMenu; + } + } + + var header = localStorage.getItem("theme-header"); + if (header === null) { + header = option.theme.defaultHeader; + } else { + if (option.theme.allowCustom === false) { + header = option.theme.defaultHeader; + } + } + + var banner = localStorage.getItem("theme-banner"); + if (banner === null) { + banner = option.theme.banner; + } else { + if (option.theme.allowCustom === false) { + banner = option.theme.banner; + } + } + + var autoHead = localStorage.getItem("auto-head"); + if (autoHead === null) { + autoHead = option.other.autoHead; + } else { + if (option.theme.allowCustom === false) { + autoHead = option.other.autoHead; + } + } + + var muiltTab = localStorage.getItem("muilt-tab"); + if (muiltTab === null) { + muiltTab = option.tab.enable; + } else { + if (option.theme.allowCustom === false) { + muiltTab = option.tab.enable; + } + } + + var control = localStorage.getItem("control"); + if (control === null) { + control = option.menu.control; + } else { + if (option.theme.allowCustom === false) { + control = option.menu.control; + } + } + + var footer = localStorage.getItem("footer"); + if (footer === null) { + footer = option.other.footer; + } else { + if (option.theme.allowCustom === false) { + footer = option.other.footer; + } + } + + var dark = localStorage.getItem("dark"); + if (dark === null) { + dark = option.theme.dark; + } else { + if (option.theme.allowCustom === false) { + dark = option.theme.dark; + } + } + + localStorage.setItem("muilt-tab", muiltTab); + localStorage.setItem("theme-banner", banner); + localStorage.setItem("theme-menu", menu); + localStorage.setItem("theme-header", header); + localStorage.setItem("auto-head", autoHead); + localStorage.setItem("control", control); + localStorage.setItem("footer", footer); + localStorage.setItem("dark", dark); + this.menuSkin(menu); + this.headerSkin(header); + this.bannerSkin(banner); + this.enableDark(dark); + this.footer(footer); + }; + + this.footer = function (footer) { + var bodyDOM = $(".pear-admin .layui-body"); + var footerDOM = $(".pear-admin .layui-footer"); + if (footer === true || footer === "true") { + footerDOM.removeClass("close"); + bodyDOM.css("bottom", footerDOM.outerHeight()); + } else { + footerDOM.addClass("close"); + bodyDOM.css("bottom", ""); + } + }; + + this.bannerSkin = function (theme) { + var pearAdmin = $(".pear-admin"); + pearAdmin.removeClass("banner-layout"); + if (theme === true || theme === "true") { + pearAdmin.addClass("banner-layout"); + } + }; + + this.enableDark = function (checked) { + var $pearAdmin = $(".pear-admin"); + $pearAdmin.removeClass("pear-admin-dark"); + if (checked === true || checked === "true") { + $pearAdmin.addClass("pear-admin-dark"); + } + }; + + this.collapse = function (param) { + if (param.menu.collapse) { + if ($(window).width() >= 768) { + collapse(); + } + } + }; + + this.menuSkin = function (theme) { + var pearAdmin = $(".pear-admin .layui-side"); + pearAdmin.removeClass("light-theme"); + pearAdmin.removeClass("dark-theme"); + pearAdmin.addClass(theme); + }; + + this.headerSkin = function (theme) { + var pearAdmin = $(".pear-admin .layui-header"); + pearAdmin.removeClass("dark-theme"); + pearAdmin.removeClass("light-theme"); + pearAdmin.removeClass("auto-theme"); + pearAdmin.addClass(theme); + }; + + this.logout = function (callback) { + logout = callback; + }; + })(); + + function refresh() { + var refreshA = $(".refresh a"); + refreshA.removeClass("layui-icon-refresh-1"); + refreshA.addClass("layui-anim"); + refreshA.addClass("layui-anim-rotate"); + refreshA.addClass("layui-anim-loop"); + refreshA.addClass("layui-icon-loading"); + if ( + isMuiltTab(configurationCache) === "true" || + isMuiltTab(configurationCache) === true + ) + bodyTab.refresh(true); + else bodyFrame.refresh(true); + setTimeout(function () { + refreshA.addClass("layui-icon-refresh-1"); + refreshA.removeClass("layui-anim"); + refreshA.removeClass("layui-anim-rotate"); + refreshA.removeClass("layui-anim-loop"); + refreshA.removeClass("layui-icon-loading"); + }, 600); + } + + function collapse() { + sideMenu.collapse(); + var admin = $(".pear-admin"); + var left = $(".layui-icon-spread-left"); + var right = $(".layui-icon-shrink-right"); + if (admin.is(".pear-mini")) { + left.addClass("layui-icon-shrink-right"); + left.removeClass("layui-icon-spread-left"); + admin.removeClass("pear-mini"); + sideMenu.isCollapse = false; + } else { + right.addClass("layui-icon-spread-left"); + right.removeClass("layui-icon-shrink-right"); + admin.addClass("pear-mini"); + sideMenu.isCollapse = true; + } + } + + /** + * @since Pear Admin 4.0 + * + * 使用 admin.logout(Function) 实现注销 + * + * Promise 作为返回值类型时，泛型内容为 true 时视为注销成功，则清除 bodyTab 缓存 + * + * 否则视为注销失败，不做任何处置。 + */ + body.on("click", ".logout", function () { + var promise = logout(); + if (promise != undefined) { + promise.then((asyncResult) => { + if (asyncResult) { + bodyTab.clear(); + } + }); + } else { + bodyTab.clear(); + } + }); + + body.on("click", ".collapse,.pear-cover", function () { + collapse(); + }); + + body.on("click", ".fullScreen", function () { + if ($(this).hasClass("layui-icon-screen-restore")) { + fullscreen.fullClose().then(function () { + $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); + }); + } else { + fullscreen.fullScreen().then(function () { + $(".fullScreen").eq(0).addClass("layui-icon-screen-restore"); + }); + } + }); + + body.on("click", "[user-menu-id]", function () { + if ( + isMuiltTab(configurationCache) === "true" || + isMuiltTab(configurationCache) === true + ) { + bodyTab.addTabOnly( + { + id: $(this).attr("user-menu-id"), + title: $(this).attr("user-menu-title"), + url: $(this).attr("user-menu-url"), + icon: "", + close: true, + }, + 300 + ); + } else { + bodyFrame.changePage($(this).attr("user-menu-url"), true); + } + }); + + body.on("click", ".setting", function () { + var menuItem = + '
  • ' + + '' + + '
    ' + + '
    ' + + "    " + + "
    • "; + + menuItem += + '
  • ' + + '' + + '
    ' + + '
    ' + + "    " + + "
    • "; + + var menuHtml = + '
    \n' + + '
    菜单风格
    \n' + + '
    \n' + + "
      \n" + + menuItem + + "
    \n" + + "
    \n" + + "
    "; + + var headItem = + '
  • ' + + '' + + '
    ' + + '
    ' + + "    " + + "
    • "; + + headItem += + '
  • ' + + '' + + '
    ' + + '
    ' + + "    " + + "
    • "; + + headItem += + '
  • ' + + '' + + '
    ' + + '
    ' + + "    " + + "
    • "; + + var headHtml = + '
    \n' + + '
    顶栏风格
    \n' + + '
    \n' + + "
      \n" + + headItem + + "
    \n" + + "
    \n" + + "
    "; + + var moreItem = + '
    菜单分割
    '; + + moreItem += + '
    多选项卡
    '; + + moreItem += + '
    通栏布局
    '; + + moreItem += + '
    开启页脚
    '; + + moreItem += + '
    夜间模式
    '; + + var moreHtml = + '
    \n' + + '
    更多设置
    \n' + + '
    \n' + + '
    \n' + + moreItem + + "
    \n" + + "
    \n" + + "
    "; + + layer.open({ + type: 1, + offset: "r", + area: ["320px", "100%"], + title: false, + shade: 0.1, + closeBtn: 0, + shadeClose: false, + anim: -1, + skin: "layer-anim-right", + move: false, + content: menuHtml + headHtml + buildColorHtml() + moreHtml, + success: function (layero, index) { + form.render(); + + var color = localStorage.getItem("theme-color"); + var menu = localStorage.getItem("theme-menu"); + var header = localStorage.getItem("theme-header"); + + if (color !== "null") { + $(".select-color-item") + .removeClass("layui-icon") + .removeClass("layui-icon-ok"); + $("*[color-id='" + color + "']") + .addClass("layui-icon") + .addClass("layui-icon-ok"); + } + + if (menu !== "null") { + $("*[data-select-bgcolor]").removeClass("layui-this"); + $("[data-select-bgcolor='" + menu + "']").addClass("layui-this"); + } + + if (header !== "null") { + $("*[data-select-header]").removeClass("layui-this"); + $("[data-select-header='" + header + "']").addClass("layui-this"); + } + + $("#layui-layer-shade" + index).click(function () { + var $layero = $("#layui-layer" + index); + $layero.animate( + { + left: $layero.offset().left + $layero.width(), + }, + 200, + function () { + layer.close(index); + } + ); + }); + + form.on("switch(control)", function (data) { + localStorage.setItem("control", this.checked); + window.location.reload(); + }); + + form.on("switch(muilt-tab)", function (data) { + localStorage.setItem("muilt-tab", this.checked); + window.location.reload(); + }); + + form.on("switch(auto-head)", function (data) { + localStorage.setItem("auto-head", this.checked); + pearAdmin.changeTheme(); + }); + + form.on("switch(banner)", function (data) { + localStorage.setItem("theme-banner", this.checked); + pearAdmin.bannerSkin(this.checked); + }); + + form.on("switch(footer)", function (data) { + localStorage.setItem("footer", this.checked); + pearAdmin.footer(this.checked); + }); + + form.on("switch(dark)", function (data) { + localStorage.setItem("dark", this.checked); + pearAdmin.enableDark(this.checked); + }); + + if (localStorage.getItem("theme-banner") === "true") { + $('input[name="banner"]').attr("checked", "checked"); + } else { + $('input[name="banner"]').removeAttr("checked"); + } + + if (localStorage.getItem("control") === "true") { + $('input[name="control"]').attr("checked", "checked"); + } else { + $('input[name="control"]').removeAttr("checked"); + } + + if (localStorage.getItem("muilt-tab") === "true") { + $('input[name="muilt-tab"]').attr("checked", "checked"); + } else { + $('input[name="muilt-tab"]').removeAttr("checked"); + } + + if (localStorage.getItem("footer") === "true") { + $('input[name="footer"]').attr("checked", "checked"); + } else { + $('input[name="footer"]').removeAttr("checked"); + } + + if (localStorage.getItem("dark") === "true") { + $('input[name="dark"]').attr("checked", "checked"); + } else { + $('input[name="dark"]').removeAttr("checked"); + } + + form.render("checkbox"); + }, + }); + }); + + body.on("click", "[data-select-bgcolor]", function () { + var theme = $(this).attr("data-select-bgcolor"); + $("[data-select-bgcolor]").removeClass("layui-this"); + $(this).addClass("layui-this"); + localStorage.setItem("theme-menu", theme); + pearAdmin.menuSkin(theme); + }); + + body.on("click", "[data-select-header]", function () { + var headerColor = $(this).attr("data-select-header"); + $("[data-select-header]").removeClass("layui-this"); + $(this).addClass("layui-this"); + localStorage.setItem("theme-header", headerColor); + if (headerColor == "auto-theme") { + localStorage.setItem("auto-head", true); + pearAdmin.changeTheme(); + } else { + localStorage.setItem("auto-head", false); + pearAdmin.changeTheme(); + } + pearAdmin.headerSkin(headerColor); + }); + + body.on("click", ".select-color-item", function () { + $(".select-color-item") + .removeClass("layui-icon") + .removeClass("layui-icon-ok"); + $(this).addClass("layui-icon").addClass("layui-icon-ok"); + var colorId = $(".select-color-item.layui-icon-ok").attr("color-id"); + var currentColor = getColorById(colorId); + localStorage.setItem("theme-color", currentColor.id); + localStorage.setItem("theme-color-color", currentColor.color); + localStorage.setItem("theme-color-second", currentColor.second); + pearAdmin.changeTheme(); + }); + + /** + * 根据url hash 地址 匹配tab + */ + function handlerHash(tabObj) { + //window.onhashchange = locationHashChanged; + let _this = tabObj; + let hash = location.hash; + if (!hash) { + return; + } + let pageUrl = hash.replace("#", ""); + let tabElement = $("ul.layui-tab-title [lay-pageurl='" + pageUrl + "']"); + if (tabElement.length > 0) { + let layid = tabElement.attr("lay-id"); + if (!tabElement.hasClass("layui-this")) { + element.tabChange(option.elem, layid); // 切换tab + } + } else { + //如果没打开的话 还要打开这个页面 + //菜单中是否有 + let menu = $('ul[lay-filter="sideMenu"] li a[menu-url="' + pageUrl + '"]'); + if (menu.length > 0) { + _this.addTabOnly({ + id: menu.attr("menu-id"), + title: menu.attr("menu-title"), + url: pageUrl, + close: true, + }); + } else { + // 404? + console.log(404); + } + } + } + + function getColorById(id) { + var color; + var flag = false; + $.each(configurationCache.colors, function (i, value) { + if (value.id === id) { + color = value; + flag = true; + } + }); + if (flag === false || configurationCache.theme.allowCustom === false) { + $.each(configurationCache.colors, function (i, value) { + if (value.id === configurationCache.theme.defaultColor) { + color = value; + } + }); + } + return color; + } + + function buildColorHtml() { + var colors = ""; + $.each(configurationCache.colors, function (i, value) { + colors += + ""; + }); + return ( + "
    主题颜色
    " + + colors + + "
    " + ); + } + + function compatible() { + if ($(window).width() <= 768) { + collapse(); + } + } + + function isControl(option) { + if (option.theme.allowCustom) { + if (localStorage.getItem("control") != null) { + return localStorage.getItem("control"); + } else { + return option.menu.control; + } + } else { + return option.menu.control; + } + } + + function isMuiltTab(option) { + if (option.theme.allowCustom) { + if (localStorage.getItem("muilt-tab") != null) { + return localStorage.getItem("muilt-tab"); + } else { + return option.tab.enable; + } + } else { + return option.tab.enable; + } + } + + window.onresize = function () { + if (!fullscreen.isFullscreen()) { + $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); + } + }; + + $(window).on( + "resize", + tools.debounce(function () { + if (sideMenu && !sideMenu.isCollapse && $(window).width() <= 768) { + collapse(); + } + }, 50) + ); + + exports("admin", pearAdmin); + }) diff --git a/component/pear/module/tabPage.js b/component/pear/module/tabPage.js index c6b6c5f..c727ab5 100644 --- a/component/pear/module/tabPage.js +++ b/component/pear/module/tabPage.js @@ -55,8 +55,7 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-next").click(function () { rollPage("right", option); }) - element.init(); - + element.render("tab",option.elem); $("#" + option.elem).width(opt.width); $("#" + option.elem).height(opt.height); $("#" + option.elem).css({ @@ -120,7 +119,7 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { } }) - + //tab页关闭功能内容菜单 $("body .layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title").on("contextmenu", "li", function (e) { var top = e.clientY; @@ -180,9 +179,9 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { tabPage.prototype.click = function (callback) { var option = this.option; - var elem = this.option.elem; - element.on('tab(' + this.option.elem + ')', function (data) { - var id = $("#" + elem + " .layui-tab-title .layui-this").attr("lay-id"); + element.on('tab(' + option.elem + ')', function (data) { + let tab= $(this); + let id = tab.attr("lay-id"); sessionStorage.setItem(option.elem + "-pear-tab-page-data-current", id); callback(id); }); @@ -225,8 +224,7 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { } // 根据过滤 filter 标识, 删除其他选项卡 tabPage.prototype.delOtherTabByElem = function (elem, callback) { - var currentId = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this").attr( - "lay-id"); + var currentId = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this").attr("lay-id"); var tabtitle = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li"); $.each(tabtitle, function (i) { if ($(this).attr("lay-id") != currentId) { @@ -239,8 +237,7 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { // 根据过滤 filter 标识, 删除全部选项卡 tabPage.prototype.delAllTabByElem = function (elem, callback) { - var currentId = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this").attr( - "lay-id"); + //var currentId = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title .layui-this").attr("lay-id"); var tabtitle = $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li"); $.each(tabtitle, function (i) { if ($(this).find("span").is(".able-close")) { @@ -265,100 +262,39 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { var title = ` ${opt.title} ဆ`; + var isData = false; + $.each($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]"), + function () { + if ($(this).attr("lay-id") == opt.id) { + isData = true; + } + }) - if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length <= - 0) { - - var that = this; - - if (opt.type === "_iframe") { - - element.tabAdd(this.option.elem, { - id: opt.id, - title: title, - content: `` - }); - - } else { + if (isData == false) { - $.ajax({ - url: opt.url, - type: 'get', - dataType: 'html', - async: false, - success: function (data) { - element.tabAdd(that.option.elem, { - id: opt.id, - title: title, - content: `
    ${data}
    `, - }); - }, - error: function (xhr, textstatus, thrown) { - return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！'); - } - }); + if (this.option.tabMax != false) { + if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]") + .length >= this.option.tabMax) { + layer.msg("最多打开" + this.option.tabMax + "个标签页", { + icon: 2, + time: 1000, + shift: 6 + }); + return false; + } } - tabData.push(opt); + var that = this; + addLayuiTab(this.option.elem, title, opt); + tabData.push(opt); sessionStorage.setItem(that.option.elem + "-pear-tab-page-data", JSON.stringify(tabData)); sessionStorage.setItem(that.option.elem + "-pear-tab-page-data-current", opt.id); - - } else { - - var isData = false; - $.each($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]"), - function () { - if ($(this).attr("lay-id") == opt.id) { - isData = true; - } - }) - - if (isData == false) { - - if (this.option.tabMax != false) { - if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]") - .length >= this.option.tabMax) { - layer.msg("最多打开" + this.option.tabMax + "个标签页", { - icon: 2, - time: 1000, - shift: 6 - }); - return false; - } - } - - var that = this; - if (opt.type === "_iframe") { - element.tabAdd(this.option.elem, { - id: opt.id, - title: title, - content: `` - }); - } else { - $.ajax({ - url: opt.url, - type: 'get', - dataType: 'html', - async: false, - success: function (data) { - element.tabAdd(that.option.elem, { - id: opt.id, - title: title, - content: `
    ${data}
    `, - }); - }, - error: function (xhr, textstatus, thrown) { - return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！'); - } - }); - } - tabData.push(opt); - sessionStorage.setItem(that.option.elem + "-pear-tab-page-data", JSON.stringify(tabData)); - sessionStorage.setItem(that.option.elem + "-pear-tab-page-data-current", opt.id); - } } + element.tabChange(this.option.elem, opt.id); sessionStorage.setItem(this.option.elem + "-pear-tab-page-data-current", opt.id); + + } // 刷 新 指 定 的 选 项 卡 @@ -374,10 +310,10 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { }); } - if($iframe.attr("type") === "_iframe") { + if ($iframe.attr("type") === "_iframe") { $iframe.attr("src", $iframe.attr("src")); - $iframe.on("load", function() { - $iframeLoad.fadeOut(1000, function() { + $iframe.on("load", function () { + $iframeLoad.fadeOut(1000, function () { $iframeLoad.remove(); }); }) @@ -401,6 +337,8 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { } } + + function tabDelete(elem, id, callback, option) { var tabTitle = $(".layui-tab[lay-filter='" + elem + "']").find(".layui-tab-title"); var removeTab = tabTitle.find("li[lay-id='" + id + "']"); @@ -421,16 +359,8 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { } var currId; - if (nextNode.length) { - nextNode.addClass("layui-this"); - currId = nextNode.attr("lay-id"); - $("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show"); - } else { - var prevNode = removeTab.prev("li"); - prevNode.addClass("layui-this"); - currId = prevNode.attr("lay-id"); - $("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show"); - } + let activeNode = nextNode.length ? nextNode : removeTab.prev("li"); + activeNode.click() callback(currId); tabData = JSON.parse(sessionStorage.getItem(elem + "-pear-tab-page-data")); tabDataCurrent = sessionStorage.getItem(elem + "-pear-tab-page-data-current"); @@ -448,7 +378,9 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { } /** - * @since Pear Admin 4.0 + * 创建tab组件 返回tab 组件的 html字符串(一个div) + * @param {any} option + * @returns */ function createTab(option) { @@ -478,7 +410,7 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { var index = 0; $.each(option.data, function (i, item) { - var titleItem = `
  • + var titleItem = `
  • ${item.title} @@ -493,19 +425,9 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { content += `
    ` } else { - - $.ajax({ - url: item.url, - type: 'get', - dataType: 'html', - async: false, - success: function (data) { - content += `
    ${data}
    `; - }, - error: function (xhr) { - return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！'); - } - }); + $getHtml(item.url, data => + content += `
    ${data}
    ` + ); } index++; @@ -521,7 +443,57 @@ layui.define(['jquery', 'element', 'dropdown'], function (exports) { tab += '' return tab; } + /** + * 添加tab页 用的Layui的tab页组件 + * 如果opt.type=='_iframe' 则不用Layui tab而是 直接插入一个iframe + * @param {any} filter + * @param {any} title + * @param {any} opt + */ + function addLayuiTab(filter, title, opt) { + if (opt.type === "_iframe") { + + element.tabAdd(filter, { + id: opt.id, + title: title, + content: `` + }); + } else { + $getHtml(opt.url, data => element.tabAdd(filter, { + id: opt.id, + pageUrl: opt.url, + title: title, + content: `
    ${data}
    `, + })); + } + } + /** + * jq ajax get方式获取html页面 + * @param {any} url + * @param { function (HTMLElement)} callBack + */ + function $getHtml(url, callBack) { + $.ajax({ + url: url, + type: 'get', + dataType: 'html', + async: false, + success: function (data) { + if (typeof (callBack) === 'function') { + callBack(data) + } + }, + error: function (xhr, textstatus, thrown) { + return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！'); + } + }); + } + /** + * 滚动tab页头 + * @param {any} d + * @param {any} option + */ function rollPage(d, option) { var $tabTitle = $('#' + option.elem + ' .layui-tab-title'); var left = $tabTitle.scrollLeft(); diff --git a/config/pear.config.json b/config/pear.config.json index b1dba56..bf51cbd 100644 --- a/config/pear.config.json +++ b/config/pear.config.json @@ -21,7 +21,7 @@ "max": "30", "index": { "id": "10", - "href": "view/console/console1.html", + "href": "view/console/index.html", "title": "首页" } }, diff --git a/index.html b/index.html index 89009d7..1d86840 100644 --- a/index.html +++ b/index.html @@ -25,8 +25,8 @@
      -
      • -
      • +
      • +
    @@ -79,7 +79,7 @@
    - +
    @@ -91,7 +91,7 @@ var admin = layui.admin; var popup = layui.popup; - admin.setConfigurationPath("config/pear.config.yml"); + admin.setConfigurationPath("config/pear.config.json"); admin.render(); @@ -109,4 +109,4 @@ }) - + \ No newline at end of file diff --git a/view/component/table.html b/view/component/table.html new file mode 100644 index 0000000..f30b6b4 --- /dev/null +++ b/view/component/table.html @@ -0,0 +1,181 @@ + + + + + layui + + + + + + + +
    +
    + +
    + 搜索信息 +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    +
    +
    +
    + + + +
    + + + +
    +
    + + + + \ No newline at end of file diff --git a/view/component/toast.html b/view/component/toast.html index c959a70..bbbf781 100644 --- a/view/component/toast.html +++ b/view/component/toast.html @@ -38,7 +38,7 @@