目录
一、项目简介
为什么要开发OA会议管理?
会议是公司日常管理的重要手段之一,为了更好的协调部门与部门之间,员工与员工之间的工作,并保证公司的日常事务高效并且有序的进行。开发OA会议管理是希望通过这个系统完成会议发起、送审、进行、投票、会议室管理的规范管理;
会议是一个涉及多个部门,存在一定流程的工作,会议开展的效率决定整个公司的各项事务的开展效率;该会议OA系统确保会议的高效进行,并且在线记录会议要及整个会议中的详细过程;
OA会议管理的作用
1.OA办公系统中的会议管理科员帮助规范企业运作中的会议时间、决策内容、决策方式;
2.OA系统可营造流程与会议、决策与会议及报告与会议的和谐体系,有效提高高层的决策效率;
3.OA系统支持沉淀会议决策、建立高层决策的知识积累框架,跟踪会议决议执行情况最终达成问题的解决!
本项目是基于动态的Web工程完成OA会议系统,利用自定义MVC框架,数据库使用用的是MySQL,开发工具为eclipse,项目界面使用layui搭建。
原型图业务介绍、数据库表结构
(1) 需求说明会在产品原型图中一并指出,先来看产品原型图(会议管理板块)。
1.用户登录
采用ajax无刷新及json交互
登录成功后跳转到会议OA后台页面并完成左侧菜单初始化及动态选项卡绑定操作
2.会议后台界面
3.会议发布
新增一个会议。
会议主持人可选择,只能选择一个。
参会人员只有参与会议的权利,没有投票权。选择人员时使用多功能下拉框。
列席人员拥有投票权,其余同上。
会议地址根据会议室选择。
会议时间由会议起始时间和会议结束时间构成。
4.我的会议
发布会议后,进入我的会议,对会议进行排座。若没有排座则按默认方式排座。
排座后可以送审。点击送审,弹出一个弹出层选择送审人,进行会议审批。
审批通过后可以看会议反馈情况,哪些人参会,那些人缺席,那些人未读通知。
5.我的审批
对应的审核人员登录自己的账号后进入我的审批可以看见需要审批的会议。
点击审批弹出一个弹出层,不同意会议可以驳回,需要输入会议驳回原因。
需要签字后才能完成审批。
注:
1)必须是会议的审批人是当前用户才能看到;
2)审批通过后会议进行待开状态;审批驳回后会议将被更改为驳回状态6.会议通知
完成审批后其他参会人员可以在会议通知中查看是否有新发布的需要参加的会议,选择参加或者不参加,提交原因。
注:
1)只有会议的参与者和列席者才能在会议通知中查看到我所需要参与的会议信息7、代开会议:展示会议状态为待开的所有会议信息
代开会议都是需要参加的会议。
8、 历史会议:展示会议状态为已结束的所有会议信息
9、 所有会议:展示所有的会议信息
数据库表结构
二、多功能下拉框
前端会议发布实现
2.1 会议发布页面排版布局
2.2 layui之formSelects多选组件定义及动态数据绑定
文档地址:https://hnzzmsf.github.io/example/example_v4.html#download
下载地址:https://github.com/hnzzmsf/layui-formSelects
会用到的组件
可能遇到的问题如图所示:
我们的起始时间和结束时间用的是截取出来的,类型为String,而实体类中这两个的属性是Date数据类型有误。
我们的util包中定义了一个转换的方法。
MyDateConverter.java代码块:
package com.zking.util; import java.text.SimpleDateFormat; import java.util.Date; import org.apache.commons.beanutils.Converter; public class MyDateConverter implements Converter { @Override public Object convert(Class type, Object value) { String dateStr = (String)value; SimpleDateFormat spdt = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { Date date = spdt.parse(dateStr); return date; } catch (Exception e) { e.printStackTrace(); } return null; } }
三、后端
1.dao方法 UserDao.java
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class UserDao extends BaseDao<User>{
public User login(User user) throws Exception {
String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
// 根据sql查询符合条件的用户,通常只会返回一条数据
List<User> users = super.executeQuery(sql, User.class, null);
return users==null || users.size()==0?null:users.get(0);
// return super.executeQuery(sql, clz, pageBean);
}
// 查询用户信息及对应的角色,角色是通过case when得来的
public List<Map<String, Object>> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select *\r\n" +
",(case rid \r\n" +
"when 1 then '管理员 '\r\n" +
"when 2 then '发起者 '\r\n" +
"when 3 then '审批者 '\r\n" +
"when 4 then '参与者 '\r\n" +
"when 5 then '会议室管理员 '\r\n" +
"else '其他' end) roleName \r\n" +
"from \r\n" +
"t_oa_user where 1 = 1 ";
// 有可能根据搜索的名字查询
String name = user.getName();
//判断是否为空
if(StringUtils.isNotBlank(name)) {
// 不为空然后就拼接上sql语句
sql+=" and name like '%"+name+"%'";
}
// 当实体类的属性完全包含数据库查询出来的列段的时候使用
// super.executeQuery(sql, User.class, pageBean)
// 返回List<Map<String,Object>>,对应的是链表查询,单个实体类对象不完全包含查询的列段
return super.executeQuery(sql, pageBean);
}
// 查询所以用户用于绑定多功能下拉框
public List<Map<String, Object>> queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select id as value,name from t_oa_user";
// 要分页万一我的用户有百来条
return super.executeQuery(sql, pageBean);
}
// 新增
public int add(User user) throws Exception {
String sql="insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
}
// 删除
public int del(User user) throws Exception {
String sql="delete from t_oa_user where id=?";
return super.executeUpdate(sql, user, new String[] {"id"});
}
// 修改
public int edit(User user) throws Exception {
String sql="update t_oa_user set name=?,loginName=?,pwd=? where id=?";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
}
}
2.配置 UserAction.java
package com.zking.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User>{
private User user = new User();
private UserDao userDao = new UserDao();
public String login(HttpServletRequest req, HttpServletResponse resp) {
try {
// 调用我们的login方法
User u = userDao.login(user);
// 通过账户名密码查到了用户记录
if(u!=null) {
// ResponseUtil.writeJson(resp, new R()
// .data("code",200)
// .data("msg","登录成功"));
// 这个就是我们刚刚为什么要更换util所以数据我举例的R().java
// 上面的就等价于下面这段代码
ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
// 此时我们的session中是包含了我们当前登录的用户id
req.getSession().setAttribute("user", u);
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
// 用户查询
public String list(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> users = userDao.list(user, pageBean);
// 注意:layui中的数据格式
ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功", pageBean.getTotal(), users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据查询错误"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
// 查询所以用户于绑定多功能下拉框
public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Map<String, Object>> users = userDao.queryUserAll(user, null);
// 注意:layui中的数据格式
ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框数据查询成功", users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "多功能下拉框数据查询错误"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
// 用户增加
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// n是sql语句执行的影响行数
int n=userDao.add(user);
// 如果大于0说明可以新增
if(n>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
}
else {
ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
// 用户删除
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
// n是sql语句执行的影响行数
int n=userDao.del(user);
// 如果大于0说明可以删除
if(n>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
}
else {
ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
// 用户修改
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
// n是sql语句执行的影响行数
int n=userDao.edit(user);
// 如果大于0说明可以修改
if(n>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
}
else {
ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
@Override
public User getModel() {
// TODO Auto-generated method stub
return user;
}
}
3.实体类 MeetingInfo.java
MeetingInfo.java代码块:
package com.zking.entity;
import java.util.Date;
//数据库会议信息表t_oa_meeting_info对应的实体类
public class MeetingInfo {
private Long id;
private String title;
private String content;
private String canyuze;
private String liexize;
private String zhuchiren;
private String location;
private Date startTime;
private Date endTime;
private String fujian;
private Integer state;
private String seatPic;
private String remark;
private String auditor;
public String getAuditor() {
return auditor;
}
public void setAuditor(String auditor) {
this.auditor = auditor;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getCanyuze() {
return canyuze;
}
public void setCanyuze(String canyuze) {
this.canyuze = canyuze;
}
public String getLiexize() {
return liexize;
}
public void setLiexize(String liexize) {
this.liexize = liexize;
}
public String getZhuchiren() {
return zhuchiren;
}
public void setZhuchiren(String zhuchiren) {
this.zhuchiren = zhuchiren;
}
public String getLocation() {
return location;
}
public void setLocation(String location) {
this.location = location;
}
public Date getStartTime() {
return startTime;
}
public void setStartTime(Date startTime) {
this.startTime = startTime;
}
public Date getEndTime() {
return endTime;
}
public void setEndTime(Date endTime) {
this.endTime = endTime;
}
public String getFujian() {
return fujian;
}
public void setFujian(String fujian) {
this.fujian = fujian;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getSeatPic() {
return seatPic;
}
public void setSeatPic(String seatPic) {
this.seatPic = seatPic;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public MeetingInfo() {
super();
// TODO Auto-generated constructor stub
}
@Override
public String toString() {
return "MeetingInfo [id=" + id + ", title=" + title + ", content=" + content + ", canyuze=" + canyuze
+ ", liexize=" + liexize + ", zhuchiren=" + zhuchiren + ", location=" + location + ", startTime="
+ startTime + ", endTime=" + endTime + ", fujian=" + fujian + ", state=" + state + ", seatPic=" + seatPic + ", remark=" + remark + "]";
}
}
4.dao方法 MeetingInfoDao.java
MeetingInfoDao.java代码块:
package com.zking.dao;
import java.util.List;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class MeetingInfoDao extends BaseDao<MeetingInfo>{
// 会议信息新增
public int add(MeetingInfo t) throws Exception {
String sql="insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
}
}
5.配置 MeetingInfoAction.java
MeetingInfoAction.java代码块:
package com.zking.web;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.ConvertUtils;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.MyDateConverter;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
private MeetingInfo info = new MeetingInfo();
private MeetingInfoDao infoDao = new MeetingInfoDao();
@Override
public MeetingInfo getModel() {
// 注册一个转换器
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// n是sql语句执行的影响行数
int n=infoDao.add(info);
// 如果大于0说明可以新增
if(n>0) {
ResponseUtil.writeJson(resp, R.ok(200, "会议信息数据新增成功"));
}
else {
ResponseUtil.writeJson(resp, R.ok(0, "会议信息数据新增失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "会议信息数据新增失败"));
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
}
四、前端
1.addMeeting.java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发布会议</title>
<!-- 引入formSelects核心css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css" />
<!-- 引入formSelects核心js -->
<script src="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeeting.js"></script>
</head>
<body>
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<button id="btn_add" type="submit" class="layui-btn" lay-submit="" lay-filter="meeting">立即提交</button>
<button id="btn_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会议标题</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">会议内容</label>
<div class="layui-input-block">
<textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">参与者</label>
<div class="layui-input-block">
<select name="canyuze" xm-select="canyuze" lay-verify="required" lay-vertype="tips">
<option value="">---请选择---</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">列席者</label>
<div class="layui-input-block">
<select name="liexize" xm-select="liexize" lay-verify="required" lay-vertype="tips">
<option value="">---请选择---</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">主持人</label>
<div class="layui-input-block">
<input type="text" readonly="readonly" name="zhuchirenname" value="${user.name }" autocomplete="off" placeholder="请输入标题" class="layui-input">
<input type="hidden" name="zhuchiren" value="${user.id }"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会议地点</label>
<div class="layui-input-block">
<input type="text" lay-verify="required" name="location" autocomplete="off" placeholder="请输入会议地点" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">会议时间</label>
<div class="layui-input-block">
<input type="text" readonly="readonly" lay-verify="required" id="dt" name="dt" autocomplete="off" placeholder="请选择会议时间" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
</div>
</div>
</form>
</body>
</html>
2.addmeeting.js
let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
layer = layui.layer
,$ = layui.jquery
,table = layui.table;
//初始化数据表格
initTable();
//绑定查询按钮的点击事件
$('#btn_search').click(function(){
query();
});
//绑定新增按钮的点击事件
$('#btn_add').click(function(){
row=null;
open('新增');
});
});
//1.初始化数据表格
function initTable(){
table.render({ //执行渲染
elem: '#tb', //指定原始表格元素选择器(推荐id选择器)
// url: 'user.action?methodName=list', //请求地址
height: 340, //自定义高度
loading: false, //是否显示加载条(默认 true)
cols: [[ //设置表头
{field: 'id', title: '用户编号', width: 120},
{field: 'name', title: '用户名', width: 120},
{field: 'loginName', title: '登录账号', width: 140},
{field: '', title: '操作', width: 220,toolbar:'#toolbar'},
]]
});
//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
table.on('tool(tb)', function (obj) {
row = obj.data;
if (obj.event == "edit") {
open("编辑");
}else if(obj.event == "del"){
layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
$.post($("#ctx").val()+'/user.action',{
'methodName':'del',
'id':row.id
},function(rs){
if(rs.success){
//调用查询方法刷新数据
query();
}else{
layer.msg(rs.msg,function(){});
}
},'json');
layer.close(index);
});
}else{
}
});
}
//2.点击查询
function query(){
// console.log($("#ctx").val());
table.reload('tb', {
url: $("#ctx").val()+'/user.action', //请求地址
method: 'POST', //请求方式,GET或者POST
loading: true, //是否显示加载条(默认 true)
page: true, //是否分页
where: { //设定异步数据接口的额外参数,任意设
'methodName':'list',
'name':$('#name').val()
},
request: { //自定义分页请求参数名
pageName: 'page', //页码的参数名称,默认:page
limitName: 'rows' //每页数据量的参数名,默认:limit
}
});
}
//3.对话框
function open(title){
layer.open({
type: 2, //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
title:title,
area: ['660px', '340px'], //宽高
skin: 'layui-layer-rim', //样式类名
content: $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
btn:['保存','关闭'],
yes: function(index, layero){
//调用子页面中提供的getData方法,快速获取子页面的form表单数据
// jquery.find
let data= $(layero).find("iframe")[0].contentWindow.getData();
console.log(data);
//判断title标题
let methodName="add";
if(title=="编辑")
methodName="edit";
$.post($("#ctx").val()+'/user.action?methodName='+methodName,
data,function(rs){
if(rs.success){
//关闭对话框
layer.closeAll();
//调用查询方法刷新数据
query();
}else{
layer.msg(rs.msg,function(){});
}
},'json');
},
btn2: function(index, layero){
layer.closeAll();
}
// ,
// btn3: function(index, layero){
// layer.msg("批量新增");
// }
// ,
// btn4: function(index, layero){
// layer.msg("不关闭");
// return false;
// }
});
}
3.导入formselects文件
五、运行结果