layui.define(['layer'],function(exports){
|
/**
|
* 首页的菜单
|
* 仅支持三级菜单，如果还有更深的层级，不建议使用，可以修改此源码
|
* 如果要使用无限级别的菜单，请使用layui的2.2.6以上的版本 @2018-05-03
|
* @author weidy@2018-2-26
|
*/
|
var menu = {
|
menuStore: null,//带结构的菜单数据
|
menuLeafFullPath: {},//每一个叶子节点的完整路径
|
allMenuStore: {},//平铺的菜单数据
|
menuFavStore: [],
|
menuUlId: 'portal_menu_tree',//菜单显示的主键
|
favUlId: 'portal_headmenu',
|
moduleKey: 'vciWebMenu',
|
backPath: configData.compatibility ? path : configData.frameworkPath,
|
menuConfig: {//这里的配置都是默认的，在使用的时候可以覆盖
|
menuWidth: '100%',
|
menuHeight: '38px',
|
menuIconType: "iconFont",//菜单图标的获取方式，支持iconSrc.iconFont,id方式，iconSrc表示在平台中的菜单desc里配置，id表示使用菜单唯一编号
|
defaultMenuIconPath: 'style/images/menuicons',
|
defaultMenuIcon1: 'layui-icon-app',//默认菜单图标
|
defaultMenuIcon2: 'layui-icon-set-sm',
|
defaultMenuIcon3: 'layui-icon-list',
|
defaultMenuIcon4: 'layui-icon-cols',
|
menuUrl: "smFunctionController/treeMyMenu",//菜单的获取地址
|
favUrl: "favFunctionController/listFavFunction"//获取收藏的地址
|
},
|
privateConfig: {//私有配置，不建议修改
|
level1IconWidth: 20,//图标大小
|
level2IconWidth: 18,
|
level3IconWidth: 16,
|
level1MarginLeft: 0,//缩进
|
level2MarginLeft: 20,
|
level3MarginLeft: 40,
|
level1Fontsize: 16,//字体大小
|
level2Fontsize: 14,
|
level3Fontsize: 12,
|
addFavUrl: "favFunctionController/addFav",
|
removeFavUrl: "favFunctionController/removeFav"
|
},
|
rootMenuId: "modelManagmentNode",
|
menuClickListener: emptyFunction,//点击回调事件
|
init: function () {
|
var me = this;
|
$webUtil.copyConfig(me);
|
var windowWidth = $('body').width()
|
/*if (windowWidth > configData.vciWebPortal.mainConfig.pageWidth1440) {
|
me.menuConfig.menuWidth = '200px'
|
} else if (windowWidth > configData.vciWebPortal.mainConfig.pageWidth1280) {
|
me.menuConfig.menuWidth = '180px'
|
} else {
|
me.menuConfig.menuWidth = '150px'
|
}*/
|
var windowHeight = $(document).height()
|
if (windowHeight > configData.vciWebPortal.mainConfig.pageHeight900) {
|
me.menuConfig.menuHeight = '38px'
|
} else if (windowHeight > configData.vciWebPortal.mainConfig.pageHeight720) {
|
me.menuConfig.menuHeight = '32px'
|
} else {
|
me.menuConfig.menuHeight = '28px';
|
me.privateConfig.level1Fontsize = 14;
|
me.privateConfig.level1IconWidth = 16;
|
me.privateConfig.level2IconWidth = 14;
|
me.privateConfig.level3IconWidth = 12
|
}
|
me.getAllMenuInfo(function () {
|
me.showMenuInfo();
|
me.sideHover()
|
});
|
},
|
getAllMenuInfo: function (callback) {//从后台获取菜单的信息
|
//获取菜单的信息
|
var me = this;
|
$webUtil.get(me.menuConfig.menuUrl, {parentOid: ''}, function (result) {
|
if (result.success) {
|
me.menuStore = result.treeData;
|
me.getIcon(me.menuStore)
|
if (callback) {
|
callback();
|
}
|
} else {
|
$webUtil.showAutoMsg(result.msg, 5000);
|
}
|
}, function (xhr, error) {
|
|
}, me.backPath, false, false);
|
},
|
getAllFavMenu: function (callback) {
|
var me = this;
|
$webUtil.get(me.menuConfig.favUrl, {}, function (result) {
|
if (result && result.success) {
|
me.menuFavStore = result.obj;
|
if (callback) {
|
callback();
|
}
|
} else {
|
$webUtil.showAutoMsg(result.msg, 5000);
|
}
|
}, function (xhr, error) {
|
|
}, me.backPath, false);
|
},
|
showMenuInfo: function () {//显示菜单信息
|
var me = this;
|
if (me.menuStore) {
|
var menuHtml = "";
|
$.each(me.menuStore, function (index) {
|
//第一级
|
var record = me.menuStore[index];
|
record.id = record.attributes['id'];
|
var isHasChild = false;
|
if (record.children && record.children.length > 0) {
|
isHasChild = true;
|
}
|
var parentPath = ["首页"];
|
var html = me.getNodeHtml(record, 1, isHasChild, parentPath);
|
me.allMenuStore[record.id] = record;
|
if (isHasChild) {
|
var allChildren = record.children;
|
var secondHtml = "";
|
$.each(allChildren, function (secondIndex) {
|
var secondRecord = allChildren[secondIndex];
|
secondRecord.id = secondRecord.attributes['id'];
|
var isHasThreeLevel = false;
|
if (secondRecord.children && secondRecord.children.length > 0) {
|
isHasThreeLevel = true;
|
}
|
var secondParentPath = ['首页', record.text];
|
var thisSecondHtml = me.getNodeHtml(secondRecord, 2, isHasThreeLevel, secondParentPath);
|
me.allMenuStore[secondRecord.id] = secondRecord;
|
if (isHasThreeLevel) {
|
var threeChildren = secondRecord.children;
|
var threeHtml = "";
|
var threeParentPath = ['首页', record.text, secondRecord.text];
|
$.each(threeChildren, function (threeIndex) {
|
var threeRecord = threeChildren[threeIndex];
|
threeRecord.id = threeRecord.attributes['id'];
|
me.allMenuStore[threeRecord.id] = threeRecord;
|
threeHtml += me.getNodeHtml(threeRecord, 3, false, threeParentPath);
|
});
|
thisSecondHtml += threeHtml;
|
thisSecondHtml += '</dl>';
|
}
|
thisSecondHtml += '</dd>';
|
secondHtml += thisSecondHtml;
|
});
|
html += secondHtml;
|
html += '</dl>';
|
}
|
html += '</li>';
|
menuHtml += html;
|
});
|
if ($webUtil.isNull(me.menuUlId)) {
|
me.menuUlId = "portal_menu_tree";
|
}
|
$("#" + me.menuUlId).css({'width': me.menuConfig.menuWidth}).html(menuHtml);
|
$("#" + me.menuUlId).parent().css({'width': me.menuConfig.menuWidth + 20}).parent().css({'width': me.menuConfig.menuWidth})
|
me.buildAllListener();
|
layui.element.render('nav');
|
}
|
},
|
getNodeHtml: function (menuObject, level, isHasChild, parentPath) {//获取每一级菜单的html
|
var me = this;
|
var html = "";
|
//处理图标路径
|
var iconSrc = me.getIconSrc(menuObject,level);
|
var levelClass = "vciWebMenuLevel" + level;
|
var levelIconWidth = me.privateConfig['level' + level + 'IconWidth'] + 'px';//在上方配置的宽度，字体大小，缩进，当然也可以在css里设置
|
var levelFontSize = me.privateConfig['level' + level + 'Fontsize'] + 'px';
|
var levelMarginLeft = me.privateConfig['level' + level + 'MarginLeft'] + 'px';
|
var styleCss = 'margin-left:' + levelMarginLeft + ';line-height: ' + me.menuConfig.menuHeight + ';height: ' + me.menuConfig.menuHeight
|
if (level == 2 || level == 3) {
|
html = '<dd class="' + levelClass + '">';
|
if (isHasChild) {
|
//说明有下级的，那本级是不能点击的，只能是展开
|
html += '<a href="javascript:;" style="' + styleCss + '">';
|
} else {
|
//说明这个是叶子节点了哦，那么需要做的是把这个叶子的整个树保存起来
|
var thisParentPath = [];
|
for (var i = 0; i < parentPath.length; i++) {
|
thisParentPath.push(parentPath[i]);
|
}
|
thisParentPath.push(menuObject.text);
|
me.menuLeafFullPath[menuObject.id] = thisParentPath;
|
html += '<a href="javascript:;" class="vciWebMenuLeaf" data-id="' + menuObject.id + '" style="' + styleCss + '">';
|
}
|
html += me.getIconHtml(iconSrc, levelIconWidth);
|
var url = menuObject.bsUrl;
|
if ($webUtil.isNull(url)) {
|
url = menuObject.url;
|
}
|
if ($webUtil.isNull(url)) {
|
url = menuObject.href;
|
}
|
html += '<span style="font-size:' + levelFontSize + ';margin-left:9px;" backUrl="' + url + '">' + menuObject.text;
|
html += '</span></a>';
|
if (isHasChild) {//说明有下级--第三级不支持再往下显示了
|
html += '<dl class="layui-nav-child" >';
|
}
|
} else {
|
html = '<li class="layui-nav-item ' + levelClass + '" style="line-height: ' + me.menuConfig.menuHeight + '">';
|
if (isHasChild) {
|
//说明有下级的，那本级是不能点击的，只能是展开
|
html += '<a href="javascript:;" style="' + styleCss + '">';
|
} else {
|
//说明这个是叶子节点了哦，那么需要做的是把这个叶子的整个树保存起来
|
var thisParentPath = [];
|
for (var i = 0; i < parentPath.length; i++) {
|
thisParentPath.push(parentPath[i]);
|
}
|
thisParentPath.push(menuObject.text);
|
me.menuLeafFullPath[menuObject.id] = thisParentPath
|
html += '<a href="javascript:;" class="vciWebMenuLeaf" data-id="' + menuObject.id + '" style="' + styleCss + '">';
|
}
|
html += me.getIconHtml(iconSrc, levelIconWidth);
|
html += '<span style="font-size:' + levelFontSize + ';margin-left:5px;">' + menuObject.text;
|
html += '</span></a>';
|
if (isHasChild) {//说明有下级
|
html += '<dl class="layui-nav-child" >';
|
}
|
}
|
return html;
|
},
|
getIconHtml: function (iconSrc, levelIconWidth) {
|
var html = "";
|
if (iconSrc.indexOf(".") > -1) {//说明是图标
|
html += '<img src="' + iconSrc + '" style="width:' + levelIconWidth + ';height:' + levelIconWidth + ';">';
|
} else {
|
html += '<i class="layui-icon ' + iconSrc + '" style="font-size: ' + levelIconWidth + '; "></i>';
|
}
|
return html;
|
},
|
getIconSrc: function (menuObject,level) {
|
var me = this;
|
var iconSrc = '';
|
var menuIconType = me.menuConfig.menuIconType;
|
if (menuObject.menuIconType) {
|
menuIconType = menuObject.menuIconType;
|
}
|
if (menuIconType == "iconSrc" && $webUtil.isNotNull(menuObject.iconCls)) {
|
iconSrc = me.menuConfig.defaultMenuIconPath + "/" + menuObject.iconCls;
|
} else if (menuIconType == "id") {
|
iconSrc = me.menuConfig.defaultMenuIconPath + "/" + menuObject.id + ".png";
|
} else if (menuIconType == "iconFont") {
|
iconSrc = menuObject.iconCls;
|
if ($webUtil.isNull(iconSrc)) {
|
iconSrc = me.menuConfig['defaultMenuIcon'+level];
|
}
|
}
|
if ($webUtil.isNull(iconSrc)) {
|
iconSrc = me.menuConfig['defaultMenuIcon'+level];
|
}
|
return iconSrc;
|
},
|
buildAllListener: function () {//设置事件
|
var me = this;
|
$(".layui-nav-item").click(function () {
|
$(this).siblings().removeClass("layui-nav-itemed")
|
});
|
$(".vciWebMenuLevel2").click(function () {
|
$(this).siblings().removeClass("layui-nav-itemed")
|
});
|
$(".vciWebMenuLeaf").click(function () {
|
//说明是点击的菜单了哦
|
//先把所有的叶子节点的选中状态全部都去除
|
var id = $(this).attr("data-id");
|
me.currentMenuId = "";
|
if ($webUtil.isNotNull(id) && me.menuClickListener) {
|
me.currentMenuId = id;
|
me.menuClickListener(id, me.getMenuObjectById(id), me.isFav(id));
|
}
|
});
|
},
|
isFav: function (id) {
|
var me = this;
|
var isFav = false;
|
for (var i = 0; i < me.menuFavStore.length; i++) {
|
if (me.menuFavStore[i].id == id) {
|
isFav = true;
|
}
|
}
|
return isFav;
|
},
|
changeFav: function (callback) {
|
var me = this;
|
if ($webUtil.isNull(me.currentMenuId)) {
|
return false;
|
}
|
var isFav = me.isFav(me.currentMenuId);
|
if (!isFav) {
|
me.addFav(me.currentMenuId, function () {
|
me.getAllFavMenu(function () {
|
if (callback) {
|
callback(isFav);
|
}
|
});
|
});
|
} else {
|
me.removeFav(me.currentMenuId, function () {
|
me.getAllFavMenu(function () {
|
if (callback) {
|
callback(isFav);
|
}
|
});
|
});
|
}
|
},
|
addFav: function (id, callback) {
|
var me = this;
|
$webUtil.post(me.privateConfig.addFavUrl, {functionId: id}, function (result) {
|
if (result.success) {
|
if (callback) {
|
callback();
|
}
|
} else {
|
$webUtil.showErrorMsg(result.msg);
|
}
|
}, function (xhr, err) {
|
$webUtil.showErrorMsg("收藏功能出错，可能是服务没有启动");
|
}, me.backPath, false);
|
},
|
removeFav: function (id, callback) {
|
var me = this;
|
$webUtil.post(me.privateConfig.removeFavUrl, {functionId: id}, function (result) {
|
if (result.success) {
|
if (callback) {
|
callback();
|
}
|
} else {
|
$webUtil.showErrorMsg(result.msg);
|
}
|
}, function (xhr, err) {
|
$webUtil.showErrorMsg("收藏功能出错，可能是服务没有启动");
|
}, me.backPath, false);
|
if (callback) {
|
callback();
|
}
|
},
|
getMenuObjectById: function (id) {
|
var me = this;
|
return me.allMenuStore[id];
|
},
|
// 循环菜单数据增加icon
|
getIcon: function (iconData) {
|
var me = this;
|
var front = 'layui-icon-'
|
var icon = ['jihua', 'wj-jh', 'renwuguanli', 'jiankong', 'paigongfenpeishebei', 'fq_jiagong', 'ziyuan145', 'eduguanli', 'tubiao_shengchangongyi', 'zuzhi', 'quanxian', 'jichushuju', 'wenjianguanli', 'manage-process', 'xiaoxizhongxin', 'peizhizhongxin', 'RectangleCopy']
|
$.each(iconData, function (k, v) {
|
me.menuStore[k].iconCls = front + icon[k]
|
})
|
},
|
sideHover: function () {
|
var othis = $(this);
|
var sidebarHover = $("#portal_menu_tree li"); // 侧边栏hover
|
var sushover = $(".side-hover .vciWebMenuLevel2"); // 悬浮hover
|
var sushover2 = $(".side-hover .vciWebMenuLevel3"); // 悬浮hover2
|
var html = "";
|
var level1 = '';
|
var level2 = '';
|
var level3 = '';
|
var isShow = false;
|
var isShow2 = false;
|
var isShow3 = false;
|
var cleTime = '';
|
sidebarHover.on('mouseenter', function (event) {
|
if (!$("#portal_menu").hasClass("sidebarHover")) {
|
return false
|
}
|
$(".side-hover").css({"top": event.pageY});
|
isShow = true;
|
clearTimeout(level1);
|
html = $(this).children("dl").clone(true);
|
$(".side-hover").html(html[0]);
|
$(".side-hover dl").hide().removeAttr('class');
|
$(".side-hover dl").eq(0).show();
|
$(".side-hover span").show();
|
var chiDom = $(".side-hover .vciWebMenuLevel2").children('dl');
|
chiDom.addClass("leve3");
|
$(".side-hover .layui-nav-more").html(">").removeClass('layui-nav-more');
|
}).on('mouseleave', function () {
|
level1 = setTimeout(function () {
|
isShow = false;
|
if (!isShow) {
|
$(".side-hover dl").hide();
|
}
|
}, 500)
|
|
});
|
sushover.live('mouseenter', '.side-hover', function (event) {
|
isShow = true;
|
isShow2 = true;
|
clearTimeout(level1);
|
clearTimeout(level2);
|
clearTimeout(level3);
|
clearTimeout(cleTime);
|
if ($(this).children().is('dl')) {
|
$(".side-hover dd dl").hide();
|
$(this).children('dl').show();
|
} else {
|
$(".side-hover dd dl").hide();
|
}
|
$(this).addClass('isHover').siblings().removeClass('isHover');
|
|
}).live('mouseleave', '.side-hover', function () {
|
cleTime = setTimeout(function () {
|
isShow = false;
|
isShow2 = false;
|
}, 300);
|
level2 = setTimeout(function () {
|
if (!isShow2) {
|
$(this).children('dl').hide();
|
$(".side-hover dl").hide();
|
}
|
}, 500);
|
});
|
sushover2.live('mouseenter', '.side-hover', function (event) {
|
isShow = true;
|
isShow2 = true;
|
isShow3 = true;
|
clearTimeout(level3);
|
clearTimeout(cleTime);
|
$(this).addClass('isHover').siblings().removeClass('isHover');
|
}).live('mouseleave', '.side-hover', function () {
|
cleTime = setTimeout(function () {
|
isShow = false;
|
isShow2 = false;
|
isShow3 = false;
|
}, 300);
|
level3 = setTimeout(function () {
|
if (!isShow3) {
|
sushover.children('dl').hide();
|
$(".side-hover dl").hide();
|
}
|
}, 500);
|
});
|
}
|
};
|
exports('vciWebMenu',menu);
|
});
|
