From 197ba8478f6fc38fe1df9c6699b81c312ea01897 Mon Sep 17 00:00:00 2001 From: zhizous Date: Mon, 6 Apr 2020 17:59:35 +0800 Subject: [PATCH] =?UTF-8?q?config.js=20var=20okConfig=20=3D=20{=20=20=20?= =?UTF-8?q?=20theme:=20"blue=5Ftheme",=20//=E4=B8=BB=E9=A2=98=E8=89=B2oran?= =?UTF-8?q?ge=5Ftheme|blue=5Ftheme=20=20=20=20menuArrow:=20"ok-arrow2",=20?= =?UTF-8?q?//=E5=AF=BC=E8=88=AA=E7=AE=AD=E5=A4=B4ok-arrow2:=E7=AE=AD?= =?UTF-8?q?=E5=A4=B4,=E4=B8=8D=E5=A1=AB=E4=B8=BA=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20=20=20=20tabMemory:=20true,=20=20//?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=BC=80=E5=90=AFtab=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E8=AE=B0=E5=BF=86=20=20=20=20tabRefresh:=20false,=20//?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=BC=80=E5=90=AF=E5=88=87=E6=8D=A2=E5=88=B7?= =?UTF-8?q?=E6=96=B0=20};?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + js/okadmin.js | 11 +- js/okconfig.js | 6 + lib/layui/lay/okmodules/okTab.js | 1005 ++++++++++++++-------------- lib/layui/lay/okmodules/okUtils.js | 360 +++++----- pages/system/setting.html | 91 ++- 6 files changed, 811 insertions(+), 663 deletions(-) create mode 100644 js/okconfig.js diff --git a/index.html b/index.html index 05f0030..b8107e6 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/js/okadmin.js b/js/okadmin.js index 5346c0a..57be1f4 100644 --- a/js/okadmin.js +++ b/js/okadmin.js @@ -7,7 +7,6 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", " var layer = layui.layer; var okLayer = layui.okLayer; var okHoliday = layui.okHoliday; - var okTab = layui.okTab({ // 菜单请求路径 url: "data/navs.json", @@ -18,8 +17,18 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", " return data; } }); + var config = okUtils.local("okConfig") || okConfig || {}; objOkTab = okTab; okLoading && okLoading.close();/**关闭加载动画*/ + + if(config.theme){ //主题颜色 + $(".layui-layout-admin").removeClass("orange_theme blue_theme"); + $(".layui-layout-admin").addClass(config.theme); + } + if(config.menuArrow){ //tab箭头样式 + $("#navBar").addClass(config.menuArrow); + } + /** * 左侧导航渲染完成之后的操作 */ diff --git a/js/okconfig.js b/js/okconfig.js new file mode 100644 index 0000000..08b6765 --- /dev/null +++ b/js/okconfig.js @@ -0,0 +1,6 @@ +var okConfig = { + theme: "blue_theme", //主题色orange_theme|blue_theme + menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式 + tabMemory: true, //是否开启tab刷新记忆 + tabRefresh: false, //是否开启切换刷新 +}; \ No newline at end of file diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js index f0b1962..bf9faa5 100644 --- a/lib/layui/lay/okmodules/okTab.js +++ b/lib/layui/lay/okmodules/okTab.js @@ -1,537 +1,556 @@ var $; +var config; String.prototype.format = function () { - //字符串占位符 - //eg: var str1 = "hello {0}".format("world"); - if (arguments.length == 0) return this; - var param = arguments[0]; - var s = this; - if (typeof (param) == 'object') { - for (var key in param) { - s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]); - } - return s; - } else { - for (var i = 0; i < arguments.length; i++) { - s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); - } - return s; - } + //字符串占位符 + //eg: var str1 = "hello {0}".format("world"); + if (arguments.length == 0) return this; + var param = arguments[0]; + var s = this; + if (typeof (param) == 'object') { + for (var key in param) { + s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]); + } + return s; + } else { + for (var i = 0; i < arguments.length; i++) { + s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); + } + return s; + } }; /**打开缓存中的tabMenu**/ let OpenTabMenuFun = function ($, callback) { - var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面 - if (tabMenu) { - tabMenu = JSON.parse(tabMenu); - $("#tabTitle").html(tabMenu.tabTitle); - $("#tabContent").html(tabMenu.tabContent); - if (typeof callback == 'function') { - callback(); - } - } + if(config && config.menuArrow){ + var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面 + if (tabMenu) { + tabMenu = JSON.parse(tabMenu); + $("#tabTitle").html(tabMenu.tabTitle); + $("#tabContent").html(tabMenu.tabContent); + if (typeof callback == 'function') { + callback(); + } + } + } + }; /**删除缓存中的tabMenu**/ let removeTabMenu = function (okTab, callback) { - sessionStorage.removeItem("tabMenu"); - sessionStorage.removeItem("notice"); - sessionStorage.removeItem("lay-id"); - if (typeof callback == "function") { - callback(okTab); - } + sessionStorage.removeItem("tabMenu"); + sessionStorage.removeItem("notice"); + sessionStorage.removeItem("lay-id"); + if (typeof callback == "function") { + callback(okTab); + } }; /**存储打开的tabMenu**/ function saveTabMenuFun($) { - let tabTitle = $("
" + $("#tabTitle").html() + "
"); - tabTitle.find("i.layui-tab-close").remove(); - let tabMenu = JSON.stringify({ - tabTitle: tabTitle.html(), - tabContent: $("#tabContent").html() - }); - sessionStorage.setItem('tabMenu', tabMenu); + if(config && config.menuArrow) { + let tabTitle = $("
" + $("#tabTitle").html() + "
"); + tabTitle.find("i.layui-tab-close").remove(); + let tabMenu = JSON.stringify({ + tabTitle: tabTitle.html(), + tabContent: $("#tabContent").html() + }); + sessionStorage.setItem('tabMenu', tabMenu); + } } -layui.define(["element", "jquery"], function (exports) { - var layui = parent.layui || layui; - $ = layui.jquery; - var element = layui.element, - layer = layui.layer; - okTab = function () { - this.tabConfig = { - openTabNum: 30, //最大可打开窗口数量默认30 - tabFilter: "ok-tab", //添加窗口的filter - url: "", //获取菜单的接口地址 - data: [],//菜单数据列表(如果传入了url则data无效) - parseData: ''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值) - } - }; - /** - * 导航初始化的操作(只执行一次) - * @param option 配置tabConfig参数 - * @returns {okTab} - */ - okTab.prototype.init = function (option) { - var _this = this; //这个this就是代表okTab（因为prototype的原因） - $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html - this.tabDelete(); //关闭导航页的操作 - this.tab(); //tab导航切换时的操作 - return _this; - }; +layui.define(["element", "jquery", "okUtils"], function (exports) { + var layui = parent.layui || layui; + var okUtils = layui.okUtils; + $ = layui.jquery; + var element = layui.element, + layer = layui.layer; + config = okUtils.local("okConfig") || okConfig || {}; + console.log(config); + if(!config.tabMemory){ + okUtils.session("tabMenu", null); + okUtils.session("lay-id", null); + } - //生成左侧菜单 - var temp = ""; - okTab.prototype.navBar = function (strData) { - var data; - if (typeof (strData) == "string") { - var data = JSON.parse(strData); //有可能是字符串，转换一下 - } else { - data = strData || []; - } - var ulItem = ''; - for (var i = 0; i < data.length; i++) { - temp = ""; - if (data[i].isCheck) { - ulItem += '
  • '; - } else if (data[i].spread) { - ulItem += '
  • '; - } else { - ulItem += '
  • '; - } - createMenu(data[i], (i + 1).toString()); - ulItem += temp; - ulItem += '
    • '; - } - return ulItem; - }; + okTab = function () { + this.tabConfig = { + openTabNum: 30, //最大可打开窗口数量默认30 + tabFilter: "ok-tab", //添加窗口的filter + url: "", //获取菜单的接口地址 + data: [],//菜单数据列表(如果传入了url则data无效) + parseData: ''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值) + } + }; + /** + * 导航初始化的操作(只执行一次) + * @param option 配置tabConfig参数 + * @returns {okTab} + */ + okTab.prototype.init = function (option) { + var _this = this; //这个this就是代表okTab（因为prototype的原因） + $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html + this.tabDelete(); //关闭导航页的操作 + this.tab(); //tab导航切换时的操作 + return _this; + }; - /** - * 递归生成菜单 - * @param data 数据 - * @param tabID 设置lay-id使用 - */ - function createMenu(data, tabID) { - if (data.children != undefined && data.children.length > 0) { - temp += ''; - if (data.icon != undefined && data.icon != '') { - if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { - if (data.icon.indexOf("&#") >= 0) { - temp += ('{0}').format(data.icon); - } else { - temp += ('').format(data.icon); - } - } else if (data.fontFamily) { - if (data.icon.indexOf("&#") >= 0) { - temp += ('{1}').format(data.fontFamily, data.icon); - } else { - temp += ('').format(data.fontFamily, data.icon); - } - } - } - temp += '' + data.title + ''; - temp += ''; - temp += ''; - temp += '
    '; - for (var i = 0; i < data.children.length; i++) { - temp += '
    '; - var lay_id = tabID + "-" + (i + 1); - createMenu(data.children[i], lay_id); - temp += '
    '; - } - temp += "
    "; - } else { - var isClose = data.isClose === false ? "false" : "true"; - if (data.target) { - temp += ('').format(tabID, data.href, data.target, isClose); - } else { - temp += ('').format(tabID, data.href, isClose); - } - if (data.icon != undefined && data.icon != '') { - if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { - if (data.icon.indexOf("&#") >= 0) { - temp += ('{0}').format(data.icon); - } else { - temp += ('').format(data.icon); - } - } else if (data.fontFamily) { - if (data.icon.indexOf("&#") >= 0) { - temp += ('{1}').format(data.fontFamily, data.icon); - } else { - temp += ('').format(data.fontFamily, data.icon); - } - } - } - temp += ('{0}').format(data.title); + //生成左侧菜单 + var temp = ""; + okTab.prototype.navBar = function (strData) { + var data; + if (typeof (strData) == "string") { + var data = JSON.parse(strData); //有可能是字符串，转换一下 + } else { + data = strData || []; + } + var ulItem = ''; + for (var i = 0; i < data.length; i++) { + temp = ""; + if (data[i].isCheck) { + ulItem += '
  • '; + } else if (data[i].spread) { + ulItem += '
  • '; + } else { + ulItem += '
  • '; + } + createMenu(data[i], (i + 1).toString()); + ulItem += temp; + ulItem += '
    • '; + } + return ulItem; + }; - } - } + /** + * 递归生成菜单 + * @param data 数据 + * @param tabID 设置lay-id使用 + */ + function createMenu(data, tabID) { + if (data.children != undefined && data.children.length > 0) { + temp += ''; + if (data.icon != undefined && data.icon != '') { + if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { + if (data.icon.indexOf("&#") >= 0) { + temp += ('{0}').format(data.icon); + } else { + temp += ('').format(data.icon); + } + } else if (data.fontFamily) { + if (data.icon.indexOf("&#") >= 0) { + temp += ('{1}').format(data.fontFamily, data.icon); + } else { + temp += ('').format(data.fontFamily, data.icon); + } + } + } + temp += '' + data.title + ''; + temp += ''; + temp += ''; + temp += '
    '; + for (var i = 0; i < data.children.length; i++) { + temp += '
    '; + var lay_id = tabID + "-" + (i + 1); + createMenu(data.children[i], lay_id); + temp += '
    '; + } + temp += "
    "; + } else { + var isClose = data.isClose === false ? "false" : "true"; + if (data.target) { + temp += ('').format(tabID, data.href, data.target, isClose); + } else { + temp += ('').format(tabID, data.href, isClose); + } + if (data.icon != undefined && data.icon != '') { + if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { + if (data.icon.indexOf("&#") >= 0) { + temp += ('{0}').format(data.icon); + } else { + temp += ('').format(data.icon); + } + } else if (data.fontFamily) { + if (data.icon.indexOf("&#") >= 0) { + temp += ('{1}').format(data.fontFamily, data.icon); + } else { + temp += ('').format(data.fontFamily, data.icon); + } + } + } + temp += ('{0}').format(data.title); - /** - * 定位tab位置 - * @param superEle 父级元素 - * @param ele 当前tab - */ - okTab.prototype.positionTab = function (contEle, ele) { + } + } - var superEle = $(".ok-tab");//父级元素 - contEle = contEle ? $(contEle) : $("#tabTitle");//(contEle);//tab内容存放的父元素 - ele = ele ? $(ele) : $("#tabTitle li.layui-this");//当前的tab + /** + * 定位tab位置 + * @param superEle 父级元素 + * @param ele 当前tab + */ + okTab.prototype.positionTab = function (contEle, ele) { - var menuSet = $("#navBar a[lay-id]");//获取所有菜单集合 - var thatLayId = ele.attr('lay-id'); + var superEle = $(".ok-tab");//父级元素 + contEle = contEle ? $(contEle) : $("#tabTitle");//(contEle);//tab内容存放的父元素 + ele = ele ? $(ele) : $("#tabTitle li.layui-this");//当前的tab - var contWidth = contEle.width(),//父级元素宽度 - superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度 - subWidth = ele.outerWidth(),//当前元素宽度 - elePrevAll = ele.prevAll(),//左边的所有同级元素 - leftWidth = 0,//左边距离 - postLeft = Math.abs(contEle.position().left);//当前移动的位置 - var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度 + var menuSet = $("#navBar a[lay-id]");//获取所有菜单集合 + var thatLayId = ele.attr('lay-id'); - /*console.log("maxMoveWidth：" + maxMoveWidth); - console.log("superWidth：" + superWidth); - console.log("contWidth：" + contWidth);*/ - // console.log(contEle); - for (let i = 0; i < elePrevAll.length; i++) { - leftWidth += $(elePrevAll[i]).outerWidth() * 1; - } - if (contWidth > superWidth) { - /** - * 移动tab栏的位置 - */ - var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置） - var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半 - var tempMove = 0; - if (halfPlace < showPost) {//从右往左移动 - tempMove = leftWidth - subWidth;//预留一部分距离 - if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度 - tempMove = maxMoveWidth; - } - contEle.animate({ - left: -tempMove - }, 50); - } else {//从左往右移动 - tempMove = leftWidth - halfPlace;//预留一部分距离 - if (tempMove < 0) { - tempMove = 0; - } - contEle.animate({ - left: -tempMove - }, 50); - } - } else { - contEle.animate({ - left: 0 - }, 50); - } + var contWidth = contEle.width(),//父级元素宽度 + superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度 + subWidth = ele.outerWidth(),//当前元素宽度 + elePrevAll = ele.prevAll(),//左边的所有同级元素 + leftWidth = 0,//左边距离 + postLeft = Math.abs(contEle.position().left);//当前移动的位置 + var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度 - /** - * 左侧菜单的样式和多级菜单的展开 - */ - $("#navBar").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单 - $("#navBar > li dl.layui-nav-child").removeAttr('style'); - for (let i = 0; i < menuSet.length; i++) { - if ($(menuSet[i]).attr('lay-id') == thatLayId) { - $(menuSet[i]).parents("dd").addClass("layui-nav-itemed"); - $(menuSet[i]).parents("li").addClass("layui-nav-itemed"); - $(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this"); - break; - } - } - }; + /*console.log("maxMoveWidth：" + maxMoveWidth); + console.log("superWidth：" + superWidth); + console.log("contWidth：" + contWidth);*/ + // console.log(contEle); + for (let i = 0; i < elePrevAll.length; i++) { + leftWidth += $(elePrevAll[i]).outerWidth() * 1; + } + if (contWidth > superWidth) { + /** + * 移动tab栏的位置 + */ + var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置） + var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半 + var tempMove = 0; + if (halfPlace < showPost) {//从右往左移动 + tempMove = leftWidth - subWidth;//预留一部分距离 + if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度 + tempMove = maxMoveWidth; + } + contEle.animate({ + left: -tempMove + }, 50); + } else {//从左往右移动 + tempMove = leftWidth - halfPlace;//预留一部分距离 + if (tempMove < 0) { + tempMove = 0; + } + contEle.animate({ + left: -tempMove + }, 50); + } + } else { + contEle.animate({ + left: 0 + }, 50); + } - // 点击导航页的操作 - okTab.prototype.tab = function (e) { - var that = this; - var filter = this.tabConfig.tabFilter; - // "hello {0}".format("world"); - //`tab(${filter})` - element.on("tab({0})".format(filter), function (data) { - var index = data.index;//点击的某个tab索引 - sessionStorage.setItem('lay-id', this.getAttribute('lay-id')); - var elSuper = $(".ok-tab"),//视窗元素 - elMove = $(".ok-tab-title"),//移动的元素 - elTabs = $(".ok-tab-title li"),//所有已存在的tab集合 - thatElem = $(elTabs[index]);//当前元素 - saveTabMenuFun($); - that.positionTab(elMove, thatElem); - }); - }; + /** + * 左侧菜单的样式和多级菜单的展开 + */ + $("#navBar").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单 + $("#navBar > li dl.layui-nav-child").removeAttr('style'); + for (let i = 0; i < menuSet.length; i++) { + if ($(menuSet[i]).attr('lay-id') == thatLayId) { + $(menuSet[i]).parents("dd").addClass("layui-nav-itemed"); + $(menuSet[i]).parents("li").addClass("layui-nav-itemed"); + $(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this"); + break; + } + } + }; - //删除tab页的操作（此处为点击关闭按钮的操作） - okTab.prototype.tabDelete = function () { - var that = this; - var filter = this.tabConfig.tabFilter; - element.on("tabDelete({0})".format(filter), function (data) { - /**保存展开的tab**/ - saveTabMenuFun($); - }); - }; + // 点击导航页的操作 + okTab.prototype.tab = function (e) { + var that = this; + var filter = this.tabConfig.tabFilter; + // "hello {0}".format("world"); + //`tab(${filter})` + element.on("tab({0})".format(filter), function (data) { + var index = data.index;//点击的某个tab索引 + config = okUtils.local("okConfig") || okConfig || {}; + sessionStorage.setItem('lay-id', this.getAttribute('lay-id')); + var elSuper = $(".ok-tab"),//视窗元素 + elMove = $(".ok-tab-title"),//移动的元素 + elTabs = $(".ok-tab-title li"),//所有已存在的tab集合 + thatElem = $(elTabs[index]);//当前元素 + saveTabMenuFun($); - //删除缓存中的tab - okTab.prototype.removeTabStorage = function (callback) { - removeTabMenu(this, callback); - }; + if(config.tabRefresh){ /**切换刷新*/ + $(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true); + } + that.positionTab(elMove, thatElem); + }); + }; - //添加tab页 - okTab.prototype.tabAdd = function (_thisa) { - var that = this; - var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ） + //删除tab页的操作（此处为点击关闭按钮的操作） + okTab.prototype.tabDelete = function () { + var that = this; + var filter = this.tabConfig.tabFilter; + element.on("tabDelete({0})".format(filter), function (data) { + /**保存展开的tab**/ + saveTabMenuFun($); + }); + }; - var openTabNum = that.tabConfig.openTabNum; - var tabFilter = that.tabConfig.tabFilter; - var url = _this.attr("data-url");//选项卡的页面路径 - var tabId = _this.attr("lay-id");//选项卡ID - var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量 - var iframes = $(".ok-tab-content iframe"); - var isClose = _this.attr('is-close') || "true"; + //删除缓存中的tab + okTab.prototype.removeTabStorage = function (callback) { + removeTabMenu(this, callback); + }; - _this.prepend(""); + //添加tab页 + okTab.prototype.tabAdd = function (_thisa) { + var that = this; + var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ） - if (_this.children("i").length < 1) { - _this.prepend(""); - } - if (_this.attr("target") == "_blank") { - window.location.href = _this.attr("data-url"); - } else if (url != undefined) { - var html = _this.html(); - // 去重复选项卡 - /** - * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增） - */ - for (var i = 0; i < thatTabNum; i++) { - if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) { - var iframeParam = (iframes[i].src).split("?")[1]; - var urlParam = url.split("?")[1]; - if (urlParam == iframeParam) { - element.tabChange(tabFilter, tabId); - } else { - //参数不一样的时候刷新并且更换参数 - iframes[i].contentWindow.location.reload(true); - iframes[i].src = url; - element.tabChange(tabFilter, tabId); - } - if (event) { - event.stopPropagation(); - } - return; - } - } + var openTabNum = that.tabConfig.openTabNum; + var tabFilter = that.tabConfig.tabFilter; + var url = _this.attr("data-url");//选项卡的页面路径 + var tabId = _this.attr("lay-id");//选项卡ID + var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量 + var iframes = $(".ok-tab-content iframe"); + var isClose = _this.attr('is-close') || "true"; - if (thatTabNum >= openTabNum) { - layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！'); - return; - } - var contentIframe = ("").format(url, tabId); - element.tabAdd(tabFilter, { - title: html, - content: contentIframe, - id: tabId - }); - // 切换选项卡 - element.tabChange(tabFilter, tabId); - this.navMove("rightmax"); - } - }; + _this.prepend(""); - //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作) - okTab.prototype.render = function (callback) { - var _this = this;//data - var _data = _this.tabConfig.data; - if (_this.tabConfig.url) { - $.get(_this.tabConfig.url, function (res) { - _data = res; - if (typeof _this.tabConfig.parseData == "function") { - _data = _this.tabConfig.parseData(res); - } - $("#navBar").html(_this.navBar(_data)); - element.render('nav'); - $(window).resize(function () { - $("#navBar").height($(window).height() - 245); - }); - if (typeof callback == "function") { - callback(); - } - var lay_id = sessionStorage.getItem('lay-id'); - element.tabChange(_this.tabConfig.tabFilter, lay_id); - }); - /**打开缓存中的tab**/ - OpenTabMenuFun($, function () { - // var filter = _this.tabConfig.tabFilter; - element.render("tab"); - }); - } else if ($.type(_data) == 'array') { - if (_data.length < 1) { - alert("菜单集合中无任何数据"); - } - var _data = _this.tabConfig.data; - $("#navBar").html(_this.navBar(_data)); - element.render('nav'); - $(window).resize(function () { - $("#navBar").height($(window).height() - 245); - }); - if (typeof callback == "function") { - callback(); - } - } else { - alert("你的菜单配置有误请查看菜单配置说明"); - } - }; + if (_this.children("i").length < 1) { + _this.prepend(""); + } + if (_this.attr("target") == "_blank") { + window.location.href = _this.attr("data-url"); + } else if (url != undefined) { + var html = _this.html(); + // 去重复选项卡 + /** + * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增） + */ + for (var i = 0; i < thatTabNum; i++) { + if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) { + var iframeParam = (iframes[i].src).split("?")[1]; + var urlParam = url.split("?")[1]; + if (urlParam == iframeParam) { + element.tabChange(tabFilter, tabId); + } else { + //参数不一样的时候刷新并且更换参数 + iframes[i].contentWindow.location.reload(true); + iframes[i].src = url; + element.tabChange(tabFilter, tabId); + } + if (event) { + event.stopPropagation(); + } + return; + } + } - //刷新当前tab页 - okTab.prototype.refresh = function (_this, callback) { - if (!($(_this).hasClass("refreshThis"))) { - $(_this).addClass("refreshThis"); - $(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true); - if(typeof callback == "function"){ - callback(okTab); - } - setTimeout(function () { - $(_this).removeClass("refreshThis"); - }, 2000) - } else { - layer.msg("客官请不要频繁点击哦！我会反应不过来的"); - } - }; + if (thatTabNum >= openTabNum) { + layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！'); + return; + } + var contentIframe = ("").format(url, tabId); + element.tabAdd(tabFilter, { + title: html, + content: contentIframe, + id: tabId + }); + // 切换选项卡 + element.tabChange(tabFilter, tabId); + this.navMove("rightmax"); + } + }; - /** - * 关闭tab标签页操作 - * @param num 默认为1 - * 1：代表关闭当前标签页 - * 2：代表关闭其他标签页 - * 3：代表关闭所有标签页 - */ - okTab.prototype.tabClose = function (num) { - num = num || 1; - num = num * 1;//强制转换成数字 - var that = this; - let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航) - thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航) + //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作) + okTab.prototype.render = function (callback) { + var _this = this;//data + var _data = _this.tabConfig.data; + if (_this.tabConfig.url) { + $.get(_this.tabConfig.url, function (res) { + _data = res; + if (typeof _this.tabConfig.parseData == "function") { + _data = _this.tabConfig.parseData(res); + } + $("#navBar").html(_this.navBar(_data)); + element.render('nav'); + $(window).resize(function () { + $("#navBar").height($(window).height() - 245); + }); + if (typeof callback == "function") { + callback(); + } + var lay_id = sessionStorage.getItem('lay-id'); + element.tabChange(_this.tabConfig.tabFilter, lay_id); + }); + /**打开缓存中的tab**/ + OpenTabMenuFun($, function () { + // var filter = _this.tabConfig.tabFilter; + element.render("tab"); + }); + } else if ($.type(_data) == 'array') { + if (_data.length < 1) { + alert("菜单集合中无任何数据"); + } + var _data = _this.tabConfig.data; + $("#navBar").html(_this.navBar(_data)); + element.render('nav'); + $(window).resize(function () { + $("#navBar").height($(window).height() - 245); + }); + if (typeof callback == "function") { + callback(); + } + } else { + alert("你的菜单配置有误请查看菜单配置说明"); + } + }; - var filter = that.tabConfig.tabFilter; - if (thatLayID.length < 1 && num == 1) { - layer.msg("您不能关闭当前页哦 (๑╹◡╹)ﾉ"); - return; - } else if (openTabs.length < 1) { - layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ"); - return; - } - switch (num) { - case 1: - element.tabDelete(filter, thatLayID); - break; - case 2: - if (openTabs.length > 0) { - openTabs.each(function (i, j) { - if ($(j).attr("lay-id") != thatLayID) { - element.tabDelete(filter, $(j).attr("lay-id")); - } - }); - this.navMove('leftmax'); - } else { - layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ"); - return; - } - break; - case 3: - openTabs.each(function (i, j) { - element.tabDelete(filter, $(j).attr("lay-id")); - }); - this.navMove('leftmax'); - break; - } - element.render("tab", filter); - /**保存展开的tab**/ - saveTabMenuFun($); - }; + //刷新当前tab页 + okTab.prototype.refresh = function (_this, callback) { + if (!($(_this).hasClass("refreshThis"))) { + $(_this).addClass("refreshThis"); + $(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true); + if (typeof callback == "function") { + callback(okTab); + } + setTimeout(function () { + $(_this).removeClass("refreshThis"); + }, 2000) + } else { + layer.msg("客官请不要频繁点击哦！我会反应不过来的"); + } + }; - /** - * 移动标签导航 - * @param moveId - * 为left:往左边移动 - * 为right:往右边移动 - * 为rightmax:跑到最右边 - * 为leftmax:跑到最左边 - */ - okTab.prototype.navMove = function (moveId, that) { - var superEle = $(".ok-tab"),//父级元素 - contEle = $(".ok-tab-title"),//tab内容存放的父元素 - superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度 - contWidth = parseInt(contEle.width()),//移动元素的总宽度 - elTabs = $(".ok-tab-title li"),//所有已存在的tab集合 - postLeft = contEle.position().left;//当前移动的位置 + /** + * 关闭tab标签页操作 + * @param num 默认为1 + * 1：代表关闭当前标签页 + * 2：代表关闭其他标签页 + * 3：代表关闭所有标签页 + */ + okTab.prototype.tabClose = function (num) { + num = num || 1; + num = num * 1;//强制转换成数字 + var that = this; + let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航) + thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航) - /*elTabs.each(function (i, j) { - moveWidth += $(j).outerWidth() * 1; - });*/ + var filter = that.tabConfig.tabFilter; + if (thatLayID.length < 1 && num == 1) { + layer.msg("您不能关闭当前页哦 (๑╹◡╹)ﾉ"); + return; + } else if (openTabs.length < 1) { + layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ"); + return; + } + switch (num) { + case 1: + element.tabDelete(filter, thatLayID); + break; + case 2: + if (openTabs.length > 0) { + openTabs.each(function (i, j) { + if ($(j).attr("lay-id") != thatLayID) { + element.tabDelete(filter, $(j).attr("lay-id")); + } + }); + this.navMove('leftmax'); + } else { + layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ"); + return; + } + break; + case 3: + openTabs.each(function (i, j) { + element.tabDelete(filter, $(j).attr("lay-id")); + }); + this.navMove('leftmax'); + break; + } + element.render("tab", filter); + /**保存展开的tab**/ + saveTabMenuFun($); + }; - var movePost = moveId.toLowerCase().indexOf("left") < 0 ? -1 : 1;//移动方向 - var step = parseInt((superWidth * 0.25 < 20 ? 20 : superWidth * 0.25));//移动步长 - var moveLeft = postLeft + step * movePost; - var moveWidth = contWidth - superWidth; - if (contWidth > superWidth) { - switch (moveId) { - case 'left': - if (moveLeft >= step) { - layer.tips('已到最左边啦', that, { - tips: [1, '#000'], - time: 2000 - }); - moveLeft = 0; - } - break; - case 'leftmax': - if (moveLeft >= step) { - layer.tips('已到最左边啦', that, { - tips: [1, '#000'], - time: 2000 - }); - moveLeft = 0; - } - break; - case 'right': - if (superWidth + Math.abs(moveLeft) >= contWidth + step) { - layer.tips('已到最右边啦', that, { - tips: [1, '#000'], - time: 2000 - }); - moveLeft = -moveWidth; - } - if (superWidth + Math.abs(moveLeft) >= contWidth) { - moveLeft = -moveWidth; - } - break; - case 'rightmax': - if (superWidth + Math.abs(postLeft) >= contWidth + step) { - layer.tips('已到最右边啦', that, { - tips: [1, '#000'], - time: 2000 - }); - } - moveLeft = -moveWidth; - } - if (moveLeft > 0) { - moveLeft = 0; - } - contEle.animate({ - left: moveLeft - }, 50); - } else { - contEle.animate({ - left: 0 - }, 50); - } - }; + /** + * 移动标签导航 + * @param moveId + * 为left:往左边移动 + * 为right:往右边移动 + * 为rightmax:跑到最右边 + * 为leftmax:跑到最左边 + */ + okTab.prototype.navMove = function (moveId, that) { + var superEle = $(".ok-tab"),//父级元素 + contEle = $(".ok-tab-title"),//tab内容存放的父元素 + superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度 + contWidth = parseInt(contEle.width()),//移动元素的总宽度 + elTabs = $(".ok-tab-title li"),//所有已存在的tab集合 + postLeft = contEle.position().left;//当前移动的位置 - exports("okTab", function (option) { - if (parent.objOkTab) { - return parent.objOkTab; - } else { - return new okTab().init(option); - } - }); + /*elTabs.each(function (i, j) { + moveWidth += $(j).outerWidth() * 1; + });*/ + + var movePost = moveId.toLowerCase().indexOf("left") < 0 ? -1 : 1;//移动方向 + var step = parseInt((superWidth * 0.25 < 20 ? 20 : superWidth * 0.25));//移动步长 + var moveLeft = postLeft + step * movePost; + var moveWidth = contWidth - superWidth; + if (contWidth > superWidth) { + switch (moveId) { + case 'left': + if (moveLeft >= step) { + layer.tips('已到最左边啦', that, { + tips: [1, '#000'], + time: 2000 + }); + moveLeft = 0; + } + break; + case 'leftmax': + if (moveLeft >= step) { + layer.tips('已到最左边啦', that, { + tips: [1, '#000'], + time: 2000 + }); + moveLeft = 0; + } + break; + case 'right': + if (superWidth + Math.abs(moveLeft) >= contWidth + step) { + layer.tips('已到最右边啦', that, { + tips: [1, '#000'], + time: 2000 + }); + moveLeft = -moveWidth; + } + if (superWidth + Math.abs(moveLeft) >= contWidth) { + moveLeft = -moveWidth; + } + break; + case 'rightmax': + if (superWidth + Math.abs(postLeft) >= contWidth + step) { + layer.tips('已到最右边啦', that, { + tips: [1, '#000'], + time: 2000 + }); + } + moveLeft = -moveWidth; + } + if (moveLeft > 0) { + moveLeft = 0; + } + contEle.animate({ + left: moveLeft + }, 50); + } else { + contEle.animate({ + left: 0 + }, 50); + } + }; + + exports("okTab", function (option) { + if (parent.objOkTab) { + return parent.objOkTab; + } else { + return new okTab().init(option); + } + }); }); diff --git a/lib/layui/lay/okmodules/okUtils.js b/lib/layui/lay/okmodules/okUtils.js index 7d02079..17ba314 100644 --- a/lib/layui/lay/okmodules/okUtils.js +++ b/lib/layui/lay/okmodules/okUtils.js @@ -1,163 +1,209 @@ "use strict"; layui.define(["layer"], function (exprots) { - var $ = layui.jquery; - var okUtils = { - /** - * 是否前后端分离 - */ - isFrontendBackendSeparate: true, - /** - * 服务器地址 - */ - baseUrl: "http://rap2api.taobao.org/app/mock/233041", - /** - * 获取body的总宽度 - */ - getBodyWidth: function () { - return document.body.scrollWidth; - }, - /** - * 主要用于对ECharts视图自动适应宽度 - */ - echartsResize: function (element) { - var element = element || []; - window.addEventListener("resize", function () { - var isResize = localStorage.getItem("isResize"); - // if (isResize == "false") { - for (let i = 0; i < element.length; i++) { - element[i].resize(); - } - // } - }); - }, - /** - * ajax()函数二次封装 - * @param url - * @param type - * @param params - * @param load - * @returns {*|never|{always, promise, state, then}} - */ - ajax: function (url, type, params, load) { - var deferred = $.Deferred(); - var loadIndex; - $.ajax({ - url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url, - type: type || "get", - data: params || {}, - dataType: "json", - beforeSend: function () { - if (load) { - loadIndex = layer.load(0, {shade: 0.3}); - } - }, - success: function (data) { - if (data.code == 0) { - // 业务正常 - deferred.resolve(data) - } else { - // 业务异常 - layer.msg(data.msg, {icon: 7, time: 2000}); - deferred.reject("okUtils.ajax warn: " + data.msg); - } - }, - complete: function () { - if (load) { - layer.close(loadIndex); - } - }, - error: function () { - layer.close(loadIndex); - layer.msg("服务器错误", {icon: 2, time: 2000}); - deferred.reject("okUtils.ajax error: 服务器错误"); - } - }); - return deferred.promise(); - }, - /** - * 主要用于针对表格批量操作操作之前的检查 - * @param table - * @returns {string} - */ - tableBatchCheck: function (table) { - var checkStatus = table.checkStatus("tableId"); - var rows = checkStatus.data.length; - if (rows > 0) { - var idsStr = ""; - for (var i = 0; i < checkStatus.data.length; i++) { - idsStr += checkStatus.data[i].id + ","; - } - return idsStr; - } else { - layer.msg("未选择有效数据", {offset: "t", anim: 6}); + var $ = layui.jquery; + var okUtils = { + /** + * 是否前后端分离 + */ + isFrontendBackendSeparate: true, + /** + * 服务器地址 + */ + baseUrl: "http://rap2api.taobao.org/app/mock/233041", + /** + * 获取body的总宽度 + */ + getBodyWidth: function () { + return document.body.scrollWidth; + }, + /** + * 主要用于对ECharts视图自动适应宽度 + */ + echartsResize: function (element) { + var element = element || []; + window.addEventListener("resize", function () { + var isResize = localStorage.getItem("isResize"); + // if (isResize == "false") { + for (let i = 0; i < element.length; i++) { + element[i].resize(); } - }, - /** - * 在表格页面操作成功后弹窗提示 - * @param content - */ - tableSuccessMsg: function (content) { - layer.msg(content, {icon: 1, time: 1000}, function () { - // 刷新当前页table数据 - $(".layui-laypage-btn")[0].click(); - }); - }, - /** - * 获取父窗体的okTab - * @returns {string} - */ - getOkTab: function () { - return parent.objOkTab; - }, - /** - * 格式化当前日期 - * @param date - * @param fmt - * @returns {void | string} - */ - dateFormat: function (date, fmt) { - var o = { - "M+": date.getMonth() + 1, - "d+": date.getDate(), - "h+": date.getHours(), - "m+": date.getMinutes(), - "s+": date.getSeconds(), - "q+": Math.floor((date.getMonth() + 3) / 3), - "S": date.getMilliseconds() - }; - if (/(y+)/.test(fmt)) - fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); - for (var k in o) - if (new RegExp("(" + k + ")").test(fmt)) - fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); - return fmt; - }, - number: { - /** - * 判断是否为一个正常的数字 - * @param num - */ - isNumber: function (num) { - if (num && !isNaN(num)) { - return true; - } - return false; + // } + }); + }, + /** + * ajax()函数二次封装 + * @param url + * @param type + * @param params + * @param load + * @returns {*|never|{always, promise, state, then}} + */ + ajax: function (url, type, params, load) { + var deferred = $.Deferred(); + var loadIndex; + $.ajax({ + url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url, + type: type || "get", + data: params || {}, + dataType: "json", + beforeSend: function () { + if (load) { + loadIndex = layer.load(0, {shade: 0.3}); + } }, - /** - * 判断一个数字是否包括在某个范围 - * @param num - * @param begin - * @param end - */ - isNumberWith: function (num, begin, end) { - if (this.isNumber(num)) { - if (num >= begin && num <= end) { - return true; - } - return false; - } + success: function (data) { + if (data.code == 0) { + // 业务正常 + deferred.resolve(data) + } else { + // 业务异常 + layer.msg(data.msg, {icon: 7, time: 2000}); + deferred.reject("okUtils.ajax warn: " + data.msg); + } }, - } - }; - exprots("okUtils", okUtils); + complete: function () { + if (load) { + layer.close(loadIndex); + } + }, + error: function () { + layer.close(loadIndex); + layer.msg("服务器错误", {icon: 2, time: 2000}); + deferred.reject("okUtils.ajax error: 服务器错误"); + } + }); + return deferred.promise(); + }, + /** + * 主要用于针对表格批量操作操作之前的检查 + * @param table + * @returns {string} + */ + tableBatchCheck: function (table) { + var checkStatus = table.checkStatus("tableId"); + var rows = checkStatus.data.length; + if (rows > 0) { + var idsStr = ""; + for (var i = 0; i < checkStatus.data.length; i++) { + idsStr += checkStatus.data[i].id + ","; + } + return idsStr; + } else { + layer.msg("未选择有效数据", {offset: "t", anim: 6}); + } + }, + /** + * 在表格页面操作成功后弹窗提示 + * @param content + */ + tableSuccessMsg: function (content) { + layer.msg(content, {icon: 1, time: 1000}, function () { + // 刷新当前页table数据 + $(".layui-laypage-btn")[0].click(); + }); + }, + /** + * sessionStorage 二次封装 + */ + session: function (name, value) { + if (value) { /**设置*/ + if (typeof value == "object") { + sessionStorage.setItem(name, JSON.stringify(value)); + } else { + sessionStorage.setItem(name, value); + } + } else if (null !== value) { + /**获取*/ + let val = sessionStorage.getItem(name); + try { + val = JSON.parse(val); + return val; + } catch (err) { + return val; + } + } else { /**清除*/ + return sessionStorage.removeItem(name); + } + }, + /** + * localStorage 二次封装 + */ + local: function (name, value) { + if (value) { /**设置*/ + if (typeof value == "object") { + localStorage.setItem(name, JSON.stringify(value)); + } else { + localStorage.setItem(name, value); + } + } else if (null !== value) { + /**获取*/ + let val = localStorage.getItem(name); + try { + val = JSON.parse(val); + return val; + } catch (err) { + return val; + } + } else { /**清除*/ + return localStorage.removeItem(name); + } + }, + /** + * 获取父窗体的okTab + * @returns {string} + */ + getOkTab: function () { + return parent.objOkTab; + }, + /** + * 格式化当前日期 + * @param date + * @param fmt + * @returns {void | string} + */ + dateFormat: function (date, fmt) { + var o = { + "M+": date.getMonth() + 1, + "d+": date.getDate(), + "h+": date.getHours(), + "m+": date.getMinutes(), + "s+": date.getSeconds(), + "q+": Math.floor((date.getMonth() + 3) / 3), + "S": date.getMilliseconds() + }; + if (/(y+)/.test(fmt)) + fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(fmt)) + fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); + return fmt; + }, + number: { + /** + * 判断是否为一个正常的数字 + * @param num + */ + isNumber: function (num) { + if (num && !isNaN(num)) { + return true; + } + return false; + }, + /** + * 判断一个数字是否包括在某个范围 + * @param num + * @param begin + * @param end + */ + isNumberWith: function (num, begin, end) { + if (this.isNumber(num)) { + if (num >= begin && num <= end) { + return true; + } + return false; + } + }, + } + }; + exprots("okUtils", okUtils); }); diff --git a/pages/system/setting.html b/pages/system/setting.html index 67d1f1d..d4783f3 100644 --- a/pages/system/setting.html +++ b/pages/system/setting.html @@ -3,18 +3,23 @@ 系统设置 - + + + @@ -22,11 +27,33 @@
    +
    + +
    + + + +
    +
    - - + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    @@ -35,20 +62,60 @@ \ No newline at end of file