Willful OA系统的设计与实现
图5-1-2
5.1.2 系统首页设计
用户在登录界面中输入匹配的“用户名”和“密码”单击“确定”按钮后进入系统的默认首页页面，首页结构如表5-1-1所示。首页的视图效果如图5-1-3所示。welcome.html主页面的整体框架关键代码如图5-1-4所示。
第 23 页
Willful OA系统的设计与实现
区域 名称 说明 对应HTML文件 top.html left.html right.html bottom.jsp 1 企业办公自动化 企业办公自动化LOGO图片 2 3 4 功能菜单 页面内容 页尾 显示用户的可操作菜单 显示功能菜单中相应的操作内容 页面尾部信息 表5-1-1
图 5-1-3
图5-1-4
5.1.3 退出界面
第 24 页
Willful OA系统的设计与实现
登录和退出界面就犹如一个美女的脸一样，所以退出时界面的设计也是非常重要的，退出界面如图5-1-5所示。
该模块实现了两个功能：重新登录，当用户修改了个人信息后，需重新登录才能显示修改后的信息；关闭浏览器，用户退出本系统首先应单击程序界面右上角的退出按钮，然后再关闭浏览器。
图5-1-5
5.2 模块的设计与实现
5.2.1 系统管理
系统管理模块因为涉及到的内容比较多，包括对部门的管理，岗位的管理以及对用户的管理，对各个小模块的增加操作，删除操作，修改操作等，并对修改的数据保存到数据库中。所以对于系统管理模块只有管理员或者说在公司中职位较高的管理者才有对于此模块的修改，删除，增加的操作，普通用户只有查看的权限。
部门管理的操作点击左边导航栏中的系统管理下面的部门管理，就会出现如图5-2-1所示的界面。之后点击按钮新建，就可以添加部门，点击新建会出现如
第 25 页
Willful OA系统的设计与实现
图5-2-2所示。添加完信息之后点击保存即可。删除与修改部门信息的话，如图5-2-1所示，右边有相关，点击你需要的操作即可。
图5-2-1
图5-2-2
岗位管理和用户管理与部门管理设计思路是一样的。 用户管理的操作界面如图5-2-3，图5-2-4所示。
图5-2-3
第 26 页
Willful OA系统的设计与实现
图5-2-4
岗位管理如图5-2-5，图5-2-6所示。
图5-2-5
图 5-2-6
5.2.2 个人设置管理
第 27 页