目录
一、会议OA的原型图业务介绍
在开始做OA项目之前，先带大家看一下并解析会议OA原型图，
首先是 会议管理 主界面：
它分为三个模块，（如上图标记所示）分别是会议管理、投票管理、会议室管理。
今日要实现的是 会议发布 功能：
会议发布之后，表单将会刷新，然后在 我的会议 中可以查看到自己最新发布的会议：
之后还要进行会议排座：
（温馨提示：实际上在下载按钮的下方会有个下拉框，可供选择哪类会议桌，比如有圆形、椭圆形、正方形、长方形、不规则环形的会议桌等等，这里暂时只是提供了 简易版 的原型图来为大家讲解一下。）
编好座位之后，点击下载，就会自动生成好图片，并且在会议排座那一列看到排好的座位的图片（如下图）：
当主持人将所有的内容都编辑好之后，接着就是点击送审并且选择送审人：
选择好并确定之后，那么 那个要审批的人 就会登录自己的账户 看到菜单中 我的审批 多了一个会议状态为 待审核 的会议：
接着就点击 审批：
通过之后，主持人就可以在 我的会议 中看到自己发布的会议结状态是待开还是驳回，如若是待开就可以进入到下一个步骤了。
比如接收到该会议的人是张三、李四、王五、赵六，那么这些人在登录自己的账户后会收到会议通知：
点击是否参会：
那些人反馈之后，主持人就能在我的会议中的 反馈详情 里看到参会人员、缺席人员、以及未读人员（原形图中没有详细列出）：
然后在 待开会议 中可以看到自己要开哪些会议：
会议之后就后就会有投票：
（一个会议可能会对应多个标题）
接着还能看到投票选项、投票结果以及投票报表：
整个会议业务主要以 会议管理 为主。
二、会议OA的表设计
接着根据我们的业务进行表设计 ：
三、实现多功能下拉框及会议发布
登录账户进来之后，进入会议发布会议：
layui之formSelects多选组件定义：
文档地址：https://hnzzmsf.github.io/example/example_v4.html#download
下载地址：https://github.com/hnzzmsf/layui-formSelects
解压后：
引入以下：
使用步骤：
1）导入formSelects
将资料中的《layui-formSelects-master.zip》解压并导入dist目录中的核心js和css到项目的指定路径中
2）在addMeeting.jsp页面中引入核心JS和CSS：<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入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>
addMeeting.js：
先进官网找到对应代码并复制：
addMeeting.js：
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
//local模式
formSelects.data('canyuze', 'local', {
arr: [
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
});
})在UserDao内增加一个查询所有用户的方法：
//查询所有用户用于绑定多功能下拉框
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);
}
UserAction：
//查询所有用户用于绑定多功能下拉框
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 e2) {
e2.printStackTrace();
}
}
return null;
}addMeeting.js：
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
//local模式
formSelects.data('canyuze', 'local', {
arr: rs.data
});
formSelects.data('liexize', 'local', {
arr: rs.data
});
})
})
查看代码：
这里遇到一个问题，我们如何把前面（后面）的时间放在开始（结束）时间里面去？
为了方便分割，我们中间的“-”改为“至”，
看官网文档：
addMeeting.js：
//日期时间范围
laydate.render({
elem: '#dt'
,type: 'datetime'
,range: '至'
});
接下来 如何提交form表单？
进官网：
MeetingInfo实体类：
package com.zking.entity;
import java.util.Date;
/**
* 数据库会议信息表t_oa_meeting_info对应的实体类
* @author 杨总
*
*/
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 + "]";
}
}MeetingInfoDao：
package com.zking.dao;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
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"});
}
}
MeetingInfoAction：
package com.zking.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
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() {
return info;
}
// 增加会议
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs是sql语句执行的影响行数
int rs = infoDao.add(info);
if(rs>0) {
ResponseUtil.writeJson(resp, R.ok(200, "会议信息增加成功"));
}else {
ResponseUtil.writeJson(resp, R.error(0, "会议信息增加失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "会议信息查询失败"));
} catch (Exception e2) {
e2.printStackTrace();
}
}
return null;
}
}
mvc.xml：
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/user" type="com.zking.web.UserAction">
</action>
<action path="/permission" type="com.zking.web.PermissionAction">
</action>
<action path="info" type="com.zking.web.MeetingInfoAction">
</action>
</config>点提交时报错：
String无法转date类型
MyDateConverter 工具类：
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;
}
}
在MeetingInfoAction里面 注册一个转接器：
@Override
public MeetingInfo getModel() {
//注册一个转接器
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
}
再次去运行提交时，就增加成功了：
笑脸提示：
let $,formSelects,laydate,form;
layui.use(['jquery','formSelects','laydate','form'],function(){
$=layui.jquery
,formSelects=layui.formSelects
,form=layui.form
,laydate=layui.laydate;
// 如何提交form表单
initForm();
//监听提交
form.on('submit(meeting)', function(data){
let rs=data.field;
//将原有的时间、区间、范围进行处理，拿到开始时间、结束时间，并且去空格，放入json对象rs中
rs["startTime"]=rs.dt.split("至")[0].trim();
rs["endTime"]=rs.dt.split("至")[1].trim();
rs["methodName"]="add";
$.post("info.action",rs,function(res){
if(res.success){
layer.msg(res.msg,{icon:6},function(){});
$("btn_reset").click();
}else{
layer.msg(res.msg,{icon:5},function(){});
}
},"json")
return false;
})
});
//初始化form元素
function initForm(){
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
//local模式
formSelects.data('canyuze', 'local', {
arr: rs.data
});
formSelects.data('liexize', 'local', {
arr: rs.data
});
})
//日期时间范围
laydate.render({
elem: '#dt'
,type: 'datetime'
,range: '至'
});
}运行效果：
