冲刺总结-day7

2023-12-18 17:45:03

完成任务：前端设计

设计系统前端，利用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):"" %>&nbsp;--&gt;&nbsp;

用户角色：<%

        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) %><%

           }

        }

        %>&nbsp;--&gt;&nbsp;<a href="javascript:void(0)" id="editpass">修改密码</a>&nbsp;--&gt;&nbsp;<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>&nbsp;

          <input type="radio" name="type" value="2" lives="disable">

          <span>拟稿人</span>&nbsp;

          <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">&nbsp;</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">&nbsp;</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>&nbsp;&nbsp;<a href='"+path+"/LingdaoServlet?id="+alRow.get(0)+"&state=2'>未通过</a>":str %></td>

      </tr>

      <%}} %>

    </tbody>

  </table>

</div>

</body>

</html>

码农公寓

相关文章