会议OA项目之会议发布(详解)

最新推荐文章于 2024-06-05 21:00:00 发布
最新推荐文章于 2024-06-05 21:00:00 发布
阅读量200 收藏 1
点赞数 1
分类专栏： 前端 文章标签： java layui 前端 javascript 数据库 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74352229/article/details/131803938
版权

前言

会议OA项目是指会议办公自动化项目，旨在利用信息技术提高会议的效率和管理水平。该项目一般包括会议管理系统、会议信息发布系统、会议决策支持系统等多个模块，可以涵盖会议召开、议题管理、会议通知、会议文档管理、会议决议录入等功能。会议OA项目的主要目标是简化会议的组织流程，提高会议的效率和准确性，节省会议成本。通过自动化的方式，可以实现会议通知的快速发送与反馈、议题的在线管理与跟踪、会议决议的录入与存档、参会人员的签到与统计等功能。同时，会议OA项目还能够提供数据分析与报表输出，为会议决策提供数据支持。

今天我给大家分享一下会议OA项目中的一个功能——会议发布，让我们跟随思维导图一起来看看吧

 

1. 多功能下拉框

1.1 概念

多功能下拉框是一种用户界面控件，通常用于展示一系列可选项供用户选择。与普通的下拉框（单选下拉框）不同，多功能下拉框还具有其他附加功能，以提供更丰富的用户体验和交互功能。

1.2 特点

  1. 多选功能：可以给用户同时选择多个选项。
  2. 搜索功能：下拉框提供搜索功能，用户可以根据关键字段进行查询获取对应的选项，提高用户的效率，减少时间。
  3. 分类功能：支持对选项进行分类或分组显示。
  4. 自定义功能：允许用户自定义选项或输入文本，允许用户自定义选项或输入文本。
  5. 事件触发功能：可以根据用户选择的不同选项触发相应的事件或动作

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 注意事项

  1. 在编写form表单提交监听事件的代码时要注意编写属性名的时候不要漏打或多大一个字母或者符号，否则在运行中会无法找到对应属性名的属性或方法，导致运行出现控指针异常的错误。
  2. 在提交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的知识。

君易--鑨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
会议室预约的功能
qingtiankeji666的博客
08-24 410
1、会议室预定审批：具有自动审批功能。管理员可对用户提交的会议室申请定单进行审批与调配，以便安排一些重要且紧急的会议。会议审批通过后，系统能够通过以太网将会议预订结果自动发送给参会人员及后勤服务部，后勤主管根据需求安排后勤人员进行准备工作，如排位安装及摆设，茶点布置、水果布置等服务。 2、会议通知提醒：可以通过手机短信、邮件、钉钉、企业微信、公众号进行会议提醒通知功能，通知包括：会议预订成功、取消预订、会议变更、会前15分钟（时长可设定）提醒、会议结束提醒、通知内容手动填写（需要参加会议人员提前查看的文档，
微信小程序之开发会议OA项目
02-18
微信小程序之开发会议OA项目源码
OA项目启动会议
08-14
OA项目启动会议
会议OA项目之会议发布（多功能下拉框的详解）
m0_74315688的博客
07-19 1141
会议发布的具体流程全部展出！！多功能下拉框也附有详细的详解呢！
【微信小程序】数字化会议OA系统之首页搭建（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
10-17 5073
为了响应国家推行的数字化时代，本篇文章以会议OA系统为背景进行微信小程序的编写，该篇文章为大家讲解了Flex布局的好处以及应用，通过Flex布局实现首页的轮播图搭建以及会议信息的搭建。
会议OA项目之会议审批（亮点功能：将审批人签名转换为电子手写签名图片）
热门推荐
m0_74315688的博客
07-23 1万+
如何将审批人签名转换为电子手写签名图片？？一篇十万字博文超级详解！！！
会议OA项目之我的会议（亮点功能：会议排座后生成png图片）
m0_74315688的博客
07-22 1847
一篇教会你完成‘我的会议’！！其中会议排座有做超详解哦！！！
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）
kissship的博客
10-17 2112
Flex 弹性布局是一种用于网页布局的现代 CSS 技术，旨在更灵活地管理容器内的元素排列和分布，以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型，通过使用属性，你可以将一个容器转变为一个弹性容器，从而控制其内部子元素的排列方式。
O2OA开源项目开发公文应用（二）：流程设计
liyi_hz2008的博客
06-03 718
一般一套公文系统包含发文、收文、签报等类型，发文根据实际业务场景可分为公司级别的发文，如公司发文、公司会议纪要、党，工，纪等发文，部门级别的发文，如部门发文，部门会议纪要等，收文一般有公司收文，部门收文等。根据发文中的主送抄送范围下发到对应的收文流程。 下面我们以最常见的公司发文，公司收文为例，讲解下如何设计这么一套收发文流程。 一、流程设计 1、公司发文 流程包含了拟稿、领导审核、核稿、会签、签发以及文书编号印发等基本环节。 相关环节说明： 拟稿：填写基本的信息，以及编写正文。 .
开源OA的公文编辑器详解：公文格式和基本使用
liyi_hz2008的博客
08-03 2462
　　作为开源协同办公项目，O2OA提供了符合国家党政机关公文格式标准（GB/T 9704—2012）的公文编辑组件，可以让用户在不需要付出额外成本，就可以实现标准化公文格式的编辑。 适用范围 　　公文编辑器不同于我们其他的在线文档编辑器，它基本上只限于公文系统中对红头文件的编辑和查看，规定了标准的格式、字体、行距、字据等，编辑自由度是比较低的。O2OA的公文编辑器适用于红头文件的处理，或是对格式要求非常严格的文书编辑。其他情况下的在线文档编辑功能，我们可以选择OnlyOffice、WPS等其他产品，您可
会议OA项目——layui
08-25
此项目是有关于layui的OA项目：里面有用户管理、发布会议、我的会议、我的审批、会议通知以及待开会议与历史会议的简单功能实现（小伙伴可以自己去提升这个OA项目的功能——优化内部代码） 里面涉及了一些（我个人...
OA云会议OA云会议OA云会议OA云会议
07-28
OA云会议OA云会议OA云会议OA云会议
微信小程序开发之会议OA项目首页搭建
10-17
搭建项目所需的图片资源
进阶2 探索图形化编程：扩展图形组件与切片开发的魅力
优树搭的博客
05-30 1592
当这些切片成功地通过图形程序串联起来后，在后续进行程序升级或维护时，大家会惊喜地发现，图形程序就如同清晰的路标一般，可以非常便捷地通过图形程序准确地定位到相关切片，并对这些切片进行在线查看、编辑和执行等操作。而且，这些切片的代码长度通常不会太长，相比传统开发的代码，阅读起来要容易得多，这无疑会给系统后续的工作带来极大的便利。
JavaScript第九讲：BOM编程
星途码客的博客
06-04 1079
今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。
设计模式之装饰器模式
最新发布
丿微风乍起的博客
06-05 667
装饰器模式是一种结构型设计模式，它允许我们在不改变原有对象结构的情况下，动态地给对象增加一些职责（即增加其额外功能）。其核心在于通过组合而非继承的方式来扩展对象的功能。Component: 这是抽象组件接口，所有的具体组件和装饰器都必须实现这个接口。Concrete Component: 具体组件，这是我们要装饰的基本对象，它实现了Component接口。Decorator: 抽象装饰器，也是实现Component接口的，它包含一个对Component类型的引用，通常在构造函数中初始化。
Java 异常处理中try-catch块、finally子句以及自定义异常的使用
Itmastergo的博客
05-31 1061
异常是程序运行过程中出现的非正常情况。Java 使用异常类（Exception 类及其子类）来表示这些异常情况。异常处理的核心思想是将正常的程序流程与异常处理流程分离开来，使代码更加清晰和可维护。Throwable 类：所有异常和错误的基类。Error 类：表示系统级的错误，程序通常无法处理，比如内存不足（OutOfMemoryError）。Exception 类：表示程序中可以处理的异常情况。RuntimeException 类。
Spring异步任务@Async的默认线程池执行器是如何初始化的
简放视野的专栏
06-03 577
Spring异步任务@Async的默认线程池执行器，是从哪里来？是如何初始化的？ 【结论】异步任务@Async的默认线程池执行器是通过TaskExecutionAutoConfiguration#applicationTaskExecutor自动注入的。
oa会议我的会议删除
07-27
根据提供的引用内容，我无法找到关于"oa会议我的会议删除"的具体信息。引用\[1\]提供了关于会议的不同状态和相关查询条件的介绍。引用\[2\]和引用\[3\]提供了关于会议状态的描述和SQL语句的编写。然而，没有提供关于删除会议的具体信息。请提供更多相关的引用内容或提供更详细的问题，以便我能够为您提供更准确的答案。 #### 引用[.reference_title] - *1* *3* [会议OA项目之我的会议](https://blog.csdn.net/qq_65345936/article/details/125949871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [会议OA之我的会议](https://blog.csdn.net/qq_44247968/article/details/125972115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值