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

    目录

    一、会议排座功能的意义

     二、实现会议排座功能

    效果图： 

    seatPic.jsp界面代码

    会议参会用户数据初始化

    点击会议排座时进入另一个页面

    配置图片下载路径

    MeetingInfoDao

    引入插件画布插件 

    运行结果

    ​编辑 看文件中是否有此图片

     三、会议送审

    一、会议排座功能的意义

     二、实现会议排座功能

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

    效果图： 

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

    会议参会用户数据初始化

    数据库的分析要查出 会议排座用户查询 用一条SQL语句 联两个表

    -- find in set
    -- 第一个参数：数据库字段
    -- 第二个参数：列段的条件
    select * from t_oa_user  where FIND_IN_SET (id,(select CONCAT(canyuze,',',liexize,',',zhuchiren) from t_oa_meeting_info where id=8))

    点击会议排座时进入另一个页面

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

    UserDao绑定座位人员

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

     UserAction

    1. package com.oyang.web;
    2.  
    3. import java.io.IOException;
    4. import java.util.HashMap;
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10.  
    11. import com.oyang.dao.UserDao;
    12. import com.oyang.entity.User;
    13. import com.oyang.framework.ActionSupport;
    14. import com.oyang.framework.ModelDriver;
    15. import com.oyang.util.PageBean;
    16. import com.oyang.util.R;
    17. import com.oyang.util.ResponseUtil;
    18.  
    19.  
    20. public class UserAction extends ActionSupport implements ModelDriver{
    21. 	
    22. 	private User user=new User();
    23. 	private UserDao udao=new UserDao();
    24.  
    25. 	//写一个方法处理前台的请求
    26. 	/*public String login(HttpServletRequest req, HttpServletResponse resp) {
    27. 		Map map=new HashMap();
    28. 		if("oyang".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
    29. 			//登录成功
    30. 			map.put("code", 200);
    31. 			map.put("msg", "登录成功");
    32. 			//响应到前端
    33. 		}
    34. 		else {
    35. 			//登录失败
    36. 			map.put("code", 0);
    37. 			map.put("msg", "账户密码错误");
    38. 		}
    39. 		try {
    40. 			ResponseUtil.writeJson(resp, map);
    41. 		} catch (Exception e) {
    42. 			e.printStackTrace();
    43. 		}
    44. 		return null;
    45. 	}*/
    46. 	
    47. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    48. 		try {
    49. 			User u = udao.login(user);
    50. 			//通过账户名密码查到了用户记录
    51. 		if(u!=null) {
    52. 			/*ResponseUtil.writeJson(resp, new R()
    53. 					.data("code", 200)
    54. 					.data("msg", "登录成功"));*/
    55. 			ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    56. 			req.getSession().setAttribute("user", u);
    57. 		}
    58. 		else {
    59. 			/*ResponseUtil.writeJson(resp, new R()
    60. 					.data("code", 0)
    61. 					.data("msg", "账户密码错误"));*/
    62. 			ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    63. 		}
    64. 		} catch (Exception e) {
    65. 			e.printStackTrace();
    66. 			try {
    67. 				ResponseUtil.writeJson(resp, R.error(0, "登录失败"));
    68. 			} catch (Exception e1) {
    69. 				// TODO Auto-generated catch block
    70. 				e1.printStackTrace();
    71. 			}
    72. 		}
    73. 		return null;
    74. 	}
    75. 	
    76. 	//用户查询
    77. 		public String queryUserByMeetingId(HttpServletRequest req, HttpServletResponse resp) {
    78. 			try {
    79. 				String parameter = req.getParameter("meetingId");
    80. 				List users = udao.list(Integer.valueOf(parameter));
    81. 				//注意：LayUI中数据表格的格式
    82. 				ResponseUtil.writeJson(resp, R.ok(0, "会议用户数据初始化成功",users));
    83. 				
    84. 			} catch (Exception e) {
    85. 				e.printStackTrace();
    86. 				try {
    87. 					ResponseUtil.writeJson(resp, R.error(0, "会议用户数据初始化失败"));
    88. 				} catch (Exception e1) {
    89. 					// TODO Auto-generated catch block
    90. 					e1.printStackTrace();
    91. 				}
    92. 			}
    93. 			return null;
    94. 		}
    95. 	
    96. 	//用户查询
    97. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    98. 		try {
    99. 			PageBean pageBean=new PageBean();
    100. 			pageBean.setRequest(req);
    101. 			List> users = udao.list(user, pageBean);
    102. 			//注意：LayUI中数据表格的格式
    103. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
    104. 			
    105. 		} catch (Exception e) {
    106. 			e.printStackTrace();
    107. 			try {
    108. 				ResponseUtil.writeJson(resp, R.error(0, "用户查询失败"));
    109. 			} catch (Exception e1) {
    110. 				// TODO Auto-generated catch block
    111. 				e1.printStackTrace();
    112. 			}
    113. 		}
    114. 		return null;
    115. 	}
    116. 	
    117. 	
    118. 	//用户增加
    119. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    120. 		try {
    121. 			//rs是sql语句执行的影响行数
    122. 			int rs = udao.add(user);
    123. 			if(rs>0) {
    124. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    125. 			}
    126. 			else {
    127. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    128. 			}
    129. 		} catch (Exception e) {
    130. 			e.printStackTrace();
    131. 			try {
    132. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    133. 			} catch (Exception e1) {
    134. 				// TODO Auto-generated catch block
    135. 				e1.printStackTrace();
    136. 			}
    137. 		}
    138. 		return null;
    139. 	}
    140. 		
    141. 	//用户删除
    142. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    143. 		try {
    144. 			//rs是sql语句执行的影响行数
    145. 			int rs = udao.del(user);
    146. 			if(rs>0) {
    147. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    148. 			}
    149. 			else {
    150. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    151. 			}
    152. 		} catch (Exception e) {
    153. 			e.printStackTrace();
    154. 			try {
    155. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    156. 			} catch (Exception e1) {
    157. 				// TODO Auto-generated catch block
    158. 				e1.printStackTrace();
    159. 			}
    160. 		}
    161. 		return null;
    162. 	}
    163. 		
    164. 	//用户修改
    165. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    166. 		try {
    167. 			//rs是sql语句执行的影响行数
    168. 			int rs = udao.add(user);
    169. 			if(rs>0) {
    170. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    171. 			}
    172. 			else {
    173. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    174. 			}
    175. 		} catch (Exception e) {
    176. 			e.printStackTrace();
    177. 			try {
    178. 				ResponseUtil.writeJson(resp, R.error(0, "用户修改新增失败"));
    179. 			} catch (Exception e1) {
    180. 				// TODO Auto-generated catch block
    181. 				e1.printStackTrace();
    182. 			}
    183. 		}
    184. 		return null;
    185. 	}
    186. 			
    187. 	//查询所有用户用于绑定多功能下拉框
    188. 		public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
    189. 			try {
    190. 				List> users = udao.queryUserAll(user, null);
    191. //			注意：layui中的数据表格的格式
    192. 				ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框数据查询成功",users));
    193. 			} catch (Exception e) {
    194. 				e.printStackTrace();
    195. 				try {
    196. 					ResponseUtil.writeJson(resp, R.error(0, "多功能下拉框数据查询失败"));
    197. 				} catch (Exception e2) {
    198. 					e2.printStackTrace();
    199. 				}
    200. 			}
    201. 			return null;
    202. 		}
    203. 	
    204. 	@Override
    205. 	public User getModel() {
    206. 		// TODO Auto-generated method stub
    207. 		return user;
    208. 	}
    209.  
    210. }

    配置图片下载路径

    1. dirPath=E:/temp/images/oyang/
    2. serverPath=/upload/paizuo/
    3. dirPathSign=E:/temp/images/oyang/sign/
    4. serverPathSign=/upload/sign/

    MeetingInfoDao

    1. package com.oyang.dao;
    2.  
    3. import java.util.List;
    4. import java.util.Map;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8.  
    9. import java.lang.Long;
    10. import java.lang.String;
    11. import java.sql.SQLException;
    12. import java.lang.String;
    13. import com.oyang.entity.MeetingInfo;
    14. import com.oyang.util.BaseDao;
    15. import com.oyang.util.PageBean;
    16. import com.oyang.util.StringUtils;
    17.  
    18. /**
    19.  * 
    20.  * @author yang
    21.  *
    22.  */
    23. public class MeetingInfoDao extends BaseDao {
    24. 	/*public List list(MeetingInfo meetingInfo, PageBean pageBean) throws Exception {
    25. 		String sql = "select * from t_oa_meeting_info where 1 = 1 ";
    26. 		if (!(meetingInfo.getId() == null || meetingInfo.getId() == 0)) {
    27. 			sql += "and id = " + meetingInfo.getId();
    28. 		}
    29. 		return super.executeQuery(sql, MeetingInfo.class, pageBean);
    30. 	}*/
    31. 	
    32. 	// 添加会议信息
    33. 	public int add(MeetingInfo t) throws Exception {
    34. 		String sql="insert into t_oa_meeting_info"
    35. 				+"(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values (?,?,?,?,?,?,?,?,?)";
    36. 		return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
    37. 	}
    38.  
    39.  
    40. 	//我的会议sql,后续其他的菜单也会使用
    41. 	private String getSQL() {
    42. 		return "select a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren\r\n" + 
    43. 				",b.name zhuchirenname,\r\n" + 
    44. 				"a.location,\r\n" + 
    45. 				"DATE_FORMAT(a.startTime,'%Y-%m-%d %H-%m-%s') startTime,\r\n" + 
    46. 				"DATE_FORMAT(a.endTime,'%Y-%m-%d %H-%m-%s') endTime,\r\n" + 
    47. 				"a.state,\r\n" + 
    48. 				"(\r\n" + 
    49. 				"	case a.state\r\n" + 
    50. 				"	when 0 then '取消会议'\r\n" + 
    51. 				"	when 1 then '新建'\r\n" + 
    52. 				"	when 2 then '待审核'\r\n" + 
    53. 				"	when 3 then '驳回'\r\n" + 
    54. 				"	when 4 then '待开'\r\n" + 
    55. 				"	when 5 then '进行中'\r\n" + 
    56. 				"	when 6 then '开启投票'\r\n" + 
    57. 				"	when 7 then '结束会议'\r\n" + 
    58. 				"	else '其他' end\r\n" + 
    59. 				") meetingstate,\r\n" + 
    60. 				"a.seatPic,a.remark,a.auditor,\r\n" + 
    61. 				"c.name auditorname from t_oa_meeting_info a\r\n" + 
    62. 				"inner join t_oa_user b on a.zhuchiren = b.id\r\n" + 
    63. 				"left join t_oa_user c on a.auditor = c.id and 1=1";
    64. 	}
    65. 	
    66. 	//我的会议
    67. 	public List> myInfos(MeetingInfo info, PageBean pageBean)
    68. 			throws SQLException, InstantiationException, IllegalAccessException {
    69. 		String sql = getSQL();
    70. 		//会议标题
    71. 		String title = info.getTitle();
    72. 		if(StringUtils.isNotBlank(title)){
    73. 			sql+=" and title like '%"+title+"%'";
    74. 		}
    75. 		sql +=" and zhuchiren = " + info.getZhuchiren();
    76. 		return super.executeQuery(sql, pageBean);
    77. 	}
    78. 	
    79.  
    80. //	状态：0取消会议 1新建 2待审核 3驳回 4待开 5进行中 6开启投票 7结束会议，默认值为1
    81. 	public int updatezt(MeetingInfo m) throws Exception {
    82. 		String sql = "update t_oa_meeting_info set state=? where id = ?";
    83. 		return super.executeUpdate(sql, m, new String[] {"state","id"});
    84. 	}
    85.  
    86.  
    87.  
    88. 	//设置会议排座图片
    89. 	public int updateSeatPicById(MeetingInfo info) throws Exception {
    90. 		String sql="update t_oa_meeting_info set seatPic=? where id=?";
    91. 		return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
    92. 	}
    93. 	
    94.  
    95. }

    MeetingInfoAction  

    1. package com.oyang.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.http.HttpServletRequest;
    10. import javax.servlet.http.HttpServletResponse;
    11.  
    12. import org.apache.commons.beanutils.ConvertUtils;
    13.  
    14. import com.oyang.dao.MeetingInfoDao;
    15. import com.oyang.entity.MeetingInfo;
    16. import com.oyang.framework.ActionSupport;
    17. import com.oyang.framework.ModelDriver;
    18. import com.oyang.util.Base64ImageUtils;
    19. import com.oyang.util.MyDateConverter;
    20. import com.oyang.util.PageBean;
    21. import com.oyang.util.PropertiesUtil;
    22. import com.oyang.util.R;
    23. import com.oyang.util.ResponseUtil;
    24.  
    25. public class MeetingInfoAction extends ActionSupport implements ModelDriver{
    26. 	private MeetingInfo info=new MeetingInfo();
    27. 	private MeetingInfoDao infoDao=new MeetingInfoDao();
    28.  
    29. 	public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) {
    30. 		/**
    31. 		 * 1、接收前端页面传递到后台的图片对应的字符串
    32. 		 * 2、借助工具类将字符串生成一个图片，保存到配置文件所配置的路径下
    33. 		 * 3、添加服务器硬盘与请求地址 的映射，即可访问
    34. 		 * 4、将请求地址 保存到数据库中
    35. 		 */
    36. 		//获取到图片的存放地址
    37. 		try {
    38. 			String dirPath = PropertiesUtil.getValue("dirPath");
    39. 			//获取到浏览器请求路径，为了后续保存到数据库
    40. 			String serverPath = PropertiesUtil.getValue("serverPath");
    41. 		//随机生成一个图片名称
    42. 			String fileName = UUID.randomUUID().toString().replace("-", "")+".jpg";
    43. 			//info.getSeatPic();//图片字符串
    44. 			Base64ImageUtils.GenerateImage(info.getSeatPic().replaceAll("data:image/png;base64,", ""), dirPath+fileName);
    45. 			//将seatPic中内容修改为 请求地址
    46. 			info.setSeatPic(serverPath+fileName);
    47. 			//修改会议排座 数据库图片 对应的数据库列段
    48. 			
    49. 			int rs = infoDao.updateSeatPicById(info);
    50. 			if(rs>0) {
    51. 				ResponseUtil.writeJson(resp, R.ok(200, "会议排座成功"));
    52. 			}else {
    53. 				ResponseUtil.writeJson(resp, R.error(0, "会议排座失败"));
    54. 			}
    55. 		} catch (Exception e) {
    56. 			e.printStackTrace();
    57. 			try {
    58. 				ResponseUtil.writeJson(resp, R.error(0, "会议排座失败"));
    59. 			} catch (Exception e2) {
    60. 				e2.printStackTrace();
    61. 			}
    62. 		}
    63. 		return null;
    64. 	}
    65. }

    引入插件画布插件 

    运行结果

     看文件中是否有此图片

     三、会议送审

    myMeeting.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. 			'auditor':$('#auditor').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: 'auditor', 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. 		  openLayerFeedBack(row.id);
    106. 	  } else {
    107. 		  
    108. 	  }
    109. 	});
    110. }
    111.  
    112. //打开会议排座对话框
    113. function open(id){
    114. 	layer.open({
    115.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    116.         title: '会议排座',                   //对话框标题
    117.         area: ['460px', '340px'],   //宽高
    118.         skin: 'layui-layer-rim',    //样式类名
    119.         content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    120.     });
    121. }
    122.  
    123. //会议送审
    124. function openLayerAudit(){
    125. 	//每次打开都对送审人进行初始化默认值设置
    126. 	$('#auditor').val("");
    127. 	//必须重新渲染
    128. 	form.render('select');
    129. 	//弹出对话框
    130.     layer.open({
    131.         type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    132.         title:'会议送审',
    133.         area: ['426px', '140px'],   //宽高
    134.         skin: 'layui-layer-rim',    //样式类名
    135.         content: $('#audit'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    136.     });
    137. }
    138.  
    139. //初始化审批人
    140. function initFormSelects(){
    141. 	$.getJSON($("#ctx").val()+'/user.action',{
    142. 		'methodName':'queryUserAll'
    143. 	},function(rs){
    144. 		console.log(rs);
    145. 		let data=rs.data;
    146. 		$.each(data,function(i,e){
    147. 			$('#auditor').append(new Option(e.name,e.value));
    148. 		});
    149. 		//重新渲染
    150. 		form.render('select');
    151. 	});
    152. }
    153.  
    154. // 打开查看本会议的反馈详情
    155. function openLayerFeedBack(id){
    156. 	$.getJSON('feedBack.action',{
    157. 		methodName:'queryMeetingBackByMeetingId',
    158. 		meetingId:id
    159. 	},function(data){
    160. 		$('#meeting_ok').html("");
    161. 		$('#meeting_no').html("");
    162. 		$('#meeting_noread').html("");
    163. 		if(data.success){
    164. 			console.log(data.data);
    165. 			$.each(data.data,function(i,e){
    166. 				if(e.result==1)
    167. 					$('#meeting_ok').html(e.names);
    168. 				else if(e.result==2)
    169. 					$('#meeting_no').html(e.names);
    170. 				else
    171. 					$('#meeting_noread').html(e.names);
    172. 			});
    173. 			//弹出对话框
    174. 		    layer.open({
    175. 		        type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    176. 		        title:'反馈详情',
    177. 		        area: ['426px', '420px'],   //宽高
    178. 		        skin: 'layui-layer-rim',    //样式类名
    179. 		        content: $('#feedback'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    180. 		        btn:['关闭'],
    181. 		        yes:function(index,layero){
    182. 		        	layer.closeAll();
    183. 		        }
    184. 		    });
    185. 		}
    186. 	});
    187. }

     MeetingInfoDao

    1. //	会议送审
    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. 	}

    MeetingInfoAction

    1. //		会议送审
    2. 		public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
    3. 			try {
    4. //				rs是sql语句执行的影响行数
    5. 				int rs = infoDao.updateAuditorById(info);
    6. 				if(rs>0) {
    7. 					ResponseUtil.writeJson(resp, R.ok(200, "会议送审成功"));
    8. 				}else {
    9. 					ResponseUtil.writeJson(resp, R.error(0, "会议送审失败"));
    10. 				}
    11. 			} catch (Exception e) {
    12. 				e.printStackTrace();
    13. 				try {
    14. 					ResponseUtil.writeJson(resp, R.error(0, "会议送审失败"));
    15. 				} catch (Exception e2) {
    16. 					e2.printStackTrace();
    17. 				}
    18. 			}
    19. 			return null;
    20. 		}

    OK，今日的分享就到此结束啦，如果对个位看官有帮助的话可以留下免费的赞哦(收藏或关注也行),如果文章中有什么问题或不足以及需要改正的地方可以私信博主，博主会做出改正的。个位看官，小陽在此跟大家说拜拜啦！

  • 相关阅读:
    zabbix监控
    【性能测试入门必看】性能测试理论知识
    介绍几个语言生成的预训练模型
    网络安全（黑客）自学
    LeetCode 2760. 最长奇偶子数组：模拟（使用一个变量记录状态）
    语句和表达式有什么不同
    网易云信语音短信验证码图解
    利用Bootstrap的面包屑组件实现面包屑层次分级导航效果
    visual studio Qt 开发环境中手动添加 Q_OBJECT 导致编译时出错的问题
    基于Springboot+vue的汽车租赁系统 elementui
  • 原文地址：https://blog.csdn.net/weixin_65211978/article/details/125992347