完成任务：前端设计
设计系统前端，利用html和css对登录页面和进入系统操作界面进行界面化设计，使系统看起来美观、简洁。
一、设计思路
利用HTML对整个网页页面进行布局和设计内容，使用CSS对每一个组件的具体样式进行设计美化，在整体的布局和样式做好后让 JavaScript 负责与后台进行交互，实现整个网页的动态实现。
二、 登录界面
各部分代码功能：
1.欢迎界面
2.侧边栏
该部分为用户登录进入系统后网页左边显示的菜单栏。首先用HTML对整个菜单栏页面进行布局和设计内容，该部分我建立了一个表单，再将表单切割为几大模块。分别是管理员、单位和员工所对应的不同功能。再用CSS对每一个组件的具体样式进行设计美化。最后调用 JS脚本， 实现与后台进行交互，让菜单栏显示出与登录页面所选角色相对应的具体功能。
%>
<ul>
<%
if(adminlogin != null && adminlogin.size() != 0){
if(adminlogin.get(3).equals("2")){
%>
<li><a href="<%=path %>/admin/document.jsp">公文管理</a></li>
<%}else{ %>
<li><a href="javascript:void(0)" style="color:#CCC">公文管理</a></li>
<%} %>
<%if(adminlogin.get(3).equals("3")){ %>
<li><a href="<%=path %>/admin/lingdao.jsp">院领导审批</a></li>
<li><a href="<%=path %>/admin/examine.jsp">公文审批</a></li>
<li><a href="<%=path %>/admin/issue.jsp">可下发公文</a></li>
<%}else{ %>
<li><a href="javascript:void(0)" style="color:#CCC">院领导审批</a></li>
<li><a href="javascript:void(0)" style="color:#CCC">公文审批</a></li>
<li><a href="javascript:void(0)" style="color:#CCC">可下发公文</a></li>
<%} %>
<%if(adminlogin.get(3).equals("1")){ %>
<li><a href="<%=path %>/admin/systemuser.jsp">系统用户管理</a></li>
<li><a href="<%=path %>/admin/dep.jsp">学院部门管理</a></li>
<%}else{ %>
<li><a href="javascript:void(0)" style="color:#CCC">系统用户管理</a></li>
<li><a href="javascript:void(0)" style="color:#CCC">学院部门管理</a></li>
<%}} %>
</ul>
<title>公文流转系统</title>
<style>
.table-padding td {padding:5px;}
</style>
<div class="north-left">公文流转系统</div>
<div class="north-right">欢迎：<%=adminlogin != null && adminlogin.size() != 0?adminlogin.get(1):"" %> -->
用户角色：<%
if(adminlogin != null && adminlogin.size() != 0){
if(adminlogin.get(3).equals("1") || adminlogin.get(3).equals("2")){
%><%=adminlogin.get(4) %><%
}else{
ArrayList dep = array.getDep(adminlogin.get(4).toString());
%><%=dep.get(1) %><%
}
}
%> --> <a href="javascript:void(0)" id="editpass">修改密码</a> --> <a href="javascript:void(0)" id="click_logout">安全退出</a></div>
3.登录界面
<style>
.table-padding td {padding:5px;}
</style>
<form id="form_login" method="post">
<table class="table-padding">
<tr>
<td align="right">用户名：</td>
<td><input class="easyui-validatebox" type="text" name="name" required="true" validType="pattern" customize="Customize" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input class="easyui-validatebox" type="password" name="pwd" required="true" validType="pattern" customize="Customize" /></td>
</tr>
</table>
</form>
4.用户管理
在此界面下可对所有用户进行查看，并可删除用户，也可以跳转至用户添加界面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tbody tr:even').css({'background':'#ffffff'});
$('tbody tr:odd').css({'background':'#eeeeff'});
var message = <%=message %>;
if(message != null && message != ""){
alert(message);
}
login('<%=path %>',<%=closed %>);
$("#click_logout").click(function(){
logout('<%=path %>');
});
$("#editpass").click(function(){
editpass('<%=path %>');
});
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
<jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
<div id="left-menus" border="false" fit="true">
<jsp:include page="/admin/left.jsp"></jsp:include>
</div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
<table width="100%">
<thead>
<tr>
<td colspan="4" align="center" style="padding:5px;">系统用户管理</td>
</tr>
<tr>
<td colspan="4" style="padding:5px;"><a href="<%=path %>/admin/systemuser_add.jsp">添加系统用户</a></td>
</tr>
<tr class="thead">
<td align="center">序号</td>
<td align="center">用户名</td>
<td align="center">身份</td>
<td align="center">操作</td>
</tr>
</thead>
<tbody class="tbody">
<%
if(admin != null && admin.size() != 0){
for(int i = 0;i < admin.size();i++){
ArrayList alRow = (ArrayList)admin.get(i);
%>
<tr>
<td align="center"><%=i+1 %></td>
<td align="center"><%=alRow.get(1) %></td>
<td align="center"><%
if(alRow.get(3).equals("1") || alRow.get(3).equals("2")){
%><%=alRow.get(4) %><%
}else{
ArrayList dep = array.getDep(alRow.get(4).toString());
%><%=dep.get(1) %><%
}
%></td>
<td align="center"><a href="<%=path %>/DelServlet?admin=<%=alRow.get(0) %>">删除</a></td>
</tr>
<%}} %>
</tbody>
</table>
</div>
</body>
</html>
5.用户添加
此界面用于新用户注册并赋予权限。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tbody tr:even').css({'background':'#ffffff'});
$('tbody tr:odd').css({'background':'#eeeeff'});
var message = <%=message %>;
if(message != null && message != ""){
alert(message);
}
login('<%=path %>',<%=closed %>);
$("#click_logout").click(function(){
logout('<%=path %>');
});
$("#editpass").click(function(){
editpass('<%=path %>');
});
$("#admin_add").click(function(){
adminAdd('<%=path %>');
});
$('#cc').combogrid('disable');
$('input[name=type]').click(function(){
var lives = $(this).attr('lives');
$('#cc').combogrid(lives);
})
})
function check(){
if($('#form_systemuser_add').form('validate') == false){
return false;
}
if($('#cc').combobox('getValue') == "0" && $(':radio[name=type][checked]').val() == "3"){
$.messager.alert('系统消息','请选择学院部门！','info');
return false;
}
}
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
<jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
<div id="left-menus" border="false" fit="true">
<jsp:include page="/admin/left.jsp"></jsp:include>
</div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;"><br/><br/><br/><br/><br/>
<form id="form_systemuser_add" method="post" action="<%=path %>/AdminAddServlet" onSubmit="return check()">
<table border="1" align="center" cellpadding="5">
<tr>
<td colspan="2" align="center">系统用户添加</td>
</tr>
<tr>
<td align="right">用户名：</td>
<td><input class="easyui-validatebox" type="text" name="name" required="true" validType="pattern" customize="Customize" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input class="easyui-validatebox" type="password" name="pwd" required="true" validType="pattern" id="systemusers_pwd" customize="Customize" /></td>
</tr>
<tr>
<td align="right">重复密码：</td>
<td><input class="easyui-validatebox" type="password" name="repeatpwd" required="true" validType="repeat'#systemusers_pwd'" customize="Customize" /></td>
</tr>
<tr>
<td align="right">发布类型：</td>
<td><input type="radio" name="type" value="1" lives="disable" checked>
<span>管理员</span>
<input type="radio" name="type" value="2" lives="disable">
<span>拟稿人</span>
<input type="radio" name="type" value="3" lives="enable">
<span>学院部门</span></td>
</tr>
<tr>
<td align="right">学院部门：</td>
<td><select id="cc" class="easyui-combobox" name="status" editable="false" required="true" style="width:200px;">
<option value="0">-- 请选择学院部门 --</option>
<%
ArrayList dep = array.getDep();
for(int i = 0;i < dep.size();i++){
ArrayList alRow = (ArrayList)dep.get(i);
%>
<option value="<%=alRow.get(0) %>"><%=alRow.get(1) %></option>
<%} %>
</select></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
6.账户密码修改
对用户账户密码进行修改。
<style type="text/css">
.table-padding td {padding:5px;}
</style>
<form id="form_pwd_update" method="post">
<table class="table-padding">
<tr>
<td align="right">新密码：</td>
<td><input class="easyui-validatebox" type="password" name="newpwd" required="true" validType="pattern" id="admin_new_pwd" customize="Customize" /></td>
</tr>
<tr>
<td align="right">重复新密码：</td>
<td><input class="easyui-validatebox" type="password" name="repeatpwd" required="true" validType="repeat'#admin_new_pwd'" customize="Customize" /></td>
</tr>
</table>
</form>
7.学院部门管理
查看学院所有部门，并可以进行删除操作，并可以跳转至部门添加界面。原理同用户管理。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tbody tr:even').css({'background':'#ffffff'});
$('tbody tr:odd').css({'background':'#eeeeff'});
var message = <%=message %>;
if(message != null && message != ""){
alert(message);
}
login('<%=path %>',<%=closed %>);
$("#click_logout").click(function(){
logout('<%=path %>');
});
$("#editpass").click(function(){
editpass('<%=path %>');
});
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
<jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
<div id="left-menus" border="false" fit="true">
<jsp:include page="/admin/left.jsp"></jsp:include>
</div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
<table width="100%">
<thead>
<tr>
<td colspan="3" align="center" style="padding:5px;">学院部门管理</td>
</tr>
<tr>
<td colspan="3" style="padding:5px;"><a href="<%=path %>/admin/dep_add.jsp">添加学院部门</a></td>
</tr>
<tr class="thead">
<td align="center">序号</td>
<td align="center">学院部门名称</td>
<td align="center">操作</td>
</tr>
</thead>
<tbody class="tbody">
<%
if(dep != null && dep.size() != 0){
for(int i = 0;i < dep.size();i++){
ArrayList alRow = (ArrayList)dep.get(i);
%>
<tr>
<td align="center"><%=i+1 %></td>
<td align="center"><%=alRow.get(1) %></td>
<td align="center"><a href="<%=path %>/DelServlet?dep=<%=alRow.get(0) %>">删除</a></td>
</tr>
<%}} %>
</tbody>
</table>
</div>
</body>
</html>
8.公文审批管理
查看当前公文审批情况，并添加新公文，原理同用户管理。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tbody tr:even').css({'background':'#ffffff'});
$('tbody tr:odd').css({'background':'#eeeeff'});
var message = <%=message %>;
if(message != null && message != ""){
alert(message);
}
login('<%=path %>',<%=closed %>);
$("#click_logout").click(function(){
logout('<%=path %>');
});
$("#editpass").click(function(){
editpass('<%=path %>');
});
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
<jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
<div id="left-menus" border="false" fit="true">
<jsp:include page="/admin/left.jsp"></jsp:include>
</div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
<table width="100%">
<thead>
<tr>
<td colspan="8" align="center" style="padding:5px;">审批公文管理</td>
</tr>
<tr>
<td colspan="8" style="padding:5px;color:red;">注：如公文审批未通过，请删除后重新添加</td>
</tr>
<tr>
<td colspan="8" style="padding:5px;"><a href="<%=path %>/admin/document_add.jsp">添加新审批公文</a></td>
</tr>
<tr class="thead">
<td align="center">序号</td>
<td align="center">公文标题</td>
<td align="center">审批类型</td>
<td align="center">审批部门/审批状态</td>
<td align="center">院领导审批</td>
<td align="center">下发部门</td>
<td align="center">提交日期</td>
<td align="center"> </td>
</tr>
</thead>
<tbody class="tbody">
<%
if(document != null && document.size() != 0){
for(int i = 0;i < document.size();i++){
ArrayList alRow = (ArrayList)document.get(i);
ArrayList examine = array.getExamineDocument(alRow.get(0).toString());
ArrayList depd = array.getDep(alRow.get(5).toString());
String flag = "0";
String str = "";
if(alRow.get(7).equals("0")){
str = "审批中";
}else if(alRow.get(7).equals("1")){
str = "审批已通过";
}else if(alRow.get(7).equals("2")){
str = "审批未通过";
flag = "1";
}
%>
<tr>
<td align="center"><%=i+1 %></td>
<%
if(!alRow.get(8).equals("0")){
%>
<td align="center"><a href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
<%}else{ %>
<td align="center"><a style="color:red" href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
<%} %>
<td align="center"><%=alRow.get(4) %></td>
<td align="center"><table width="100%">
<%
for(int n = 0;n < examine.size();n++){
ArrayList alRow1 = (ArrayList)examine.get(n);
ArrayList dep = array.getDep(alRow1.get(2).toString());
String state = "";
if(alRow1.get(3).equals("0")){
state = "审批中";
}else if(alRow1.get(3).equals("1")){
state = "审批已通过";
}else if(alRow1.get(3).equals("2")){
state = "审批未通过";
flag = "1";
}
%>
<tr>
<td align="center"><%=dep.get(1) %></td>
<td align="center"><%=state %></td>
</tr>
<%} %>
</table></td>
<td align="center"><%=str %></td>
<td align="center"><%=depd.get(1) %></td>
<td align="center"><%=alRow.get(6).toString().substring(0,10) %></td>
<td align="center"><%=flag.equals("1")?"<a href="+path+"/DelServlet?document="+alRow.get(0)+">删除</a>":"" %></td>
</tr>
<%}} %>
</tbody>
</table>
</div>
</body>
</html>
9.公文审批
对当前公文进行审批，分通过与未通过。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tbody tr:even').css({'background':'#ffffff'});
$('tbody tr:odd').css({'background':'#eeeeff'});
var message = <%=message %>;
var flag = <%=flag %>;
if(flag == "1"){
alert('您不是院领导，不能操作此项目！');
window.location.href('<%=path %>/admin/index.jsp');
}
if(message != null && message != ""){
alert(message);
}
login('<%=path %>',<%=closed %>);
$("#click_logout").click(function(){
logout('<%=path %>');
});
$("#editpass").click(function(){
editpass('<%=path %>');
});
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
<jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
<div id="left-menus" border="false" fit="true">
<jsp:include page="/admin/left.jsp"></jsp:include>
</div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
<table width="100%">
<thead>
<tr>
<td colspan="6" align="center" style="padding:5px;">公文审批</td>
</tr>
<tr class="thead">
<td align="center">序号</td>
<td align="center">公文标题</td>
<td align="center">审批类型</td>
<td align="center">提交日期</td>
<td align="center">是否套红</td>
<td align="center">操作</td>
</tr>
</thead>
<tbody class="tbody">
<%
if(document != null && document.size() != 0){
for(int i = 0;i < document.size();i++){
ArrayList alRow = (ArrayList)document.get(i);
String str = "";
if(alRow.get(7).equals("1")){
str = "已通过";
}else if(alRow.get(7).equals("2")){
str = "未通过";
}
%>
<tr>
<td align="center"><%=i+1 %></td>
<%
if(!alRow.get(8).equals("0")){
%>
<td align="center"><a href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
<%}else{ %>
<td align="center"><a style="color:red" href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
<%} %>
<td align="center"><%=alRow.get(4) %></td>
<td align="center"><%=alRow.get(6).toString().substring(0,10) %></td>
<td align="center"><a href="<%=path %>/LingdaoServlet?id=<%=alRow.get(0) %>&state=0">文件套红</a></td>
<td align="center"><%=alRow.get(7).equals("0")?"<a href='"+path+"/LingdaoServlet?id="+alRow.get(0)+"&state=1'>已通过</a> <a href='"+path+"/LingdaoServlet?id="+alRow.get(0)+"&state=2'>未通过</a>":str %></td>
</tr>
<%}} %>
</tbody>
</table>
</div>
</body>
</html>
