<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@include file="/common/head.jsp" %>
</head>
<style>
.layui-tab-title>li:first-child>i{
display:none;
}
.layui-tab>.layui-tab-content{
padding:0px;
}
body,html{
padding:0px;
margin:0px;
overflow:hidden;
}
.layui-body{
background: url(images/壁纸03.jpg) ;
}
</style>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header ">
<div class="layui-logo layui-hide-xs layui-bg-black">会议OA管理系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
</ul>
<!-- 个人头像及账号操作 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="${ctx }/images/壁纸3.png" class="layui-nav-img">
${sessionScope.user.name }
</a>
<dl class="layui-nav-child">
<dd><a href="#">个人中心</a></dd>
<dd><a href="#">系统设置</a></dd>
<dd><a href="#" id="logout">安全退出</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul id="menu" class="layui-nav layui-nav-tree">
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-tab" lay-filter="tabs" lay-allowClose="true" style="margin:0px;">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<!-- <i class="bi bi-balloon-heart">欢迎来到瑶大头工作室</i> -->
<!-- <img alt="" src="/images/壁纸3.png"> -->
</div>
</div>
</div>
</div>
<div class="layui-footer" style="text-align:center;">
<!-- 底部固定区域 -->
Copyright @ 2008-2022 www.zking.com
</div>
</div>
<script>
//JS
var element, $, layer, util;
layui.use(['element', 'layer', 'util', 'jquery'], function(){
element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
//动态生成菜单
$.ajax({
url: ctx+"/permissionAction.action?methodName=listPermission",
type: "get",
dataType: 'json',
success:function(resp) {
//循环生成菜单
$.each(resp.data, function(index, val) {
//默认打开第一个菜单，layui-nav-itemed样式为打开菜单样式
let selected = index == 0 ? 'layui-nav-itemed' : '';
let li = $('<li class="layui-nav-item ' + selected + '"></li>');
//一级菜单
li.append('<a class="" href="javascript:;"><i class="layui-icon '
+ val.icon
+ '" style="font-size:16px;margin-right:10px;"></i>'
+ val.name + '</a>');
//如果有子菜单，则生成子菜单
let chidren=val.children;
let dl = $('<dl class="layui-nav-child"></dl>');
$.each(chidren, function(i, n) {
//dl.append('<dd style="margin-left:40px;">'+n.name+'</dd>');
//添加菜单点击事件
dl.append('<dd style="margin-left:40px;"><a href="javascript:openFuncTab(\''+n.name+'\', \''+n.url+'\', \''+n.id+'\');">'+n.name+'</a></dd>');
});
li.append(dl);
//将生成的菜单挂载到menu容器
$("#menu").append(li);
});
//动态的生成菜单后，调用render方法进行重新渲染，可以使用init()方法进行初始化达到同样的效果
element.render('menu');
}
});
//安全退出
$("#logout").click(function() {
layer.confirm('亲，你舍得走吗？', {icon: 3, title:'提示'}, function(index) {
$.ajax({
url: ctx+"/userAction.action?methodName=logout",
type: 'get',
dataType: "json",
success: function(resp) {
if(resp.code == 1) {
layer.msg("安全退出");
location.href="login.jsp";
}
}
});
});
});
});
//动态打开TAB页
function openFuncTab(name, url,id) {
let exit = $("li[lay-id='"+id+"']").length;
debugger;
//如果不存在对应的TAB则动态生成
if(exit == 0) {
//注意此处的tabs，要与TAB页容器的lay-filter="tabs"报错保持一致
element.tabAdd('tabs', {
title: name,
//在TAB页中打开指定的页面
content: '<iframe id="myiframe" frameborder="0" src="' + url+ '" scrolling="auto" style="width:100%;height:100%;"></iframe>',
id: id
});
}
//将点击的功能设置为当前TAB
element.tabChange('tabs', id);
setIframHeight();
//添加页面尺寸变化的监听事件
$(window).resize(function() {
setIframHeight();
})
}
//解决页面的自适应高度问题
function setIframHeight() {
let h = $('.layui-body').height() - 40;
$('#myiframe').css("height", h+"px");
}
</script>
</body>
</html>
