前言
会议OA项目是指会议办公自动化项目，旨在利用信息技术提高会议的效率和管理水平。该项目一般包括会议管理系统、会议信息发布系统、会议决策支持系统等多个模块，可以涵盖会议召开、议题管理、会议通知、会议文档管理、会议决议录入等功能。会议OA项目的主要目标是简化会议的组织流程，提高会议的效率和准确性，节省会议成本。通过自动化的方式，可以实现会议通知的快速发送与反馈、议题的在线管理与跟踪、会议决议的录入与存档、参会人员的签到与统计等功能。同时，会议OA项目还能够提供数据分析与报表输出，为会议决策提供数据支持。
今天我给大家分享一下会议OA项目中的一个功能——会议发布，让我们跟随思维导图一起来看看吧
1. 多功能下拉框
1.1 概念
多功能下拉框是一种用户界面控件，通常用于展示一系列可选项供用户选择。与普通的下拉框（单选下拉框）不同，多功能下拉框还具有其他附加功能，以提供更丰富的用户体验和交互功能。
1.2 特点
- 多选功能：可以给用户同时选择多个选项。
- 搜索功能：下拉框提供搜索功能，用户可以根据关键字段进行查询获取对应的选项，提高用户的效率，减少时间。
- 分类功能：支持对选项进行分类或分组显示。
- 自定义功能：允许用户自定义选项或输入文本，允许用户自定义选项或输入文本。
- 事件触发功能：可以根据用户选择的不同选项触发相应的事件或动作
1.3 相关网址
文档地址：https://hnzzmsf.github.io/example/example_v4.html#download
下载地址：https://github.com/hnzzmsf/layui-formSelects
1.4 使用步骤：
1.4.1 导入formSelects的相关依赖
1.4.2 引入js和css文件
1.4.3 在jsp中定义多功能下拉框组件及表单设置
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ include file="/common/header.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>会议发布页面</title> <!--导入多功能下拉框的插件文件 --> <link rel="stylesheet" href="static/js/plugsins/formSelects/formSelects-v4.css"> <script src="static/js/plugsins/formSelects/formSelects-v4.js"></script> <script src="static/js/meeting/addMeeting.js"></script> </head> <body> <form class="layui-form layui-form-pane"> <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> <div class="layui-form-item" style="text-align: center;"> <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> </form> </body> </html>
1.4.4 在对应的js文件中初始化多功能下拉框组件
addMeeting.js
var $, formSelects, laydate, form,layer; layui.use([ 'jquery', 'formSelects', 'laydate', 'form','layer' ], function() { formSelects = layui.formSelects, $ = layui.jquery, laydate = layui.laydate, form = layui.form,layer=layui.layer; //参与者下拉框绑定多功能下拉框组件 formSelects.btns('canyuze', [ 'select', 'remove', 'reverse' ]); //列席者下拉框绑定多功能下拉框组件 formSelects.btns('liexize', [ 'select', 'remove', 'reverse' ]);
1.4.5 实现多功能下拉框数据绑定
Dao类代码（UserDao）
/** * 获取参与者的用户 * @param user * @param pageBean * @return * @throws Exception */ public List<Map<String, Object>> SelectUser( User user, PageBean pageBean) throws Exception { String sql="select id as value,name from t_oa_user "; return super.executeQuery(sql, pageBean); }
子控制代码（UserAction）
/** * 编写绑定回显选择参与者的用户 * @throws Exception */ public String SelectUser(HttpServletRequest req, HttpServletResponse resp) { try { // 调用查询参与者的方法 List<Map<String,Object>> selectUser = userdao.SelectUser(user, null); //回显到页面上 ResponseUtil.writeJson(resp, R.ok(0, "成功获取参与者用户数据", selectUser)); } catch (Exception e) { e.printStackTrace(); try { ResponseUtil.writeJson(resp, R.error(0, "成功获取参与者用户数据失败")); } catch (Exception e1) { e1.printStackTrace(); } } return null; }
addMeeting.js绑定
去网页文档找到多功能数据绑定的js代码（选择适合自己的）
基于上述的js代码进行调整，最终代码如下所示。
//获取查询到的参与者数据 $.getJSON("user.action", { methodName : "SelectUser" }, function(rs) { // 打印 // console.log(rs) // 设置参与者下拉框的选项 formSelects.data('canyuze', 'local', { arr : rs.data }); // 设置列席人员的下拉框选项 formSelects.data('liexize', 'local', { arr : rs.data }); }); //获取日期时间范围 laydate.render({ elem : '#dt', type : 'datetime', range : '至' //时间日期分割符 });
1.4.6 绑定后的显示效果
2. 主持人绑定（登陆绑定）
2.1 在将登陆的账号信息保存到session中
/** * 登陆的方法 * @param req * @param resp */ public void login(HttpServletRequest req, HttpServletResponse resp) { try { // 调用登陆方法 User u = userdao.login(user); ResponseUtil.writeJson(resp, u); req.getSession().setAttribute("user", u); System.out.println(u); } catch (Exception e) { e.printStackTrace(); } }
2.2 在jsp页面中利用EL表达式进行对应的绑定
3. 会议发布的表单提交
3.1 会议发布的Dao方法（MeetingInfoDao类）
/** * 新增会议的方法 * @param meetingInfo * @throws Exception */ public int add(MeetingInfo meetingInfo) throws Exception { String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)"; return super.executeUpdate(sql, meetingInfo, new String[] {"title", "content","canyuze","liexize","zhuchiren" ,"location","startTime","endTime","remark"}); }
3.2 新增会议的请求（MeetingInfoAction类）
/** * 编写新增会议的请求 * @param req * @param resp * @return */ public String add(HttpServletRequest req, HttpServletResponse resp) { try { int add = meetingInfoDao.add(meetingInfo); if (add>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 e1) { // TODO Auto-generated catch block e1.printStackTrace(); } } return null; }
3.3 编写js代码发送请求携带参数
//初始化工具 var $, formSelects, laydate, form,layer; layui.use([ 'jquery', 'formSelects', 'laydate', 'form','layer' ], function() { formSelects = layui.formSelects, $ = layui.jquery, laydate = layui.laydate, form = layui.form,layer=layui.layer; //表单监听提交 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"; console.log("表单"+rs) // 发送请求 $.post(//请求路径 参数 回调函数 "mInfo.action",rs,function(res) { console.log(res) if (res.success) {//判断是否成功发布会以 layer.msg(res.msg,{icon:6}) // 重置表单 $("#btn_reset").click(); }else{ layer.msg(res.msg,{icon:5}) } },"json" //返回内容格式 ); return false; });
3.4 注意事项
- 在编写form表单提交监听事件的代码时要注意编写属性名的时候不要漏打或多大一个字母或者符号，否则在运行中会无法找到对应属性名的属性或方法，导致运行出现控指针异常的错误。
- 在提交form表单时我们通过截取获得开始会议的时间和结束会议的时间的数据类型是String，当我们要提交数据到数据库中进行存储时，String没有转换为Date类型，会导致运行出现数据类型的错误，因此要借用工具类进行数据类型转换。（如下图所示）
3.5 日期转换工具类（DateUtil类）
package com.zking.util; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import org.apache.commons.beanutils.Converter; /**日期转译工具类 * @author 君易--鑨 * 2023年7月18日下午5:37:20 * */ public class DateUtil implements Converter { public Object convert(Class type,Object value) { // 接受要转换的字符串 String datastr=(String) value; // 实例化时间转换器 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { // 实例化一个日期对象转译 Date date =sdf.parse(datastr); return date; } catch (ParseException e) { e.printStackTrace(); } return null; } }
应用日期数据类型转换类
package com.YX.web; import java.util.Date; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.beanutils.ConvertUtils; import com.YX.dao.MeetingInfoDao; import com.YX.entity.MeetingInfo; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.DateUtil; import com.zking.util.R; import com.zking.util.ResponseUtil; /** * @author 君易--鑨 * 2023年7月18日下午5:27:43 * */ public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo> { //实例化会议发布的Dao方法类和实体类 public MeetingInfo meetingInfo = new MeetingInfo(); public MeetingInfoDao meetingInfoDao = new MeetingInfoDao(); @Override public MeetingInfo getModel() { // 注册一个日期转换器 ConvertUtils.register(new DateUtil(), Date.class); return meetingInfo; } /** * 编写新增会议的请求 * @param req * @param resp * @return */ public String add(HttpServletRequest req, HttpServletResponse resp) { try { int add = meetingInfoDao.add(meetingInfo); if (add>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 e1) { // TODO Auto-generated catch block e1.printStackTrace(); } } return null; } }
4. 会议发布效果实现
以上就是会议发布的功能实现，一些页面样式的修改可根据个人来进行修改。
结束语
这期博客与大家分享了会议OA中的一个功能——会议发布，下期博客也将继续分享有关会议OA的知识。
