整体效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c08d237e1ec28e56c182d27a3fc3e87a.png)
所需界面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a070b7e01757d13b601c6de20fe809b2.png)
main.html界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<style>
.layui-tab-content {
padding: 0;
}
.show-frame {
top: 50px!important;
overflow: hidden;
}
.frame {
position: absolute;
padding: 10px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">医院分诊后台管理系统</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item" lay-unselect="">
<a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">模块管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" name="t1" id="1" title="科室管理" content="hospital-department.html">科室管理</a></dd>
<dd><a href="javascript:;" >文章列表</a></dd>
<dd><a href="javascript:;" >类别管理</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body show-frame">
<div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="empTab">
<ul class="layui-tab-title">
<li class="layui-this "><i class="layui-icon"></i></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show"><h1 style="color: #5FB878">欢迎登录医院分诊后台管理系统</h1></div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('element', function(){
var element = layui.element;
var $ = layui.$;
$("[name=t1]").click(function () {
var id = $(this).attr("id");
var content = $(this).attr("content");
if($("li[lay-id="+id+"]").length==0){
element.tabAdd("empTab",{
title:$(this).attr("title"),
content:"<iframe src='"+content+"' class='frame' frameborder='0'></iframe>",
id:id
})
}
element.tabChange('empTab',id)
})
});
</script>
</body>
</body>
</html>
hospital-department界面代码(参考代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>科室管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-form">
<lable class="layui-form-label">科室名</lable>
<div class="layui-inline">
<input class="layui-input" id="searchName" type="text">
</div>
<button type="button" class="layui-btn" id="searchAnything">
<i class="layui-icon"></i>
</button>
</div>
<table id="department" lay-filter="departmentTable">
</table>
<!---------------------添加科室表格 start------------------------------->
<form class="layui-form" id="addDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="insertFilter">
<div class="layui-form-item">
<label class="layui-form-label">科室名称</label>
<div class="layui-input-inline">
<input type="text" name="name" placeholder="请输入科室名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">科室电话</label>
<div class="layui-input-inline">
<input type="text" name="telephone" placeholder="输入科室电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">科室位置</label>
<div class="layui-input-inline">
<input type="text" name="area" placeholder="输入科室所在位置" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!---------------------添加文章表格 end------------------------------->
<!---------------------修改文章表格 start------------------------------->
<form class="layui-form" id="updateDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="updateFilter">
<div class="layui-form-item">
<label class="layui-form-label">科室名称</label>
<div class="layui-input-inline">
<input type="hidden" name="id"/>
<input type="text" name="name" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">科室电话</label>
<div class="layui-input-inline">
<input type="text" name="telephone" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">科室所在区域</label>
<div class="layui-input-inline">
<input type="text" name="area" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!---------------------修改文章表格 end------------------------------->
<!--===============添加、批量删除工具条 start===================-->
<script type="text/html" id="toolbar2">
<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteMany">批量删除</a>
</script>
<!--===============添加、批量删除工具条 end ===================-->
<!--===============删除、修改工具条 start===================-->
<script type="text/html" id="toolbar1">
<a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<!--===============删除、修改工具条 end ===================-->
<script>
layui.use(["form","layer","table"],function () {
var form = layui.form;
var layer = layui.layer;
var table = layui.table;
var $ = layui.$;
table.render({
elem:"#department",
limit:5,
limits:[5,10,15],
url:"department/select.do",
page:true,
toolbar:"#toolbar2",
cols:[[
{type:"checkbox"},
{field:"id",title:"科室编号"},
{field:"name",title:"科室名称"},
{field:"telephone",title:"科室电话"},
{field:"area",title:"科室所在区域"},
{title:"操作",toolbar:'#toolbar1'}
]]
});
$("#searchAnything").click(function () {
table.reload('department',{
where:{
name:$("#searchName").val(),
},
page:{
curr:1
}
})
})
table.on('toolbar(departmentTable)',function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
console.log(obj.config.id)
if(obj.event =='add'){
layer.open({
type:1,
content:$("#addDepartment"),
area:["400px","350px"],
title:'添加科室'
})
}else if(obj.event == 'deleteMany'){
var array = checkStatus.data;
if(array.length == 0){
layer.msg("请至少选择一个复选框",{icon:5,time:2000});
return;
}
layer.confirm("检查一下别错删哦!",{icon:6},function () {
var ids = [];
for(var i=0;i<array.length;i++){
ids.push(array[i].id);
}
$.ajax({
url:"department/deleteMany.do",
data:"ids="+ids,
dataType:"json",
success:function (data) {
if(data.isDelete){
layer.msg("删除成功",{icon:6,time:2000});
table.reload('department')
}else{
layer.msg("删除失败",{icon:5,time:2000});
}
}
})
})
}
})
table.on('tool(departmentTable)',function (obj) {
if(obj.event =='update'){
$.ajax({
url:"department/selectOne.do",
data:"id="+obj.data.id,
dataType:"json",
success:function (data) {
form.val('updateFilter',{
id:data.id,
name:data.name,
telephone:data.telephone,
area:data.area,
})
}
})
layer.open({
type:1,
content:$("#updateDepartment"),
area:["400px","350px"],
title:'修改'
})
}else if(obj.event == 'delete'){
layer.confirm("确定要删除吗?",{icon:5},function (index) {
var id = obj.data.id;
$.ajax({
url:"department/delete.do",
dataType:"json",
data:"id="+id,
success:function (data) {
if(data.isDelete){
layer.msg("删除成功",{icon:1,time:2000});
table.reload('department');
}
}
})
})
}
})
form.on('submit(addSubmit)',function () {
$.ajax({
type:"post",
url:"department/insert.do",
data:$("#addDepartment").serialize(),
success:function (data) {
if(data.isAdd){
$("#addDepartment")[0].reset();
layer.confirm("添加成功,要退出添加界面吗?",{icon: 1},function (index) {
layer.closeAll();
})
table.reload('department')
}
},
dateType:"json"
});
return false;
});
form.on('submit(updateSubmit)',function () {
$.ajax({
type:"post",
url:"department/update.do",
data:$("#updateDepartment").serialize(),
success:function (data) {
console.log(data)
if(data.isUpdate){
layer.confirm("修改成功,要退出修改界面吗?",{icon: 1},function (index) {
layer.closeAll();
})
table.reload('department')
}
},
dateType:"json"
});
return false;
});
})
</script>
</body>
</html>