Skip to content

S
Skyeye

Skyeye云 / Skyeye

通知 1283
Star 158
Fork 129
S
Skyeye
提交 5bb6f80c 编写于 作者: Skyeye云's avatar Skyeye云
浏览文件
操作

菜单添加背景颜色和icon颜色设置

上级 6eb4c9b7
隐藏空白更改
内联 并排
Showing with 869 addition and 8 deletion
skyeye-promote/logs/skyeye.log
浏览文件 @ 5bb6f80c
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
skyeye-promote/skyeye-web/src/main/resources/dbmapper/SysEveMenuMapper.xml
浏览文件 @ 5bb6f80c
......@@ -7,6 +7,8 @@
a.id,
a.menu_name menuName,
a.menu_icon menuIcon,
a.menu_icon_color menuIconColor,
a.menu_icon_bg menuIconBg,
a.title_name titleName,
a.menu_level menuLevel,
a.menu_type menuType,
......@@ -52,9 +54,9 @@
<insert id="insertSysMenuMation" parameterType="java.util.Map">
INSERT into sys_eve_menu
(id, menu_name, title_name, menu_icon, menu_url, menu_type, menu_sys_type, menu_parent_id, menu_level, open_type, order_num, creater, create_time)
(id, menu_name, title_name, menu_icon, menu_url, menu_type, menu_sys_type, menu_parent_id, menu_level, open_type, order_num, menu_icon_bg, menu_icon_color, creater, create_time)
VALUES
(#{id}, #{menuName}, #{titleName}, #{menuIcon}, #{menuUrl}, #{menuType}, #{menuSysType}, #{parentId}, #{menuLevel}, #{openType}, #{orderNum}, #{createId}, #{createTime})
(#{id}, #{menuName}, #{titleName}, #{menuIcon}, #{menuUrl}, #{menuType}, #{menuSysType}, #{parentId}, #{menuLevel}, #{openType}, #{orderNum}, #{menuIconBg}, #{menuIconColor}, #{createId}, #{createTime})
</insert>
<select id="querySysMenuMationBySimpleLevel" parameterType="java.util.Map" resultType="java.util.Map">
......@@ -80,6 +82,8 @@
a.id,
a.menu_name menuName,
a.menu_icon menuIcon,
a.menu_icon_color menuIconColor,
a.menu_icon_bg menuIconBg,
a.title_name titleName,
a.menu_level menuLevel,
a.menu_type menuType,
......@@ -124,6 +128,8 @@
<if test="orderNum != '' and orderNum != null">
order_num = #{orderNum},
</if>
menu_icon_bg = #{menuIconBg},
menu_icon_color = #{menuIconColor},
</set>
WHERE id = #{id}
</update>
......
skyeye-promote/skyeye-web/src/main/resources/mapping/reqsys.xml
浏览文件 @ 5bb6f80c
......@@ -89,6 +89,8 @@
<property id="menuName" name="menuName" ref="required" var="菜单名称"/>
<property id="titleName" name="titleName" ref="required" var="标题名称" />
<property id="menuIcon" name="menuIcon" ref="required" var="菜单logo"/>
<property id="menuIconColor" name="menuIconColor" ref="" var="菜单logo颜色"/>
<property id="menuIconBg" name="menuIconBg" ref="" var="菜单logo背景"/>
<property id="menuUrl" name="menuUrl" ref="required" var="菜单链接"/>
<property id="menuType" name="menuType" ref="required" var="菜单类型"/>
<property id="menuSysType" name="menuSysType" ref="required,num" var="是否为系统菜单"/>
......@@ -104,6 +106,8 @@
<property id="menuName" name="menuName" ref="required" var="菜单名称"/>
<property id="titleName" name="titleName" ref="required" var="标题名称" />
<property id="menuIcon" name="menuIcon" ref="required" var="菜单logo"/>
<property id="menuIconColor" name="menuIconColor" ref="" var="菜单logo颜色"/>
<property id="menuIconBg" name="menuIconBg" ref="" var="菜单logo背景"/>
<property id="menuUrl" name="menuUrl" ref="required" var="菜单链接"/>
<property id="menuType" name="menuType" ref="required" var="菜单类型"/>
<property id="menuSysType" name="menuSysType" ref="required,num" var="是否为系统菜单"/>
......
skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/winui/css/winui.css
浏览文件 @ 5bb6f80c
......@@ -624,7 +624,7 @@ button{
position: absolute;
zoom: 1;
z-index: 50;
background-color:rgba(0, 0, 0, 0.6);
background-color:rgba(0, 0, 0, 0.9);
white-space: nowrap;
overflow: hidden;
}
......
skyeye-promote/skyeye-web/src/main/resources/template/js/sysevemenu/sysevemenuadd.js
浏览文件 @ 5bb6f80c
......@@ -4,14 +4,41 @@ var childIcon = "";
layui.config({
base: basePath,
version: skyeyeVersion
}).define(['table', 'jquery', 'winui'], function (exports) {
}).define(['table', 'jquery', 'winui', 'colorpicker'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var $ = layui.$;
var colorpicker = layui.colorpicker;
var parentId = "0";
form.render();
colorpicker.render({
elem: '#menuIconBg',
color: '#1c97f5',
done: function(color){
$('#menuIconBginput').val(color);
$("#iconShow").parent().css({'background-color': color});
},
change: function(color){
$("#iconShow").parent().css({'background-color': color});
}
});
colorpicker.render({
elem: '#menuIconColor',
color: '#1c97f5',
done: function(color){
$('#menuIconColorinput').val(color);
$("#iconShow").css({'color': color});
},
change: function(color){
$("#iconShow").css({'color': color});
}
});
//菜单级别变化事件
form.on('radio(menuLevel)', function (data) {
var val = data.value;
......@@ -59,7 +86,9 @@ layui.config({
titleName: $("#menuTitle").val(),
menuIcon: $("#menuIcon").val(),
menuUrl: $("#menuUrl").val(),
menuType: data.field.menuType
menuType: data.field.menuType,
menuIconBg: $('#menuIconBginput').val(),
menuIconColor: $('#menuIconColorinput').val(),
};
if(data.field.menuLevel == '1'){//创世菜单
......@@ -134,6 +163,8 @@ layui.config({
callBack: function(refreshCode){
if (refreshCode == '0') {
$("#menuIcon").val(childIcon);
$("#iconShow").css({'color': 'white'});
$("#iconShow").attr("class", "fa fa-fw " + $("#menuIcon").val());
} else if (refreshCode == '-9999') {
top.winui.window.msg("操作失败", {icon: 2,time: 2000});
}
......
skyeye-promote/skyeye-web/src/main/resources/template/js/sysevemenu/sysevemenuedit.js
浏览文件 @ 5bb6f80c
......@@ -4,11 +4,13 @@ var childIcon = "";
layui.config({
base: basePath,
version: skyeyeVersion
}).define(['table', 'jquery', 'winui'], function (exports) {
}).define(['table', 'jquery', 'winui', 'colorpicker'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var $ = layui.$;
var colorpicker = layui.colorpicker;
var parentId = "0";
//初始化数据
......@@ -49,6 +51,46 @@ layui.config({
//初始化父菜单
loadChildMenuAll(json.bean.parentId.split(','));
}
colorpicker.render({
elem: '#menuIconBg',
color: json.bean.menuIconBg,
done: function(color){
$('#menuIconBginput').val(color);
$("#iconShow").parent().css({'background-color': color});
},
change: function(color){
$("#iconShow").parent().css({'background-color': color});
}
});
colorpicker.render({
elem: '#menuIconColor',
color: json.bean.menuIconColor,
done: function(color){
$('#menuIconColorinput').val(color);
$("#iconShow").css({'color': color});
},
change: function(color){
$("#iconShow").css({'color': color});
}
});
$("#iconShow").attr("class", "fa fa-fw " + $("#menuIcon").val());
if(isNull(json.bean.menuIconColor)){
$("#iconShow").css({'color': 'white'});
}else{
$('#menuIconColorinput').val(json.bean.menuIconColor);
$("#iconShow").css({'color': json.bean.menuIconColor});
}
if(isNull(json.bean.menuIconBg)){
$("#iconShow").css({'color': 'white'});
}else{
$('#menuIconBginput').val(json.bean.menuIconBg);
$("#iconShow").parent().css({'background-color': json.bean.menuIconBg});
}
//菜单类型
$("input:radio[name=menuType][value=" + json.bean.menuType + "]").attr("checked", true);
......@@ -103,7 +145,9 @@ layui.config({
menuIcon: $("#menuIcon").val(),
menuUrl: $("#menuUrl").val(),
menuType: data.field.menuType,
rowId: parent.rowId
rowId: parent.rowId,
menuIconBg: $('#menuIconBginput').val(),
menuIconColor: $('#menuIconColorinput').val(),
};
if(data.field.menuLevel == '1'){//创世菜单
......@@ -208,6 +252,8 @@ layui.config({
callBack: function(refreshCode){
if (refreshCode == '0') {
$("#menuIcon").val(childIcon);
$("#iconShow").css({'color': 'white'});
$("#iconShow").attr("class", "fa fa-fw " + $("#menuIcon").val());
} else if (refreshCode == '-9999') {
top.winui.window.msg("操作失败", {icon: 2,time: 2000});
}
......
skyeye-promote/skyeye-web/src/main/resources/template/js/sysevemenu/sysevemenulist.js
浏览文件 @ 5bb6f80c
......@@ -54,7 +54,19 @@ layui.config({
{ field: 'menuName', title: '菜单名称', width: 120 },
{ field: 'menuIcon', title: '图标码', width: 180 },
{ field: 'id', title: '图标', width: 60, templet: function(d){
return '<i class="fa fa-fw ' + d.menuIcon + '"></i>';
var str = '';
if(isNull(d.menuIconBg)){
str += '<div class="winui-icon winui-icon-font" style="text-align: center;">';
}else{
str += '<div class="winui-icon winui-icon-font" style="text-align: center; background-color:' + d.menuIconBg + '">';
}
if(isNull(d.menuIconColor)){
str += '<i class="fa fa-fw ' + d.menuIcon + '" style="color: white"></i>';
}else{
str += '<i class="fa fa-fw ' + d.menuIcon + '" style="color: ' + d.menuIconColor + '"></i>';
}
str += '</div>';
return str;
}},
{ field: 'titleName', title: '标题名称', width: 120 },
{ field: 'menuLevel', title: '菜单级别', width: 180, templet: function(d){
......
skyeye-promote/skyeye-web/src/main/resources/template/tpl/sysevemenu/sysevemenuadd.html
浏览文件 @ 5bb6f80c
......@@ -28,6 +28,32 @@
<input type="text" id="menuIcon" name="menuIcon" win-verify="required" placeholder="请输入图标src或者class" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图标预览</label>
<div class="layui-input-block">
<div class="layui-col-xs12">
<div class="layui-col-xs2">
<div class="winui-icon winui-icon-font" style="width: 60px; height: 60px;"><i id="iconShow" class="" style="font-size: 48px; line-height: 65px;"></i></div>
</div>
<div class="layui-col-xs5">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" class="layui-input" placeholder="请选择图标颜色" id="menuIconColorinput" />
</div>
<div class="layui-inline">
<div id="menuIconColor"></div>
</div>
</div>
<div class="layui-col-xs5">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" class="layui-input" placeholder="请选择背景颜色" id="menuIconBginput" />
</div>
<div class="layui-inline">
<div id="menuIconBg"></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单地址<i class="red">*</i></label>
<div class="layui-input-block">
......
skyeye-promote/skyeye-web/src/main/resources/template/tpl/sysevemenu/sysevemenueditTemplate.tpl
浏览文件 @ 5bb6f80c
......@@ -17,6 +17,32 @@
<input type="text" id="menuIcon" name="menuIcon" win-verify="required" placeholder="请输入图标src或者class" class="layui-input" value="{{menuIcon}}" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图标预览</label>
<div class="layui-input-block">
<div class="layui-col-xs12">
<div class="layui-col-xs2">
<div class="winui-icon winui-icon-font" style="width: 60px; height: 60px;"><i id="iconShow" class="" style="font-size: 48px; line-height: 65px;"></i></div>
</div>
<div class="layui-col-xs5">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" class="layui-input" placeholder="请选择图标颜色" id="menuIconColorinput" />
</div>
<div class="layui-inline">
<div id="menuIconColor"></div>
</div>
</div>
<div class="layui-col-xs5">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" class="layui-input" placeholder="请选择背景颜色" id="menuIconBginput" />
</div>
<div class="layui-inline">
<div id="menuIconBg"></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单地址<i class="red">*</i></label>
<div class="layui-input-block">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或