p76jblgzq
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

html注释

Browse Source
main
CFF 4 months ago
parent da72c6601b
commit 102b9f04fa
13 changed files with 934 additions and 658 deletions
Show Stats Download Patch File Download Diff File

143
src/main/resources/static/index.html
Unescape View File

@ -1,78 +1,93 @@
<!-- 酒店管理系统的登录页面 前端结构-->
<!DOCTYPE html>
<html>
<head>
<title>酒店管理系统</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<title>酒店管理系统</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
</head>
<!--页面最外层容器，container-fluid 使容器占满屏幕宽度；main 是自定义类-->
<body>
<div class="container-fluid main" id="main" style="padding: 0">
<nav class="navbar navbar-default">
<div class="container-fluid nav-con">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="padding-top: 2rem;color: #EDEDED">
<span style="font-size: 2.3rem;padding-right: 2rem;letter-spacing: 2px">酒店管理系统</span>
</a>
</div>
</div>
</nav>
<div class="col-md-7 col-xs-1"></div>
<div class="col-md-3 col-xs-10 logindiv">
<div class="login-h">
<h3 class="loginh">
登录
</h3>
</div>
<form class="form-horizontal login-f">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Username</label>
<div class="col-md-12 col-xs-12">
<input type="text" class="form-control forminput" id="inputName" placeholder="账号 Account">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-md-12 col-xs-12">
<input type="password" class="form-control forminput" id="inputPassword" placeholder="密码 Password">
<nav class="navbar navbar-default">
<!--顶部系统标识栏-->
<div class="container-fluid nav-con">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="padding-top: 2rem;color: #EDEDED">
<span style="font-size: 2.3rem;padding-right: 2rem;letter-spacing: 2px">酒店管理系统</span>
</a>
</div>
</div>
</div>
<div class="form-group">
<label for="inputCode" class="col-sm-2 control-label">Code</label>
<div class="col-md-8 col-xs-7">
<input type="text" class="form-control forminput inputcode" id="inputCode" placeholder="验证码 code">
</nav>
<!-- 登录框布局（左侧留白 + 右侧登录框）-->
<div class="col-md-7 col-xs-1"></div>
<div class="col-md-3 col-xs-10 logindiv">
<!--登录框顶部标题区：
login-h/loginh：自定义类（控制标题位置，如居中、底部边框、间距）；
标题 “登录” 明确功能，引导用户操作-->
<div class="login-h">
<h3 class="loginh">
登录
</h3>
</div>
<div class="col-md-4 col-xs-5" style="padding-left:0">
<img class="code" id="code" src=" ">
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<button type="button" id="loginBtn" class="form-control btn loginbtn" style="transition: all 0.6s;" >登 录</button>
</div>
</form>
</div>
</div>
<!--：登录表单容器-->
<form class="form-horizontal login-f">
<!--收集用户登录账号-->
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Username</label>
<div class="col-md-12 col-xs-12">
<input type="text" class="form-control forminput" id="inputName" placeholder="账号 Account">
</div>
</div>
<!--收集用户登录密码-->
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-md-12 col-xs-12">
<input type="password" class="form-control forminput" id="inputPassword" placeholder="密码 Password">
</div>
</div>
<!--收集验证码，防止自动化登录：
左侧输入框（col-md-8 col-xs-7）：id="inputCode" 用于输入验证码；
右侧图片区（col-md-4 col-xs-5）：id="code" 是验证码图片容器，src=" " 初始为空，后续通过 JS 从后端加载验证码图片；
inputcode/code：自定义类（控制验证码输入框宽度、图片尺寸）。-->
<div class="form-group">
<label for="inputCode" class="col-sm-2 control-label">Code</label>
<div class="col-md-8 col-xs-7">
<input type="text" class="form-control forminput inputcode" id="inputCode" placeholder="验证码 code">
</div>
<div class="col-md-4 col-xs-5" style="padding-left:0">
<img class="code" id="code" src=" ">
</div>
</div>
<div class="form-group">
</div>
<!--提交登录请求-->
<div class="form-group">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<button type="button" id="loginBtn" class="form-control btn loginbtn" style="transition: all 0.6s;" >登 录</button>
</div>
</form>
</div>
</div>
</div>
<!--页面底部版权与辅助链接区-->
<footer class="bs-docs-footer">
<div class="col-md-12">
<p>
<a href="#">关于本站</a>
<a href="#">廉正举报</a>
<a href="#">开放平台</a>
<a href="#">诚征英才</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a><br/><br/>
<em>Copyright © 2018 西安工业大学 All Rights Reserved</em>
</p>
<div class="col-md-12">
<p>
<a href="#">关于本站</a>
<a href="#">廉正举报</a>
<a href="#">开放平台</a>
<a href="#">诚征英才</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a><br/><br/>
<em>Copyright © 2018 西安工业大学 All Rights Reserved</em>
</p>
</div>
</div>
</footer>
@ -80,5 +95,5 @@
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/index.js"></script><!--登录页面自定义脚本-->

328
src/main/resources/static/js/staff_cleaner.js
Unescape View File

@ -2,192 +2,202 @@ var pageNum=1;
var pageSize=8;
var l;
/ 页面DOM加载完成后执行初始化操作
$(document).ready(function(){
getStaffList();
$("#pre").on('click',function(){
getPre();
});
$("#next").on('click',function(){
getNext();
});
$("#addUserBtn").on('click',function(){
addUser();
})
getStaffList();
$("#pre").on('click',function(){
getPre();
});
$("#next").on('click',function(){
getNext();
});
$("#addUserBtn").on('click',function(){
addUser();
})
})
//判断对象/JSON是否为空 空返回1 非空返回0
function isEmptyObject(e) {
var t;
for (t in e)
return 0;
return 1;
var t;
for (t in e)
return 0;
return 1;
}
//判断字符串是否为空 空返回1 非空返回0
function isEmptyString(str){
if(str=='null'||str=='')
return 1;
return 0;
if(str=='null'||str=='')
return 1;
return 0;
}
// 全局变量：存储清洁工列表数据
var list;
// 从后端获取清洁工列表并展示
function getStaffList(){
$.ajax({
type:"post",
url:"../user/getUserByPower.do",
dataType:"JSON",
data:{
"pageNum":pageNum,
"pageSize":pageSize,
"power":"3"
},
success:function(data){
if(data.code){
if(isEmptyObject(data.List)&&pageNum>0){
pageNum=pageNum-1;
getStaffList();
}
else{
var power=" ";
var htmlStr=" ";
var btnStr=" ";
list=data.List;
l=0;
$("#pre").css("display","block");
$("#next").css("display","block");
$("#staffList").empty();
$("#staffList").append("<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>")
for(i in list){
btnStr="<input type=\"button\" id=\"delUser\" data-userid=\""+list[i].userid+"\" class=\"btn btn-danger\" value=\"删除\"/>"
htmlStr="<tr data-userid=\""+list[i].userid+"\"><td>"+list[i].useraccount+"</td><td>"+list[i].idnumber+"</td><td>"+list[i].username+"</td><td>"+list[i].age+"</td><td>"+"清洁工"+"</td><td>"+list[i].phonenumber+"</td><td>"+btnStr+"</td></tr>";
$("#staffList").append(htmlStr);
//console.log(htmlStr);
l++;
}
if(pageNum=="1") $("#pre").css("display","none");
if(pageSize>l) $("#next").css("display","none");
btnOn();
}
}
else{
alert("获取员工列表失败");
var power=" ";
var htmlStr=" ";
var btnStr=" ";
list=data.List;
l=0;
$("#pre").css("display","block");
$("#next").css("display","block");
$("#staffList").empty();
$("#staffList").append("<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>")
for(i in list){
btnStr="<input type=\"button\" id=\"delUser\" data-userid=\""+list[i].userid+"\" class=\"btn btn-danger\" value=\"删除\"/>"
htmlStr="<tr data-userid=\""+list[i].userid+"\"><td>"+list[i].useraccount+"</td><td>"+list[i].idnumber+"</td><td>"+list[i].username+"</td><td>"+list[i].age+"</td><td>"+"清洁工"+"</td><td>"+list[i].phonenumber+"</td><td>"+btnStr+"</td></tr>";
$("#staffList").append(htmlStr);
//console.log(htmlStr);
l++;
}
if(pageNum=="1") $("#pre").css("display","none");
if(pageSize>l) $("#next").css("display","none");
btnOn();
}
},
error:function(){
alert("获取员工列表发生错误")
}
})
$.ajax({
type:"post",
url:"../user/getUserByPower.do",
dataType:"JSON",
data:{
"pageNum":pageNum,
"pageSize":pageSize,
"power":"3"
},
// 请求成功的回调函数
success:function(data){
if(data.code){
if(isEmptyObject(data.List)&&pageNum>0){
pageNum=pageNum-1;
getStaffList();
}
else{
var power=" ";
var htmlStr=" ";
var btnStr=" ";
list=data.List;
l=0;// 重置当前页记录数
// 默认显示上一页、下一页按钮
$("#pre").css("display","block");
$("#next").css("display","block");
$("#staffList").empty();
$("#staffList").append("<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>")
// 遍历清洁工列表，生成表格内容
for(i in list){
btnStr="<input type=\"button\" id=\"delUser\" data-userid=\""+list[i].userid+"\" class=\"btn btn-danger\" value=\"删除\"/>"
htmlStr="<tr data-userid=\""+list[i].userid+"\"><td>"+list[i].useraccount+"</td><td>"+list[i].idnumber+"</td><td>"+list[i].username+"</td><td>"+list[i].age+"</td><td>"+"清洁工"+"</td><td>"+list[i].phonenumber+"</td><td>"+btnStr+"</td></tr>";
$("#staffList").append(htmlStr);
//console.log(htmlStr);
l++;
}
if(pageNum=="1") $("#pre").css("display","none");
if(pageSize>l) $("#next").css("display","none");
// 绑定操作按钮的点击事件
btnOn();
}
}
else{
// 后端返回失败状态，仍尝试渲染列表（兼容处理）
alert("获取员工列表失败");
var power=" ";
var htmlStr=" ";
var btnStr=" ";
list=data.List;
l=0;
$("#pre").css("display","block");
$("#next").css("display","block");
$("#staffList").empty();
$("#staffList").append("<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>")
for(i in list){
btnStr="<input type=\"button\" id=\"delUser\" data-userid=\""+list[i].userid+"\" class=\"btn btn-danger\" value=\"删除\"/>"
htmlStr="<tr data-userid=\""+list[i].userid+"\"><td>"+list[i].useraccount+"</td><td>"+list[i].idnumber+"</td><td>"+list[i].username+"</td><td>"+list[i].age+"</td><td>"+"清洁工"+"</td><td>"+list[i].phonenumber+"</td><td>"+btnStr+"</td></tr>";
$("#staffList").append(htmlStr);
//console.log(htmlStr);
l++;
}
if(pageNum=="1") $("#pre").css("display","none");
if(pageSize>l) $("#next").css("display","none");
btnOn();
}
},
error:function(){
alert("获取员工列表发生错误")
}
})
}
// 绑定操作按钮的点击事件
function btnOn(){
$("input").filter("#delUser").on('click',function(event){
delUser(event);
});
$("input").filter("#setPageBtn").on('click',function( ){
setPage( );
})
// 给"删除清洁工"按钮绑定点击事件，触发删除逻辑
$("input").filter("#delUser").on('click',function(event){
delUser(event);
});
// 给"跳转页码"按钮绑定点击事件，触发页码跳转
$("input").filter("#setPageBtn").on('click',function( ){
setPage( );
})
}
// 加载上一页数据
function getPre(){
pageNum=pageNum-1;
getStaffList();
pageNum=pageNum-1; // 页码减1
getStaffList();
}
// 加载下一页数据
function getNext(){
pageNum=pageNum+1;
getStaffList();
pageNum=pageNum+1;
getStaffList();
}
// 跳转到指定页码
function setPage(){
if($("#inputPage").val()<0 || $("#inputPage").val()==0)
alert("请输入正确页码");
else{
pageNum=$("#inputPage").val();
getStaffList();
}
}
if($("#inputPage").val()<0 || $("#inputPage").val()==0)
alert("请输入正确页码");
else{
pageNum=$("#inputPage").val();
getStaffList();
}
}
// 删除清洁工
function delUser(event){
var userid=$(event.target).data("userid");
$.ajax({
type:"POST",
url:"../user/delUser.do",
dataType:"JSON",
data:{
"userid":userid
},
success:function(data){
if(data.code==0){
alert("删除成功");
if(l==1)
pageNum=pageNum-1;
getStaffList();
}
else
alert("删除失败")
},
error:function(){
alert("删除出现错误");
}
})
var userid=$(event.target).data("userid");
$.ajax({
type:"POST",
url:"../user/delUser.do",
dataType:"JSON",
data:{
"userid":userid
},
success:function(data){
if(data.code==0){
alert("删除成功");
if(l==1)
pageNum=pageNum-1;
getStaffList();
}
else
alert("删除失败")
},
error:function(){
alert("删除出现错误");
}
})
}
// 添加新清洁工
function addUser(){
if(isEmptyString($("#inputAccount").val())||isEmptyString($("#inputPwd").val()))
alert("请填写全内容");
else{
$.ajax({
type:"POST",
url:"../user/addUser.do",
dataType:"JSON",
data:{
"useraccount":$("#inputAccount").val(),
"password":$("#inputPwd").val(),
"power":"3"
},
success:function(data){
if(data.code==0){
alert("添加成功");
$('#addUser').modal('toggle');
$("#inputAccount").val("");
$("#inputPwd").val("")
getStaffList();
}
else
alert("添加失败")
},
error:function(){
alert("添加用户出现错误");
}
})
}
if(isEmptyString($("#inputAccount").val())||isEmptyString($("#inputPwd").val()))
alert("请填写全内容");
else{
$.ajax({
type:"POST",
url:"../user/addUser.do",
dataType:"JSON",
data:{
"useraccount":$("#inputAccount").val(),// 清洁工账号
"password":$("#inputPwd").val(), // 清洁工密码
"power":"3" // 权限设置：3表示清洁工
},
success:function(data){
if(data.code==0){
alert("添加成功");
$('#addUser').modal('toggle');
$("#inputAccount").val("");
$("#inputPwd").val("")
// 重新加载列表展示新添加的清洁工
getStaffList();
}
else
alert("添加失败")
},
error:function(){
alert("添加用户出现错误");
}
})
}
}

84
src/main/resources/static/pages/ad_manage.html
Unescape View File

@ -1,42 +1,74 @@
<!--员工信息管理页面前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<!--指定页面的字符编码为 utf-8，确保中文、特殊符号等能正常显示-->
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<!--适配移动端设备，控制页面在移动屏幕上的显示效果：
width=device-width：让页面宽度等于设备屏幕宽度；
initial-scale=1：初始缩放比例为 1（无缩放）；
maximum-scale=1：禁止用户放大页面，保证移动端布局稳定。-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--引入 Bootstrap 框架的压缩版样式表，用于快速实现响应式布局（如表格、表单样式），避免重复编写基础 CSS。-->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<!--引入自定义样式表 myCenter.css 和 pages.css，用于覆盖或补充 Bootstrap 样式-->
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<body>
<!--定义员工列表的外层容器，使用 Bootstrap 栅格类和自定义样式控制布局：
col-md-11：在中等屏幕（≥992px）下占 11 列（Bootstrap 栅格共 12 列，留 1 列空白）；
col-xs-11：在超小屏幕（<768px）下占 11 列，适配移动端；
nopadding：自定义类（前文 CSS 定义），清除左右内边距；
内联样式 padding-top:3rem：顶部内边距 3rem，与上方导航栏 / 页头拉开距离；
内联样式 padding-left: 3rem：左侧内边距 3rem，避免内容贴左边缘。-->
<div class="col-md-11 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
<!--Bootstrap 内置类，让表格在小屏幕下可横向滚动-->
<div class="table-responsive">
<!--定义员工列表表格，通过类和属性控制样式与标识：
table：Bootstrap 基础表格样式（默认边框、间距）；
table-bordered：为表格添加所有单元格的边框；
table-hover：鼠标悬停在表格行上时，行背景色变化；
内联样式 margin-top: 10px：顶部外边距 10px，与上方元素拉开微小距离；
id="staffList"：给表格设置唯一 ID，方便后续 JavaScript 操作。-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<!--定义表格的表头行（<tr> 为表格行，<th> 为表头单元格）-->
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
</table>
<!--Bootstrap 栅格类，让分页控件在中等及以上屏幕下占 12 列（全屏宽度）-->
<div class="col-md-12">
<!--Bootstrap 行内表单类 form-inline，让表单元素（如下一页链接）横向排列-->
<form class="form-inline">
<!--定义 “上一页” 分页按钮：
form-group：Bootstrap 表单组类，用于统一表单元素的间距和样式；
内联样式 margin-right: 10xp（疑似笔误，应为 10px）：右侧外边距 10px，与 “下一页” 拉开距离；
<a href="#">：空链接（默认不跳转），后续通过 JavaScript 绑定 “上一页” 点击事件；
id="pre"：唯一 ID，方便 JS 定位并添加分页逻辑。-->
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<!--定义 “下一页” 分页按钮，与 “上一页” 对称：
内联样式 margin-left: 10px：左侧外边距 10px，与 “上一页”（或注释的跳转功能）拉开距离；
id="next"：唯一 ID，方便 JS 绑定 “下一页” 点击事件。-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</div>
<!--结束分页表单和外层容器标签。-->
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/ad_manage.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script><!--入 jQuery 框架的压缩版，用于简化 DOM 操作（获取表格、发送 AJAX 请求（加载员工数据），是 Bootstrap JS 组件的依赖。-->
<script type="text/javascript" src="../js/bootstrap.min.js"></script><!--引入 Bootstrap 框架的 JS 组件，用于激活 Bootstrap 样式的交互功能-->
<script type="text/javascript" src="../js/ad_manage.js"></script><!--引入自定义的员工管理脚本-->

1
src/main/resources/static/pages/ad_order.html
Unescape View File

@ -1,3 +1,4 @@
<!--订单管理页面的前端结构-->
<!DOCTYPE html>
<html>
<head>

151
src/main/resources/static/pages/ad_salary.html
Unescape View File

@ -1,63 +1,101 @@
<!--员工薪资配置管理页面的前端结构，-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<!--指定页面的字符编码为 utf-8，确保中文、特殊符号等能正常显示-->
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<!--适配移动端设备，控制页面在移动屏幕上的显示效果：
width=device-width：让页面宽度等于设备屏幕宽度；
initial-scale=1：初始缩放比例为 1（无缩放）；
maximum-scale=1：禁止用户放大页面，保证移动端布局稳定。-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--引入 Bootstrap 框架的压缩版样式表，用于快速实现响应式布局（如表格、表单样式），避免重复编写基础 CSS。-->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<!--引入自定义样式表 myCenter.css 和 pages.css，用于覆盖或补充 Bootstrap 样式-->
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<!--定义页面主容器，基于 Bootstrap 栅格系统实现响应式布局：
col-md-6：中等屏幕（≥992px）下占 6 列（总 12 列），宽度为页面一半；
col-xs-11：超小屏幕（<768px）下占 11 列，左右留少量空白；
nopadding：自定义类（清除左右内边距）；
内联样式 padding-top:3rem：顶部内边距 3rem，与页头 / 导航栏拉开距离；
内联样式 padding-left: 3rem：左侧内边距 3rem，避免内容贴左边缘。-->
<body>
<div class="col-md-6 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive" id="showConfigDiv">
<a href="#" id="showConfig" style="font-size:1.7rem">
<span class="glyphicon glyphicon-pencil"></span>
<span>更改配置</span>
</a>
<table class="table table-bordered table-hover" style="margin-top: 10px" id="configList">
<tr><th style="width: 100px">职位</th><th>底薪</th><th>提成</th></tr>
</table>
</div>
<div class="table-responsive" id="alterConfigDiv" style="display: none">
<a href="#" id="alterConfig" style="font-size:1.7rem">
<span class="glyphicon glyphicon-pencil"></span>
<span>返回</span>
</a>
<table class="table table-bordered table-hover" style="margin-top: 10px">
<tr><th style="width: 100px">职位</th><th>底薪</th><th>提成</th></tr>
<tr>
<th>经理</th>
<th>
<input type="text" class="form-control" id="inputMS">
</th>
<th>
<input type="text" class="form-control" id="inputM">
</th>
</tr>
<tr>
<th>员工</th>
<th>
<input type="text" class="form-control" id="inputSS">
</th>
<th>
<input type="text" class="form-control" id="inputS">
</th>
</tr>
<tr>
<th>清洁工</th>
<th>
<input type="text" class="form-control" id="inputCS">
</th>
<th>
<input type="text" class="form-control" id="inputC">
</th>
</tr>
</table>
<input style="float: right" type="button" id="alterConfigBtn" class="btn btn-success" value="确定"/>
</div>
<!--“查看配置” 状态的容器，table-responsive 确保表格在小屏幕可横向滚动；id="showConfigDiv" 用于 JS 控制显示 / 隐藏。-->
<div class="table-responsive" id="showConfigDiv">
<!--“切换到编辑模式” 的按钮：
glyphicon glyphicon-pencil：Bootstrap 图标（铅笔图标，暗示编辑功能）；
文本 “更改配置” 明确功能；
id="showConfig"：JS 绑定点击事件，用于切换到编辑状态。-->
<a href="#" id="showConfig" style="font-size:1.7rem">
<span class="glyphicon glyphicon-pencil"></span>
<span>更改配置</span>
</a>
<!--展示薪资配置的表格（查看模式）：
table table-bordered table-hover：Bootstrap 表格样式（带边框、悬停高亮）；
表头包含 “职位”“底薪”“提成” 三列；
id="configList"：JS 动态填充数据（从后端加载当前配置）。-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="configList">
<tr><th style="width: 100px">职位</th><th>底薪</th><th>提成</th></tr>
</table>
</div>
<!--结束 “查看配置” 区域容器。-->
<!--“编辑配置” 状态的容器，默认通过 display: none 隐藏；id="alterConfigDiv" 用于 JS 控制显示 / 隐藏。-->
<div class="table-responsive" id="alterConfigDiv" style="display: none">
<!-- “返回查看模式” 的按钮：
图标与 “更改配置” 一致，文本改为 “返回”；
id="alterConfig"：JS 绑定点击事件，用于切换回查看状态。-->
<a href="#" id="alterConfig" style="font-size:1.7rem">
<span class="glyphicon glyphicon-pencil"></span>
<span>返回</span>
</a>
<!--编辑模式的表格，表头与查看模式一致，确保布局统一。-->
<table class="table table-bordered table-hover" style="margin-top: 10px">
<tr><th style="width: 100px">职位</th><th>底薪</th><th>提成</th></tr>
<!--经理职位的薪资编辑行：
input 输入框：用于修改底薪（id="inputMS"）和提成（id="inputM"）；
form-control：Bootstrap 输入框样式，确保美观和响应式。-->
<tr>
<th>经理</th>
<th>
<input type="text" class="form-control" id="inputMS">
</th>
<th>
<input type="text" class="form-control" id="inputM">
</th>
</tr>
<!--员工职位的薪资编辑行，id="inputSS"（员工底薪）、id="inputS"（员工提成）。-->
<tr>
<th>员工</th>
<th>
<input type="text" class="form-control" id="inputSS">
</th>
<th>
<input type="text" class="form-control" id="inputS">
</th>
</tr>
<!--清洁工职位的薪资编辑行，id="inputCS"（清洁工底薪）、id="inputC"（清洁工提成）；结束表格标签。-->
<tr>
<th>清洁工</th>
<th>
<input type="text" class="form-control" id="inputCS">
</th>
<th>
<input type="text" class="form-control" id="inputC">
</th>
</tr>
</table>
<!--提交修改的按钮：
float: right：右对齐，符合操作习惯；
btn btn-success：Bootstrap 成功样式按钮（绿色）；
id="alterConfigBtn"：JS 绑定点击事件，用于提交修改后的薪资配置。-->
<input style="float: right" type="button" id="alterConfigBtn" class="btn btn-success" value="确定"/>
</div>
<!--结束 “编辑配置” 区域容器。-->
</div>
@ -68,6 +106,11 @@
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script><!--结束 “编辑配置” 区域容器。-->
<script type="text/javascript" src="../js/bootstrap.min.js"></script><!--引入 Bootstrap JS 组件，激活图标、按钮等交互样式（确保 glyphicon 图标正常显示）。-->
<script type="text/javascript" src="../js/ad_salary.js"></script>
<!--自定义薪资配置脚本，核心逻辑包括：
页面加载时，向 configList 表格填充当前薪资配置数据；
绑定 showConfig 点击事件，隐藏查看区域、显示编辑区域，并向输入框填充当前值；
绑定 alterConfig 点击事件，隐藏编辑区域、显示查看区域；
绑定 alterConfigBtn 点击事件，获取输入框值并提交到后端保存，成功后更新查看区域数据。-->

64
src/main/resources/static/pages/all_infor.html
Unescape View File

@ -1,3 +1,4 @@
<!--用户信息管理页面的前端结构-->
<!DOCTYPE html>
<html>
<head>
@ -11,24 +12,42 @@
</head>
<body>
<!--页面最外层容器，占满整行（col-md-12/col-xs-12），padding-top:4rem 与页头拉开距离，nopadding 清除默认内边距。-->
<div class="col-md-12 col-xs-12 nopadding" style="padding-top:4rem;">
<!--左侧头像容器，响应式布局：
col-md-3：中等屏幕占 3 列（宽度 25%）；
col-xs-4：超小屏幕占 4 列（宽度～33%）；
margin-bottom:10px：底部外边距，避免内容拥挤。-->
<div class="col-md-3 col-xs-4 nopadding" style="margin-bottom:10px">
<!--显示用户头像，id="userpic" 用于 JS 动态设置头像图片路径，class="userpic" 关联自定义样式（如大小、边框）。-->
<img id="userpic" class="userpic" src=" "/>
<!--“修改头像” 按钮：
data-toggle="modal" data-target="#changePic"：Bootstrap 模态框触发属性，点击打开 id="changePic" 的弹窗；
glyphicon glyphicon-pencil：铅笔图标，暗示编辑功能；-->
<div class="col-md-12 col-xs-12 username">
<a href="#" data-toggle="modal" data-target="#changePic">
<span class="glyphicon glyphicon-pencil"></span>
<span>修改头像</span>
</a>
</div>
<!--结束左侧头像区域容器。-->
</div>
<!--右侧信息容器，与左侧头像形成左右布局：
col-md-6：中等屏幕占 6 列（宽度 50%）；
col-xs-8：超小屏幕占 8 列（宽度～67%）；
border-left:1px solid gray：左侧灰色边框，分隔头像与信息区域；
padding-left: 20px：左侧内边距，避免内容贴边框。-->
<div class="col-md-6 col-xs-8 nopadding" style="border-left:1px solid gray;padding-left: 20px">
<!--“查看信息” 模式的容器，display: block 默认显示，id="showInfodiv" 用于 JS 控制显示 / 隐藏。-->
<div class="col-md-12 col-xs-12" style="font-size: 1.5rem;margin-bottom: 10px;display: block" id="showInfodiv">
<!--“切换到编辑模式” 的按钮，id="showInfo" 绑定 JS 事件，点击后显示编辑视图。-->
<a href="#" id="showInfo">
<span class="glyphicon glyphicon-pencil"></span>
<span>修改信息</span>
</a>
<!--账号信息行：
id="account"：显示账号（用户名），JS 动态填充；
嵌套 “修改密码” 链接，通过 data-target="#changePwd" 打开密码修改弹窗。-->
<div class="fdata">
<p>
<span>账号 Account ：</span>
@ -39,8 +58,7 @@
</a>
</p>
</div>
<!--工号信息行，id="idnum" 用于 JS 填充工号数据。-->
<div class="fdata">
<p>
<span>工号 ID ：</span>
@ -65,6 +83,7 @@
<span class="value" id="commission"></span>
</p>
</div>
<!--年龄（id="age"）和手机号（id="phone"）信息行，JS 动态填充数据；结束 “查看信息” 视图容器。-->
<div class="fdata">
<p>
<span>年龄 Age ：</span>
@ -78,17 +97,24 @@
</p>
</div>
</div>
<!--“编辑信息” 模式的容器，display: none 默认隐藏，id="showAlterdiv" 用于 JS 控制显示 / 隐藏。-->
<div class="col-md-12 col-xs-12" style="font-size:1.5rem;margin-bottom: 10px;display: none" id="showAlterdiv">
<!--“返回查看模式” 的按钮，id="showAlter" 绑定 JS 事件，点击后隐藏编辑视图。-->
<a href="#" id="showAlter">
<span class="glyphicon glyphicon-chevron-left"></span>
<span>返回</span>
</a>
<!--编辑表单，form-inline 使表单项横向排列（小屏幕自动堆叠），margin-top: 10px 与 “返回” 按钮拉开距离。-->
<form class="form-inline" style="margin-top: 10px">
<!--姓名编辑项：
form-group：Bootstrap 表单组样式；
alterinfo：自定义类，控制编辑项样式；
input 输入框 id="inputName"：用于输入新姓名，JS 会预先填充当前姓名。-->
<div class="form-group alterinfo col-xs-12 col-md-12">姓名：
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="inputName">
</div>
<!--年龄（id="inputAge"）和手机号（id="inputPhone"）编辑项，逻辑同姓名项。-->
<div class="form-group alterinfo col-xs-12 col-md-12">年龄：
<label for="age">Age</label>
<input type="text" name="age" class="form-control" id="inputAge">
@ -97,6 +123,7 @@
<label for="phone">Phone</label>
<input type="text" name="phone" class="form-control" id="inputPhone">
</div>
<!--“确认修改” 按钮，id="alterInfoBtn" 绑定 JS 事件，点击后提交编辑的信息；结束编辑表单和视图容器。-->
<div class="form-group alterinfo col-xs-12 col-md-12">
<input type="button" id="alterInfoBtn" class="btn btn-success" value="确定"/>
</div>
@ -109,20 +136,25 @@
</div>
</body>
<!--：结束右侧信息区域和页面最外层容器。-->
<!--头像修改弹窗，modal fade 是 Bootstrap 模态框基础样式（带淡入淡出动画），id="changePic" 用于触发显示。-->
<div class="modal fade" id="changePic" tabindex="-1" role="dialog">
<!--弹窗头部：关闭按钮（data-dismiss="modal" 内置关闭功能）；标题 “修改头像”。-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">修改头像</h4>
</div>
<!--弹窗主体内的 JS 函数 saveReport()：
使用 jquery-form 插件的 ajaxSubmit 异步提交表单（避免页面刷新）；
根据后端返回的 data.code 判断成功 / 失败，显示提示并刷新页面。-->
<div class="modal-body">
<script type="text/javascript">
function saveReport(){
$("#uploadProfile").ajaxSubmit(function(data){
console.log(data);
if(data.code==0)
alert("修改头像成功!");
@ -134,7 +166,14 @@
//必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
}
</script>
<!--头像上传表单：
action="../upFile/upFilePhoto.do"：后端处理头像上传的接口；
enctype="multipart/form-data"：支持文件上传的表单编码类型；
onsubmit="return saveReport()"：提交时执行 saveReport() 函数。-->
<form action="../upFile/upFilePhoto.do" method="post" enctype="multipart/form-data" onsubmit="return saveReport()" id="uploadProfile">
<!--隐藏的 userid 输入框：传递当前用户 ID（后端用于关联头像）；type="file" 输入框：用于选择本地图片文件；
“修改头像” 提交按钮：触发表单提交；
结束头像弹窗标签。-->
<input type="text" name="userid" class="form-control" id="inputNone" style="display: none;">文件大小1M以内
<input id="inputFile" name="file" class="btn-file-molding" type="file"><br/>
<input type="submit" id="alterProfile" class="btn btn-success" value="修改头像"/>
@ -144,7 +183,7 @@
</div>
</div>
</div>
<!--密码修改弹窗头部，结构同头像弹窗，标题为 “修改密码”。-->
<div class="modal fade" id="changePwd" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
@ -152,11 +191,13 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">修改密码</h4>
</div>
<!--原密码输入项，type="password" 隐藏输入内容，id="inputoldPwd" 用于 JS 获取值。-->
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">请输入原密码：
<label for="oldPwd">oldPwd</label>
<input type="password" name="oldPwd" class="form-control" id="inputoldPwd">
</div>
<!--新密码和确认密码输入项，id="inputnewPwd" 和 id="inputrenewPwd" 用于 JS 验证两次输入是否一致。-->
<div class="form-group alterinfo">请输入新密码：
<label for="newPwd">newPwd</label>
<input type="password" name="newPwd" class="form-control" id="inputnewPwd">
@ -165,6 +206,7 @@
<label for="renewPwd">newPwd</label>
<input type="password" name="renewPwd" class="form-control" id="inputrenewPwd">
</div>
<!--“确认修改密码” 按钮，id="alterPwdBtn" 绑定 JS 事件（验证密码格式、一致性后提交后端）；结束密码弹窗标签。-->
<div class="form-group alterinfo">
<input type="button" id="alterPwdBtn" class="btn btn-success" value="确定"/>
</div>
@ -174,7 +216,7 @@
</div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-form.js"></script>
<script type="text/javascript" src="../js/all_infor.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script><!--引入 jQuery 框架，简化 DOM 操作（如切换视图、获取输入值、绑定事件）。-->
<script type="text/javascript" src="../js/bootstrap.min.js"></script><!--引入 Bootstrap JS 组件，激活模态框、图标等交互功能（确保弹窗正常显示 / 隐藏）。-->
<script type="text/javascript" src="../js/jquery-form.js"></script><!--引入 jQuery Form 插件，提供 ajaxSubmit 方法实现表单异步提交（用于头像上传）-->
<script type="text/javascript" src="../js/all_infor.js"></script><!--自定义用户信息管理脚本-->

77
src/main/resources/static/pages/cleaner_room.html
Unescape View File

@ -1,35 +1,60 @@
<!--清洁工视角的房间管理页面 前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<!--指定页面的字符编码为 utf-8，确保中文、特殊符号等能正常显示-->
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<!--适配移动端设备，控制页面在移动屏幕上的显示效果：
width=device-width：让页面宽度等于设备屏幕宽度；
initial-scale=1：初始缩放比例为 1（无缩放）；
maximum-scale=1：禁止用户放大页面，保证移动端布局稳定。-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--引入 Bootstrap 框架的压缩版样式表，用于快速实现响应式布局（如表格、表单样式），避免重复编写基础 CSS。-->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<!--引入自定义样式表 myCenter.css 和 pages.css，用于覆盖或补充 Bootstrap 样式-->
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<!--定义页面主容器，基于 Bootstrap 栅格系统实现响应式布局：
col-md-8：中等屏幕（≥992px）下占 8 列（总 12 列），宽度约为页面 2/3；
col-xs-11：超小屏幕（<768px）下占 11 列，左右留少量空白；
nopadding：自定义类，清除容器默认左右内边距；
内联样式 padding-top:3rem：顶部内边距 3rem，与上方导航栏 / 页头拉开距离；
内联样式 padding-left: 3rem：左侧内边距 3rem，避免列表贴左边缘。-->
<body>
<div class="col-md-8 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<tr><th>位置</th><th>价格</th><th>状态</th><th>类型</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
<!--Bootstrap 内置类，让表格在小屏幕下可横向滚动（避免房间信息列过多导致溢出，保证移动端可读性）。-->
<div class="table-responsive">
<!--定义房间列表表格，通过类和属性控制样式与标识：
table：Bootstrap 基础表格样式（默认间距、轻量边框）；
table-bordered：为所有单元格添加完整边框，清晰分隔行列；
table-hover：鼠标悬停在表格行上时背景色变化，提升交互体验；
内联样式 margin-top: 10px：顶部外边距 10px，与容器顶部轻微拉开距离；
id="roomList"：唯一 ID，方便后续 JavaScript 动态填充房间数据（如从后端加载房间列表）。-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<!--定义表格表头行（<tr> 为行，<th> 为表头单元格），包含 5 个核心房间字段-->
<tr><th>位置</th><th>价格</th><th>状态</th><th>类型</th><th>操作</th></tr>
<!--Bootstrap 栅格类，让分页控件在中等及以上屏幕下占 12 列（全屏宽度），确保分页居中显示，与表格宽度匹配。-->
</table>
<div class="col-md-12">
<!--Bootstrap 行内表单类 form-inline，让分页元素（上一页、下一页链接）横向排列，节省空间且布局紧凑，避免分页区域占用过多垂直空间。-->
<form class="form-inline">
<!--定义 “上一页” 按钮，用于加载前一页房间数据-->
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<!--定义 “下一页” 按钮-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
@ -38,7 +63,7 @@
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/cleaner_room.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script><!--引入 jQuery 框架，用于简化 DOM 操作（如获取表格 / 分页元素、绑定点击事件）、发送 AJAX 请求（如从后端加载房间数据、提交状态修改），是后续交互逻辑的基础依赖。-->
<script type="text/javascript" src="../js/bootstrap.min.js"></script><!--引入 Bootstrap JS 组件，激活 Bootstrap 样式的交互效果（如表格悬停、表单布局适配），确保页面视觉与交互一致性。-->
<script type="text/javascript" src="../js/cleaner_room.js"></script><!--引入清洁工房间管理的自定义脚本-->

217
src/main/resources/static/pages/manage_room.html
Unescape View File

@ -1,114 +1,151 @@
<!-- 管理员视角的房间管理页面 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<!--定义页面主容器，基于 Bootstrap 栅格系统实现响应式布局：
col-md-10：中等屏幕（≥992px）下占 10 列（总 12 列），留出两侧空白；
col-xs-11：超小屏幕（<768px）下占 11 列，左右留少量空白；
nopadding：自定义类，清除容器默认左右内边距；
内联样式 padding-top:3rem：顶部内边距 3rem，与上方导航栏 / 页头拉开距离；
内联样式 padding-left: 3rem：左侧内边距 3rem，避免列表贴左边缘。-->
<body>
<div class="col-md-10 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addRoom" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加房间</span>
</a>
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<tr><th style="width:100px">位置</th><th style="width:100px">价格</th><th style="width:100px">状态</th><th style="width:100px">类型</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
<!--Bootstrap 内置类，让表格在小屏幕下可横向滚动（避免房间信息列过多导致溢出，保证移动端可读性）。-->
<div class="table-responsive">
<!--触发 “添加房间” 弹窗的按钮：
data-toggle="modal" data-target="#addRoom"：Bootstrap 模态框触发属性，点击打开 id="addRoom" 的弹窗；
font-size:1.7rem：按钮文字放大，突出 “添加” 核心操作；
glyphicon glyphicon-pencil：铅笔图标，暗示 “编辑 / 新增” 功能；
文本 “添加房间” 明确功能，符合管理员操作场景。-->
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addRoom" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加房间</span>
</a>
<!--定义房间列表表格，通过类和属性控制样式与标识：
table：Bootstrap 基础表格样式；
table-bordered：为所有单元格添加边框，清晰分隔行列；
table-hover：鼠标悬停行时背景色变化，提升交互体验；
内联样式 margin-top: 10px：顶部外边距 10px，与 “添加房间” 按钮拉开距离；
id="roomList"：唯一 ID，方便后续 JS 动态填充房间数据（如从后端加载列表）。-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<!--定义表头行，5 列均设置固定宽度 100px（除 “操作” 列）-->
<tr><th style="width:100px">位置</th><th style="width:100px">价格</th><th style="width:100px">状态</th><th style="width:100px">类型</th><th>操作</th></tr>
<!--实现分页查看房间列表：form-inline：让分页元素横向排列；
id="pre"/id="next"：“上一页”“下一页” 链接，后续 JS 绑定分页数据加载事件-->
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</body>
<!--结束表格容器和页面主容器。-->
<!--添加房间” 弹窗-->
<!--弹窗头部：modal fade：Bootstrap 弹窗基础样式 + 淡入淡出动画；
关闭按钮：data-dismiss="modal" 内置关闭功能；
标题 “添加房间” 明确弹窗用途。-->
<div class="modal fade" id="addRoom" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加房间</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">请输入位置：
<label for="inputLocal">inputPrice</label>
<input type="text" name="inputLocal" class="form-control" id="inputLocal">
</div>
<div class="form-group alterinfo">请输入价格：
<label for="inputPrice">inputPrice</label>
<input type="text" name="inputPrice" class="form-control" id="inputPrice">
</div>
<div class="form-group alterinfo">请选择类型：
<select class="form-control" id="inputType">
<option value="1">单人间</option>
<option value="2">双人间</option>
<option value="3">大床房</option>
<option value="4">套房</option>
</select>
</div>
<div class="form-group alterinfo">
<input type="button" id="addRoomBtn" class="btn btn-success" value="确定"/>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加房间</h4>
</div>
<!--“房间位置” 输入项：form-group alterinfo：控制表单组样式（间距、对齐）-->
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">请输入位置：
<label for="inputLocal">inputPrice</label>
<input type="text" name="inputLocal" class="form-control" id="inputLocal">
</div>
<!--“房间价格” 输入项，id="inputPrice" 用于 JS 获取价格值。-->
<div class="form-group alterinfo">请输入价格：
<label for="inputPrice">inputPrice</label>
<input type="text" name="inputPrice" class="form-control" id="inputPrice">
</div>
<!--“房间类型” 下拉选择框：选项值 1-4 对应不同房型，便于后端存储；id="inputType"：JS 获取选中的类型值。-->
<div class="form-group alterinfo">请选择类型：
<select class="form-control" id="inputType">
<option value="1">单人间</option>
<option value="2">双人间</option>
<option value="3">大床房</option>
<option value="4">套房</option>
</select>
</div>
<!--“确认添加” 按钮：
btn btn-success：Bootstrap 绿色成功样式按钮；
id="addRoomBtn"：JS 绑定点击事件，提交新增房间数据。-->
<div class="form-group alterinfo">
<input type="button" id="addRoomBtn" class="btn btn-success" value="确定"/>
</div>
</div>
</div>
</div>
</div>
</div>
<!--弹窗头部，标题为 “修改房间”，结构同 “添加房间” 弹窗。-->
<div class="modal fade" id="alterRoom" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">修改房间</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo" style="display:none">
<input type="text" class="form-control" id="reinputid">
</div>
<div class="form-group alterinfo">请输入位置：
<label for="reinputLocal">inputPrice</label>
<input type="text" name="reinputLocal" class="form-control" id="reinputLocal">
</div>
<div class="form-group alterinfo">请输入价格：
<label for="reinputPrice">inputPrice</label>
<input type="text" name="reinputPrice" class="form-control" id="reinputPrice">
</div>
<div class="form-group alterinfo">请选择类型：
<select class="form-control" id="reinputType">
<option value="1">单人间</option>
<option value="2">双人间</option>
<option value="3">大床房</option>
<option value="4">套房</option>
</select>
</div>
<div class="form-group alterinfo">
<input type="button" id="setRoomBtn" class="btn btn-success" value="确定"/>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">修改房间</h4>
</div>
<!--隐藏的 “房间 ID” 输入框：
display:none 隐藏，不显示给用户；
id="reinputid"：存储待修改房间的 ID（后端需通过 ID 定位房间），JS 预先填充。-->
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo" style="display:none">
<input type="text" class="form-control" id="reinputid">
</div>
<!--：“位置”“价格”“类型” 输入项，id 前缀为 reinput（区别于 “添加” 弹窗），JS 会预先填充待修改房间的当前值。-->
<div class="form-group alterinfo">请输入位置：
<label for="reinputLocal">inputPrice</label>
<input type="text" name="reinputLocal" class="form-control" id="reinputLocal">
</div>
<div class="form-group alterinfo">请输入价格：
<label for="reinputPrice">inputPrice</label>
<input type="text" name="reinputPrice" class="form-control" id="reinputPrice">
</div>
<div class="form-group alterinfo">请选择类型：
<select class="form-control" id="reinputType">
<option value="1">单人间</option>
<option value="2">双人间</option>
<option value="3">大床房</option>
<option value="4">套房</option>
</select>
</div>
<!--“确认修改” 按钮，id="setRoomBtn" 绑定 JS 事件，提交修改后的房间数据。-->
<div class="form-group alterinfo">
<input type="button" id="setRoomBtn" class="btn btn-success" value="确定"/>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/manage_room.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script><!--引入 jQuery 框架，简化 DOM 操作（如获取输入值、绑定事件、发送 AJAX 请求）。-->
<script type="text/javascript" src="../js/bootstrap.min.js"></script><!--引入 Bootstrap JS 组件，激活弹窗的显示 / 隐藏、动画等交互效果。-->
<script type="text/javascript" src="../js/manage_room.js"></script><!--自定义房间管理脚本-->

118
src/main/resources/static/pages/manage_staff.html
Unescape View File

@ -1,70 +1,90 @@
<!-- 管理员视角的员工管理页面前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<!--定义页面主容器，基于 Bootstrap 栅格系统实现响应式布局：
col-md-11：中等屏幕（≥992px）下占 11 列（总 12 列），左右留少量空白；
col-xs-11：超小屏幕（<768px）下占 11 列，布局与中等屏幕一致；
nopadding：自定义类，清除容器默认左右内边距；
内联样式 padding-top:3rem：顶部内边距 3rem，与上方导航栏 / 页头拉开距离；
内联样式 padding-left: 3rem：左侧内边距 3rem，避免列表贴左边缘。-->
<body>
<div class="col-md-11 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addUser" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加员工</span>
</a>
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
<div class="table-responsive">
<!--触发 “添加员工” 弹窗的按钮：
data-toggle="modal" data-target="#addUser"：Bootstrap 模态框触发属性，点击打开 id="addUser" 的弹窗-->
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addUser" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加员工</span>
</a>
<!--定义员工列表表格-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
<!--实现分页查看员工列表：
form-inline：让分页元素横向排列；
id="pre"/id="next"：“上一页”“下一页” 链接，后续 JS 绑定分页数据加载事件-->
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</body>
<!--定义 “添加员工” 弹窗，modal fade 是 Bootstrap 模态框基础样式（带淡入淡出动画），id="addUser" 用于触发显示。-->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加员工</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">请输入账号：
<label for="newAcc">newAcc</label>
<input type="text" name="newAcc" class="form-control" id="inputAccount">
</div>
<div class="form-group alterinfo">请输入密码：
<label for="newPwd">newPwd</label>
<input type="text" name="newPwd" class="form-control" id="inputPwd">
</div>
<div class="form-group alterinfo">
<input type="button" id="addUserBtn" class="btn btn-success" value="确定"/>
</div>
</div>
<!--弹窗头部：关闭按钮：data-dismiss="modal" 是 Bootstrap 内置属性，点击关闭弹窗-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加员工</h4>
</div>
<!--弹窗主体区域，width: 80%;padding-left:20% 让表单居中显示，避免内容贴左边缘。-->
<div class="modal-body" style="width: 80%;padding-left:20%">
<!--“员工账号” 输入项：form-group alterinfo：控制表单组样式（间距、对齐）；
label 文本为 “newAcc”（提示该字段含义）；
id="inputAccount"：输入框唯一标识，JS 后续获取账号值。-->
<div class="form-group alterinfo">请输入账号：
<label for="newAcc">newAcc</label>
<input type="text" name="newAcc" class="form-control" id="inputAccount">
</div>
<!--“员工密码” 输入项-->
<div class="form-group alterinfo">请输入密码：
<label for="newPwd">newPwd</label>
<input type="text" name="newPwd" class="form-control" id="inputPwd">
</div>
<!--“确认添加” 按钮：btn btn-success：Bootstrap 绿色成功样式按钮，提示操作正向性；
id="addUserBtn"：JS 绑定点击事件，验证并提交新增员工数据（账号、密码）。-->
<div class="form-group alterinfo">
<input type="button" id="addUserBtn" class="btn btn-success" value="确定"/>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/manage_staff.js"></script>
<script type="text/javascript" src="../js/manage_staff.js"></script><!--自定义员工管理脚本-->

94
src/main/resources/static/pages/myCenter.html
Unescape View File

@ -1,50 +1,74 @@
<!-- 酒店管理系统的主框架页面-->
<!DOCTYPE html>
<html>
<head>
<title>酒店管理系统</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/footer.css">
<title>酒店管理系统</title>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/footer.css">
</head>
<!--定义系统顶部导航栏，navbar navbar-default 是 Bootstrap 导航栏基础样式，后续通过自定义样式覆盖默认外观。-->
<body>
<nav class="navbar navbar-default">
<div class="container-fluid nav-con">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="padding-top: 2rem;color: white">
<span style="font-size: 2.3rem;padding-right: 2rem;letter-spacing: 2px">酒店管理系统</span>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="navli"><a href="#">欢迎！</a></li>
<li class="navli"><a href="../index.html">退出</a></li>
</ul>
<!--导航栏容器，container-fluid 使导航栏占满屏幕宽度；nav-con 是自定义类（可能控制导航栏内边距，如大屏下左右留白）。-->
<div class="container-fluid nav-con">
<!--移动端 “汉堡按钮”（折叠导航触发器）：navbar-toggle collapsed：Bootstrap 折叠按钮样式，默认折叠状态；
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"：点击时展开 / 折叠目标导航菜单；
3 个 icon-bar 组成汉堡图标，适配移动端小屏幕。-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--导航栏品牌标识（系统名称）：navbar-brand：Bootstrap 品牌样式，通常放 logo 或系统名；
内联样式 padding-top: 2rem 调整名称垂直位置，color: white 设为白色（配合导航栏深色背景）；
文字放大（2.3rem）+ 字符间距（2px），突出系统名称。-->
<a class="navbar-brand" href="#" style="padding-top: 2rem;color: white">
<span style="font-size: 2.3rem;padding-right: 2rem;letter-spacing: 2px">酒店管理系统</span>
</a>
</div>
<!--导航栏右侧菜单：collapse navbar-collapse：与汉堡按钮联动，控制菜单展开 / 折叠；
navbar-right：菜单右对齐；
navli：自定义类（控制菜单项间距，如右侧留白）；
“欢迎！”：后续可通过 JS 动态填充当前登录用户（如 “欢迎！管理员”）；
“退出”：点击跳转至登录页（../index.html），实现退出登录。-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="navli"><a href="#">欢迎！</a></li>
<li class="navli"><a href="../index.html">退出</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--主内容区外层容器，col-md-12 占满整行，main 是自定义类，nopadding 清除默认内边距。-->
<div class="col-md-12 main nopadding">
<div class="col-md-2 navlist nopadding">
<div class="list-group" id="tagList">
</div>
<!--左侧功能导航栏：
col-md-2：中等屏幕下占 2 列（总 12 列），宽度约 1/6，为右侧内容区留空间；
navlist：自定义类（控制导航栏样式，如深色背景、最小高度）；
list-group：Bootstrap 列表组样式，用于渲染导航项；
id="tagList"：空容器，后续通过 JS 动态填充系统模块（如 “员工管理”“房间管理”“订单管理”），实现导航项的灵活加载。-->
<div class="col-md-2 navlist nopadding">
<div class="list-group" id="tagList">
</div>
</div>
<div class="col-md-10 nopadding">
<iframe frameborder="0" id="mainFrame" class="mainFrame" name="mainFrame" src=""></iframe>
</div>
</div>
<!--右侧内容展示区，通过 iframe 加载具体功能页面：
col-md-10：中等屏幕下占 10 列，与左侧 col-md-2 合计 12 列，填满主内容区；
iframe：嵌入式框架，用于加载外部页面（无需刷新主框架）；
frameborder="0"：隐藏 iframe 边框，避免视觉割裂；
id="mainFrame"/name="mainFrame"：标识 iframe，方便 JS 控制跳转（如点击左侧导航，更新 iframe 的 src 加载对应页面）；
mainFrame：自定义类（控制 iframe 尺寸，如 width:100%; min-height:60rem，确保填满右侧区域）；
src=""：初始为空，后续通过 JS 设置默认加载页面-->
<div class="col-md-10 nopadding">
<iframe frameborder="0" id="mainFrame" class="mainFrame" name="mainFrame" src=""></iframe>
</div>
</div>
<!--
@ -68,4 +92,4 @@
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/myCenter.js"></script>
<script type="text/javascript" src="../js/myCenter.js"></script><!--自定义主框架脚本-->

108
src/main/resources/static/pages/staff_cleaner.html
Unescape View File

@ -1,70 +1,80 @@
<!-- 清洁工专项管理页面 的前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<!--定义页面主容器-->
<body>
<div class="col-md-11 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addUser" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加清洁工</span>
</a>
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
<div class="table-responsive">
<!--触发 “添加清洁工” 弹窗的核心操作按钮-->
<a href="#" style="font-size:1.7rem" data-toggle="modal" data-target="#addUser" >
<span class="glyphicon glyphicon-pencil"></span>
<span>添加清洁工</span>
</a>
<!--展示清洁工信息的核心表格-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="staffList">
<tr><th>账号</th><th>员工号</th><th>姓名</th><th>年龄</th><th>职位</th><th>联系方式</th><th>操作</th></tr>
<!--实现清洁工列表的分页查看-->
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</body>
<!--定义 “添加清洁工” 的弹窗-->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加清洁工</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">请输入账号：
<label for="newAcc">newAcc</label>
<input type="text" name="newAcc" class="form-control" id="inputAccount">
</div>
<div class="form-group alterinfo">请输入密码：
<label for="newPwd">newPwd</label>
<input type="text" name="newPwd" class="form-control" id="inputPwd">
</div>
<div class="form-group alterinfo">
<input type="button" id="addUserBtn" class="btn btn-success" value="确定"/>
</div>
</div>
<!--弹窗头部区域，包含关闭按钮和标题：关闭按钮：data-dismiss="modal" 是 Bootstrap 内置属性，点击后直接关闭弹窗；&times; 是 “×” 符号，直观表示关闭功能；
标题 “添加清洁工”：明确弹窗用途，与按钮文字呼应-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">添加清洁工</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<!--“清洁工账号” 输入项-->
<div class="form-group alterinfo">请输入账号：
<label for="newAcc">newAcc</label>
<input type="text" name="newAcc" class="form-control" id="inputAccount">
</div>
<!--“清洁工密码” 输入项-->
<div class="form-group alterinfo">请输入密码：
<label for="newPwd">newPwd</label>
<input type="text" name="newPwd" class="form-control" id="inputPwd">
</div>
<!--“确认添加” 按钮-->
<div class="form-group alterinfo">
<input type="button" id="addUserBtn" class="btn btn-success" value="确定"/>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/staff_cleaner.js"></script>
<script type="text/javascript" src="../js/staff_cleaner.js"></script><!--清洁工专项管理的自定义脚本-->

77
src/main/resources/static/pages/staff_order.html
Unescape View File

@ -1,60 +1,65 @@
<!--员工视角的订单管理页面前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<body>
<div class="col-md-8 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="orderList">
<tr><th>入住人</th><th>身份证号</th><th>开始时间</th><th>结束时间</th><th>总金额</th><th>状态</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
<div class="table-responsive">
<!--定义订单列表表格-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="orderList">
<tr><th>入住人</th><th>身份证号</th><th>开始时间</th><th>结束时间</th><th>总金额</th><th>状态</th><th>操作</th></tr>
<!--实现订单列表的分页查看-->
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!--定义 “查看房间详情” 的弹窗-->
<div class="modal fade" id="showRoomT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">房间详情</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomTable">
</table>
</div>
<!--弹窗头部区域-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">房间详情</h4>
</div>
<!--弹窗主体区域，用于展示订单关联的房间信息-->
<div class="modal-body">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomTable">
</table>
</div>
</div>
</div>
</div>
</div>
<!--结束弹窗内容、容器和模态框整体标签。-->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/staff_order.js"></script>
<script type="text/javascript" src="../js/staff_order.js"></script><!--自定义员工订单管理脚本-->

130
src/main/resources/static/pages/staff_room.html
Unescape View File

@ -1,85 +1,97 @@
<!--员工视角的房间管理与订单生成页面 前端结构-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/myCenter.css">
<link rel="stylesheet" type="text/css" href="../css/pages.css">
</head>
<body>
<div class="col-md-8 col-xs-11 nopadding" style="padding-top:3rem;padding-left: 3rem">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<tr><th>位置</th><th>价格</th><th>状态</th><th>类型</th><th>操作</th></tr>
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10xp">
<a href="#" id="pre">上一页 </a>
<div class="table-responsive">
<!--id="roomList"：唯一 ID，方便后续 JavaScript 动态填充房间数据（如从后端加载房间列表，区分 “空闲”“已入住” 等状态）-->
<table class="table table-bordered table-hover" style="margin-top: 10px" id="roomList">
<tr><th>位置</th><th>价格</th><th>状态</th><th>类型</th><th>操作</th></tr>
<!--实现房间列表的分页查看-->
</table>
<div class="col-md-12">
<form class="form-inline">
<div class="form-group" style="margin-right: 10px">
<a href="#" id="pre">上一页 </a>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
<!--<div class="form-group">
<input type="text" style="width: 5rem" class="form-control" id="inputPage">
<input type="button" id="setPageBtn" class="btn btn-default" value="跳转">
</div>-->
<div class="form-group" style="margin-left: 10px">
<a href="#" id="next">下一页</a>
</div>
</form>
</div>
</div>
</div>
</body>
<!--定义 “为房间生成订单” 的弹窗-->
<div class="modal fade" id="chooseRoom" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">生成订单</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<div class="form-group alterinfo">位置：
<span id="inputLocal"></span>
</div>
<div class="form-group alterinfo">入住人姓名：
<label for="inputName">inputName</label>
<input type="text" name="inputName" class="form-control" id="inputName">
</div>
<div class="form-group alterinfo">身份证号：
<label for="inputId">inputId</label>
<input type="text" name="inputId" class="form-control" id="inputId">
</div>
<div class="form-group alterinfo">开始日期：
<label for="inputStart">inputId</label>
<input type="text" name="inputStart" class="form-control" data-provide="datepicker" id="dateStart">
</div>
<div class="form-group alterinfo">结束日期：
<label for="inputEnd">inputId</label>
<input type="text" name="inputEnd" class="form-control" data-provide="datepicker" id="dateEnd">
</div>
<div class="form-group alterinfo">
<input type="button" id="addOrder" class="btn btn-success" value="确定"/>
</div>
</div>
<!--弹窗头部区域：
关闭按钮：data-dismiss="modal" 是 Bootstrap 内置属性，点击关闭弹窗；&times; 为 “×” 符号，直观表示关闭；
标题 “生成订单”：明确弹窗用途，与房间列表 “操作” 列功能呼应。-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">生成订单</h4>
</div>
<div class="modal-body" style="width: 80%;padding-left:20%">
<!--房间位置显示项：非输入框，通过 id="inputLocal" 由 JS 动态填充当前选中房间的位置。-->
<div class="form-group alterinfo">位置：
<span id="inputLocal"></span>
</div>
<!--入住人姓名输入项-->
<div class="form-group alterinfo">入住人姓名：
<label for="inputName">inputName</label>
<input type="text" name="inputName" class="form-control" id="inputName">
</div>
<!--入住人身份证号输入项-->
<div class="form-group alterinfo">身份证号：
<label for="inputId">inputId</label>
<input type="text" name="inputId" class="form-control" id="inputId">
</div>
<!--入住开始日期选择项-->
<div class="form-group alterinfo">开始日期：
<label for="inputStart">inputId</label>
<input type="text" name="inputStart" class="form-control" data-provide="datepicker" id="dateStart">
</div>
<!--入住结束日期选择项-->
<div class="form-group alterinfo">结束日期：
<label for="inputEnd">inputId</label>
<input type="text" name="inputEnd" class="form-control" data-provide="datepicker" id="dateEnd">
</div>
<!--“确认生成订单” 按钮-->
<div class="form-group alterinfo">
<input type="button" id="addOrder" class="btn btn-success" value="确定"/>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="../js/staff_room.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script><!--引入 Bootstrap Datepicker 日期选择器插件-->
<script type="text/javascript" src="../js/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="../js/staff_room.js"></script><!--自定义房间管理与订单生成脚本-->

Write Preview
Loading…
Cancel
Save