会议OA项目之会议发布（一）

news2024/11/16 17:32:41

 

                                                 目录

         前言：

        会议发布的产品原型图：

1.会议发布

1.1实现的特色功能：

1.2思路：

        使用的数据库：

        我们要实现多功能下拉框的形式选择可以参考原文档：https://hnzzmsf.github.io/example/example_v4.html#download

1.3使用的知识技术：formSelect插件（用于下拉显示得到的参与用户数据将点击下拉        的数据显示到文本框中），ajax，session保存

1.4实现功能：

        addMeeting.js

        在UserDao中写一个查询所有用户的方法：

        UserAction新增一个查询用户

        MeetingInfoAction

        MeetingInfoDao

1.5演示效果：

  前言：

 今天小编带来的是会议OA项目功能之会议发布功能，我们今天正式进入这个会议OA项目的分享。

使用的开发工具：eclipse，MySQL，tonmcat8.5，

会议发布的产品原型图：

 

1.会议发布

1.1实现的特色功能：

1将参与人员的名字能够通过下拉框的形式选择，2添加具有具体时间的选择器，3发布成功后，刷新表单。

1.2思路：

 分析得出在这个界面就是LayUi的一个表单提交的功能我们去官网中找到对应的源码这个页面的前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeeting.js"></script>
<title>发布会议</title>
</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>

使用的数据库：

 

我们要实现多功能下拉框的形式选择可以参考原文档：https://hnzzmsf.github.io/example/example_v4.html#download

1.下载相关的js文件以及css文件

 

 

我们下载的js/css都在这里面。

将这4个文件下载下来

引入了外部资源后我们便可以根据官网的介绍，来进行我们addMeeting.js的编码工作

将它写的数据改变，使用Ajax传递我们想要传递的数据就行了！

 

 

1.3使用的知识技术：formSelect插件（用于下拉显示得到的参与用户数据将点击下拉的数据显示到文本框中），ajax，session保存

1.4实现功能：

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新增一个查询用户

/**
		 * 添加会议的用户信息
		 * @param req
		 * @param resp
		 * @return
		 */
		public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
			try {
				List<Map<String, Object>> users = userdao.queryUserAll(user,null);
				ResponseUtil.writeJson(resp, R.ok(200, "获取用户多选框数据成功！！！", users));
			} catch (Exception e) {
				e.printStackTrace();
				try {
					ResponseUtil.writeJson(resp, R.error(0, "获取用户多选框数据失败"));
				} catch (Exception e1) {
					e1.printStackTrace();
				}
			}
			return null;
		}

这里我们将查询到的方法更新到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
		});
	})
 
 
})

我们查看LayUi的官网，进行copy对应的资源

layDate - JS 日期和时间选择器组件/插件 - 在线演示 - Layuiicon-default.png?t=N6B9http://layui.org.cn/demo/laydate.html

 

MeetingInfoAction

	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int rs = meetingInfoDao.add(info);
			if (rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "会议信息增加成功"));
			} else {
				ResponseUtil.writeJson(resp, R.error(0, "会议信息增加失败"));
			}

		} catch (Exception e) {
			e.printStackTrace();
		}
		return "toList";
	}

MeetingInfoDao

	/**
	 * 会议新增
	 * 
	 * @param meetingInfo
	 * @return
	 * @throws Exception
	 */
	public int add(MeetingInfo meetingInfo) throws Exception {
		String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,\r\n"
				+ "location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, meetingInfo, new String[] { "title", "content", "canyuze", "liexize", "zhuchiren",
				"location", "startTime", "endTime", "remark" });
	}

我们实体中的时间是data类型，这里在Action中注册一个转接器(用于时间date类型转页面显示) 我们可以用到一个工具类（将转换的代码全部封装起来，那么以后在其他的地方就方便调用）

	@Override
	public MeetingInfo getModel() {
		// 注册一个转接器(用于时间date类型转页面显示)
//		ConvertUtils.register(new MysqlxDatatypes, Date.class);
		return info;
	}

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.5演示效果：

 

今天会议管理就分享到这里了！

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/804730.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

运算放大器--------加减运算电路

运算放大器--------加减运算电路

反向求和运算电路 电路 公式 同向加法运算电路 电路 公式 加减运算电路 分别求正向输入的输出和反相输入的输出&#xff0c;然后求和就可以得到到最终的输出。 切记&#xff0c;虚短虚断不是真正的断路和短路。
阅读更多...
antDesign的a-select数据回显选中initialValue问题解决方法

antDesign的a-select数据回显选中initialValue问题解决方法

在开发过程中表单中的【学习专业】下拉列表项需要数据回显&#xff0c;设置了initialValue&#xff0c;但只显示下拉选项的majorId值, 没有显示具体的专业名称&#xff0c;经排查发现是majorId数据类型导致的&#xff0c;下拉选项majorList数组中的id是数值类型&#xff0c;而在…
阅读更多...
LeetCode｜backtracking｜review：40. 131. 93. 47. 332. | 37. Sudoku Solver

LeetCode｜backtracking｜review：40. 131. 93. 47. 332. | 37. Sudoku Solver

复习&#xff1a; 40. Combination Sum II [1,1,2,3]中&#xff0c;答案里有[1,1,2], 但是不能有两个[1,2,3] 131. Palindrome Partitioning 每个for都是在给定的start之后找一个palindrome。当start 93. Restore IP Addresses forloop每次loop都是在给定的start的后三个数…
阅读更多...
Redis三种模式——主从复制，哨兵模式，集群

Redis三种模式——主从复制，哨兵模式，集群

目录 一、主从复制 1.1主从复制的概念 1.2Redis主从复制作用 1.2.1数据冗余 1.2.2故障恢复 1.2.3负载均衡 1.2.4高可用基石 1.3Redis主从复制流程 1.4部署Redis 主从复制 1.4.1.环境部署 1.4.2.所有服务器都先关闭防火墙 1.4.3.所有服务器都安装Redis 1.4.4修改Master主节点R…
阅读更多...
IFIX5.8安装教程

IFIX5.8安装教程

管理员身份运行&#xff1a; 安装&#xff1a; 下次安装的时候选择SCADA服务器&#xff0c;独立。然后下图就不会出现了。 重启电脑&#xff1a;
阅读更多...
【2050. 并行课程 III】

【2050. 并行课程 III】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个整数 n &#xff0c;表示有 n 节课&#xff0c;课程编号从 1 到 n 。同时给你一个二维整数数组 relations &#xff0c;其中 relations[j] [prevCoursej, nextCoursej] &#xff0c;表示课程…
阅读更多...
SkyEye与Jenkins的DevOps持续集成解决方案

SkyEye与Jenkins的DevOps持续集成解决方案

在技术飞速发展的当下&#xff0c;随着各行各业的软件逻辑复杂程度提升带来的需求变更&#xff0c;传统测试已无法满足与之相对应的一系列测试任务&#xff0c;有必要引入一个自动化、可持续集成构建的DevOps平台来解决此类问题。本文将主要介绍SkyEye与Jenkins的持续集成解决方…
阅读更多...
MySQL基础扎实——Like声明中的%什么意思

MySQL基础扎实——Like声明中的%什么意思

语意讲解 在MySQL的LIKE语句中&#xff0c;%是一个通配符&#xff0c;用于匹配任意长度&#xff08;包括零长度&#xff09;的字符序列。 具体来说&#xff0c;当使用%放置在LIKE语句中的模式中时&#xff0c;它表示可以匹配任意字符的序列。这个字符序列可以是零个字符、一个…
阅读更多...
VOC 格式与 YOLO 格式的相互转换

VOC 格式与 YOLO 格式的相互转换

目录 数据集介绍VOC 格式转换为 YOLO 格式YOLO 格式转换为 VOC 格式 数据集介绍 本文使用的数据集是自制的安全帽数据集&#xff0c;共含有 6696 张图片&#xff0c;部分图片如下&#xff1a; 以及对应的 6696 个 VOC 格式的 xml 标注文件&#xff0c;部分文件如下&#xff1a…
阅读更多...
[Linux]进程间通信

[Linux]进程间通信

[Linux]进程间通信 文章目录 [Linux]进程间通信进程间通信什么是进程间通信进程间通信的目的进程间通信的本质为什么存在进程间通信进程间通信的分类 管道什么是管道匿名管道本质pipepipe的使用匿名管道读写情况匿名管道的特征 命名管道本质命令行创建命名管道创建和删除命名管…
阅读更多...
SolidWorks绘制Maxwell仿真用带桥接的三维平板螺旋线圈

SolidWorks绘制Maxwell仿真用带桥接的三维平板螺旋线圈

文章目录 前言一、建立涡状线二、拉伸方法1&#xff08;建立工作面&#xff0c;较复杂&#xff09;三、拉伸方法2&#xff08;穿透&#xff0c;较简单&#xff09;四、建立桥接 前言 在使用Maxwell进行电磁场仿真时&#xff0c;经常需要绘制各种异形线圈&#xff0c;由于Maxwel…
阅读更多...
5.定时器-间歇函数

5.定时器-间歇函数

网页中经常会需要一种功能&#xff1a;每隔一段时间需要自动执行一段代码&#xff0c;不需要我们手动去触发 例如&#xff1a;网页中的倒计时 ●要实现这种需求&#xff0c;需要定时器函数 5.1开启定时器 语法 setInterval(函数,间隔时间)作用&#xff1a;每隔一段时间调用这…
阅读更多...
Spring 6【单例设计模式、bean标签的scope属性、Spring 循环注入问题】(八)-全面详解（学习总结---从入门到深化）

Spring 6【单例设计模式、bean标签的scope属性、Spring 循环注入问题】(八)-全面详解（学习总结---从入门到深化）

目录 十五、单例设计模式 十六、bean标签的scope属性 十七、Spring 循环注入问题 十五、单例设计模式 设计模式&#xff1a;根据面向对象五大设计思想衍生出的23种常见代码写法&#xff0c;每种写法可以专门解决一类问题。 单例设计模式&#xff1a;保证某个类在整个应用程…
阅读更多...
一文搞懂加密和接口签名小知识

一文搞懂加密和接口签名小知识

最近在做的接口自动化测试工程中&#xff0c;一些接口需要签名&#xff0c;涉及到了加解密的一些知识&#xff0c;顺手梳理了下&#xff0c;分享给大家。 主要分为四个部分介绍&#xff1a; 一、基础概念 二、加密算法介绍 三、接口签名 四、实例分析 一、基础概念 加密是…
阅读更多...
Leetcode 27 移除元素 代码逐行讲解

Leetcode 27 移除元素 代码逐行讲解

Leetcode 27 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考…
阅读更多...
Go语言中的结构体详解

Go语言中的结构体详解

关于 Golang 结构体 Golang 中没有“类”的概念&#xff0c;Golang 中的结构体和其他语言中的类有点相似。和其他面向对 象语言中的类相比&#xff0c;Golang 中的结构体具有更高的扩展性和灵活性。 Golang 中的基础数据类型可以表示一些事物的基本属性&#xff0c;但是当我们…
阅读更多...
【Python】二维离散小波变换（2D-DWT）实现

【Python】二维离散小波变换（2D-DWT）实现

文章目录 小波变换程序实现子带数学公式 小波变换 小波变换&#xff08;Wavelet Transform&#xff09;是一种数学信号处理技术&#xff0c;用于将信号或图像分解为不同频率的小波成分&#xff0c;从而可以在不同时间尺度上分析信号的特征。小波变换具有许多重要的特性&#x…
阅读更多...
安装Python之后 安装库报错 There was an error checking the latest version of pip.

安装Python之后 安装库报错 There was an error checking the latest version of pip.

报错代码 & 图片如下 Looking in indexes: https://pypi.tuna.tsicmdnghua.edu.cn/simple WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HT…
阅读更多...
Matplotlib_概述_绘制图象

Matplotlib_概述_绘制图象

⛳绘制基础 在使用 Matplotlib 绘制图形时&#xff0c;其中有两个最为常用的场景。一个是画点&#xff0c;一个是画线。 pyplot 基本方法的使用如下表所示 方法名说明title()设置图表的名称xlabel()设置 x 轴名称ylabel()设置 y 轴名称xticks(x, ticks, rotation)设置 x 轴的…
阅读更多...
【蓝图】p44简单解密机关

【蓝图】p44简单解密机关

p44简单解密机关 p44简单解密机关文字提示开门文字提示开灯For Each Loop和For Each Loop With Break区别For Each LoopFor Each Loop With Break小操作&#xff1a;改变走线Execute Console Command(执行控制台命令) p44简单解密机关 文字提示开门 创建Actor蓝图类&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023