• 会议OA之会议排座&送审

    目录

    最近这段时间一直都在与大家分享会议OA项目，今天继续分享关于会议OA项目的一个亮点功能，会议排座。以及一个送审功能。

    一、会议排座

    二、送审

    最近这段时间一直都在与大家分享会议OA项目，今天继续分享关于会议OA项目的一个亮点功能，会议排座。以及一个送审功能。

    一、会议排座

    1、会议排座插件

    为了实现会议排座功能，我们需要再网上寻找一个会议排座的插件。可以上百度搜索

     在网上找到的一个插件，但是发现了以下两个问题：

    ①、发现元素重叠，无法判定有几个人参会 ②、元素块太小看不清

    所以我们不能直接使用素材，需要改造以适用于我们的项目

    改造后：

    源代码：

    1.  
    2. <html>
    3.  
    4. 	<head>
    5.  
    6. 		<title>会议座位安排title>
    7.  
    8. 		<style type="text/css">
    9. 			* {
    10. 				padding: 0;
    11. 				margin: 0;
    12. 			}
    13.  
    14. 			.tips {
    15. 				/* position: absolute; */
    16. 				background: #eee;
    17. 				display: inline-block;
    18. 				height: 60px;
    19. 				width: 60px;
    20. 				line-height: 60px;
    21. 				text-align: center;
    22. 				margin: 5px;
    23. 			}
    24.  
    25. 			.add {
    26. 				position: fixed;
    27. 				right: 0;
    28. 				top: 0
    29. 			}
    30.  
    31. 			#tu {
    32. 				width: 564px;
    33. 				height: 330px;
    34. 				background: lightblue
    35. 					/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
    36. 			}
    37. 		style>
    38. 		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">script>
    39. 		<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js">script>
    40. 	head>
    41.  
    42. 	<body>
    43.  
    44.  
    45. 		<div id="tu">div>
    46. 		
    47.  
    48. 		<div class="add">
    49. 			<input id="dan_input" type="text" value="">
    50. 			<button onclick="return addDanMu()">添加座位button>
    51. 			<input id="jie_input" type="button" value='下载'>
    52. 		div>
    53.  
    54.  
    55.  
    56. 	body>
    57.  
    58. 	<script type="text/javascript">
    59. 		var $id = function(id) {
    60. 			return document.getElementById(id);
    61. 		}
    62.  
    63. 		var dragF = {
    64. 			locked: false,
    65. 			lastObj: undefined,
    66. 			drag: function(obj) {
    67. 				$id(obj).onmousedown = function(e) {
    68. 					var e = e ? e : window.event;
    69. 					if (!window.event) {
    70. 						e.preventDefault();
    71. 					} /* 阻止标注浏览器下拖动a,img的默认事件 */
    72. 					dragF.locked = true;
    73. 					$id(obj).style.position = "absolute";
    74. 					$id(obj).style.zIndex = "100";
    75. 					if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */
    76. 						dragF.lastObj.style.zIndex = "1";
    77. 					}
    78.  
    79. 					dragF.lastObj = $id(obj);
    80. 					var tempX = $id(obj).offsetLeft;
    81. 					var tempY = $id(obj).offsetTop;
    82.  
    83. 					dragF.x = e.clientX;
    84. 					dragF.y = e.clientY;
    85. 					document.onmousemove = function(e) {
    86. 						var e = e ? e : window.event;
    87. 						if (dragF.locked == false) return false;
    88. 						$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
    89. 						$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
    90. 						if (window.event) {
    91. 							e.returnValue = false;
    92. 						} /* 阻止ie下a,img的默认事件 */
    93.  
    94. 					}
    95.  
    96. 					document.onmouseup = function() {
    97. 						dragF.locked = false;
    98. 					}
    99. 				}
    100. 			}
    101. 		}
    102. 	script>
    103. 	<script>
    104. 		function addDanMu() {
    105. 			var dan = document.getElementById("dan_input").value;
    106. 			if (dan == "") {
    107. 				alert("请输入弹幕~");
    108. 				return false;
    109. 			} else {
    110. 				document.getElementById("dan_input").value = ""; //清空 弹幕输入框
    111. 				// var br = document.createElement("BR");  // 
    112. 				var node = document.createElement("DIV"); // 
    113. 				var tipsArr = document.getElementsByClassName('tips');
    114. 				var i;
    115. 				// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
    116. 				if (tipsArr.length == 0) {
    117. 					i = 1
    118. 				} else {
    119.  
    120. 					i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
    121. 				}
    122. 				// var aNode = document.createElement("P");   // 
    123. 				node.setAttribute("class", "tips");
    124. 				node.setAttribute("id", "tips" + i);
    125. 				node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
    126. 				var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 
        中
    127. 				// aNode.appendChild(textnode);
    128. 				node.appendChild(textnode);
    129. 				// document.body.appendChild(br);
    130. 				// document.body.appendChild(node);
    131.  
    132. 				document.getElementById("tu").appendChild(node);
    133. 				return true;
    134. 			}
    135.  
    136.  
    137. 		}
    138. 	script>
    139.  
    140. 	<script type="text/javascript">
    141. 		$("#jie_input").on("click", function(event) {
    142. 			event.preventDefault();
    143. 			html2canvas(document.getElementById("tu")).then(function(canvas) {
    144. 				var dataUrl = canvas.toDataURL();
    145. 				var newImg = document.createElement("img");
    146. 				newImg.src = dataUrl;
    147. 				// document.body.appendChild(newImg);
    148. 				// console.log(dataUrl)
    149. 				this.downloadFile('测试.png', dataUrl);
    150.  
    151. 			});
    152. 		});
    153.  
    154. 		//下载
    155. 		function downloadFile(fileName, content) {
    156. 			debugger;
    157. 			let aLink = document.createElement('a');
    158. 			let blob = this.base64ToBlob(content); //new Blob([content]);
    159.  
    160. 			let evt = document.createEvent("HTMLEvents");
    161. 			evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    162. 			aLink.download = fileName;
    163. 			aLink.href = URL.createObjectURL(blob);
    164.  
    165. 			// aLink.dispatchEvent(evt);
    166. 			//aLink.click()
    167. 			aLink.dispatchEvent(new MouseEvent('click', {
    168. 				bubbles: true,
    169. 				cancelable: true,
    170. 				view: window
    171. 			})); //兼容火狐
    172. 		}
    173. 		//base64转blob
    174. 		function base64ToBlob(code) {
    175. 			let parts = code.split(';base64,');
    176. 			let contentType = parts[0].split(':')[1];
    177. 			let raw = window.atob(parts[1]);
    178. 			let rawLength = raw.length;
    179.  
    180. 			let uInt8Array = new Uint8Array(rawLength);
    181.  
    182. 			for (let i = 0; i < rawLength; ++i) {
    183. 				uInt8Array[i] = raw.charCodeAt(i);
    184. 			}
    185. 			return new Blob([uInt8Array], {
    186. 				type: contentType
    187. 			});
    188. 		}
    189. 	script>
    190.  
    191. html>

    2、将会议排座插件运用到项目中

    我们需要将会议排座以html的格式转换为jsp页面，同时当我们点击会议排座时，能够弹出会议排座这个页面

    2.1会议排座jsp页面

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head>
    6. <base href="${pageContext.request.contextPath }/"/>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <link href="static/js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    9. <script type="text/javascript" src="static/js/jquery-3.3.1.min.js">script>
    10. <script type="text/javascript" src="static/js/layui/layui.js">script>
    11. <script type="text/javascript" src="static/js/plugins/html2canvas/html2canvas.js">script>
    12. <title>会议座位安排title>
    13. head>
    14. <style type="text/css">
    15. * {
    16. 	padding: 0;
    17. 	margin: 0;
    18. }
    19. 		
    20. body{
    21. 	width: 100%;
    22. 	height: 100%;
    23. 	/* background: red; */
    24. }
    25.  
    26. .tips {
    27. 	/* position: absolute; */
    28. 	background: pink;
    29. 	display: inline-block;
    30. 	height: 60px;
    31. 	/* width: 60px; */
    32. 	line-height: 60px;
    33. 	text-align: center;
    34. 	margin: 5px;
    35. 	padding: 0 10px;
    36. }
    37.  
    38. .add {
    39. 	position: fixed;
    40. 	right: 10px;
    41. 	top: 10px;
    42. 	display:inline;
    43. }
    44.  
    45. #tu {
    46. 	width: 100%;
    47. 	height: 100%;
    48. 	/* background: lightblue; */
    49. 		/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
    50. }
    51. .layui-input{
    52. 	height:30px;
    53. }
    54. style>
    55. <body id="screen_body">
    56.     <div id="tu">div>
    57.     
    58. 	<div class="add">
    59. 		<div style="display:inline-block;">
    60. 			<input id="dan_input" type="text" value="" class="layui-input">
    61. 		div>
    62. 		<div style="display:inline-block;">
    63. 			<button onclick="return addDanMu()" class="layui-btn layui-btn-sm">添加座位button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value='下载'>
    64. 		div>
    65. 	div>
    66. body>
    67. <script type="text/javascript">
    68. var $id = function(id) {
    69. 	return document.getElementById(id);
    70. }
    71. //会议排座拖拽
    72. var dragF = {
    73. 	locked: false,
    74. 	lastObj: undefined,
    75. 	drag: function(obj) {
    76. 		$id(obj).onmousedown = function(e) {
    77. 			var e = e ? e : window.event;
    78. 			if (!window.event) {
    79. 				e.preventDefault();
    80. 			} /* 阻止标注浏览器下拖动a,img的默认事件 */
    81. 			dragF.locked = true;
    82. 			$id(obj).style.position = "absolute";
    83. 			$id(obj).style.zIndex = "100";
    84. 			if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */
    85. 				dragF.lastObj.style.zIndex = "1";
    86. 			}
    87.  
    88. 			dragF.lastObj = $id(obj);
    89. 			var tempX = $id(obj).offsetLeft;
    90. 			var tempY = $id(obj).offsetTop;
    91.  
    92. 			dragF.x = e.clientX;
    93. 			dragF.y = e.clientY;
    94. 			document.onmousemove = function(e) {
    95. 				var e = e ? e : window.event;
    96. 				if (dragF.locked == false) return false;
    97. 				$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
    98. 				$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
    99. 				if (window.event) {
    100. 					e.returnValue = false;
    101. 				} /* 阻止ie下a,img的默认事件 */
    102.  
    103. 			}
    104.  
    105. 			document.onmouseup = function() {
    106. 				dragF.locked = false;
    107. 			}
    108. 		}
    109. 	}
    110. }
    111. script>
    112.  
    113. <script type="text/javascript">
    114. var layer;
    115. layui.use(['layer'],function(){
    116. 	layer=layui.layer;
    117.  
    118.     //初始化会议排座：根据会议ID获取参会的所有人员的名字（主持人+参会人+列席人）
    119. 	initMeetingUsers();
    120. 	
    121. 	//绘制会议排座图片
    122. 	$("#jie_input").on("click", function(event) {
    123. 		$('.add').hide();
    124. 		event.preventDefault();
    125. 		html2canvas(document.getElementById("screen_body")).then(function(canvas) {
    126. 			var dataUrl = canvas.toDataURL();
    127. 			console.log(dataUrl);
    128. 			var param = {};
    129. 			param['seatPic'] = dataUrl;
    130. 			param['id'] = '${param.id}';
    131. 			param['methodName']='updateSeatPicById';
    132. 			console.log(param);
    133. 			//此处需要完成会议排座图片上传操作
    134. 			$.post('${pageContext.request.contextPath }/info.action',param,function(rs){
    135. 				if(rs.success){
    136. 					//先得到当前iframe层的索引
    137. 					var index = parent.layer.getFrameIndex(window.name); 
    138. 					//再执行关闭
    139. 					parent.layer.close(index); 
    140. 					//调用父页面的刷新方法
    141. 					parent.query();
    142. 				}else{
    143. 					layer.msg(rs.msg,{icon:5},function(){});
    144. 				}
    145. 			},'json');
    146. 		});
    147. 	});
    148. });
    149.  
    150. function initMeetingUsers(){
    151. 	//http://localhost:8080/xxx/seatPic.jsp?id=12  -> ${param.id}
    152. 	$.getJSON('${pageContext.request.contextPath }/user.action',{
    153. 		'methodName':'queryUserByMeetingId',
    154. 		'meetingId':'${param.id}'
    155. 	},function(rs){
    156. 		console.log(rs);
    157. 		let data=rs.data;
    158. 		$.each(data,function(i,e){
    159. 			$('#dan_input').val(e.name);
    160. 			addDanMu();
    161. 		});
    162. 	});
    163. }
    164.  
    165.  
    166. //添加会议排座
    167. function addDanMu() {
    168. 	var dan = document.getElementById("dan_input").value;
    169. 	if (dan == "") {
    170. 		alert("请输入弹幕~");
    171. 		return false;
    172. 	} else {
    173. 		document.getElementById("dan_input").value = ""; //清空 弹幕输入框
    174. 		// var br = document.createElement("BR");  // 
    175. 		var node = document.createElement("DIV"); // 
    176. 		var tipsArr = document.getElementsByClassName('tips');
    177. 		var i;
    178. 		// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
    179. 		if (tipsArr.length == 0) {
    180. 			i = 1
    181. 		} else {
    182.  
    183. 			i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
    184. 		}
    185. 		// var aNode = document.createElement("P");   // 
    186. 		node.setAttribute("class", "tips");
    187. 		node.setAttribute("id", "tips" + i);
    188. 		node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
    189. 		var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 
        中
    190. 		// aNode.appendChild(textnode);
    191. 		node.appendChild(textnode);
    192. 		// document.body.appendChild(br);
    193. 		// document.body.appendChild(node);
    194.  
    195. 		document.getElementById("tu").appendChild(node);
    196. 		return true;
    197. 	}
    198. }
    199. 	script>
    200. html>

    2.2在我的会议js代码中添加打开会议排座的ajax方法 layer.open

    1. //打开会议排座对话框
    2. function open(id){
    3. 	layer.open({
    4.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    5.         title: '会议排座',                   //对话框标题
    6.         area: ['460px', '340px'],   //宽高
    7.         skin: 'layui-layer-rim',    //样式类名
    8.         content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    9.     });
    10. }

     2.3运行效果:

    3、会议参会用户数据 初始化

    现在我们已经成功将插件运用到项目中，但是实际上该会议的参会者数据我们应该拿到并且绑定在会议排座的界面上，然后在拖动元素进行排座。

    3.1编写SQL语句

    SQL语句对比

     

     

    使用函数Find_in_set

     

     

    1. select * from t_oa_user where FIND_IN_SET(id,"
    2. 				+ "(select concat(canyuze,',',liexize,',',zhuchiren) uid "
    3. 				+ "from t_oa_meeting_info where id="+meetingId+"))

    3.2后台编码

    userDao

    1. public List queryUserByMeetingId(Long meetingId) throws Exception{
    2. 		String sql="select * from t_oa_user where FIND_IN_SET(id,"
    3. 				+ "(select concat(canyuze,',',liexize,',',zhuchiren) uid "
    4. 				+ "from t_oa_meeting_info where id="+meetingId+"))";
    5. 		return super.executeQuery(sql, User.class, null);
    6. 	}

    userAction

    1. public String queryUserByMeetingId(HttpServletRequest req,HttpServletResponse resp) throws Exception{
    2. 		try {
    3. 			String meetingId = req.getParameter("meetingId");
    4. 			List users = userDao.queryUserByMeetingId(Long.valueOf(meetingId));
    5. 			CommonUtils.toJson(true, users, resp);
    6. 		} catch (Exception e) {
    7. 			CommonUtils.toJson(false,"获取参会人员信息失败", resp);
    8. 			e.printStackTrace();
    9. 		}
    10. 		return null;
    11. 	}

    错误提示：记得记得记得记得一定要导入jquery类库 ，，不然无法将数据显示在会议排座界面上

     

     

    4、生成会议排座图片

    4.1meetinginfoDao

    1. //	根据会议ID更新会议的排座图片
    2. 	public int updateSeatPicById(MeetingInfo info) throws Exception {
    3. 		String sql="update t_oa_meeting_info set seatPic=? where id=?";
    4. 		return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
    5. 	}

    4.2meetinginfoAction

    1. //	根据会议id更新排座
    2. 	public String updateSeatPicById(HttpServletRequest req,
    3. 			HttpServletResponse resp) throws Exception{
    4. 		try {
    5. 			//1.将排座图片保存到指定的位置并得到图片路径
    6. 			//1) 定义会议图片的保存路径
    7. 			String serverPath=PropertiesUtil.getValue("serverPath");
    8. 			String dirPath=PropertiesUtil.getValue("dirPath");
    9. 			//2) 定义会议排座图片的名称(最终要保存到数据库表中)，例如：/uploads/xxxxx.jpg
    10. 			String fileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
    11. 			//3) 拼接成完整的路径
    12. 			String realPath=dirPath+fileName;
    13. 			//4) 将图片保存到指定位置
    14. 			Base64ImageUtils.GenerateImage(info.getSeatPic().replace("data:image/png;base64,",""), realPath);
    15. 			
    16. 			//2.根据会议ID修改会议图片信息
    17. 			info.setSeatPic(serverPath+fileName);
    18. 			infoDao.updateSeatPicById(info);
    19. 			ResponseUtil.writeJson(resp, R.ok(200, "更新会议的排座图片成功"));
    20. 		} catch (Exception e) {
    21. 			e.printStackTrace();
    22. 			try {
    23. 				ResponseUtil.writeJson(resp, R.error(0, "更新会议的排座图片失败"));
    24. 			} catch (Exception e1) {
    25. 				e1.printStackTrace();
    26. 			}
    27. 		}
    28. 		return null;
    29. 	}

     点击下载然后就能显示在我们本地的E盘上并且能够在界面上显示

     

     

     

     

    二、送审

     

    1、后台编码

    1.1meetinginfoDao

    1. //	根据会议ID更新会议的审批人（送审）
    2. 	public int updateAuditorById(MeetingInfo info) throws Exception {
    3. 		String sql="update t_oa_meeting_info set auditor=?,state=2 where id=?";
    4. 		return super.executeUpdate(sql, info, new String[] {"auditor","id"});
    5.  
    6.  
    7. }

    1.2meetinginfoAction

    1. //	根据会议ID更新会议的审批人（送审）
    2. 	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
    3. 		try {
    4. 			int rs = infoDao.updateAuditorById(info);
    5. 			if (rs > 0) {
    6. 				ResponseUtil.writeJson(resp, R.ok(200, "会议审批成功"));
    7. 			}else {
    8. 				ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));
    9. 			}
    10. 		} catch (Exception e) {
    11. 			e.printStackTrace();
    12. 			try {
    13. 				ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));
    14. 			} catch (Exception e1) {
    15. 				e1.printStackTrace();
    16. 			}
    17. 		}
    18. 		return null;
    19. 	}

    2、前台编码

    meetinginfo.js

    1. //会议送审
    2. function openLayerAudit(){
    3. 	//每次打开都对送审人进行初始化默认值设置
    4. 	$('#auditor').val("");
    5. 	//必须重新渲染
    6. 	form.render('select');
    7. 	//弹出对话框
    8.     layer.open({
    9.         type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    10.         title:'会议送审',
    11.         area: ['426px', '140px'],   //宽高
    12.         skin: 'layui-layer-rim',    //样式类名
    13.         content: $('#audit'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    14.     });
    15. }

     运行效果：

     

  • 相关阅读:
    彻底搞懂原生事件流和 React 事件流
    快速入门 Docker，看这一篇文章就够
    云呐|机房监控服务平台，机房监控服务平台有哪些
    Windows10 Docker 安装教程
    GPTS应用怎么创建？GPTS无法创建应用很卡怎么办
    我为什么拒绝了一个5年测开经验的候选人
    中华环保联合会获得国家“绿色制造体系” 第三方评价机构资格
    LeetCode每日一题——672. 灯泡开关 Ⅱ
    Langchain-Chatchat项目：1-整体介绍
    java八股文面试[数据库]——MySQL中事务的特性
  • 原文地址：https://blog.csdn.net/m0_67477525/article/details/125981113