#

luxiaotao1123

2022-03-29 8efbcfef1ccb88c0f4020dc5bbfd271ab403ac1d

#

 src/main/webapp/static/css/loader.css

New file
@@ -0,0 +1,59 @@
/**初始化加载层*/
.layuimini-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 999999;
}

.layuimini-loader .layuimini-loader-inner {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1E9FFF;
    animation: spin 2s linear infinite;
}

.layuimini-loader .layuimini-loader-inner:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1E9FFF;
    animation: spin 3s linear infinite;
}

.layuimini-loader .layuimini-loader-inner:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1E9FFF;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}

 src/main/webapp/static/image/favicon.ico

 src/main/webapp/static/layui/lay/modules/contextMenu.js

New file
@@ -0,0 +1,228 @@
/** 右键菜单模块 date:2019-02-08   License By http://easyweb.vip */
layui.define(["jquery"], function (exports) {
    var $ = layui.jquery;

    var contextMenu = {
        // 绑定元素
        bind: function (elem, items) {
            $(elem).bind('contextmenu', function (e) {
                contextMenu.show(items, e.clientX, e.clientY, e);
                return false;
            });
        },
        // 在指定坐标显示菜单
        show: function (items, x, y, e) {
            var xy = 'left: ' + x + 'px; top: ' + y + 'px;';
            var htmlStr = '<div class="ctxMenu" style="' + xy + '">';
            htmlStr += contextMenu.getHtml(items, '');
            htmlStr += '   </div>';
            contextMenu.remove();
            $('body').append(htmlStr);
            // 调整溢出位置
            var $ctxMenu = $('.ctxMenu');
            if (x + $ctxMenu.outerWidth() > contextMenu.getPageWidth()) {
                x -= $ctxMenu.outerWidth();
            }
            if (y + $ctxMenu.outerHeight() > contextMenu.getPageHeight()) {
                y = y - $ctxMenu.outerHeight();
                if (y < 0) {
                    y = 0;
                }
            }
            $ctxMenu.css({'top': y, 'left': x});
            // 添加item点击事件
            contextMenu.setEvents(items, e);
            // 显示子菜单事件
            $('.ctxMenu-item').on('mouseenter', function (e) {
                e.stopPropagation();
                $(this).parent().find('.ctxMenu-sub').css('display', 'none');
                if (!$(this).hasClass('haveMore')) return;
                var $item = $(this).find('>a');
                var $sub = $(this).find('>.ctxMenu-sub');
                var top = $item.offset().top - $('body,html').scrollTop();
                var left = $item.offset().left + $item.outerWidth() - $('body,html').scrollLeft();
                if (left + $sub.outerWidth() > contextMenu.getPageWidth()) {
                    left = $item.offset().left - $sub.outerWidth();
                }
                if (top + $sub.outerHeight() > contextMenu.getPageHeight()) {
                    top = top - $sub.outerHeight() + $item.outerHeight();
                    if (top < 0) {
                        top = 0;
                    }
                }
                $(this).find('>.ctxMenu-sub').css({
                    'top': top,
                    'left': left,
                    'display': 'block'
                });
            })/*.on('mouseleave', function () {
                $(this).find('>.ctxMenu-sub').css('display', 'none');
            })*/;
        },
        // 移除所有
        remove: function () {
            var ifs = parent.window.frames;
            for (var i = 0; i < ifs.length; i++) {
                var tif = ifs[i];
                try {
                    tif.layui.jquery('body>.ctxMenu').remove();
                } catch (e) {
                }
            }
            try {
                parent.layui.jquery('body>.ctxMenu').remove();
            } catch (e) {
            }
        },
        // 设置事件监听
        setEvents: function (items, event) {
            $('.ctxMenu').off('click').on('click', '[lay-id]', function (e) {
                var itemId = $(this).attr('lay-id');
                var item = getItemById(itemId, items);
                item.click && item.click(e, event);
            });

            function getItemById(id, list) {
                for (var i = 0; i < list.length; i++) {
                    var one = list[i];
                    if (id == one.itemId) {
                        return one;
                    } else if (one.subs && one.subs.length > 0) {
                        var temp = getItemById(id, one.subs);
                        if (temp) {
                            return temp;
                        }
                    }
                }
            }
        },
        // 构建无限级
        getHtml: function (items, pid) {
            var htmlStr = '';
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                item.itemId = 'ctxMenu-' + pid + i;
                if (item.subs && item.subs.length > 0) {
                    htmlStr += '<div class="ctxMenu-item haveMore" lay-id="' + item.itemId + '">';
                    htmlStr += '<a>';
                    if (item.icon) {
                        htmlStr += '<i class="' + item.icon + ' ctx-icon"></i>';
                    }
                    htmlStr += item.name;
                    htmlStr += '<i class="layui-icon layui-icon-right icon-more"></i>';
                    htmlStr += '</a>';
                    htmlStr += '<div class="ctxMenu-sub" style="display: none;">';
                    htmlStr += contextMenu.getHtml(item.subs, pid + i);
                    htmlStr += '</div>';
                } else {
                    htmlStr += '<div class="ctxMenu-item" lay-id="' + item.itemId + '">';
                    htmlStr += '<a>';
                    if (item.icon) {
                        htmlStr += '<i class="' + item.icon + ' ctx-icon"></i>';
                    }
                    htmlStr += item.name;
                    htmlStr += '</a>';
                }
                htmlStr += '</div>';
                if (item.hr == true) {
                    htmlStr += '<hr/>';
                }
            }
            return htmlStr;
        },
        // 获取css代码
        getCommonCss: function () {
            var cssStr = '.ctxMenu, .ctxMenu-sub {';
            cssStr += '        max-width: 250px;';
            cssStr += '        min-width: 110px;';
            cssStr += '        background: white;';
            cssStr += '        border-radius: 2px;';
            cssStr += '        padding: 5px 0;';
            cssStr += '        white-space: nowrap;';
            cssStr += '        position: fixed;';
            cssStr += '        z-index: 2147483647;';
            cssStr += '        box-shadow: 0 2px 4px rgba(0, 0, 0, .12);';
            cssStr += '        border: 1px solid #d2d2d2;';
            cssStr += '        overflow: visible;';
            cssStr += '   }';

            cssStr += '   .ctxMenu-item {';
            cssStr += '        position: relative;';
            cssStr += '   }';

            cssStr += '   .ctxMenu-item > a {';
            cssStr += '        font-size: 14px;';
            cssStr += '        color: #666;';
            cssStr += '        padding: 0 26px 0 35px;';
            cssStr += '        cursor: pointer;';
            cssStr += '        display: block;';
            cssStr += '        line-height: 36px;';
            cssStr += '        text-decoration: none;';
            cssStr += '        position: relative;';
            cssStr += '   }';

            cssStr += '   .ctxMenu-item > a:hover {';
            cssStr += '        background: #f2f2f2;';
            cssStr += '        color: #666;';
            cssStr += '   }';

            cssStr += '   .ctxMenu-item > a > .icon-more {';
            cssStr += '        position: absolute;';
            cssStr += '        right: 5px;';
            cssStr += '        top: 0;';
            cssStr += '        font-size: 12px;';
            cssStr += '        color: #666;';
            cssStr += '   }';

            cssStr += '   .ctxMenu-item > a > .ctx-icon {';
            cssStr += '        position: absolute;';
            cssStr += '        left: 12px;';
            cssStr += '        top: 0;';
            cssStr += '        font-size: 15px;';
            cssStr += '        color: #666;';
            cssStr += '   }';

            cssStr += '   .ctxMenu hr {';
            cssStr += '        background-color: #e6e6e6;';
            cssStr += '        clear: both;';
            cssStr += '        margin: 5px 0;';
            cssStr += '        border: 0;';
            cssStr += '        height: 1px;';
            cssStr += '   }';

            cssStr += '   .ctx-ic-lg {';
            cssStr += '        font-size: 18px !important;';
            cssStr += '        left: 11px !important;';
            cssStr += '    }';
            return cssStr;
        },
        // 获取浏览器高度
        getPageHeight: function () {
            return document.documentElement.clientHeight || document.body.clientHeight;
        },
        // 获取浏览器宽度
        getPageWidth: function () {
            return document.documentElement.clientWidth || document.body.clientWidth;
        },
    };

    // 点击任意位置关闭菜单
    $(document).off('click.ctxMenu').on('click.ctxMenu', function () {
        contextMenu.remove();
    });

    // 点击有子菜单的节点不关闭菜单
    $(document).off('click.ctxMenuMore').on('click.ctxMenuMore', '.ctxMenu-item', function (e) {
        if ($(this).hasClass('haveMore')) {
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }
        } else {
            contextMenu.remove();
        }
    });

    $('head').append('<style id="ew-css-ctx">' + contextMenu.getCommonCss() + '</style>');
    exports("contextMenu", contextMenu);
});

 src/main/webapp/static/layui/lay/modules/index.js

New file
@@ -0,0 +1,302 @@
/** EasyWeb iframe v3.1.8 date:2020-05-04 License By http://easyweb.vip */

layui.define(['layer', 'element', 'admin'], function (exports) {
    var $ = layui.jquery;
    var layer = layui.layer;
    var element = layui.element;
    var admin = layui.admin;
    var setter = admin.setter;
    var headerDOM = '.layui-layout-admin>.layui-header';
    var sideDOM = '.layui-layout-admin>.layui-side>.layui-side-scroll';
    var bodyDOM = '.layui-layout-admin>.layui-body';
    var tabDOM = bodyDOM + '>.layui-tab';
    var titleDOM = bodyDOM + '>.layui-body-header';
    var tabFilter = 'admin-pagetabs';
    var navFilter = 'admin-side-nav';
    var tabEndCall = {};  // Tab关闭的事件回调
    var mIsAddTab = false;  // 是否是添加Tab，添加Tab的时候切换不自动刷新
    var index = {homeUrl: undefined, mTabPosition: undefined, mTabList: []};

    /** 渲染主体部分 */
    index.loadView = function (param) {
        if (!param.menuPath) return layer.msg('url不能为空', {icon: 2, anim: 6});
        if (setter.pageTabs) {  // 多标签模式
            var flag;  // 选项卡是否已添加
            $(tabDOM + '>.layui-tab-title>li').each(function () {
                if ($(this).attr('lay-id') === param.menuPath) flag = true;
            });
            if (!flag) {  // 添加选项卡
                if (index.mTabList.length + 1 >= setter.maxTabNum) {
                    layer.msg('最多打开' + setter.maxTabNum + '个选项卡', {icon: 2, anim: 6});
                    return admin.activeNav(index.mTabPosition);
                }
                mIsAddTab = true;
                element.tabAdd(tabFilter, {
                    id: param.menuPath, title: '<span class="title">' + (param.menuName || '') + '</span>',
                    content: '<iframe class="admin-iframe" lay-id="' + param.menuPath + '" src="' + param.menuPath +
                        '" onload="layui.index.hideLoading(this);" frameborder="0"></iframe>'
                });
                admin.showLoading({elem: $('iframe[lay-id="' + param.menuPath + '"]').parent(), size: ''});
                if (param.menuPath !== index.homeUrl) index.mTabList.push(param);  // 记录tab
                if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList);  // 缓存tab
            }
            if (!param.noChange) element.tabChange(tabFilter, param.menuPath);  // 切换到此tab
        } else {  // 单标签模式
            admin.activeNav(param.menuPath);
            var $contentDom = $(bodyDOM + '>div>.admin-iframe');
            if ($contentDom.length === 0) {
                $(bodyDOM).html([
                    '<div class="layui-body-header">',
                    '   <span class="layui-body-header-title"></span>',
                    '   <span class="layui-breadcrumb pull-right" lay-filter="admin-body-breadcrumb" style="visibility: visible;"></span>',
                    '</div>',
                    '<div style="-webkit-overflow-scrolling: touch;">',
                    '   <iframe class="admin-iframe" lay-id="', param.menuPath, '" src="', param.menuPath, '"',
                    '      onload="layui.index.hideLoading(this);" frameborder="0"></iframe>',
                    '</div>'].join(''));
                admin.showLoading({elem: $('iframe[lay-id="' + param.menuPath + '"]').parent(), size: ''});
            } else {
                admin.showLoading({elem: $contentDom.parent(), size: ''});
                $contentDom.attr('lay-id', param.menuPath).attr('src', param.menuPath);
            }
            $('[lay-filter="admin-body-breadcrumb"]').html(index.getBreadcrumbHtml(param.menuPath));
            index.mTabList.splice(0, index.mTabList.length);
            if (param.menuPath === index.homeUrl) {
                index.mTabPosition = undefined;
                index.setTabTitle($(param.menuName).text() || $(sideDOM + ' [lay-href="' + index.homeUrl + '"]').text() || '主页');
            } else {
                index.mTabPosition = param.menuPath;
                index.mTabList.push(param);
                index.setTabTitle(param.menuName);
            }
            if (!setter.cacheTab) return;
            admin.putTempData('indexTabs', index.mTabList);
            admin.putTempData('tabPosition', index.mTabPosition);
        }
        if (admin.getPageWidth() <= 768) admin.flexible(true); // 移动端自动收起侧导航
    };

    /** 加载主页 */
    index.loadHome = function (param) {
        var cacheTabs = admin.getTempData('indexTabs');  // 获取缓存tab
        var cachePosition = admin.getTempData('tabPosition');
        var recover = (param.loadSetting === undefined || param.loadSetting) && (setter.cacheTab && cacheTabs && cacheTabs.length > 0);
        index.homeUrl = param.menuPath;
        param.noChange = cachePosition ? recover : false;
        if (setter.pageTabs || !recover) index.loadView(param);
        if (recover) {  // 恢复缓存tab
            for (var i = 0; i < cacheTabs.length; i++) {
                cacheTabs[i].noChange = cacheTabs[i].menuPath !== cachePosition;
                if (!cacheTabs[i].noChange || (setter.pageTabs && !param.onlyLast)) index.loadView(cacheTabs[i]);
            }
        }
        admin.removeLoading(undefined, false);
    };

    /** 打开tab */
    index.openTab = function (param) {
        if (window !== top && !admin.isTop() && top.layui && top.layui.index) return top.layui.index.openTab(param);
        if (param.end) tabEndCall[param.url] = param.end;
        index.loadView({menuPath: param.url, menuName: param.title});
    };

    /** 关闭tab */
    index.closeTab = function (url) {
        if (window !== top && !admin.isTop() && top.layui && top.layui.index) return top.layui.index.closeTab(url);
        element.tabDelete(tabFilter, url);
    };

    /** 设置是否记忆Tab */
    index.setTabCache = function (isCache) {
        if (window !== top && !admin.isTop() && top.layui && top.layui.index) return top.layui.index.setTabCache(isCache);
        admin.putSetting('cacheTab', isCache);
        if (!isCache) return index.clearTabCache();
        admin.putTempData('indexTabs', index.mTabList);
        admin.putTempData('tabPosition', index.mTabPosition);
    };

    /** 清除tab记忆 */
    index.clearTabCache = function () {
        admin.putTempData('indexTabs', null);
        admin.putTempData('tabPosition', null);
    };

    /** 设置tab标题 */
    index.setTabTitle = function (title, tabId) {
        if (window !== top && !admin.isTop() && top.layui && top.layui.index) return top.layui.index.setTabTitle(title, tabId);
        if (setter.pageTabs) {
            if (!tabId) tabId = $(tabDOM + '>.layui-tab-title>li.layui-this').attr('lay-id');
            if (tabId) $(tabDOM + '>.layui-tab-title>li[lay-id="' + tabId + '"] .title').html(title || '');
        } else if (title) {
            $(titleDOM + '>.layui-body-header-title').html(title);
            $(titleDOM).addClass('show');
            $(headerDOM).css('box-shadow', '0 1px 0 0 rgba(0, 0, 0, .03)');
        } else {
            $(titleDOM).removeClass('show');
            $(headerDOM).css('box-shadow', '');
        }
    };

    /** 自定义tab标题 */
    index.setTabTitleHtml = function (html) {
        if (window !== top && !admin.isTop() && top.layui && top.layui.index) return top.layui.index.setTabTitleHtml(html);
        if (setter.pageTabs) return;
        if (!html) return $(titleDOM).removeClass('show');
        $(titleDOM).html(html);
        $(titleDOM).addClass('show');
    };

    /** 获取面包屑 */
    index.getBreadcrumb = function (tabId) {
        if (!tabId) tabId = $(bodyDOM + '>div>.admin-iframe').attr('lay-id');
        var breadcrumb = [];
        var $href = $(sideDOM).find('[lay-href="' + tabId + '"]');
        if ($href.length > 0) breadcrumb.push($href.text().replace(/(^\s*)|(\s*$)/g, ''));
        while (true) {
            $href = $href.parent('dd').parent('dl').prev('a');
            if ($href.length === 0) break;
            breadcrumb.unshift($href.text().replace(/(^\s*)|(\s*$)/g, ''));
        }
        return breadcrumb;
    };

    /** 获取面包屑结构 */
    index.getBreadcrumbHtml = function (tabId) {
        var breadcrumb = index.getBreadcrumb(tabId);
        var htmlStr = tabId === index.homeUrl ? '' : ('<a ew-href="' + index.homeUrl + '">首页</a>');
        for (var i = 0; i < breadcrumb.length - 1; i++) {
            if (htmlStr) htmlStr += '<span lay-separator="">/</span>';
            htmlStr += ('<a><cite>' + breadcrumb[i] + '</cite></a>');
        }
        return htmlStr;
    };

    /** 关闭loading */
    index.hideLoading = function (url) {
        if (typeof url !== 'string') url = $(url).attr('lay-id');
        admin.removeLoading($('iframe[lay-id="' + url + '"],' + bodyDOM + ' iframe[lay-id]').parent(), false);
    };

    /** 移动设备遮罩层 */
    var siteShadeDom = '.layui-layout-admin .site-mobile-shade';
    if ($(siteShadeDom).length === 0) $('.layui-layout-admin').append('<div class="site-mobile-shade"></div>');
    $(siteShadeDom).click(function () {
        admin.flexible(true);
    });

    /** 补充tab的dom */
    if (setter.pageTabs && $(tabDOM).length === 0) {
        $(bodyDOM).html([
            '<div class="layui-tab" lay-allowClose="true" lay-filter="', tabFilter, '" lay-autoRefresh="', setter.tabAutoRefresh == 'true', '">',
            '   <ul class="layui-tab-title"></ul><div class="layui-tab-content"></div>',
            '</div>',
            '<div class="layui-icon admin-tabs-control layui-icon-prev" ew-event="leftPage"></div>',
            '<div class="layui-icon admin-tabs-control layui-icon-next" ew-event="rightPage"></div>',
            '<div class="layui-icon admin-tabs-control layui-icon-down">',
            '   <ul class="layui-nav" lay-filter="admin-pagetabs-nav">',
            '      <li class="layui-nav-item" lay-unselect>',
            '         <dl class="layui-nav-child layui-anim-fadein">',
            '            <dd ew-event="closeThisTabs" lay-unselect><a>关闭当前标签页</a></dd>',
            '            <dd ew-event="closeOtherTabs" lay-unselect><a>关闭其它标签页</a></dd>',
            '            <dd ew-event="closeAllTabs" lay-unselect><a>关闭全部标签页</a></dd>',
            '         </dl>',
            '      </li>',
            '   </ul>',
            '</div>'
        ].join(''));
        element.render('nav', 'admin-pagetabs-nav');
    }

    /** 侧导航点击监听 */
    element.on('nav(' + navFilter + ')', function (elem) {
        var $that = $(elem);
        var href = $that.attr('lay-href');
        if (!href || href === '#') return;
        if (href.indexOf('javascript:') === 0) return new Function(href.substring(11))();
        var name = $that.attr('ew-title') || $that.text().replace(/(^\s*)|(\s*$)/g, '');
        var end = $that.attr('ew-end');
        try {
            if (end) end = new Function(end);
            else end = undefined;
        } catch (e) {
            console.error(e);
        }
        index.openTab({url: href, title: name, end: end});
        layui.event.call(this, 'admin', 'side({*})', {href: href});
    });

    /** tab切换监听 */
    element.on('tab(' + tabFilter + ')', function () {
        var layId = $(this).attr('lay-id');
        index.mTabPosition = (layId !== index.homeUrl ? layId : undefined);  // 记录当前Tab位置
        if (setter.cacheTab) admin.putTempData('tabPosition', index.mTabPosition);
        admin.activeNav(layId);
        admin.rollPage('auto');
        if ($(tabDOM).attr('lay-autoRefresh') == 'true' && !mIsAddTab) admin.refresh(layId, true);  // 切换tab刷新
        mIsAddTab = false;
        layui.event.call(this, 'admin', 'tab({*})', {layId: layId});
    });

    /** tab删除监听 */
    element.on('tabDelete(' + tabFilter + ')', function (data) {
        var mTab = index.mTabList[data.index - 1];
        if (mTab) {
            index.mTabList.splice(data.index - 1, 1);
            if (setter.cacheTab) admin.putTempData('indexTabs', index.mTabList);
            tabEndCall[mTab.menuPath] && tabEndCall[mTab.menuPath].call();
            layui.event.call(this, 'admin', 'tabDelete({*})', {layId: mTab.menuPath});
        }
        if ($(tabDOM + '>.layui-tab-title>li.layui-this').length === 0)
            $(tabDOM + '>.layui-tab-title>li:last').trigger('click');  // 解决删除后可能无选中bug
    });

    /** 多系统切换事件 */
    $(document).off('click.navMore').on('click.navMore', '[nav-bind]', function () {
        var navId = $(this).attr('nav-bind');
        $('ul[lay-filter="' + navFilter + '"]').addClass('layui-hide');
        $('ul[nav-id="' + navId + '"]').removeClass('layui-hide');
        $(headerDOM + '>.layui-nav .layui-nav-item').removeClass('layui-this');
        $(this).parent('.layui-nav-item').addClass('layui-this');
        if (admin.getPageWidth() <= 768) admin.flexible(false);  // 展开侧边栏
        layui.event.call(this, 'admin', 'nav({*})', {navId: navId});
    });

    /** 开启Tab右键菜单 */
    if (setter.openTabCtxMenu && setter.pageTabs) {
        layui.use('contextMenu', function () {
            if (!layui.contextMenu) return;
            $(tabDOM + '>.layui-tab-title').off('contextmenu.tab').on('contextmenu.tab', 'li', function (e) {
                var layId = $(this).attr('lay-id');
                layui.contextMenu.show([{
                    icon: 'layui-icon layui-icon-refresh',
                    name: '刷新当前',
                    click: function () {
                        element.tabChange(tabFilter, layId);
                        if ('true' != $(tabDOM).attr('lay-autoRefresh')) admin.refresh(layId);
                    }
                }, {
                    icon: 'layui-icon layui-icon-close-fill ctx-ic-lg',
                    name: '关闭当前',
                    click: function () {
                        admin.closeThisTabs(layId);
                    }
                }, {
                    icon: 'layui-icon layui-icon-unlink',
                    name: '关闭其他',
                    click: function () {
                        admin.closeOtherTabs(layId);
                    }
                }, {
                    icon: 'layui-icon layui-icon-close ctx-ic-lg',
                    name: '关闭全部',
                    click: function () {
                        admin.closeAllTabs();
                    }
                }], e.clientX, e.clientY);
                return false;
            });
        });
    }

    exports('index', index);
});

 src/main/webapp/views/index.html

@@ -1,240 +1,179 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>自动仓储 - 管理系统</title>
  <title>中扬 - 运维系统平台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="icon" type="image/x-icon" href="../static/image/log.png" />
  <link rel="stylesheet" href="../static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../static/layuiadmin/style/admin.css" media="all">
  <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../static/js/common.js"></script>
  <script type="text/javascript" src="../static/layuiadmin/layui/layui.js"></script>
  <link rel="icon" type="image/x-icon" href="../static/image/favicon.ico" />
  <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../static/css/admin.css?v=318" media="all">
  <link rel="stylesheet" href="../static/css/loader.css" media="all">
  <style>
    .layui-layout-admin .layui-footer {
      box-sizing: border-box;
      background-color: #fff;
      z-index: 999;
      height: 30px;
      padding: 0;
      font-size: 13px;
      margin: 0;
      line-height: 30px;
    .layui-logo img {
      width: 25px;
    }
    .layui-layout-admin .layui-footer a {
      color: #3573ab;
      font-weight: bold
    }

    .layui-layout-admin .layui-logo {
      letter-spacing: 2px;
      font-size: 22px;
      height: 110px;
      padding: 20px 10px;
      font-weight: bolder;
      /*color: #2c7dc2;*/
      color: #f3f3f3;
      text-align: center;
      line-height: 40px;
    }
    .layadmin-side-shrink .layui-layout-admin .layui-logo {
      background-image: none;
    }
    .layui-side-menu .layui-nav {
      margin-top: 110px;
    .layui-logo cite {
      font-size: 18px;
      font-weight: 400;
      /*margin-left: 5px;*/
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <!-- 头部 -->
  <div class="layui-header">
    <div class="layui-logo">
      <img src="../static/image/logo.png" style="display: inline-block; width: 60%;height: auto">
      <!--          <span style="margin-top: 0; letter-spacing: 10px">中扬立库</span>-->
      <!--          <img src="../static/image/logo.svg"/>-->
      <!--          <cite>中扬 - Zoneyung</cite>-->
    </div>

  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <!-- 头部区域 -->
        <ul id="cool-header-left" class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
            </a>
          </li>
          <!--<li class="layui-nav-item layui-hide-xs" lay-unselect>-->
            <!--<a lay-href="report/viewLocMap.html?resourceId=10286" title="Map">-->
              <!--<i class="layui-icon layui-icon-website"></i>-->
            <!--</a>-->
          <!--</li>-->
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3"></i>
            </a>
          </li>
          <!--<li class="layui-nav-item layui-hide-xs" lay-unselect>-->
            <!--<input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords=">-->
          <!--</li>-->
        </ul>
        <ul id="cool-header-right" class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="theme">
              <i class="layui-icon layui-icon-theme"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a id="activation-icon" href="javascript:;" layadmin-event="note">
              <i class="layui-icon layui-icon-note"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="fullscreen">
              <i class="layui-icon layui-icon-screen-full"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite id="person-username">管理员</cite>
            </a>
            <dl class="layui-nav-child">
              <dd><a lay-href="detail.html">基本资料</a></dd>
              <!--<dd><a lay-href="set/user/password.html">修改密码</a></dd>-->
              <hr>
              <dd style="text-align: center;"><a id="logout" href="/">退出</a></dd>
            </dl>
          </li>
        </ul>
      </div>
      
      <!-- 侧边菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <div class="layui-logo" lay-href="home/console.html">
            <img src="../static/image/logo.png" style="display: inline-block; width: 90%;height: auto">
            <span style="margin-top: 0;letter-spacing: 10px">中扬立库</span>
          </div>
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item" lay-unselect>
        <a ew-event="flexible" title="侧边伸缩"><i class="layui-icon layui-icon-shrink-right"></i></a>
      </li>
      <li class="layui-nav-item" lay-unselect>
        <a ew-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item" lay-unselect>
        <a ew-event="note" title="便签"><i class="layui-icon layui-icon-note"></i></a>
      </li>
      <li class="layui-nav-item layui-hide-xs" lay-unselect>
        <a ew-event="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
      </li>
      <li class="layui-nav-item" lay-unselect>
        <a>
          <cite id="username" style="margin-right: 5px">管理员</cite>
        </a>
        <dl class="layui-nav-child">
          <dd lay-unselect><a ew-href="detail.html?resourceId=8">基本资料</a></dd>
          <hr>
          <dd lay-unselect><a id="logout">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-unselect>
        <a ew-event="theme" title="主题"><i class="layui-icon layui-icon-more-vertical"></i></a>
      </li>
    </ul>
  </div>

          <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
          </ul>
        </div>
      </div>
      <!-- 页面标签 -->
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;"></a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
          </ul>
        </div>
      </div>

      <!-- 主体内容 -->
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
      </div>

      <div class="layui-footer">
        Copyright © 2015 All Rights Reserved. <a href="http://www.zoneyung.com" target="_blank">浙江中扬立库技术有限公司</a>  保留所有权利
      </div>
      <!-- 辅助元素，一般用于移动设备下遮罩 -->
      <div class="layadmin-body-shade" layadmin-event="shade"></div>
  <!-- 侧边栏 -->
  <div class="layui-side">
    <div class="layui-side-scroll">
      <ul id="menu-main" class="layui-nav layui-nav-tree arrow2" lay-filter="admin-side-nav" lay-shrink="_all">
      </ul>
    </div>
  </div>

  <script>
  layui.config({
    base: '../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','element'], function () {
      var element = layui.element;
      var $ = layui.jquery;
  <!-- 主体部分 -->
  <div class="layui-body"></div>
  <!-- 底部 -->
  <div class="layui-footer layui-text">
    copyright © 2022 <a href="http://www.zoneyung.com" target="_blank">浙江中扬立库技术有限公司</a> all rights reserved.
    <span class="pull-right">Version 1.0.0</span>
  </div>

      // 替换退出按钮变量
      var logout = document.getElementById('logout');
      var url = logout.getAttribute('href');
      logout.setAttribute('href', baseUrl + url);
</div>

      $('#person-username').text(localStorage.getItem('username'));
<!--初始化加载层-->
<div class="layuimini-loader">
  <div class="layuimini-loader-inner"></div>
</div>

      $(function () {
          if ("" === localStorage.getItem('token')){
              top.location.href = baseUrl+"/login";
          }

          // 激活码验证
          $.ajax({
            url: baseUrl+"/system/activation/auth",
            dataType:'json',
            method: 'GET',
            async: false,
            success: function (res) {
              if (res.code === 200) {
                $("#activation-icon").hide();
              } else {
                $("#activation-icon").click();
              }
            }
          });

          getMenu()

          // 注销
          $(document).on('click','#logout',function () {
              localStorage.removeItem("token");
          });

      });

      // 加载菜单
      function getMenu() {
        $.ajax({
          url: baseUrl+ "/menu/auth",
          headers: {'token': localStorage.getItem('token')},
          method: 'POST',
          success: function (res) {
            if (res.code === 200){
              var menuHtml = "";
              if (res.data != null){
                for (var i = 0; i < res.data.length; i++) {
                  menuHtml += '<li data-name="' + res.data[i].menuCode +'" class="layui-nav-item">\n';
                  menuHtml += '<a href="javascript:;" lay-tips=' +res.data[i].menu+ ' lay-direction="2">\n';
                  menuHtml += '<i class="layui-icon '+ res.data[i].menuIcon +'"></i>\n';
                  menuHtml += ' <cite>' +res.data[i].menu+ '</cite>\n';
                  menuHtml += '</a>\n';
                  menuHtml += '<dl class="layui-nav-child">\n';
                  for (var j = 0; j < res.data[i].subMenu.length; j++) {
                    menuHtml += '<dd><a lay-href="' +res.data[i].subMenu[j].code+ '?resourceId='+ res.data[i].subMenu[j].id + '">' + res.data[i].subMenu[j].name + '</a></dd>\n';
                  }
                  menuHtml += '</dl>\n';
                  menuHtml += '</li>\n';
                }
              }
              $('#LAY-system-side-menu').append(menuHtml);
              element.init();
            } else if (res.code === 403){
              top.location.href = baseUrl+"/login";
            }else {
              layer.alert(res.msg)
            }
          }
        });
      }
<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/layui/layui.js"></script>
<script type="text/javascript" src="../static/js/handlebars/handlebars-v4.5.3.js"></script>
<script type="text/javascript" src="../static/js/common.js"></script>
<script>
  console.log('%c 中扬立库平台 %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');
  $(function () {
    if ("" === localStorage.getItem('token')) {
      top.location.href = baseUrl + "/login";
    }
  });
  </script>

  layui.config({
    base: baseUrl + "/static/layui/lay/modules/"
  }).extend({
    notice: 'notice/notice',
  }).use(['index', 'element', 'layer', 'admin', 'notice'], function () {
    var $ = layui.jquery;
    var index = layui.index;
    var element = layui.element;
    var layer = layui.layer;
    var admin = layui.admin;
    var notice = layui.notice;

    var easywebIframeMsg = localStorage.getItem("easyweb-iframe");
    if (!isEmpty(easywebIframeMsg)) {
      var easywebIframeObj = JSON.parse(easywebIframeMsg);
      if (easywebIframeObj.defaultTheme === undefined) {
        admin.changeTheme("theme-colorful");
      }
    }

    $.ajax({
      url: baseUrl + "/menu/auth",
      headers: {'token': localStorage.getItem('token')},
      method: 'POST',
      // async: false,
      success: function (res) {
        // 关闭加载动画
        $('.layuimini-loader').fadeOut();
        if (res.code === 200) {
          var tpl = $('#menuTpl').html();
          var template = Handlebars.compile(tpl);
          var html = template(res);
          $("#menu-main").html(html);
          element.init();
        } else if (res.code === 403) {
          top.location.href = baseUrl + "/login";
        } else {
          layer.msg(res.msg, {icon: 2});
        }
      }
    });

    // 默认加载主页
    index.loadHome({
      menuPath: baseUrl+'/views/home/console.html',
      menuName: '<i class="layui-icon layui-icon-home"></i>'
    });

    $('#username').text(localStorage.getItem('username'));

    $(document).on('click','#logout', function () {
      window.location.href = "login.html";
      localStorage.removeItem('token');
      localStorage.removeItem('username');
      admin.closeAllTabs();
    });

    // 替换退出按钮变量
    var logout = document.getElementById('logout');
    var url = logout.getAttribute('href');
    logout.setAttribute('href', baseUrl + "/login");

  });
</script>
<script type="text/html" id="menuTpl">
  {{#each data}}
  <li class="layui-nav-item">
    <a><i class="layui-icon {{this.menuIcon}}"></i>&emsp;<cite>{{this.menu}}</cite></a>
    <dl class="layui-nav-child">
      {{#each this.subMenu}}
      <dd><a lay-href="{{this.code}}?resourceId={{this.id}}">{{this.name}}</a></dd>
      {{/each}}
    </dl>
  </li>
  {{/each}}
</script>
</body>
</html>


 src/main/webapp/views/order/order.html

@@ -66,8 +66,25 @@
        </a>
    </span>
</script>
<!--<script type="text/html" id="settleTpl">-->
<!--    <span name="settle" class="layui-badge layui-badge-gray">{{d.settle$}}</span>-->
<!--</script>-->
<script type="text/html" id="settleTpl">
    <span name="settle" class="layui-badge layui-badge-gray">{{d.settle$}}</span>
    <span name="settle"
          {{# if( d.settle === 1){ }}
          class="layui-badge layui-badge-red"
          {{# }else if(d.settle === 2){ }}
          class="layui-badge layui-badge-green"
          {{# }else if(d.settle === 3){ }}
          class="layui-badge layui-badge-gray"
          {{# }else if(d.settle === 4){ }}
          class="layui-badge layui-badge-blue"
          {{# }else if(d.settle === 5){ }}
          class="layui-badge layui-badge-gray"
          {{# }else if(d.settle === 6){ }}
          class="layui-badge layui-badge-gray"
          {{# } }}
    >{{d.settle$}}</span>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="editDialog">

 src/main/webapp/views/tpl/alarm-detl.html

New file
@@ -0,0 +1,52 @@
<style>
    pre {
        font-family: 'DejaVu Sans Mono','Courier New',monospace;
        padding: 15px 10px;
        line-height: 17px;
        margin: 5px;
        word-wrap: break-word;
        border: solid 1px #9e9e9e;
        border-radius: 3px;
        color: #729fcf;
    }
    .string { color: #4e9a06; }
    .number { color: #ad7fa8; }
    .boolean { color: #c4a000; }
    .null { color: #babdb6; }
    .key { color: #204a87; }
</style>

<div style="padding: 25px 25px 15px 25px;" id="callbackDialog">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>基础信息</legend>
    </fieldset>
    <div class="layui-text" style="margin-bottom: 5px;">
        事件编号：{{d.request}}<br />
        设备编号：{{d.response.sensorId$}}<br />
        设备类型：{{d.response.sensorType$}}<br />
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>报警信息</legend>
    </fieldset>
    <div class="layui-text" style="margin-bottom: 5px;">
        发送时间：{{d.response.createTime$}}<br />
        故障描述：{{d.response.desc}}<br />
    </div>
    <div class="text-center" style="padding-top: 15px;text-align: right">
        <button class="layui-btn layui-btn-normal" ew-event="closeDialog">关闭</button>
    </div>
</div>

<!-- js部分 -->
<script>
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).use(['layer', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;

        var layerData = admin.getLayerData('#callbackDialog');
    });

</script>

 src/main/webapp/views/tpl/theme/img/ic_loading.gif

 src/main/webapp/views/tpl/theme/img/icon_date.png

 src/main/webapp/views/tpl/theme/img/icon_search.png

 src/main/webapp/views/tpl/theme/img/theme-admin.png

 src/main/webapp/views/tpl/theme/img/theme-blue.png

 src/main/webapp/views/tpl/theme/img/theme-colorful.png

 src/main/webapp/views/tpl/theme/img/theme-cyan.png

 src/main/webapp/views/tpl/theme/img/theme-green.png

 src/main/webapp/views/tpl/theme/img/theme-my.png

 src/main/webapp/views/tpl/theme/img/theme-pink.png

 src/main/webapp/views/tpl/theme/img/theme-purple.png

 src/main/webapp/views/tpl/theme/img/theme-red.png

 src/main/webapp/views/tpl/theme/img/theme-white.png

 src/main/webapp/views/tpl/tpl-note.html

New file
@@ -0,0 +1,206 @@
<div class="layui-card-header">本地便签</div>
<div class="note-wrapper"></div>
<div class="note-empty">
    <i class="layui-icon layui-icon-face-surprised"></i>
    <p>没有便签</p>
</div>
<div class="btn-circle" id="noteAddBtn" title="添加便签" style="position: absolute;">
    <i class="layui-icon layui-icon-add-1"></i>
</div>

<script>
    layui.use(['layer', 'form', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var dataList = [];  // 便签列表
        var $noteWrapper = $('.note-wrapper');

        /* 渲染列表 */
        function renderList() {
            $noteWrapper.empty();
            dataList = layui.data(admin.setter.tableName).notes;
            if (dataList === undefined) dataList = [];
            for (var i = 0; i < dataList.length; i++) {
                var item = dataList[i];
                $noteWrapper.prepend([
                    '<div class="note-item" data-id="', item.id, '">',
                    '   <div class="note-item-content">', util.escape(item.content), '</div>',
                    '   <div class="note-item-time">', item.time, '</div>',
                    '   <i class="layui-icon layui-icon-close-fill note-item-del"></i>',
                    '</div>'
                ].join(''));
            }
            $('.note-empty').css('display', dataList.length === 0 ? 'block' : 'none');
            // 点击修改
            $('.note-item').click(function () {
                var index = parseInt($(this).attr('data-id'));
                showNote(dataList[index]);
            });
            // 点击删除
            $('.note-item-del').click(function (e) {
                var id = parseInt($(this).parent().attr('data-id'));
                layer.confirm('确认删除吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1,
                    shadeClose: true
                }, function (index) {
                    layer.close(index);
                    dataList.splice(id, 1);
                    for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                    putDataList();
                    renderList();
                });
                e.stopPropagation();
            });
        }

        renderList();

        /* 添加 */
        $('#noteAddBtn').click(function () {
            showNote();
        });

        // 显示编辑弹窗
        function showNote(data) {
            var id = data ? data.id : undefined, content = data ? data.content : '';
            admin.open({
                id: 'layer-note-edit',
                title: '便签',
                type: 1,
                area: 'auto',
                offset: '50px',
                shadeClose: true,
                content: '<textarea id="noteEditText" placeholder="请输入内容" style="width: 280px;height: 150px;border: none;color: #666666;word-wrap: break-word;padding: 10px 20px;resize: vertical;">' + content + '</textarea>',
                success: function () {
                    $('#noteEditText').change(function () {
                        content = $(this).val();
                    });
                },
                end: function () {
                    if (id !== undefined) {
                        if (!content) {
                            dataList.splice(id, 1);
                            for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                        } else if (content !== dataList[id].content) {
                            dataList[id].content = content;
                            dataList[id].time = util.toDateString(new Date(), 'yyyy-MM-dd HH:mm');
                        }
                    } else if (content) {
                        dataList.push({
                            id: dataList.length, content: content,
                            time: util.toDateString(new Date(), 'yyyy-MM-dd HH:mm')
                        });
                    }
                    putDataList();
                    renderList();
                }
            });
        }

        /* 更新本地缓存 */
        function putDataList() {
            layui.data(admin.setter.tableName, {key: 'notes', value: dataList});
        }

    });
</script>

<style>
    .note-wrapper {
        padding: 15px 0 15px 15px;
        background-color: #fbfbfb;
        position: absolute;
        top: 43px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .note-wrapper .note-item {
        display: inline-block;
        width: 110px;
        padding: 12px;
        cursor: pointer;
        position: relative;
        border-radius: 8px;
        margin: 0 15px 15px 0;
        border: 1px solid #eeeeee;
        background-color: #ffffff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    .note-wrapper .note-item:hover {
        box-shadow: 0 0 8px rgba(0, 0, 0, .05);
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -ms-transform: scale(1.02);
        -o-transform: scale(1.02);
        transform: scale(1.02);
    }

    .note-wrapper .note-item .note-item-content {
        color: #666;
        height: 80px;
        font-size: 14px;
        overflow: hidden;
        word-break: break-all;
    }

    .note-wrapper .note-item .note-item-time {
        color: #999;
        font-size: 12px;
        margin-top: 8px;
    }

    .note-wrapper .note-item .note-item-del {
        position: absolute;
        top: 2px;
        right: 2px;
        color: #FF5722;
        font-size: 24px;
        height: 24px;
        width: 24px;
        background-color: #fff;
        border-radius: 50%;
        visibility: hidden;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        opacity: 0;
    }

    .note-wrapper .note-item:hover .note-item-del {
        visibility: visible;
        opacity: 1;
    }

    .note-empty {
        color: #999;
        padding: 80px 0;
        text-align: center;
        display: none;
        position: relative;
        z-index: 1
    }

    .note-empty .layui-icon {
        font-size: 60px;
        margin-bottom: 10px;
        display: inline-block;
    }
</style>

 src/main/webapp/views/tpl/tpl-theme.html

New file
@@ -0,0 +1,229 @@
<div class="layui-card-header">主题设置</div>
<div class="more-theme-list">
    <div class="more-theme-item" data-theme="theme-normal">
        <img src="tpl/theme/img/theme-admin.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-cyan">
        <img src="tpl/theme/img/theme-cyan.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-white">
        <img src="tpl/theme/img/theme-white.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-pink">
        <img src="tpl/theme/img/theme-pink.png"/>
    </div>
    <div class="more-theme-item active" data-theme="theme-colorful">
        <img src="tpl/theme/img/theme-colorful.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-blue">
        <img src="tpl/theme/img/theme-blue.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-green">
        <img src="tpl/theme/img/theme-green.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-purple">
        <img src="tpl/theme/img/theme-purple.png"/>
    </div>
<!--    <div class="more-theme-item" data-theme="theme-red">-->
<!--        <img src="tpl/theme/img/theme-red.png"/>-->
<!--    </div>-->
    <div class="more-theme-item" data-theme="theme-my">
        <img src="tpl/theme/img/theme-my.png"/>
    </div>
</div>
<!-- 导航 -->
<div class="more-menu-list">
<!--    <a class="more-menu-item" href="https://easyweb.vip/doc/" target="_blank">-->
<!--        <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档-->
<!--    </a>-->
<!--    <a class="more-menu-item" href="https://demo.easyweb.vip/spa" target="_blank">-->
<!--        <i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;spa版本-->
<!--    </a>-->
<!--    <a class="more-menu-item" href="https://demo.easyweb.vip/theme" target="_blank">-->
<!--        <i class="layui-icon layui-icon-theme"></i> 主题生成器-->
<!--    </a>-->
</div>
<!-- 控制开关 -->
<div class="layui-form" style="margin: 25px 0;" lay-filter="more-set-form">
    <div class="layui-form-item">
        <label class="set-item-label">页&emsp;脚：</label>
        <div class="set-item-ctrl">
            <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <label class="set-item-label"> Tab&nbsp;记忆：</label>
        <div class="set-item-ctrl">
            <input id="setTab" lay-filter="setTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="set-item-label">多标签：</label>
        <div class="set-item-ctrl">
            <input id="setMoreTab" lay-filter="setMoreTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <label class="set-item-label">切换刷新：</label>
        <div class="set-item-ctrl">
            <input id="setRefresh" lay-filter="setRefresh" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="set-item-label">导航箭头：</label>
        <div class="set-item-ctrl">
            <input lay-filter="navArrow" type="radio" value="" title="默认" name="navArrow">
            <input lay-filter="navArrow" type="radio" value="arrow2" title="箭头" name="navArrow">
            <input lay-filter="navArrow" type="radio" value="arrow3" title="加号" name="navArrow">
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'admin'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var admin = layui.admin;
        var setter = admin.setter;
        var $body = $('body');

        // 切换主题
        var $themItem = $('.more-theme-item');
        $themItem.click(function () {
            $themItem.removeClass('active');
            $(this).addClass('active');
            admin.changeTheme($(this).data('theme'));
        });
        var theme = $body.data('theme');
        if (theme) {
            $themItem.removeClass('active');
            $themItem.filter('[data-theme="' + theme + '"]').addClass('active');
        }

        // 关闭/开启页脚
        form.on('switch(setFooter)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('closeFooter', !checked);
            checked ? $body.removeClass('close-footer') : $body.addClass('close-footer');
        });
        $('#setFooter').prop('checked', !$body.hasClass('close-footer'));

        // 关闭/开启Tab记忆功能
        form.on('switch(setTab)', function (data) {
            layui.index.setTabCache(data.elem.checked);
        });
        $('#setTab').prop('checked', setter.cacheTab);

        // 关闭/开启多标签
        form.on('switch(setMoreTab)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('pageTabs', checked);
            admin.putTempData('indexTabs', undefined);
            location.reload();
        });
        $('#setMoreTab').prop('checked', setter.pageTabs);

        // 切换Tab自动刷新
        var $mainTab = $('.layui-body>.layui-tab[lay-filter="admin-pagetabs"]');
        form.on('switch(setRefresh)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('tabAutoRefresh', checked);
            checked ? $mainTab.attr('lay-autoRefresh', 'true') : $mainTab.removeAttr('lay-autoRefresh');
        });
        $('#setRefresh').prop('checked', setter.tabAutoRefresh === true);

        // 导航小三角
        var $leftNav = $('.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav');
        form.on('radio(navArrow)', function (data) {
            $leftNav.removeClass('arrow2 arrow3');
            data.value && $leftNav.addClass(data.value);
            admin.putSetting('navArrow', data.value);
        });
        var navArrow = $leftNav.hasClass('arrow2') ? 'arrow2' : $leftNav.hasClass('arrow3') ? 'arrow3' : '';
        $('[name="navArrow"][value="' + navArrow + '"]').prop('checked', true);

        form.render('radio', 'more-set-form');
        form.render('checkbox', 'more-set-form');
    });
</script>

<style>
    /* theme */
    .more-theme-list {
        padding-left: 15px;
        padding-top: 20px;
        margin-bottom: 10px;
    }

    .more-theme-item {
        padding: 4px;
        margin: 0 6px 15px 0;
        display: inline-block;
        border: 1px solid transparent;
    }

    .more-theme-item img {
        width: 80px;
        height: 50px;
        background: #f5f7f9;
        box-sizing: border-box;
        border: 1px solid #f5f7f9;
        cursor: pointer;
    }

    .more-theme-item:hover, .more-theme-item.active {
        border-color: #5FB878;
    }

    .more-menu-item {
        color: #595959;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding: 0 25px;
        border-bottom: 1px solid #e8e8e8;
        font-style: normal;
        display: block;
    }

    /* menu */
    .more-menu-item:first-child {
        border-top: 1px solid #e8e8e8;
    }

    .more-menu-item:hover {
        color: #595959;
        background: #f6f6f6;
    }

    .more-menu-item .layui-icon {
        font-size: 18px;
        padding-right: 10px;
    }

    .more-menu-item:after {
        color: #8c8c8c;
        right: 16px;
        content: "\e602";
        position: absolute;
        font-family: layui-icon !important;
    }

    .more-menu-item.no-icon:after {
        display: none;
    }

    /* setting from */
    .set-item-label {
        height: 38px;
        line-height: 38px;
        padding-left: 20px;
        display: inline-block;
    }

    .set-item-ctrl {
        height: 38px;
        line-height: 38px;
        display: inline-block;
    }

    .set-item-ctrl > * {
        margin: 0 !important;
    }
</style>