• 会议OA之我的会议（排座&送审）

    目录

    一、排座

    后台代码

    dao方法

    web层 

    js代码 

    配置文件 

    前端代码

    二、送审

    后台代码

    dao方法

    web层

    js代码

    一、排座

    实现思路

    1.查询出本场会议中的所有参与人员
2.需要完成在页面上元素的拖动功能，把对应的参会人员放在指定位置，如：重要的人就放在主位
3.将已经画好的会议座位图，保存下来，并且绑定到本次会议数据上去；
代码的实现顺序是2、1、3

    后台代码

    dao方法

    userDao.java

    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) "
    4. 				+ "from t_oa_meeting_info where id="+meetingId+"))";
    5. 		return super.executeQuery(sql, User.class, null);
    6. 	}

    web层 

    userAction.java

    1. //	获取排座用户数据
    2. 	public String queryUserByMeetingId(HttpServletRequest req, HttpServletResponse resp) {
    3. 		try {
    4. 			Long meetingId = Long.parseLong(req.getParameter("meetingId"));
    5. 			List users = userdao.queryUserByMeetingId(meetingId);
    6. 			ResponseUtil.writeJson(resp, R.ok(200, "获取排座用户数据成功！！！", users));
    7. 		} catch (Exception e) {
    8. 			e.printStackTrace();
    9. 			try {
    10. 				ResponseUtil.writeJson(resp, R.error(0, "获取排座用户数据失败！！！"));
    11. 			} catch (Exception e1) {
    12. 				e1.printStackTrace();
    13. 			}
    14. 		}
    15.  
    16. 		return null;
    17. 	}

    MeetingInfoAction.java 

    1. package com.maomao.web;
    2.  
    3. import java.io.IOException;
    4. import java.util.Date;
    5. import java.util.List;
    6. import java.util.Map;
    7. import java.util.UUID;
    8.  
    9. import javax.servlet.ServletException;
    10. import javax.servlet.http.HttpServletRequest;
    11. import javax.servlet.http.HttpServletResponse;
    12.  
    13. import org.apache.commons.beanutils.ConvertUtils;
    14.  
    15. import com.maomao.dao.MeetingInfoDao;
    16. import com.maomao.entity.MeetingInfo;
    17. import com.zking.framework.ActionSupport;
    18. import com.zking.framework.ModelDriver;
    19. import com.zking.util.Base64ImageUtils;
    20. import com.zking.util.MyDateConverter;
    21. import com.zking.util.PageBean;
    22. import com.zking.util.PropertiesUtil;
    23. import com.zking.util.R;
    24. import com.zking.util.ResponseUtil;
    25.  
    26. public class MeetingInfoAction extends ActionSupport implements ModelDriver{
    27. 	private MeetingInfo info = new MeetingInfo();
    28. 	private MeetingInfoDao meetingInfoDao = new MeetingInfoDao();
    29.  
    30. 	@Override
    31. 	public MeetingInfo getModel() {
    32. 		//方式二：
    33. 	    ConvertUtils.register(new MyDateConverter(),Date.class);
    34. 		return info;
    35. 	}
    36. 	
    37. 	
    38. //	根据会议ID更新会议的排座图片
    39. 	public String updateSeatPicById(HttpServletRequest req,
    40. 			HttpServletResponse resp) throws ServletException,IOException{
    41. 		try {
    42. 			//1.将排座图片保存到指定的位置并得到图片路径
    43. 			//1) 定义会议图片的保存路径
    44. 			String serverPath=PropertiesUtil.getValue("serverPath");
    45. 			String dirPath=PropertiesUtil.getValue("dirPath");
    46. 			//2) 定义会议排座图片的名称(最终要保存到数据库表中)，例如：/uploads/xxxxx.jpg
    47. 			String fileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
    48. 			//3) 拼接成完整的路径
    49. 			String realPath=dirPath+fileName;
    50. 			//4) 将图片保存到指定位置
    51. 			Base64ImageUtils.GenerateImage(info.getSeatPic().replace("data:image/png;base64,",""), realPath);
    52. 			
    53. 			//2.根据会议ID修改会议图片信息
    54. 			info.setSeatPic(serverPath+fileName);
    55. 			meetingInfoDao.updateSeatPicById(info);
    56. 			ResponseUtil.writeJson(resp, R.ok(200, "更新会议的排座图片成功"));
    57. 		} catch (Exception e) {
    58. 			e.printStackTrace();
    59. 			try {
    60. 				ResponseUtil.writeJson(resp, R.error(0, "更新会议的排座图片失败"));
    61. 			} catch (Exception e1) {
    62. 				e1.printStackTrace();
    63. 			}
    64. 		}
    65. 		return null;
    66. 	}
    67. 	
    68. 	
    69. }
    70.

    js代码 

    meeting.js

    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. }
    11.

    配置文件 

    建一个配置文件以properties为后缀的文件

    1.在这里的E盘是本人的保存排座的路径，可以自己修改；
    2.该配置文件要放在根目录，并在server里进行配置

    1. dirPath=E:/temp/images/T280/
    2. serverPath=/upload/paizuo/（在/upload前不要加项目名，防止当其他项目用的时候，图片路径错误，提高使用率）
    3. dirPathSign=E:/temp/images/T280/sign/
    4. serverPathSign=/upload/sign/

     

    前端代码

    setPic.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. 				console.log(rs);
    136. 				if(rs.success){
    137. 					//先得到当前iframe层的索引
    138. 					var index = parent.layer.getFrameIndex(window.name); 
    139. 					//再执行关闭
    140. 					parent.layer.close(index); 
    141. 					//调用父页面的刷新方法
    142. 					parent.query();
    143. 				}else{
    144. 					layer.msg(rs.msg,{icon:5},function(){});
    145. 				}
    146. 			},'json');
    147. 		});
    148. 	});
    149. });
    150.  
    151. function initMeetingUsers(){
    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>
    201.

     展示：

     

    二、送审

    后台代码

    dao方法

    MeetingInfoDao.java

    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. 	}

    web层

    MeetingInfoAction.java

    1. //	根据会议ID更新会议的审批人（送审）
    2. 	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
    3. 		try {
    4. 			int rs = meetingInfoDao.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. 	}

    js代码

    1. let layer,table,$,form;
    2. let row;
    3. layui.use(['layer','table','jquery','form'],function(){
    4. 	layer=layui.layer,
    5. 	table=layui.table,
    6. 	form=layui.form,
    7. 	$=layui.jquery;
    8. 	
    9. 	initTable();
    10. 	
    11. 	//查询事件
    12. 	$('#btn_search').click(function(){
    13. 		query();
    14. 	});
    15. 	
    16. 	//初始化审批人
    17. 	initFormSelects();
    18. 	
    19. 	//送审
    20. 	$('#btn_auditor').click(function(){
    21. 		$.post($("#ctx").val()+'/info.action',{
    22. 			'methodName':'updateAuditorById',
    23. 			'id':$('#meetingId').val(),
    24. 			'auditorName':$('#auditorName').val()
    25. 		},function(rs){
    26. 			if(rs.success){
    27. 				//关闭对话框
    28. 				layer.closeAll();
    29. 				//刷新列表
    30. 				query();
    31. 			}else{
    32. 				layer.msg(rs.msg,{icon:5},function(){});
    33. 			}
    34. 		},'json');
    35. 		return false;
    36. 	});
    37. 	
    38. });
    39.  
    40. //1.初始化数据表格
    41. function initTable(){
    42. 	table.render({          //执行渲染
    43.         elem: '#tb',   //指定原始表格元素选择器（推荐id选择器）
    44.         height: 400,         //自定义高度
    45.         loading: false,      //是否显示加载条（默认 true）
    46.         cols: [[             //设置表头
    47.             {field: 'id', title: '会议编号', width: 90},
    48.             {field: 'title', title: '会议标题', width: 120},
    49.             {field: 'location', title: '会议地点', width: 140},
    50.             {field: 'startTime', title: '开始时间', width: 120},
    51.             {field: 'endTime', title: '结束时间', width: 120},
    52.             {field: 'meetingState', title: '会议状态', width: 120},
    53.             {field: 'seatPic', title: '会议排座', width: 120,
    54.             	templet: function(d){
    55.                     if(d.seatPic==null || d.seatPic=="")
    56.                     	return "尚未排座";
    57.                     else
    58.                     	return "";
    59.                 }
    60.             },
    61.             {field: 'auditorName', title: '审批人', width: 120},
    62.             {field: '', title: '操作', width: 200,toolbar:'#tbar'},
    63.         ]]
    64.    });
    65. }
    66.  
    67. //2.点击查询
    68. function query(){
    69. 	table.reload('tb', {
    70.         url: $("#ctx").val()+'/info.action',     //请求地址
    71.         method: 'POST',                    //请求方式，GET或者POST
    72.         loading: true,                     //是否显示加载条（默认 true）
    73.         page: true,                        //是否分页
    74.         where: {                           //设定异步数据接口的额外参数，任意设
    75.         	'methodName':'myInfos',
    76.         	'zhuchiren':$('#zhuchiren').val(),
    77.         	'title':$('#title').val(),
    78.         },  
    79.         request: {                         //自定义分页请求参数名
    80.             pageName: 'page', //页码的参数名称，默认：page
    81.             limitName: 'rows' //每页数据量的参数名，默认：limit
    82.         },
    83.         done: function (res, curr, count) {
    84.         	console.log(res);
    85.         }
    86.    });
    87. 	
    88. 	//工具条事件
    89. 	table.on('tool(tb)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    90. 	  row = obj.data; //获得当前行数据
    91. 	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    92. 	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    93. 	  console.log(row);
    94. 	  if(layEvent === 'seat'){ //会议排座
    95. 		  open(row.id);
    96. 	  } else if(layEvent === 'send'){ //送审
    97. 		  if(row.seatPic==null || row.seatPic==""){
    98. 			  layer.msg('先请完成会议排座，再进行送审操作！',function(){});
    99. 			  return false;
    100. 		  }
    101. 		  //在打开送审页面之前，先请完成会议ID的赋值操作
    102. 		  $('#meetingId').val(row.id);
    103. 		  openLayerAudit();
    104. 	  } else if(layEvent==="back"){ //反馈详情
    105. 		 
    106. 	  } else {//删除
    107. 		  layer.confirm('确认要取消会议吗?', {icon: 3, title:'提示'}, function(index){
    108. 				$.post($("#ctx").val()+'/info.action',{
    109. 					'methodName':'updatezt',
    110. 					'state':0,
    111. 					'id':row.id
    112. 				},function(rs){
    113. 					if(rs.success){
    114. 						//调用查询方法刷新数据
    115. 						query();
    116. 					}else{
    117. 						layer.msg(rs.msg,function(){});
    118. 					}
    119. 				},'json');
    120. 				layer.close(index);
    121. 			});
    122. 	  }
    123. 	});
    124. }
    125.  
    126. //打开会议排座对话框
    127. function open(id){
    128. 	layer.open({
    129.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    130.         title: '会议排座',                   //对话框标题
    131.         area: ['460px', '340px'],   //宽高
    132.         skin: 'layui-layer-rim',    //样式类名
    133.         content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    134.     });
    135. }
    136.  
    137. //会议送审
    138. function openLayerAudit(){
    139. 	//每次打开都对送审人进行初始化默认值设置
    140. 	$('#auditor').val("");
    141. 	//必须重新渲染
    142. 	form.render('select');
    143. 	//弹出对话框
    144.     layer.open({
    145.         type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    146.         title:'会议送审',
    147.         area: ['426px', '140px'],   //宽高
    148.         skin: 'layui-layer-rim',    //样式类名
    149.         content: $('#audit'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    150.     });
    151. }
    152.  
    153. //初始化审批人
    154. function initFormSelects(){
    155. 	$.getJSON($("#ctx").val()+'/user.action',{
    156. 		'methodName':'queryUserAll'
    157. 	},function(rs){
    158. 		console.log(rs);
    159. 		let data=rs.data;
    160. 		$.each(data,function(i,e){
    161. 			$('#auditor').append(new Option(e.name,e.value));
    162. 		});
    163. 		//重新渲染
    164. 		form.render('select');
    165. 	});
    166. }
    167.

     

  • 相关阅读:
    课本在servlet中检索参数并验证，最后向用户发送验证消息
    QT+OSG/osgEarth编译之四十二：osgDB+Qt编译（一套代码、一套框架，跨平台编译，版本：OSG-3.6.5核心库osgDB）
    代码随想录训练营 DP
    【毕业设计】后端实现——账单通过关键词简单分析收支
    小红书数据分析工具 | 新中式内容营销怎么做？
    Si24R2F+2.4GHz ISM 频段低功耗无线集成嵌入式发射基带无线发射芯片
    委托及观察者模式
    【docker windows安装】
    JDK API文档地址（中文和英文）
    mysql-通过binlog日志复制主从同步
  • 原文地址：https://blog.csdn.net/m12120426/article/details/125991600