zhangnian
LinTiee 9 months ago
parent c0b06069ab
commit a0a1de8030

@ -56,114 +56,129 @@
<script type="text/javascript">
//获取当前登陆人
var currentUserName='[[${session.user.name}]]';
// 获取当前登录用户的用户名并存储在变量currentUserName中
var currentUserName = '[[${session.user.name}]]';
//获取系统时间
// 初始化一个空字符串用于存储格式化后的日期时间
var newDate = '';
// 调用函数getLangDate()来获取系统时间
getLangDate();
//值小于10时在前面补0
function dateFilter(date){
if(date < 10){return "0"+date;}
return date;
// 定义一个函数dateFilter用于在数值小于10时在前面补0
function dateFilter(date) {
if (date < 10) { return "0" + date; }
return date;
}
function getLangDate(){
var dateObj = new Date(); //表示当前系统时间的Date对象
var year = dateObj.getFullYear(); //当前系统时间的完整年份值
var month = dateObj.getMonth()+1; //当前系统时间的月份值
var date = dateObj.getDate(); //当前系统时间的月份中的日
var day = dateObj.getDay(); //当前系统时间中的星期值
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day]; //根据星期值,从数组中获取对应的星期字符串
var hour = dateObj.getHours(); //当前系统时间的小时值
var minute = dateObj.getMinutes(); //当前系统时间的分钟值
var second = dateObj.getSeconds(); //当前系统时间的秒钟值
var timeValue = "" +((hour >= 12) ? (hour >= 18) ? " 晚上" : " 下午" : " 上午" ); //当前时间属于上午、晚上还是下午
newDate = dateFilter(year)+"年"+dateFilter(month)+"月"+dateFilter(date)+"日 "+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
document.getElementById("nowTime").innerHTML = "亲爱的,"+currentUserName+" "+timeValue+"好! 欢迎使用 仓库管理系统。当前时间为: "+newDate+" "+week;
setTimeout("getLangDate()",1000);
// 定义一个函数getLangDate用于获取当前系统时间并格式化输出
function getLangDate() {
var dateObj = new Date(); // 创建一个表示当前系统时间的Date对象
var year = dateObj.getFullYear(); // 获取当前年份
var month = dateObj.getMonth() + 1; // 获取当前月份注意月份从0开始所以需要+1
var date = dateObj.getDate(); // 获取当前日期
var day = dateObj.getDay(); // 获取当前星期值
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var week = weeks[day]; // 根据星期值获取对应的星期字符串
var hour = dateObj.getHours(); // 获取当前小时
var minute = dateObj.getMinutes(); // 获取当前分钟
var second = dateObj.getSeconds(); // 获取当前秒数
var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? " 晚上" : " 下午" : " 上午"); // 根据小时判断是上午、下午还是晚上
// 格式化日期和时间并赋值给newDate变量
newDate = dateFilter(year) + "年" + dateFilter(month) + "月" + dateFilter(date) + "日 " + " " + dateFilter(hour) + ":" + dateFilter(minute) + ":" + dateFilter(second);
// 将格式化后的日期时间显示在页面上
document.getElementById("nowTime").innerHTML = "亲爱的," + currentUserName + " " + timeValue + "好! 欢迎使用 仓库管理系统。当前时间为: " + newDate + " " + week;
// 每隔1秒调用一次getLangDate()函数,实现实时更新时间
setTimeout("getLangDate()", 1000);
}
layui.use(['form','element','layer','jquery'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
element = layui.element;
$ = layui.jquery;
//上次登录时间【此处应该从接口获取,实际使用中请自行更换】
$(".loginTime").html(newDate.split("日")[0]+"日</br>"+newDate.split("日")[1]);
//icon动画
$(".panel a").hover(function(){
$(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
},function(){
$(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
})
$(".panel a").click(function(){
parent.addTab($(this));
})
//最新文章列表
/*$.get("/resources/json/newsList.json",function(data){
var hotNewsHtml = '';
for(var i=0;i<5;i++){
hotNewsHtml += '<tr>'
+'<td align="left"><a href="javascript:;"> '+data.data[i].newsName+'</a></td>'
+'<td>'+data.data[i].newsTime.substring(0,10)+'</td>'
+'</tr>';
}
$(".hot_news").html(hotNewsHtml);
$(".userAll span").text(data.length);
})*/
$.get("/notice/loadAllNotice?page=1&limit=5",function(data){
// 使用layui框架加载模块
layui.use(['form', 'element', 'layer', 'jquery'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
element = layui.element;
$ = layui.jquery;
// 设置上次登录时间(此处应该从接口获取,实际使用中请自行更换)
$(".loginTime").html(newDate.split("日")[0] + "日</br>" + newDate.split("日")[1]);
// 为面板中的链接添加鼠标悬停动画效果
$(".panel a").hover(function () {
$(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
}, function () {
$(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
});
// 点击面板中的链接时调用parent.addTab()方法添加标签页
$(".panel a").click(function () {
parent.addTab($(this));
});
// 最新文章列表(此部分代码被注释掉了,可以根据需要启用)
/*$.get("/resources/json/newsList.json", function (data) {
var hotNewsHtml = '';
for (var i = 0; i < 5; i++) {
hotNewsHtml += '<tr>'
+ '<td align="left"><a href=";"> ' + data.data[i].newsName + '</a></td>'
+ '<td>' + data.data[i].newsTime.substring(0, 10) + '</td>'
+ '</tr>';
}
$(".hot_news").html(hotNewsHtml);
$(".userAll span").text(data.length);
});*/
// 加载公告信息并显示在页面上
$.get("/notice/loadAllNotice?page=1&limit=5", function (data) {
var hotNewsHtml = '';
if(data.count>0){
if(data.count<=5){
for(var i=0;i<data.count;i++){
hotNewsHtml += '<tr ondblclick="viewNews('+data.data[i].id+')">'
+'<td align="left"><a href="javascript:;"> '+data.data[i].title+'</a></td>'
+'<td>'+data.data[i].createtime.substring(0,10)+'</td>'
+'</tr>';
if (data.count > 0) {
if (data.count <= 5) {
for (var i = 0; i < data.count; i++) {
hotNewsHtml += '<tr onclick="viewNews(' + data.data[i].id + ')">'
+ '<td align="left"><a href=";"> ' + data.data[i].title + '</a></td>'
+ '<td>' + data.data[i].createtime.substring(0, 10) + '</td>'
+ '</tr>';
}
}
if (data.count>5){
for(var i=0;i<5;i++){
hotNewsHtml += '<tr ondblclick="viewNews('+data.data[i].id+')">'
+'<td align="left"><a href="javascript:;"> '+data.data[i].title+'</a></td>'
+'<td>'+data.data[i].createtime.substring(0,10)+'</td>'
+'</tr>';
} else {
for (var i = 0; i < 5; i++) {
hotNewsHtml += '<tr onclick="viewNews(' + data.data[i].id + ')">'
+ '<td align="left"><a href=";"> ' + data.data[i].title + '</a></td>'
+ '<td>' + data.data[i].createtime.substring(0, 10) + '</td>'
+ '</tr>';
}
}
}else {
hotNewsHtml+='<h3 style="text-align: center"></h3>';
} else {
hotNewsHtml += '<h3 style="text-align: center"></h3>';
}
$(".hot_news").html(hotNewsHtml);
$(".userAll span").text(data.length);
});
$.get("/goods/loadAllWarningGoods?page=1&limit=5",function (data) {
var warningGoodsHtml='';
if(data.count>0){
if(data.count<=5){
for(var i=0;i<data.count;i++){
warningGoodsHtml += '<tr>'+'<td>'+data.data[i].goodsname+'</td>'+'<td style="width: 100px;">'+data.data[i].number+'</td>'+'</tr>';
// 加载预警商品信息并显示在页面上
$.get("/goods/loadAllWarningGoods?page=1&limit=5", function (data) {
var warningGoodsHtml = '';
if (data.count > 0) {
if (data.count <= 5) {
for (var i = 0; i < data.count; i++) {
warningGoodsHtml += '<tr>' + '<td>' + data.data[i].goodsname + '</td>' + '<td style="width: 100px;">' + data.data[i].number + '</td>' + '</tr>';
}
}
}else {
warningGoodsHtml+='<h3 style="text-align: center"></h3>';
} else {
warningGoodsHtml += '<h3 style="text-align: center"></h3>';
}
$(".warningGoods").html(warningGoodsHtml);
$(".userAll span").text(data.length);
});
});
function viewNews(id){
$.get("/notice/loadNoticeById",{id:id},function(news){
// 定义一个函数viewNews用于查看公告详情
function viewNews(id) {
$.get("/notice/loadNoticeById", { id: id }, function (news) {
layer.open({
type:1,
title:'',
content:$("#desk_viewNewsDiv"),
area:['800px','550px'],
success:function(index){
type: 1,
title: '',
content: $("#desk_viewNewsDiv"),
area: ['800px', '550px'],
success: function (index) {
$("#view_title").html(news.data.title);
$("#view_opername").html(news.data.opername);
$("#view_createtime").html(news.data.createtime);
@ -173,6 +188,7 @@
});
}
</script>
</body>
</html>

@ -101,159 +101,127 @@
<script type="text/javascript" src="/resources/js/cache.js"></script>
<script type="text/javascript">
var $,tab,dataStr,layer;
layui.config({
base : "/resources/js/"
}).extend({
"bodyTab" : "bodyTab"
})
layui.use(['bodyTab','form','element','layer','jquery'],function(){
var form = layui.form,
element = layui.element;
var $, tab, dataStr, layer;
layui.config({
base: "/resources/js/"
}).extend({
"bodyTab": "bodyTab"
})
layui.use(['bodyTab', 'form', 'element', 'layer', 'jquery'], function () {
var form = layui.form,
element = layui.element;
$ = layui.$;
layer = parent.layer === undefined ? layui.layer : top.layer;
layer = parent.layer === undefined ? layui.layer : top.layer;
tab = layui.bodyTab({
openTabNum : "50", //最大可打开窗口数量
url : "/menu/loadIndexLeftMenuJson" //获取菜单json地址
openTabNum: "50", // 最大可打开窗口数量
url: "/menu/loadIndexLeftMenuJson" // 获取菜单json地址
});
//通过顶部菜单获取左侧二三级菜单 注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
function getData(json){
$.getJSON(tab.tabConfig.url,function(data){
// 通过顶部菜单获取左侧二三级菜单,注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
function getData(json) {
$.getJSON(tab.tabConfig.url, function (data) {
dataStr = data.data;
//重新渲染左侧菜单
// 重新渲染左侧菜单
tab.render();
})
}
//页面加载时判断左侧菜单是否显示
//通过顶部菜单获取左侧菜单
$(".topLevelMenus li,.mobileTopLevelMenus dd").click(function(){
if($(this).parents(".mobileTopLevelMenus").length != "0"){
$(".topLevelMenus li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
}else{
$(".mobileTopLevelMenus dd").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
})
}
$(".layui-layout-admin").removeClass("showMenu");
$("body").addClass("site-mobile");
getData($(this).data("menu"));
//渲染顶部窗口
tab.tabMove();
})
//隐藏左侧导航
$(".hideMenu").click(function(){
if($(".topLevelMenus li.layui-this a").data("url")){
layer.msg("此栏目状态下左侧菜单不可展开"); //主要为了避免左侧显示的内容与顶部菜单不匹配
return false;
}
$(".layui-layout-admin").toggleClass("showMenu");
//渲染顶部窗口
tab.tabMove();
})
// 页面加载时判断左侧菜单是否显示
// 通过顶部菜单获取左侧菜单
$(".topLevelMenus li,.mobileTopLevelMenus dd").click(function () {
if ($(this).parents(".mobileTopLevelMenus").length != "0") {
$(".topLevelMenus li").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
} else {
$(".mobileTopLevelMenus dd").eq($(this).index()).addClass("layui-this").siblings().removeClass("layui-this");
}
$(".layui-layout-admin").removeClass("showMenu");
$("body").addClass("site-mobile");
getData($(this).data("menu"));
// 渲染顶部窗口
tab.tabMove();
})
//通过顶部菜单获取左侧二三级菜单 注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
getData("contentManagement");
// 隐藏左侧导航
$(".hideMenu").click(function () {
if ($(".topLevelMenus li.layui-this a").data("url")) {
layer.msg("此栏目状态下左侧菜单不可展开"); // 主要为了避免左侧显示的内容与顶部菜单不匹配
return false;
}
$(".layui-layout-admin").toggleClass("showMenu");
// 渲染顶部窗口
tab.tabMove();
})
//手机设备的简单适配
$('.site-tree-mobile').on('click', function(){
$('body').addClass('site-mobile');
});
$('.site-mobile-shade').on('click', function(){
$('body').removeClass('site-mobile');
});
// 通过顶部菜单获取左侧二三级菜单,注:此处只做演示之用,实际开发中通过接口传参的方式获取导航数据
getData("contentManagement");
// 添加新窗口
$("body").on("click",".layui-nav .layui-nav-item a:not('.mobileTopLevelMenus .layui-nav-item a')",function(){
//如果不存在子级
if($(this).siblings().length == 0){
addTab($(this));
$('body').removeClass('site-mobile'); //移动端点击菜单关闭菜单层
}
$(this).parent("li").siblings().removeClass("layui-nav-itemed");
})
//清除缓存
$(".clearCache").click(function(){
window.sessionStorage.clear();
window.localStorage.clear();
var index = layer.msg('',{icon: 16,time:false,shade:0.8});
setTimeout(function(){
layer.close(index);
layer.msg("缓存清除成功!");
},1000);
})
// 手机设备的简单适配
$('.site-tree-mobile').on('click', function () {
$('body').addClass('site-mobile');
});
$('.site-mobile-shade').on('click', function () {
$('body').removeClass('site-mobile');
});
//刷新后还原打开的窗口
if(cacheStr == "true") {
if (window.sessionStorage.getItem("menu") != null) {
menu = JSON.parse(window.sessionStorage.getItem("menu"));
curmenu = window.sessionStorage.getItem("curmenu");
var openTitle = '';
for (var i = 0; i < menu.length; i++) {
openTitle = '';
if (menu[i].icon) {
if (menu[i].icon.split("-")[0] == 'icon') {
openTitle += '<i class="seraph ' + menu[i].icon + '"></i>';
} else {
openTitle += '<i class="layui-icon">' + menu[i].icon + '</i>';
}
}
openTitle += '<cite>' + menu[i].title + '</cite>';
openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + menu[i].layId + '">&#x1006;</i>';
element.tabAdd("bodyTab", {
title: openTitle,
content: "<iframe src='" + menu[i].href + "' data-id='" + menu[i].layId + "'></frame>",
id: menu[i].layId
})
//定位到刷新前的窗口
if (curmenu != "undefined") {
if (curmenu == '' || curmenu == "null") { //定位到后台首页
element.tabChange("bodyTab", '');
} else if (JSON.parse(curmenu).title == menu[i].title) { //定位到刷新前的页面
element.tabChange("bodyTab", menu[i].layId);
}
} else {
element.tabChange("bodyTab", menu[menu.length - 1].layId);
}
}
//渲染顶部窗口
tab.tabMove();
}
}else{
window.sessionStorage.removeItem("menu");
window.sessionStorage.removeItem("curmenu");
}
})
// 添加新窗口
$("body").on("click", ".layui-nav .layui-nav-item a:not('.mobileTopLevelMenus .layui-nav-item a')", function () {
// 如果不存在子级
if ($(this).siblings().length == 0) {
addTab($(this));
$('body').removeClass('site-mobile'); // 移动端点击菜单关闭菜单层
}
$(this).parent("li").siblings().removeClass("layui-nav-itemed");
})
//打开新窗口
function addTab(_this){
tab.tabAdd(_this);
}
// 清除缓存
$(".clearCache").click(function () {
window.sessionStorage.clear();
layer.msg('', { icon: 16, time: false, shade: 0.8 });
setTimeout(function () {
layer.closeAll();
layer.msg("缓存清除成功!");
}, 1000);
})
//捐赠弹窗
function donation(){
layer.tab({
area : ['260px', '367px'],
tab : [{
title : "微信",
content : "<div style='padding:30px;overflow:hidden;background:#d2d0d0;'><img src='images/wechat.jpg'></div>"
},{
title : "支付宝",
content : "<div style='padding:30px;overflow:hidden;background:#d2d0d0;'><img src='images/alipay.jpg'></div>"
}]
// 刷新后还原打开的窗口
if (window.sessionStorage.getItem("menu")) {
menu = JSON.parse(window.sessionStorage.getItem("menu"));
for (var i = 0; i < menu.length; i++) {
openTitle = '';
if (menu[i].icon) {
if (menu[i].icon.split("-")[0] == 'icon') {
openTitle += '<i class="seraph ' + menu[i].icon + '"></i>';
} else {
openTitle += '<i class="layui-icon">' + menu[i].icon + '</i>';
}
}
openTitle += '<cite>' + menu[i].title + '</cite>';
openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + menu[i].layId + '">&#x1006;</i>';
element.tabAdd("bodyTab", {
title: openTitle,
content: "<iframe data-id='" + menu[i].layId + "'></frame>",
id: menu[i].layId
})
// 定位到刷新前的窗口
if (curmenu != "undefined") {
if (curmenu == '' || curmenu == "null") { // 定位到后台首页
element.tabChange("bodyTab", '');
} else if (JSON.parse(curmenu).title == menu[i].title) { // 定位到刷新前的页面
element.tabChange("bodyTab", menu[i].layId);
}
} else {
element.tabChange("bodyTab", menu[menu.length - 1].layId);
}
}
// 渲染顶部窗口
tab.tabMove();
} else {
window.sessionStorage.setItem("menu", JSON.stringify(menu));
// 默认加载欢迎页
tab.welcomePage();
}
})
}
//图片管理弹窗
function showImg(){
$.getJSON('json/images.json', function(json){
var res = json;
layer.photos({
photos: res,
anim: 5
});
});
}
</script>
</body>
</html>

@ -42,51 +42,56 @@
<script type="text/javascript" src="/resources/js/cache.js"></script>
<script type="text/javascript">
layui.use(['form','layer','jquery'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer
$ = layui.jquery;
// 使用layui模块包括form、layer和jquery
layui.use(['form','layer','jquery'],function(){
var form = layui.form, // 获取form模块
layer = parent.layer === undefined ? layui.layer : top.layer, // 获取layer模块优先从父窗口获取否则从顶层窗口获取
$ = layui.jquery; // 获取jQuery模块
//登录按钮
form.on("submit(login)",function(data){
var btn = $(this);
//设置登录按钮 为不可点击
btn.text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
$.post("/login/login",data.field,function(rs){
//设置登录按钮 恢复可点击 在前端防止 重复点击
btn.text("登录").attr("disabled",false).removeClass("layui-disabled");
layer.msg(rs.msg);
if(rs.code != 200){
layer.msg(rs.msg);
$.get("/login/getCode",function (code) {
$("#img").attr("src","/login/getCode");
})
}else{
//跳转到templates/system/index/index.html页面
layer.msg(rs.msg);
location.href="/sys/index";
}
});
return false;
})
// 监听登录表单的提交事件
form.on("submit(login)",function(data){
var btn = $(this); // 获取当前点击的按钮元素
// 设置登录按钮为不可点击状态,并显示“登录中...”文本
btn.text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
// 发送POST请求到服务器进行登录验证
$.post("/login/login", data.field, function(rs){
// 恢复登录按钮的可点击状态
btn.text("登录").attr("disabled",false).removeClass("layui-disabled");
// 显示服务器返回的消息
layer.msg(rs.msg);
if(rs.code != 200){
// 如果登录失败,重新加载验证码图片
layer.msg(rs.msg);
$.get("/login/getCode",function (code) {
$("#img").attr("src","/login/getCode");
});
} else {
// 如果登录成功,跳转到系统首页
layer.msg(rs.msg);
location.href="/sys/index";
}
});
return false; // 阻止表单默认提交行为
});
// 表单输入效果处理
$(".loginBody .input-item").click(function(e){
e.stopPropagation(); // 阻止事件冒泡
$(this).addClass("layui-input-focus").find(".layui-input").focus(); // 添加焦点样式并聚焦输入框
});
$(".loginBody .layui-form-item .layui-input").focus(function(){
$(this).parent().addClass("layui-input-focus"); // 输入框获得焦点时,添加焦点样式
});
$(".loginBody .layui-form-item .layui-input").blur(function(){
$(this).parent().removeClass("layui-input-focus"); // 输入框失去焦点时,移除焦点样式
if($(this).val() != ''){
$(this).parent().addClass("layui-input-active"); // 输入框有值时,添加激活样式
} else {
$(this).parent().removeClass("layui-input-active"); // 输入框无值时,移除激活样式
}
});
});
//表单输入效果
$(".loginBody .input-item").click(function(e){
e.stopPropagation();
$(this).addClass("layui-input-focus").find(".layui-input").focus();
})
$(".loginBody .layui-form-item .layui-input").focus(function(){
$(this).parent().addClass("layui-input-focus");
})
$(".loginBody .layui-form-item .layui-input").blur(function(){
$(this).parent().removeClass("layui-input-focus");
if($(this).val() != ''){
$(this).parent().addClass("layui-input-active");
}else{
$(this).parent().removeClass("layui-input-active");
}
})
})
</script>
</body>

@ -85,131 +85,123 @@
<script type="text/javascript">
layui.use(['jquery', 'form', 'layer', 'laydate', 'table'], function () {
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var table = layui.table;
//初始化时间选择器
var $ = layui.jquery; // 引入jQuery模块
var form = layui.form; // 引入表单模块
var layer = layui.layer; // 引入弹出层模块
var laydate = layui.laydate; // 引入日期选择器模块
var table = layui.table; // 引入表格模块
// 初始化时间选择器,用于选择开始时间和结束时间
laydate.render({
elem: "#startTime",
type: "datetime"
elem: "#startTime", // 绑定元素ID为startTime的DOM元素
type: "datetime" // 设置类型为日期时间选择器
});
laydate.render({
elem: "#endTime",
type: "datetime"
elem: "#endTime", // 绑定元素ID为endTime的DOM元素
type: "datetime" // 设置类型为日期时间选择器
});
//初始化表格
// 初始化表格
var tableIns = table.render({
elem: "#loginfoTable",
title: "日志数据表格",
url: "/loginfo/loadAllLoginfo",
toolbar: "#loginfoToolBar",
page: true,
height: "full-190",
cols: [ [
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: 'ID', align: 'center'},
{field: 'loginname', title: '', align: 'center'},
{field: 'loginip', title: 'IP', align: 'center'},
{field: 'logintime', title: '', align: 'center'},
{fixed: 'right', title: '', toolbar: '#loginfoRowBar', align: 'center'}
] ],
elem: "#loginfoTable", // 绑定表格元素ID为loginfoTable的DOM元素
title: "日志数据表格", // 表格标题
url: "/loginfo/loadAllLoginfo", // 数据接口地址
toolbar: "#loginfoToolBar", // 工具栏模板的选择器
page: true, // 开启分页
height: "full-190", // 设置表格高度,减去头部和底部的高度
cols: [[ // 定义表头
{type: 'checkbox', fixed: 'left'}, // 添加复选框列,固定在左侧
{field: 'id', title: 'ID', align: 'center'}, // ID列居中显示
{field: 'loginname', title: '', align: 'center'}, // 登录用户名列,居中显示
{field: 'loginip', title: 'IP', align: 'center'}, // 登录IP列居中显示
{field: 'logintime', title: '', align: 'center'}, // 登录时间列,居中显示
{fixed: 'right', title: '', toolbar: '#loginfoRowBar', align: 'center'} // 操作列,固定在右侧,使用行工具条模板
]],
done:function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
if(data.data.length==0&&curr!=1){
// 如果不是第一页且当前页没有数据时,自动跳转到上一页
if(data.data.length==0 && curr!=1){
tableIns.reload({
page:{
curr:curr-1
curr:curr-1 // 设置当前页为上一页
}
})
}
}
});
//监控模糊查询按钮事件
// 监听模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
where: data.field, // 将表单数据作为查询条件
page: {
curr: 1
curr: 1 // 重置到第一页
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监听工具条事件
table.on("toolbar(loginfoTable)", function (obj) {
switch (obj.event) {
case 'batchDelete':
batchDelete();
break;
case 'batchDelete': // 如果点击批量删除按钮
batchDelete(); // 调用批量删除函数
break;
};
});
//监控行工具条事件
// 监听行工具条事件
table.on("tool(loginfoTable)",function (obj) {
//获取当前行数据
var data = obj.data;
var data = obj.data; // 获取当前行的数据
switch (obj.event){
case 'delete':
deleteInfo(data);
break;
case 'delete': // 如果点击删除按钮
deleteInfo(data); // 调用删除函数,传入当前行数据
break;
};
});
//删除
// 删除单条记录的函数
function deleteInfo(data) {
layer.confirm('',{icon: 3,title:''},function (index) {
$.post("/loginfo/deleteLoginfo",{id:data.id},function (res) {
if (res.code==200){
tableIns.reload({
where:"",
});
tableIns.reload({where:""}); // 重新加载表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示操作结果消息
});
layer.close(index);
layer.close(index); // 关闭确认框
});
}
//批量删除
// 批量删除记录的函数
function batchDelete() {
//得到选中行
var checkStatus = table.checkStatus('loginfoTable');
var dataLength = checkStatus.data.length;
var checkStatus = table.checkStatus('loginfoTable'); // 获取选中行的状态
var dataLength = checkStatus.data.length; // 获取选中行的数量
if (dataLength>0){
layer.confirm('',{icon: 3,title: ''},function (index) {
//获取选中行数据
var data = checkStatus.data;
var ids = "";
var data = checkStatus.data; // 获取选中行的数据
var ids = ""; // 初始化ID字符串
$.each(data,function (index, item) {
if (index==0){
ids+="ids="+item.id;
ids+="ids="+item.id; // 拼接第一个ID参数
}else {
ids+="&ids="+item.id;
ids+="&ids="+item.id; // 拼接后续ID参数
}
});
$.post("/loginfo/batchDeleteLoginfo",ids,function (res) {
if (res.code==200){
//重新刷新表格
tableIns.reload({
where:"",
});
tableIns.reload({where:""}); // 重新加载表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示操作结果消息
});
layer.close(index);
layer.close(index); // 关闭确认框
});
}else {
layer.msg("请选中操作行")
layer.msg("请选中操作行"); // 如果没有选中任何行,则提示用户
}
}
});
</script>
</body>

@ -24,30 +24,34 @@
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui_ext/dtree/dtree.js"></script>
<script type="text/javascript">
// 定义全局变量menuTree用于存储树的实例
var menuTree;
// 使用layui.extend扩展模块路径
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路径,即不跟随 base 路径
}).use(['dtree','layer','jquery'], function(){
// 引入dtree、layer和jquery模块
var dtree = layui.dtree;
var layer = layui.layer;
var $ = layui.jquery;
// 初始化树
menuTree = dtree.render({
elem: "#menuTree",
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
elem: "#menuTree", // 绑定树的容器元素ID
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response:{message:"msg",statusCode:0}, // 修改response中返回数据的定义
url: "/menu/loadMenuManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
// 绑定节点点击
// 绑定节点点击事件
dtree.on("node('menuTree')" ,function(obj){
//layer.msg(JSON.stringify(obj.param));
//将树节点的id传到reloadTable方法中
// 将树节点的id传到reloadTable方法中
window.parent.right.reloadTable(obj.param.nodeId);
});
});
</script>
</body>
</html>

@ -141,9 +141,10 @@
<script type="text/javascript">
//提升数据表格的作用域因为底下还有一个reloadTable方法
// 定义全局变量tableIns用于存储表格的实例
var tableIns;
// 使用layui.extend扩展模块路径
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree'
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit','dtree'], function () {
@ -153,34 +154,34 @@
var table = layui.table;
var dtree = layui.dtree;
//初始化表格 加载数据
// 初始化表格并加载数据
tableIns = table.render({
elem: "#menuTable",
title: "菜单数据表格",
url: "/menu/loadAllMenu",
toolbar: "#menuToolBar",
page: true,
height: "full-130",
cols: [ [
elem: "#menuTable", // 绑定表格的容器元素ID
title: "菜单数据表格", // 表格标题
url: "/menu/loadAllMenu", // 数据接口地址
toolbar: "#menuToolBar", // 工具栏模板选择器
page: true, // 开启分页
height: "full-130", // 设置表格高度
cols: [ [ // 定义表头
{field: 'id', title: 'ID', align: 'center',width:'80'},
{field: 'pid', title: 'ID', align: 'center',width:'100'},
{field: 'title', title: '', align: 'center',width:'150'},
{field: 'href', title: '', align: 'center',width:'200'},
{field: 'icon', title: '', align: 'center',width:'90',templet:function (d) {
return '<font class="layui-icon">'+d.icon+'</font>';
}},
return '<font class="layui-icon">'+d.icon+'</font>';
}},
{field: 'available', title: '', align: 'center',width:'100',templet:function (d) {
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{field: 'open', title: '', align: 'center',width:'100',templet:function (d) {
return d.open==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
return d.open==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{field: 'ordernum', title: '', align: 'center',width:'80'},
{field: 'target', title: 'TARGET', align: 'center',width:'80',hide:true},
{fixed: 'right', title: '', toolbar: '#menuRowBar', align: 'center',width:'180'}
] ],
done: function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
// 如果不是第一页且当前页没有数据,则返回上一页
if (data.data.length == 0 && curr != 1) {
tableIns.reload({
page: {
@ -188,93 +189,64 @@
}
})
}
/*//当是第一页时如果当前返回的数据为0并且当前为第一页 给一个空的查询条件并给curr赋初值为1
if (data.data.length==0 && curr==1){
tableIns.reload({
where: "",
page:{
curr:1
}
})
}*/
}
});
//监控模糊查询按钮事件
// 监听模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
where: data.field, // 设置查询条件
page: {
curr: 1
curr: 1 // 重置到第一页
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监听工具条事件
table.on("toolbar(menuTable)", function (obj) {
switch (obj.event) {
case 'add':
openAddLayer();
break;
};
});
//监控行工具条事件
table.on("tool(menuTable)", function (obj) {
//获取当前行数据
var data = obj.data;
switch (obj.event) {
case 'delete':
deleteMenu(data);
break;
case 'update':
updateMenu(data);
openAddLayer(); // 打开添加弹出层
break;
};
});
var mainIndex;
var url;
var mainIndex; // 弹出层索引
var url; // 请求URL
//打开添加弹出层
// 打开添加弹出层
function openAddLayer() {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','450px'],
title:'',
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['800px','450px'], // 宽高设置
title:'', // 标题
success:function () {
$("#dataFrm")[0].reset();
//设置下拉树中父节点的值为空
$("#pid").val("");
url="/menu/addMenu";
//初始化排序码
$("#dataFrm")[0].reset(); // 清空表单数据
$("#pid").val(""); // 清空父节点值
url="/menu/addMenu"; // 设置请求URL为添加菜单接口
$.get("/menu/loadMenuMaxOrderNum",function (res) {
$("#ordernum").val(res.value);
$("#ordernum").val(res.value); // 初始化排序码
});
//设置下拉树的value值为空
selectTree.selectVal("");
selectTree.selectVal(""); // 清空下拉树选中值
}
});
}
//打开修改弹出层
// 打开修改弹出层
function updateMenu(data) {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','450px'],
title:'',
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['800px','450px'], // 宽高设置
title:'', // 标题
success:function () {
//清空原有的数据
$("#dataFrm")[0].reset();
//装载新的数据
form.val("dataFrm",data);
//选中之前的父级菜单 nodeId=data.pid
dtree.dataInit("menuTree",data.pid);
dtree.selectVal("menuTree");
url="/menu/updateMenu";
$("#dataFrm")[0].reset(); // 清空表单数据
form.val("dataFrm",data); // 填充表单数据
dtree.dataInit("menuTree",data.pid); // 初始化下拉树父节点值
dtree.selectVal("menuTree"); // 选中下拉树节点
url="/menu/updateMenu"; // 设置请求URL为更新菜单接口
}
});
}
@ -282,85 +254,75 @@
form.on("submit(doSubmit)",function (data) {
$.post(url,data.field,function (res) {
if (res.code==200){
tableIns.reload();
//重新加载添加弹出层的下拉树
selectTree.reload();
//重新加载左边的菜单树
window.parent.left.menuTree.reload();
tableIns.reload(); // 重新加载表格数据
selectTree.reload(); // 重新加载下拉树数据
window.parent.left.menuTree.reload(); // 重新加载左侧菜单树数据
}
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示响应消息
layer.close(mainIndex); // 关闭弹出层
});
return false;
return false; // 阻止表单默认提交行为
});
/*$("#doSubmit").click(function () {
var data = $("#dataFrm").serialize();
$.post(url,data,function (res) {
if (res.code==200){
tableIns.reload();
//重新加载添加弹出层的下拉树
selectTree.reload();
//重新加载左边的菜单树
window.parent.left.menuTree.reload();
}
layer.msg(res.msg);
layer.close(mainIndex);
});
});*/
//删除
// 删除菜单项的函数
function deleteMenu(data) {
$.post("/menu/checkMenuHasChildrenNode", {id: data.id}, function (resoult) {
if (resoult.value){
layer.msg("当前菜单节点有子菜单,请选择删除子菜单!")
}else {
// 发送请求检查当前菜单节点是否有子节点
$.post("/menu/checkMenuHasChildrenNode", {id: data.id}, function (result) {
// 如果存在子节点,则提示用户不能直接删除
if (result.value){
layer.msg("当前菜单节点有子菜单,请选择删除子菜单!");
} else {
// 如果没有子节点,弹出确认框询问用户是否确定删除
layer.confirm('' + data.title + '', {icon: 3, title: ''}, function (index) {
$.post("/menu/deleteMenu", {id: data.id},function (res) {
// 发送删除请求
$.post("/menu/deleteMenu", {id: data.id}, function (res) {
// 如果删除成功,重新加载表格和树形结构
if (res.code == 200) {
tableIns.reload({
where:"",
});
//刷新下拉树
// 刷新下拉树
selectTree.reload();
//刷新左边的菜单树
// 刷新左边的菜单树
window.parent.left.menuTree.reload();
}
// 显示操作结果消息
layer.msg(res.msg);
});
// 关闭确认框
layer.close(index);
});
}
});
}
//初始化下拉树
// 初始化下拉树组件
var selectTree = dtree.renderSelect({
elem: "#menuTree",
width: "100%", // 可以在这里指定树的宽度来填满div
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
url: "/menu/loadMenuManagerLeftTreeJson" // 使用url加载可与data加载同时存在)
elem: "#menuTree", // 绑定的元素ID
width: "100%", // 设置树的宽度为100%以填满容器
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置数据的风格为列表形式
response:{message:"msg",statusCode:0}, // 修改响应中返回数据的定义
url: "/menu/loadMenuManagerLeftTreeJson" // 通过URL加载数据可以与data同时存在)
});
//监听点击的方法
dtree.on("node(menuTree)",function (obj) {
$("#pid").val(obj.param.nodeId);
console.log(obj.param.nodeId);
})
// 监听树节点点击事件
dtree.on("node(menuTree)", function (obj) {
$("#pid").val(obj.param.nodeId); // 将选中的节点ID赋值给隐藏域
console.log(obj.param.nodeId); // 在控制台打印节点ID
});
});
//给其它页面刷新当前页面数据表格的方法
// 给其它页面刷新当前页面数据表格的方法
function reloadTable(id) {
tableIns.reload({
where:{
id:id
id:id // 根据提供的ID过滤数据
},
page:{
curr:1
curr:1 // 重置到第一页
}
});
}

@ -131,13 +131,14 @@
<script type="text/javascript">
layui.use(['jquery', 'form', 'layer', 'laydate', 'table','layedit'], function () {
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var table = layui.table;
var layedit = layui.layedit;
//初始化时间选择器
var $ = layui.jquery; // 引入jQuery模块
var form = layui.form; // 引入表单模块
var layer = layui.layer; // 引入弹出层模块
var laydate = layui.laydate; // 引入日期选择器模块
var table = layui.table; // 引入表格模块
var layedit = layui.layedit; // 引入富文本编辑器模块
// 初始化时间选择器,用于选择公告的开始和结束时间
laydate.render({
elem: "#startTime",
type: "datetime"
@ -147,24 +148,24 @@
type: "datetime"
});
//初始化表格 加载数据
// 初始化表格并加载数据
var tableIns = table.render({
elem: "#noticeTable",
title: "公告数据表格",
url: "/notice/loadAllNotice",
toolbar: "#noticeToolBar",
page: true,
height: "full-190",
cols: [ [
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: 'ID', align: 'center'},
{field: 'title', title: '', align: 'center'},
{field: 'opername', title: '', align: 'center'},
{field: 'createtime', title: '', align: 'center'},
{fixed: 'right', title: '', toolbar: '#noticeRowBar', align: 'center'}
elem: "#noticeTable", // 绑定元素
title: "公告数据表格", // 表格标题
url: "/notice/loadAllNotice", // 数据接口
toolbar: "#noticeToolBar", // 工具栏模板的选择器
page: true, // 开启分页
height: "full-190", // 设置表格高度
cols: [ [ // 定义表头
{type: 'checkbox', fixed: 'left'}, // 复选框列
{field: 'id', title: 'ID', align: 'center'}, // ID列
{field: 'title', title: '', align: 'center'}, // 公告标题列
{field: 'opername', title: '', align: 'center'}, // 操作人列
{field: 'createtime', title: '', align: 'center'}, // 创建时间列
{fixed: 'right', title: '', toolbar: '#noticeRowBar', align: 'center'} // 操作列
] ],
done:function (data, curr, count) {
if(data.data.length==0&&curr!=1){ //不是第一页时如果当前返回的数据为0那么就返回上一页
done:function (data, curr, count) { // 表格渲染完成后的回调函数
if(data.data.length==0&&curr!=1){ // 如果当前页没有数据且不是第一页,则返回上一页
tableIns.reload({
page:{
curr:curr-1
@ -174,168 +175,154 @@
}
});
//初始化富文本编译
// 初始化富文本编辑
var editIndex = layedit.build('content');
//监控模糊查询按钮事件
// 监听模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
where: data.field, // 将表单数据作为查询条件
page: {
curr: 1
curr: 1 // 重置到第一页
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监听工具条事件
table.on("toolbar(noticeTable)", function (obj) {
switch (obj.event) {
case 'batchDelete':
case 'batchDelete': // 批量删除事件
batchDelete();
break;
case 'add':
case 'add': // 添加事件
openAddLayer();
break;
};
});
//监控行工具条事件
// 监听行工具条事件
table.on("tool(noticeTable)",function (obj) {
//获取当前行数据
var data = obj.data;
var data = obj.data; // 获取当前行数据
switch (obj.event){
case 'delete':
case 'delete': // 删除事件
deleteInfo(data);
break;
case 'update':
case 'update': // 修改事件
updateNotice(data);
break;
case 'show':
case 'show': // 查看事件
showNotice(data);
break;
};
});
var mainIndex;
var url;
var mainIndex; // 弹出层的索引
var url; // 请求的URL地址
//打开添加的弹出层
// 打开添加公告的弹出层
function openAddLayer() {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','550px'],
title:'',
success:function () {
$("#dataFrm")[0].reset();
//重置富文本编译器的内容为空
layedit.setContent(editIndex,"");
url="/notice/addNotice";
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['800px','550px'], // 弹出层大小
title:'', // 弹出层标题
success:function () { // 成功打开后的回调函数
$("#dataFrm")[0].reset(); // 重置表单
layedit.setContent(editIndex,""); // 清空富文本编辑器内容
url="/notice/addNotice"; // 设置请求URL为添加公告的接口
}
});
};
//打开修改的弹出层
// 打开修改公告的弹出层
function updateNotice(data) {
//console.log(data);
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','550px'],
title:'',
success:function () {
$("#dataFrm")[0].reset();
//装载新的数据
form.val("dataFrm",data);
layedit.setContent(editIndex,data.content);
url="/notice/updateNotice";
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['800px','550px'], // 弹出层大小
title:'', // 弹出层标题
success:function () { // 成功打开后的回调函数
$("#dataFrm")[0].reset(); // 重置表单
form.val("dataFrm",data); // 填充表单数据
layedit.setContent(editIndex,data.content); // 设置富文本编辑器内容
url="/notice/updateNotice"; // 设置请求URL为修改公告的接口
}
});
};
// 提交表单数据
$("#doSubmit").click(function () {
//alert(url);
//同步富文本和textarea里面的内容
layedit.sync(editIndex);
var data = $("#dataFrm").serialize();
$.post(url,data,function (res) {
if (res.code==200){
tableIns.reload();
layedit.sync(editIndex); // 同步富文本编辑器内容到textarea中
var data = $("#dataFrm").serialize(); // 序列化表单数据
$.post(url,data,function (res) { // 发送POST请求
if (res.code==200){ // 如果操作成功
tableIns.reload(); // 重新加载表格数据
}
//提示操作是否成功,且关闭弹出层
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示操作结果消息
layer.close(mainIndex); // 关闭弹出层
});
});
//打开查看的弹出层
// 打开查看公告的弹出层
function showNotice(data) {
mainIndex = layer.open({
type:1,
content:$("#showNoticeDiv"),
area:['800px','550px'],
title:'',
success:function () {
$("#notice_title").html(data.title);
$("#notice_opername").html(data.opername);
$("#notice_createtime").html(data.createtime);
$("#notice_content").html(data.content);
type:1, // 页面层类型
content:$("#showNoticeDiv"), // 内容区域选择器
area:['800px','550px'], // 弹出层大小
title:'', // 弹出层标题
success:function () { // 成功打开后的回调函数
$("#notice_title").html(data.title); // 显示公告标题
$("#notice_opername").html(data.opername); // 显示操作人姓名
$("#notice_createtime").html(data.createtime); // 显示创建时间
$("#notice_content").html(data.content); // 显示公告内容
}
});
}
//删除
// 删除公告信息
function deleteInfo(data) {
layer.confirm(''+data.title+'',{icon: 3,title:''},function (index) {
$.post("/notice/deleteNotice",{id:data.id},function (res) {
if (res.code==200){
tableIns.reload({
//删除成功加载表格时,要重置查询条件
where:"",
});
layer.confirm(''+data.title+'',{icon: 3,title:''},function (index) { // 确认删除对话框
$.post("/notice/deleteNotice",{id:data.id},function (res) { // 发送删除请求
if (res.code==200){ // 如果删除成功
tableIns.reload({where:""}); // 重新加载表格数据,重置查询条件
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示操作结果消息
});
layer.close(index);
layer.close(index); // 关闭确认对话框
});
}
//批量删除
// 批量删除公告信息
function batchDelete() {
//得到选中行
var checkStatus = table.checkStatus('noticeTable');
var dataLength = checkStatus.data.length;
if (dataLength>0){
layer.confirm('',{icon: 3,title: ''},function (index) {
//获取选中行数据
var data = checkStatus.data;
var ids = "";
$.each(data,function (index, item) {
if (index==0){
ids+="ids="+item.id;
}else {
ids+="&ids="+item.id;
var checkStatus = table.checkStatus('noticeTable'); // 获取选中行状态
var dataLength = checkStatus.data.length; // 获取选中行数量
if(dataLength>0){ // 如果选中了至少一行
layer.confirm('',{icon: 3,title:''},function (index) { // 确认删除对话框
var data = checkStatus.data; // 获取选中行数据
var ids = ""; // 初始化ID字符串
for (var i=0;i<dataLength;i++){ // 遍历选中行数据
if (i==0){ // 如果是第一行数据
ids="ids="+data[i].id; // 拼接第一个ID参数
}else { // 如果不是第一行数据
ids=ids+"&ids="+data[i].id; // 拼接后续ID参数
}
});
$.post("/notice/batchDeleteNotice",ids,function (res) {
if (res.code==200){
//重新刷新表格
tableIns.reload({
where:"",
});
}
$.post("/notice/batchDeleteNotice",ids,function (res) { // 发送批量删除请求
if (res.code==200){ // 如果批量删除成功
tableIns.reload({where:""}); // 重新加载表格数据,重置查询条件
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示操作结果消息
});
layer.close(index);
layer.close(index); // 关闭确认对话框
});
}else {
layer.msg("请选中操作行")
}else{ // 如果没有选中任何行
layer.msg("请选中操作行"); // 显示提示消息
}
}
});
</script>
</body>

@ -24,30 +24,34 @@
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui_ext/dtree/dtree.js"></script>
<script type="text/javascript">
// 定义全局变量menuTree用于存储树的实例
var menuTree;
// 使用layui.extend扩展模块路径
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路径,即不跟随 base 路径
}).use(['dtree','layer','jquery'], function(){
// 引入dtree、layer和jquery模块
var dtree = layui.dtree;
var layer = layui.layer;
var $ = layui.jquery;
// 初始化树
menuTree = dtree.render({
elem: "#menuTree",
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
elem: "#menuTree", // 绑定树的容器元素ID
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response:{message:"msg",statusCode:0}, // 修改response中返回数据的定义
url: "/permission/loadPermissionManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
// 绑定节点点击
// 绑定节点点击事件
dtree.on("node('menuTree')" ,function(obj){
//layer.msg(JSON.stringify(obj.param));
//将树节点的id传到reloadTable方法中
// 将树节点的id传到reloadTable方法中
window.parent.right.reloadTable(obj.param.nodeId);
});
});
</script>
</body>
</html>

@ -135,10 +135,10 @@
<script type="text/javascript">
//提升数据表格的作用域因为底下还有一个reloadTable方法
var tableIns;
var tableIns; // 定义全局变量tableIns用于存储表格实例
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree'
dtree: '/resources/layui_ext/dtree/dtree' // 扩展模块路径
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit','dtree'], function () {
var $ = layui.jquery;
var form = layui.form;
@ -146,30 +146,30 @@
var table = layui.table;
var dtree = layui.dtree;
//初始化表格 加载数据
// 初始化表格并加载数据
tableIns = table.render({
elem: "#permissionTable",
title: "权限数据表格",
url: "/permission/loadAllPermission",
toolbar: "#permissionToolBar",
page: true,
height: "full-130",
cols: [ [
elem: "#permissionTable", // 绑定表格的容器元素ID
title: "权限数据表格", // 表格标题
url: "/permission/loadAllPermission", // 数据接口地址
toolbar: "#permissionToolBar", // 工具栏模板选择器
page: true, // 开启分页
height: "full-130", // 设置表格高度
cols: [ [ // 列配置
{field: 'id', title: 'ID', align: 'center',width:'80'},
{field: 'pid', title: 'ID', align: 'center',width:'100'},
{field: 'title', title: '', align: 'center',width:'150'},
{field: 'percode', title: '', align: 'center',width:'230'},
{field: 'available', title: '', align: 'center',width:'100',templet:function (d) {
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{field: 'open', title: '', align: 'center',width:'100',templet:function (d) {
return d.open==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
return d.open==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{field: 'ordernum', title: '', align: 'center',width:'100'},
{fixed: 'right', title: '', toolbar: '#permissionRowBar', align: 'center',width:'220'}
] ],
done: function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
// 如果不是第一页且当前返回的数据为空,则返回上一页
if (data.data.length == 0 && curr != 1) {
tableIns.reload({
page: {
@ -180,143 +180,129 @@
}
});
//监控模糊查询按钮事件
// 监控模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
where: data.field, // 提交表单中的搜索条件
page: {
curr: 1
curr: 1 // 重置到第一页
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监控工具条事件
table.on("toolbar(permissionTable)", function (obj) {
switch (obj.event) {
case 'add':
openAddLayer();
openAddLayer(); // 打开添加弹出层
break;
};
});
//监控行工具条事件
// 监控行工具条事件
table.on("tool(permissionTable)", function (obj) {
//获取当前行数据
var data = obj.data;
var data = obj.data; // 获取当前行数据
switch (obj.event) {
case 'delete':
deletePermission(data);
deletePermission(data); // 删除权限
break;
case 'update':
updatePermission(data);
updatePermission(data); // 更新权限
break;
};
});
var mainIndex;
var url;
var mainIndex; // 弹出层索引
var url; // URL变量
//打开添加弹出层
// 打开添加弹出层
function openAddLayer() {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['670px','400px'],
title:'',
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['670px','400px'], // 宽高设置
title:'', // 标题
success:function () {
$("#dataFrm")[0].reset();
//设置下拉树中父节点的值为空
$("#pid").val("");
url="/permission/addPermission";
//初始化排序码
$("#dataFrm")[0].reset(); // 清空表单数据
$("#pid").val(""); // 设置下拉树中父节点的值为空
url="/permission/addPermission"; // 设置提交URL为添加权限接口
$.get("/permission/loadPermissionMaxOrderNum",function (res) {
$("#ordernum").val(res.value);
$("#ordernum").val(res.value); // 初始化排序码
});
//设置下拉树的value值为空
selectTree.selectVal("");
selectTree.selectVal(""); // 设置下拉树的value值为空
}
});
}
//打开修改的弹出层
// 打开修改的弹出层
function updatePermission(data) {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['670px','400px'],
title:'',
type:1, // 页面层类型
content:$("#addOrUpdateDiv"), // 内容区域选择器
area:['670px','400px'], // 宽高设置
title:'', // 标题
success:function () {
//清空原有的数据
$("#dataFrm")[0].reset();
//装载新的数据
form.val("dataFrm",data);
//选中之前的父级权限 nodeId=data.pid
dtree.dataInit("permissionTree",data.pid);
dtree.selectVal("permissionTree");
url="/permission/updatePermission";
$("#dataFrm")[0].reset(); // 清空表单数据
form.val("dataFrm",data); // 装载新的数据到表单中
dtree.dataInit("permissionTree",data.pid); // 选中之前的父级权限 nodeId=data.pid
dtree.selectVal("permissionTree"); // 选中下拉树的值
url="/permission/updatePermission"; // 设置提交URL为更新权限接口
}
});
}
// 提交表单事件监听
form.on("submit(doSubmit)",function (data) {
$.post(url,data.field,function (res) {
if (res.code==200){
tableIns.reload();
tableIns.reload(); // 重新加载表格数据
}
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示响应消息
layer.close(mainIndex); // 关闭弹出层
});
return false;
return false; // 阻止表单默认提交行为
});
//删除
// 删除权限方法
function deletePermission(data) {
layer.confirm('' + data.title + '', {icon: 3, title: ''}, function (index) {
$.post("/permission/deletePermission", {id: data.id},function (res) {
if (res.code == 200) {
tableIns.reload({
where:"",
});
tableIns.reload({where:""}); // 重新加载表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示响应消息
});
layer.close(index);
layer.close(index); // 关闭确认框
});
}
//初始化下拉树
// 初始化下拉树
var selectTree = dtree.renderSelect({
elem: "#permissionTree",
elem: "#permissionTree", // 绑定下拉树的容器元素ID
width: "100%", // 可以在这里指定树的宽度来填满div
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response:{message:"msg",statusCode:0}, // 修改response中返回数据的定义
url: "/permission/loadPermissionManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
//监听点击的方法
// 监听点击的方法
dtree.on("node(permissionTree)",function (obj) {
$("#pid").val(obj.param.nodeId);
console.log(obj.param.nodeId);
$("#pid").val(obj.param.nodeId); // 将选中的节点ID赋值给隐藏域pid
console.log(obj.param.nodeId); // 打印选中的节点ID到控制台
})
});
//给其它页面刷新当前页面数据表格的方法
// 给其它页面刷新当前页面数据表格的方法
function reloadTable(id) {
tableIns.reload({
where:{
id:id
},
page:{
curr:1
}
where:{id:id}, // 根据ID过滤数据
page:{curr:1} // 重置到第一页
});
}
</script>
</body>

@ -140,204 +140,195 @@
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
// 引入layui的扩展模块并加载所需的组件
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree'
}).use(['jquery', 'form', 'layer', 'laydate', 'table','dtree'], function () {
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var table = layui.table;
var dtree = layui.dtree;
//初始化时间选择器
dtree: '/resources/layui_ext/dtree/dtree' // 引入dtree模块
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'dtree'], function () {
var $ = layui.jquery; // 获取jQuery对象
var form = layui.form; // 获取表单模块
var layer = layui.layer; // 获取弹出层模块
var laydate = layui.laydate; // 获取日期选择器模块
var table = layui.table; // 获取表格模块
var dtree = layui.dtree; // 获取树形结构模块
// 初始化时间选择器
laydate.render({
elem: "#startTime",
type: "datetime"
elem: "#startTime", // 绑定元素ID
type: "datetime" // 设置类型为日期时间
});
laydate.render({
elem: "#endTime",
type: "datetime"
elem: "#endTime", // 绑定元素ID
type: "datetime" // 设置类型为日期时间
});
//初始化表格
// 初始化表格
var tableIns = table.render({
elem: "#roleTable",
title: "角色数据表格",
url: "/role/loadAllRole",
toolbar: "#roleToolBar",
page: true,
height: "full-190",
cols: [ [
{field: 'id', title: 'ID', align: 'center'},
{field: 'name', title: '', align: 'center'},
{field: 'remark', title: '', align: 'center'},
{field: 'available', title: '', align: 'center',templet:function (d) {
return d.available==1?'<font color="blue"></font>':'<font color="red"></font>';
}},
{field: 'createtime', title: '', align: 'center'},
{fixed: 'right', title: '', toolbar: '#roleRowBar', align: 'center',width:280}
] ],
done:function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
if(data.data.length==0&&curr!=1){
elem: "#roleTable", // 绑定元素ID
title: "角色数据表格", // 表格标题
url: "/role/loadAllRole", // 数据接口地址
toolbar: "#roleToolBar", // 工具栏模板选择器
page: true, // 开启分页
height: "full-190", // 设置表格高度
cols: [[ // 定义表头
{field: 'id', title: 'ID', align: 'center'}, // ID列
{field: 'name', title: '', align: 'center'}, // 角色名称列
{field: 'remark', title: '', align: 'center'}, // 角色备注列
{field: 'available', title: '', align: 'center', templet: function (d) {
return d.available == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}}, // 是否可用列
{field: 'createtime', title: '', align: 'center'}, // 创建时间列
{fixed: 'right', title: '', toolbar: '#roleRowBar', align: 'center', width: 280} // 操作列
]],
done: function (data, curr, count) {
// 如果不是第一页且当前返回的数据为空,则返回上一页
if (data.data.length == 0 && curr != 1) {
tableIns.reload({
page:{
curr:curr-1
page: {
curr: curr - 1
}
})
}
}
});
//点击重置按钮时,重置表单的值
// 点击重置按钮时,重置表单的值
$("#resetRole").click(function () {
$("#searchFrm")[0].reset();
$("#searchFrm")[0].reset(); // 重置表单
});
//监控模糊查询按钮事件
// 监控模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
var params = $("#searchFrm").serialize();
var params = $("#searchFrm").serialize(); // 序列化表单数据
tableIns.reload({
// where: data.field,
url:"/role/loadAllRole?"+params,
url: "/role/loadAllRole?" + params, // 拼接URL参数
page: {
curr: 1
curr: 1 // 从第一页开始显示
}
});
return false;
return false; // 阻止表单默认提交行为
});
//监控工具条事件
// 监控工具条事件
table.on("toolbar(roleTable)", function (obj) {
switch (obj.event) {
case 'add':
openAddLayer();
break;
openAddLayer(); // 打开添加弹出层
break;
};
});
//监控行工具条事件
table.on("tool(roleTable)",function (obj) {
//获取当前行数据
var data = obj.data;
switch (obj.event){
// 监控行工具条事件
table.on("tool(roleTable)", function (obj) {
var data = obj.data; // 获取当前行数据
switch (obj.event) {
case 'update':
updateRole(data);
updateRole(data); // 打开修改弹出层
break;
case 'delete':
deleteRole(data);
break;
deleteRole(data); // 删除角色
break;
case 'selectPermission':
selectPermission(data);
break;
selectPermission(data); // 分配权限
break;
};
});
var mainIndex;
var url;
var mainIndex; // 弹出层索引
var url; // URL变量
//打开添加弹出层
// 打开添加弹出层
function openAddLayer() {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','350px'],
title:'',
success:function () {
$("#dataFrm")[0].reset();
url="/role/addRole";
type: 1, // 页面层类型
content: $("#addOrUpdateDiv"), // 内容区域选择器
area: ['800px', '350px'], // 宽高设置
title: '', // 标题
success: function () {
$("#dataFrm")[0].reset(); // 清空表单数据
url = "/role/addRole"; // 设置提交URL
}
});
}
//打开修改弹出层
// 打开修改弹出层
function updateRole(data) {
mainIndex = layer.open({
type:1,
content:$("#addOrUpdateDiv"),
area:['800px','350px'],
title:'',
success:function () {
//清空原有的数据
$("#dataFrm")[0].reset();
//装载新的数据
form.val("dataFrm",data);
url="/role/updateRole";
type: 1, // 页面层类型
content: $("#addOrUpdateDiv"), // 内容区域选择器
area: ['800px', '350px'], // 宽高设置
title: '', // 标题
success: function () {
$("#dataFrm")[0].reset(); // 清空表单数据
form.val("dataFrm", data); // 装载新的数据到表单中
url = "/role/updateRole"; // 设置提交URL
}
});
}
//提交按钮事件
form.on("submit(doSubmit)",function (data) {
$.post(url,data.field,function (res) {
if (res.code==200){
tableIns.reload();
// 提交按钮事件
form.on("submit(doSubmit)", function (data) {
$.post(url, data.field, function (res) {
if (res.code == 200) {
tableIns.reload(); // 重新加载表格数据
}
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示响应消息
layer.close(mainIndex); // 关闭弹出层
});
return false;
return false; // 阻止表单默认提交行为
});
//删除
// 删除角色函数
function deleteRole(data) {
layer.confirm(''+data.name+'',{icon: 3,title:''},function (index) {
$.post("/role/deleteRole",{id:data.id},function (res) {
if (res.code==200){
tableIns.reload({
where:"",
});
layer.confirm('' + data.name + '', {icon: 3, title: ''}, function (index) {
$.post("/role/deleteRole", {id: data.id}, function (res) {
if (res.code == 200) {
tableIns.reload({where: ""}); // 重新加载表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示响应消息
});
layer.close(index);
layer.close(index); // 关闭确认框
});
}
//打开分配权限弹出层
// 打开分配权限弹出层函数
function selectPermission(data) {
mainIndex = layer.open({
type:1,
content:$("#selectRolePermissionDiv"),
area:['400px','580px'],
title:''+data.name+'',
btn: ['<span class=layui-icon>&#xe605;</span>','<span class=layui-icon>&#x1006;</span>'],
btnAlign:'c',
yes: function(index, layero){
var permissionData = dtree.getCheckbarNodesParam("permissionTree");
var params = "rid="+data.id;
console.log(params);
$.each(permissionData,function (index, item) {
params+="&ids="+item.nodeId;
type: 1, // 页面层类型
content: $("#selectRolePermissionDiv"), // 内容区域选择器
area: ['400px', '580px'], // 宽高设置
title: '' + data.name + '', // 标题
btn: ['<span class="layui-icon">&#xe658;</span>', ''], // 按钮配置
btnAlign: 'c', // 按钮对齐方式
yes: function (index, layero) {
var permissionData = dtree.getCheckbarNodesParam("permissionTree"); // 获取选中的节点数据
var params = "rid=" + data.id; // 初始化参数字符串
console.log(params); // 打印参数字符串到控制台(调试用)
$.each(permissionData, function (index, item) {
params += "&nodeId=" + item.nodeId; // 拼接节点ID到参数字符串中
});
$.post("/role/saveRolePermission",params,function (res) {
layer.msg(res.msg);
$.post("/role/saveRolePermission", params, function (res) {
layer.msg(res.msg); // 显示响应消息
});
layer.close(mainIndex);
layer.close(mainIndex); // 关闭弹出层
},
btn2: function(index, layero){
//关闭弹出层
btn2: function (index, layero) {
// 关闭弹出层(取消按钮)
},
success:function () {
//根据角色ID请求权限和菜单tree的json数据
success: function () {
dtree.render({
elem:"#permissionTree",
url:"/role/initPermissionByRoleId?roleId="+data.id,
//使用layUI风格的数据格式
dataStyle:"layuiStyle",
//配置data的风格为list
dataFormat:"list",
//修改response中返回数据的定义
response:{message:"msg",statusCode:0},
checkbar:true,
checkbarType:"all"
elem: "#permissionTree", // 树形结构绑定的元素选择器
url: "/role/initPermissionByRoleId?roleId=" + data.id, // 根据角色ID请求权限数据接口地址
dataformat: "layuiStyle", // 使用layUI风格的数据格式
checkbarType: "all", // 全选复选框类型
response: {message: "msg", statusCode: 0}, // 修改response中返回数据的定义
checkbarNodes: [], // 默认选中的节点数组(此处为空)
});
}
});
}
});
</script>
</body>

@ -52,31 +52,42 @@
<script type="text/javascript" src="/resources/page/user/user.js"></script>
<script type="text/javascript">
layui.use(['jquery','form','layer'],function () {
// 使用layui模块包括jquery、form和layer
layui.use(['jquery', 'form', 'layer'], function () {
// 获取layui的jquery模块
var $ = layui.jquery;
// 获取layui的form模块
var form = layui.form;
// 获取layui的layer模块
var layer = layui.layer;
// 监听表单提交事件当触发changePwd时执行回调函数
form.on("submit(changePwd)", function () {
// 获取用户名输入框的值
var name = $("#name").val();
// 获取旧密码输入框的值
var oldPassword = $("#oldPassword").val();
// 获取新密码第一个输入框的值
var newPwdOne = $("#newPwdOne").val();
// 获取新密码第二个输入框的值
var newPwdTwo = $("#newPwdTwo").val();
form.on("submit(changePwd)",function () {
var name = $("#name").val();
var oldPassword = $("#oldPassword").val();
var newPwdOne = $("#newPwdOne").val();
var newPwdTwo = $("#newPwdTwo").val();
layer.confirm('' + name + '', {icon: 3, title: ''}, function (index) {
$.post('/user/changePassword',{oldPassword:oldPassword,newPwdOne:newPwdOne,newPwdTwo:newPwdTwo},function (res) {
// 弹出确认对话框,询问用户是否确定修改密码
layer.confirm('' + name + '', {icon: 3, title: ''}, function (index) {
// 发送POST请求到服务器尝试修改密码
$.post('/user/changePassword', {oldPassword: oldPassword, newPwdOne: newPwdOne, newPwdTwo: newPwdTwo}, function (res) {
// 显示服务器返回的消息
layer.msg(res.msg);
});
// 关闭确认对话框
layer.close(index);
});
});
return false;
// 阻止表单默认提交行为
return false;
});
});
});
</script>
</body>

@ -126,63 +126,62 @@
<script type="text/javascript">
layui.use(['jquery','upload','form'],function () {
layui.use(['jquery', 'upload', 'form'], function () {
var $ = layui.jquery;
var upload = layui.upload;
var form = layui.form;
//获得当前用户的登陆
// 获取当前用户的登录
var loginname = $("#loginname");
$.get('/user/getNowUser',function (res) {
$.get('/user/getNowUser', function (res) {
// 设置表单中的值
var name = $("#name");
name.val(res.name);
name.val(res.name); // 设置用户名
var id = $(".id");
id.val(res.id);
id.val(res.id); // 设置用户ID
var loginname = $("#loginname");
loginname.val(res.loginname);
loginname.val(res.loginname); // 设置登录名
var remark = $("#remark");
remark.val(res.remark);
remark.val(res.remark); // 设置备注信息
var address = $("#address");
address.val(res.address);
address.val(res.address); // 设置地址
// 显示用户头像
var imgpath = res.imgpath;
$('#userFace').attr('src','/file/showImageByPath?path='+imgpath);
$('#userFace').attr('src', '/file/showImageByPath?path=' + imgpath);
});
//上传头像
// 上传头像功能
upload.render({
elem: '.userFaceBtn',
url: '/file/uploadImage',
acceptMime:'image/*',
field:'mf',
method : "post",
done: function(res, index, upload){
var path=res.path;
$('#userFace').attr('src','/file/showImageByPath?path='+path);
$('.userFace').css("background","#fff");
//给隐藏域赋值
$("#imgpath").val(path);
elem: '.userFaceBtn', // 绑定元素
url: '/file/uploadImage', // 上传接口
acceptMime: 'image/*', // 允许上传的文件类型
field: 'mf', // 文件字段名
method: "post", // 请求方式
done: function (res, index, upload) {
var path = res.path; // 获取返回的图片路径
$('#userFace').attr('src', '/file/showImageByPath?path=' + path); // 更新页面上的头像图片
$('.userFace').css("background", "#fff"); // 修改背景颜色
$("#imgpath").val(path); // 给隐藏域赋值,用于提交表单时携带图片路径
}
});
//提交个人资料
form.on("submit(changeUser)",function(data){
var index = layer.msg('',{icon: 16,time:false,shade:0.8});
// 提交个人资料表单
form.on("submit(changeUser)", function (data) {
var index = layer.msg('', { icon: 16, time: false, shade: 0.8 }); // 显示加载提示
$.post("/user/updateUserInfo", data.field, function (res) {
layer.msg(res.msg);
layer.msg(res.msg); // 显示服务器返回的消息
});
setTimeout(function(){
layer.close(index);
layer.msg("提交成功!");
},2000);
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
})
setTimeout(function () {
layer.close(index); // 关闭加载提示
layer.msg("提交成功!"); // 显示提交成功消息
}, 2000);
return false; // 阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});
</script>
</body>

@ -222,10 +222,10 @@
<script type="text/javascript">
//提升数据表格的作用域因为底下还有一个reloadTable方法
var tableIns;
var tableIns; // 定义表格实例变量
layui.extend({
dtree: '/resources/layui_ext/dtree/dtree'
dtree: '/resources/layui_ext/dtree/dtree' // 扩展模块引入dtree树形组件
}).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit', 'dtree','laydate'], function () {
var $ = layui.jquery;
var form = layui.form;
@ -234,13 +234,13 @@
var dtree = layui.dtree;
var laydate = layui.laydate;
//初始化时间选择器
// 初始化时间选择器
laydate.render({
elem: "#hiredate",
type: "datetime"
});
//初始化表格 加载数据
// 初始化表格并加载数据
tableIns = table.render({
elem: "#userTable",
title: "部门数据表格",
@ -248,7 +248,7 @@
toolbar: "#userToolBar",
page: true,
height: "full-180",
cols: [ [
cols: [[
{field: 'id', title: 'ID', align: 'center', width: '50'},
{field: 'name', title: '', align: 'center', width: '130'},
{field: 'loginname', title: '', align: 'center', width: '130'},
@ -257,24 +257,26 @@
{field: 'remark', title: '', align: 'center', width: '120'},
{field: 'address', title: '', align: 'center', width: '100'},
{field: 'hiredate', title: '', align: 'center', width: '160'},
{field: 'imgpath', title: '', align: 'center', width: '160', templet:function(d){
return '<img width=40 height=40 src=/file/showImageByPath?path='+d.imgpath+ ' />';
}},
{
field: 'sex', title: '', align: 'center', width: '100', templet: function (d) {
return d.sex == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}
field: 'imgpath', title: '', align: 'center', width: '160', templet: function (d) {
return '<img width=40 height=40 src=/file/showImageByPath?path=' + d.imgpath + ' />';
}
},
{
field: 'sex', title: '', align: 'center', width: '100', templet: function (d) {
return d.sex == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}
},
{
field: 'available', title: '', align: 'center', width: '100', templet: function (d) {
return d.available == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}
return d.available == 1 ? '<font color="blue"></font>' : '<font color="red"></font>';
}
},
{field: 'ordernum', title: '', align: 'center', width: '80'},
{fixed: 'right', title: '', toolbar: '#userRowBar', align: 'center', width: '330'}
] ],
]],
done: function (data, curr, count) {
//不是第一页时如果当前返回的数据为0那么就返回上一页
// 如果不是第一页且当前返回的数据为空,则返回上一页
if (data.data.length == 0 && curr != 1) {
tableIns.reload({
page: {
@ -285,7 +287,7 @@
}
});
//监控模糊查询按钮事件
// 监控模糊查询按钮事件
form.on("submit(doSearch)", function (data) {
tableIns.reload({
where: data.field,
@ -296,41 +298,40 @@
return false;
});
//监控工具条事件
// 监控工具条事件
table.on("toolbar(userTable)", function (obj) {
switch (obj.event) {
case 'add':
openAddLayer();
openAddLayer(); // 打开添加弹出层
break;
}
;
});
//监控行工具条事件
// 监控行工具条事件
table.on("tool(userTable)", function (obj) {
//获取当前行数据
var data = obj.data;
var data = obj.data; // 获取当前行数据
switch (obj.event) {
case 'delete':
deleteUser(data);
deleteUser(data); // 删除用户
break;
case 'update':
updateUser(data);
updateUser(data); // 更新用户信息
break;
case 'resetPwd':
resetPwd(data);
resetPwd(data); // 重置密码
break;
case 'selectRole':
selectRole(data);
selectRole(data); // 选择角色
break;
}
;
});
var mainIndex;
var url;
var mainIndex; // 主窗口索引
var url; // URL变量用于存储提交的URL地址
//打开添加弹出层
// 打开添加弹出层函数
function openAddLayer() {
mainIndex = layer.open({
type: 1,
@ -338,23 +339,20 @@
area: ['800px', '550px'],
title: '',
success: function () {
$("#dataFrm")[0].reset();
//设置下拉树中父节点的值为空
$("#deptid").val("");
url = "/user/addUser";
//初始化排序码
$.get("/user/loadUserMaxOrderNum", function (res) {
$("#dataFrm")[0].reset(); // 清空表单数据
$("#deptid").val(""); // 设置下拉树中父节点的值为空
url = "/user/addUser"; // 设置提交的URL地址为添加用户地址
$.get("/user/loadUserMaxOrderNum", function (res) { // 初始化排序码
$("#ordernum").val(res.value);
});
//重新渲染直属领导的下拉列表
var html = "<option value='0'>请选择直属领导</option>";
var html = "<option value='0'>请选择直属领导</option>"; // 重新渲染直属领导的下拉列表
$("#mgr").html(html);
form.render("select");
form.render("select"); // 重新渲染表单元素
}
});
}
//打开修改弹出层
// 打开修改弹出层函数
function updateUser(data) {
mainIndex = layer.open({
type: 1,
@ -362,212 +360,196 @@
area: ['800px', '550px'],
title: '',
success: function () {
//清空原有的数据
$("#dataFrm")[0].reset();
$("#deptid").val("");
//装载新的数据
form.val("dataFrm", data);
//选中之前的所属部门 nodeId=data.deptid
dtree.dataInit("deptTree", data.deptid);
dtree.selectVal("deptTree");
//选中领导部门首先拿到领导的id,如何再去数据库中查询出领导的信息,取出领导的部门
var leaderid = data.mgr;
$.get("/user/loadUserById",{id:leaderid},function (res) {
var d = res.data;
//查询领导的部门ID如何重新加载领导部门的下拉列表
dtree.dataInit("leaderdeptTree",d.deptid);
dtree.selectVal("leaderdeptTree");
//根据部门ID查询当前部门下面的领导列表
$.get("/user/loadUsersByDeptId",{deptid:d.deptid},function (res) {
var users = res.data;
var dom_mgr=$("#mgr");
var html = "<option value=''>请选择直属领导</option>";
$.each(users,function (index, item) {
html+="<option value='"+item.id+"'>"+item.name+"</option>";
$("#dataFrm")[0].reset(); // 清空原有的数据
$("#deptid").val(""); // 清空部门ID输入框
form.val("dataFrm", data); // 装载新的数据到表单中
dtree.dataInit("deptTree", data.deptid); // 选中之前的所属部门 nodeId=data.deptid
dtree.selectVal("deptTree"); // 选中部门树的值
var leaderid = data.mgr; // 选中领导部门首先拿到领导的id,如何再去数据库中查询出领导的信息,取出领导的部门
$.get("/user/loadUserById", {id: leaderid}, function (res) {
var d = res.data; // 查询领导的部门ID如何重新加载领导部门的下拉列表
dtree.dataInit("leaderdeptTree", d.deptid); // 重新加载领导部门树的数据
dtree.selectVal("leaderdeptTree"); // 选中领导部门树的值
$.get("/user/loadUsersByDeptId", {deptid: d.deptid}, function (res) { // 根据部门ID查询当前部门下面的所有领导列表
var users = res.data; // 获取用户列表数据
var dom_mgr = $("#mgr"); // 获取直属领导下拉列表DOM对象
var html = "<option value=''>请选择直属领导</option>"; // 构建下拉列表选项HTML字符串
$.each(users, function (index, item) { // 遍历用户列表,生成下拉列表选项
html += "<option value='" + item.id + "'>" + item.name + "</option>";
});
dom_mgr.html(html);
//选中一个
dom_mgr.val(leaderid);
//重新渲染
form.render("select");
})
dom_mgr.html(html); // 将生成的HTML字符串添加到直属领导下拉列表中
dom_mgr.val(leaderid); // 选中一个选项(即当前用户的直属领导)
form.render("select"); // 重新渲染表单元素
});
});
url = "/user/updateUser";
url = "/user/modifyUser"; // 设置提交的URL地址为修改用户地址
}
});
}
// 提交表单事件处理函数
form.on("submit(doSubmit)", function (data) {
$.post(url, data.field, function (res) {
if (res.code == 200) {
tableIns.reload();
$.post(url, data.field, function (res) { // 发送POST请求到服务器端进行数据提交
if (res.code == 200) { // 如果响应状态码为200表示成功
tableIns.reload(); // 重新加载表格数据
}
layer.msg(res.msg);
layer.close(mainIndex);
layer.msg(res.msg); // 显示响应消息提示框
layer.close(mainIndex); // 关闭当前弹窗
});
return false;
return false; // 阻止表单默认提交行为
});
//删除
// 删除用户函数
function deleteUser(data) {
// 弹出确认框,询问用户是否确定要删除该用户
layer.confirm('' + data.name + '', {icon: 3, title: ''}, function (index) {
//查询该用户是否是其他用户的直属领导,如果是,提示删除失败
// 查询该用户是否是其他用户的直属领导,如果是,提示删除失败
$.get("/user/queryMgrByUserId", {userId: data.id}, function (res) {
if (res.code==-1){
layer.msg(res.msg);
}else {
$.post("/user/deleteUser/"+data.id, function (res) {
if (res.code == -1) {
layer.msg(res.msg); // 如果用户是其他用户的直属领导,显示错误消息
} else {
// 发送POST请求到服务器端进行用户删除操作
$.post("/user/deleteUser/" + data.id, function (res) {
if (res.code == 200) {
tableIns.reload({
where:"",
});
tableIns.reload({where: ""}); // 重新加载表格数据
}
layer.msg(res.msg);
layer.msg(res.msg); // 显示响应消息提示框
});
layer.close(index);
layer.close(index); // 关闭当前弹窗
}
});
});
}
//重置密码
// 重置密码函数
function resetPwd(data) {
layer.confirm('' + data.name + '', {icon: 3, title: ''}, function (index) {
$.post("/user/resetPwd/"+data.id, function (res) {
layer.msg(res.msg);
// 弹出确认框,询问用户是否确定要重置该用户的密码
layer.confirm('' + data.name + '', {
icon: 3,
title: ''
}, function (index) {
// 发送POST请求到服务器端进行密码重置操作
$.post("/user/resetPwd/" + data.id, function (res) {
layer.msg(res.msg); // 显示响应消息提示框
});
layer.close(index);
layer.close(index); // 关闭当前弹窗
});
}
//初始化查询条件的下拉树
// 初始化查询条件的下拉树
var selectTree = dtree.renderSelect({
elem: "#search_deptTree",
width: "100%", // 可以在这里指定树的宽度来填满div
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response: {message: "msg", statusCode: 0}, // 修改response中返回数据的定义
url: "/dept/loadDeptManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
//监听点击的方法
// 监听点击的方法
dtree.on("node(search_deptTree)", function (obj) {
$("#search_deptid").val(obj.param.nodeId);
console.log(obj.param.nodeId);
$("#search_deptid").val(obj.param.nodeId); // 将选中的节点ID赋值给隐藏域
console.log(obj.param.nodeId); // 打印选中的节点ID
});
//初始化添加弹出层所属部门的下拉列表
// 初始化添加弹出层所属部门的下拉列表
var deptTree = dtree.renderSelect({
elem: "#deptTree",
width: "100%", // 可以在这里指定树的宽度来填满div
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response: {message: "msg", statusCode: 0}, // 修改response中返回数据的定义
url: "/dept/loadDeptManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
//监听所属部门点击方法
// 监听所属部门点击方法
dtree.on("node(deptTree)", function (obj) {
//将该部门的id赋值给隐藏域
$("#deptid").val(obj.param.nodeId);
console.log(obj.param.nodeId);
$("#deptid").val(obj.param.nodeId); // 将选中的节点ID赋值给隐藏域
console.log(obj.param.nodeId); // 打印选中的节点ID
});
//初始化添加弹出层领导部门的下拉列表
// 初始化添加弹出层领导部门的下拉列表
var leaderdeptTree = dtree.renderSelect({
elem: "#leaderdeptTree",
width: "100%", // 可以在这里指定树的宽度来填满div
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义
dataStyle: "layuiStyle", // 使用layui风格的数据格式
dataFormat: "list", // 配置data的风格为list
response: {message: "msg", statusCode: 0}, // 修改response中返回数据的定义
url: "/dept/loadDeptManagerLeftTreeJson" // 使用url加载可与data加载同时存在
});
//监听点击的方法
// 监听点击的方法
dtree.on("node(leaderdeptTree)", function (obj) {
var deptId = obj.param.nodeId;
//根据部门ID查询当前部门下面的领导列表
$.get("/user/loadUsersByDeptId",{deptId:deptId},function (res) {
var users = res.data;
var dom_mgr=$("#mgr");
var html = "<option value=''>请选择直属领导</option>";
$.each(users,function (index, item) {
html+="<option value='"+item.id+"'>"+item.name+"</option>";
var deptId = obj.param.nodeId; // 获取选中的节点ID
// 根据部门ID查询当前部门下面的领导列表
$.get("/user/loadUsersByDeptId", {deptId: deptId}, function (res) {
var users = res.data; // 获取领导列表数据
var dom_mgr = $("#mgr"); // 获取直属领导选择框的DOM对象
var html = "<option value=''>请选择直属领导</option>"; // 初始化选项HTML字符串
$.each(users, function (index, item) {
html += "<option value='" + item.id + "'>" + item.name + "</option>"; // 拼接每个领导的选项HTML字符串
});
dom_mgr.html(html);
//重新渲染
form.render("select");
})
dom_mgr.html(html); // 将拼接好的选项HTML字符串添加到直属领导选择框中
form.render("select"); // 重新渲染直属领导选择框
});
});
//监听用户名失去焦点事件
$("#username").on("blur",function () {
var username = $(this).val();
$.get("/user/changeChineseToPinyin",{username:username},function (res) {
$("#loginname").val(res.value);
})
// 监听用户名失去焦点事件
$("#username").on("blur", function () {
var username = $(this).val(); // 获取输入的用户名
// 将中文用户名转换为拼音并设置到登录名输入框中
$.get("/user/changeChineseToPinyin", {username: username}, function (res) {
$("#loginname").val(res.value); // 设置转换后的拼音到登录名输入框中
});
});
//打开分配角色的弹出层
// 打开分配角色的弹出层
function selectRole(data) {
mainIndex = layer.open({
type:1,
content:$("#selectUserRoleDiv"),
area:['650px','400px'],
title:'给'+data.name+'',
btn: ['<span class=layui-icon>&#xe605;</span>','<span class=layui-icon>&#x1006;</span>'],
btnAlign:'c',
yes: function(index, layero){
var checkStatus = table.checkStatus('roleTable');
var params = "uid="+data.id;
$.each(checkStatus.data,function (index, item) {
params+="&ids="+item.id;
type: 1,
content: $("#selectUserRoleDiv"),
area: ['650px', '400px'],
title: '给' + data.name + '',
btn: ['<span class=layui-icon>&#xe605;</span>', '<span class=layui-icon>&#x1006;</span>'],
btnAlign: 'c',
yes: function (index, layero) {
var checkStatus = table.checkStatus('roleTable'); // 获取角色表格的选择状态
var params = "uid=" + data.id; // 初始化参数字符串包含用户ID
$.each(checkStatus.data, function (index, item) {
params += "&ids=" + item.id; // 拼接选中的角色ID到参数字符串中
});
// 发送POST请求到服务器端进行角色分配操作
$.post("/user/saveUserRole", params, function (res) {
layer.msg(res.msg); // 显示响应消息提示框
layer.close(mainIndex); // 关闭当前弹窗
});
$.post("/user/saveUserRole",params,function (res) {
layer.msg(res.msg);
layer.close(mainIndex);
})
},
btn2: function(index, layero){
//关闭弹出层
btn2: function (index, layero) {
// 关闭弹出层,无需额外操作
},
success:function () {
initRoleTable(data);
success: function () {
initRoleTable(data); // 初始化角色列表表格
}
});
}
var roleTableIns;
//初始化角色列表
var roleTableIns; // 定义角色列表表格实例变量
// 初始化角色列表表格
function initRoleTable(data) {
console.log(data);
console.log(data); // 打印传入的数据对象
roleTableIns = table.render({
elem:'#roleTable',
url:'/user/initRoleByUserId',
//将用户id传到后台去
where:{
id:data.id
},
cols:[ [
{type:'checkbox',align:'center'},
{field:'id',title:'ID',align:'center'},
{field:'name',title:'',align:'center'},
{field:'remark',title:'',align:'center'}
] ]
elem: '#roleTable', // 绑定表格元素
url: '/user/initRoleByUserId', // 设置表格数据源URL
where: {id: data.id}, // 将用户ID作为参数传递到后台
cols: [[ // 定义表格列配置
{type: 'checkbox', align: 'center'}, // 复选框列,居中对齐
{field: 'id', title: 'ID', align: 'center'}, // ID列居中对齐
{field: 'name', title: '', align: 'center'}, // 角色名称列,居中对齐
{field: 'remark', title: '', align: 'center'} // 角色备注列,居中对齐
]]
});
}
});
</script>

Loading…
Cancel
Save