• 会议OA项目(三)---我的会议（会议排座、送审）

    目录

    前言

    一、需求分析

    二、准备工作

    三、编码

            1、后台编码

            2、前端编码

    四、效果展示

    前言

            上篇分享了会议OA项目的我的会议功能的查询、取消会议。本篇文章将完善我的会议功能。

    我的会议功能有一个难点------会议排座。

    一、需求分析

            为什么会有会议排座功能？

    参会人员所坐的位置是有讲究的，并不是随便坐。

    请人吃饭，请客的人坐在主位；那么开会最重要的人，做决策的人就要坐在主位。 

     会议排座：

    一个会议，参会人数、怎么排座位都是有讲究的。

     如图：我可以这边坐四个、对面坐三个。也可以这一边没有一个人。

     领导突然要来听会议，是不是要把他加到会议中。

     

    所以，对于排座。点击排座，界面需要有参会人员、列席人员以及主持人。同时、可以增加座位。

    排座可以将位置进行拖动。

     

    在送审之前，我们要排好座位，没有排座如果坐错位置了，审批人就得罪人啦。

    所以没有排座 不能送审。

    二、准备工作

            我们需要对会议排座，且排座可以拖动。对应的功能我们是自己编写还是查找资料呢？

    为了提高开发效率，我选择的是找jQuery是否有对应的插件，将其进行修改，改为适合我们项目的需求。

     

    其中找到了jQuery的Portal 插件。但是与我们项目需求差距有点大。

    另一个，找到的资料更符合我们的项目。

     

     会发现，每一个“座位”太小了而且重叠了。如果有很多个人要开会，我们根本分不清。我们对它进行一系列的修改

     

     修改后就合适多了。将素材和我们的代码拼接使用。

    SQL语句分析：

    我们要查出对应的会议由哪些人参会。

    参会人员：参会者、列席者 、主持人

    find_in_set 与 in 的区别

     

     

     在mysql中in可以包括指定的数字，而find_in_set()用于特定的数据类型

     

    三、编码

            1、后台编码

            UserDao

    1. package com.zking.dao;
    2.  
    3. import java.sql.SQLException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import com.zking.entity.User;
    8. import com.zking.util.BaseDao;
    9. import com.zking.util.PageBean;
    10. import com.zking.util.StringUtils;
    11.  
    12. public class UserDao extends BaseDao {
    13. 	public User login(User user) throws Exception {
    14. 		String sql = "select * from t_oa_user where loginName = '"
    15. 				+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
    16. //		根据sql查询符合条件的用户，通常只会返回一条数据
    17. 		List users = super.executeQuery(sql, User.class, null);
    18. 		return users == null || users.size() == 0 ? null : users.get(0);
    19. //		return super.executeQuery(sql, clz, pageBean);
    20. 	}
    21. 	
    22. //	查询用户信息及对应的角色，角色是通过case when得来的
    23. 	public List> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    24. 		String sql = "SELECT *\r\n" + 
    25. 				",(case rid \r\n" + 
    26. 				"when 1 then '管理员' \r\n" + 
    27. 				"when 2 then '发起者' \r\n" + 
    28. 				"when 3 then '审批者' \r\n" + 
    29. 				"when 4 then '参与者' \r\n" + 
    30. 				"when 5 then '会议室管理员' \r\n" + 
    31. 				"else  '其他' end \r\n" + 
    32. 				") roleName \r\n" + 
    33. 				"from \r\n" + 
    34. 				"t_oa_user where 1 = 1 ";
    35. 		String name = user.getName();
    36. 		if(StringUtils.isNotBlank(name)) {
    37. 			sql += " and name like '%"+name+"%'";
    38. 		}
    39. //		当实体类的属性完全包含数据库查询出来的列段的时候使用
    40. //		super.executeQuery(sql, User.class, pageBean)
    41. //		返回List>，对应的是链表查询，单个实体类对象不完全包含查询的列段
    42. 		return super.executeQuery(sql, pageBean);
    43. 	}
    44. 	
    45. //	查询所有用户用于绑定多功能下拉框
    46. 	public List> queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    47. 		String sql = "select id as value,name from t_oa_user";
    48. 		return super.executeQuery(sql, pageBean);
    49. 	}
    50. 	
    51. 	public int add(User user) throws Exception {
    52. 		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    53. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    54. 	}
    55. 	
    56. 	public int del(User user) throws Exception {
    57. 		String sql = "delete from t_oa_user where id = ?";
    58. 		return super.executeUpdate(sql, user, new String[] {"id"});
    59. 	}
    60. 	
    61. 	public int edit(User user) throws Exception {
    62. 		String sql = "update t_oa_user set name = ?,loginName = ? ,pwd = ? where id = ?";
    63. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
    64. 	}
    65. 	
    66. 	public List queryUserByMeetingId(Long meetingId) throws Exception{
    67. 		String sql="select * from t_oa_user where FIND_IN_SET(id,"
    68. 				+ "(select concat(canyuze,',',liexize,',',zhuchiren) uid "
    69. 				+ "from t_oa_meeting_info where id="+meetingId+"))";
    70. 		return super.executeQuery(sql, User.class, null);
    71. 	}
    72. }

            UserAction

     

    1. package com.zking.web;
    2.  
    3. import java.util.HashMap;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9.  
    10. import com.zking.dao.UserDao;
    11. import com.zking.entity.User;
    12. import com.zking.framework.ActionSupport;
    13. import com.zking.framework.ModelDriver;
    14. import com.zking.util.BaseDao;
    15. import com.zking.util.CommonUtils;
    16. import com.zking.util.PageBean;
    17. import com.zking.util.R;
    18. import com.zking.util.ResponseUtil;
    19.  
    20. public class UserAction extends ActionSupport implements ModelDriver {
    21. 	private User user = new User();
    22. 	private UserDao userDao = new UserDao();
    23.  
    24. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    25. 		try {
    26. 			User u = userDao.login(user);
    27. //			通过账户名密码查到了用户记录
    28. 			if (u != null) {
    29. //				ResponseUtil.writeJson(resp, new R()
    30. //						.data("code", 200)
    31. //						.data("msg", "成功"));
    32. 				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
    33. 				req.getSession().setAttribute("user", u);
    34. 			} else {
    35. 				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    36. 			}
    37. 		} catch (Exception e) {
    38. 			e.printStackTrace();
    39. 			try {
    40. 				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
    41. 			} catch (Exception e1) {
    42. 				e1.printStackTrace();
    43. 			}
    44. 		}
    45. 		return null;
    46. 	}
    47. 	
    48. //	用户查询
    49. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    50. 		try {
    51. 			PageBean pageBean = new PageBean();
    52. 			pageBean.setRequest(req);
    53. 			List> users = userDao.list(user, pageBean);
    54. //			注意：layui中的数据表格的格式
    55. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功" , pageBean.getTotal(), users));
    56. 		} catch (Exception e) {
    57. 			e.printStackTrace();
    58. 			try {
    59. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
    60. 			} catch (Exception e1) {
    61. 				e1.printStackTrace();
    62. 			}
    63. 		}
    64. 		return null;
    65. 	}
    66. 	
    67. //	查询所有用户用于绑定多功能下拉框
    68. 	public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
    69. 		try {
    70. 			List> users = userDao.queryUserAll(user, null);
    71. //			注意：layui中的数据表格的格式
    72. 			ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框数据查询成功" , users));
    73. 		} catch (Exception e) {
    74. 			e.printStackTrace();
    75. 			try {
    76. 				ResponseUtil.writeJson(resp, R.error(0, "多功能下拉框数据查询失败"));
    77. 			} catch (Exception e1) {
    78. 				e1.printStackTrace();
    79. 			}
    80. 		}
    81. 		return null;
    82. 	}
    83. 	
    84. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    85. 		try {
    86. //			rs是sql语句执行的影响行数
    87. 			int rs = userDao.add(user);
    88. 			if(rs > 0) {
    89. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
    90. 			}else {
    91. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    92. 			}
    93. 			
    94. 		} catch (Exception e) {
    95. 			e.printStackTrace();
    96. 			try {
    97. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    98. 			} catch (Exception e1) {
    99. 				e1.printStackTrace();
    100. 			}
    101. 		}
    102. 		return null;
    103. 	}
    104. 	
    105. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    106. 		try {
    107. //			rs是sql语句执行的影响行数
    108. 			int rs = userDao.del(user);
    109. 			if(rs > 0) {
    110. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
    111. 			}else {
    112. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    113. 			}
    114. 			
    115. 		} catch (Exception e) {
    116. 			e.printStackTrace();
    117. 			try {
    118. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    119. 			} catch (Exception e1) {
    120. 				e1.printStackTrace();
    121. 			}
    122. 		}
    123. 		return null;
    124. 	}
    125. 	
    126. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    127. 		try {
    128. //			rs是sql语句执行的影响行数
    129. 			int rs = userDao.edit(user);
    130. 			if(rs > 0) {
    131. 				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
    132. 			}else {
    133. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    134. 			}
    135. 			
    136. 		} catch (Exception e) {
    137. 			e.printStackTrace();
    138. 			try {
    139. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    140. 			} catch (Exception e1) {
    141. 				e1.printStackTrace();
    142. 			}
    143. 		}
    144. 		return null;
    145. 	}
    146.  
    147. 	public String queryUserByMeetingId(HttpServletRequest req,HttpServletResponse resp) throws Exception{
    148. 		try {
    149. 			String meetingId = req.getParameter("meetingId");
    150. 			List users = userDao.queryUserByMeetingId(Long.valueOf(meetingId));
    151. 			CommonUtils.toJson(true, users, resp);
    152. 		} catch (Exception e) {
    153. 			CommonUtils.toJson(false,"获取参会人员信息失败", resp);
    154. 			e.printStackTrace();
    155. 		}
    156. 		return null;
    157. 	}
    158. 	@Override
    159. 	public User getModel() {
    160. 		return user;
    161. 	}
    162.  
    163. }

            meetingInfoDao

    1. package com.zking.dao;
    2.  
    3. import java.sql.SQLException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import com.zking.entity.MeetingInfo;
    8. import com.zking.util.BaseDao;
    9. import com.zking.util.PageBean;
    10. import com.zking.util.StringUtils;
    11.  
    12. public class MeetingInfoDao extends BaseDao{
    13.  
    14. //	会议信息新增
    15. 	public int add(MeetingInfo t) throws Exception {
    16. 		String sql = "insert into t_oa_meeting_info"
    17. 				+ "(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) "
    18. 				+ "values(?,?,?,?,?,?,?,?,?)";
    19. 		return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
    20. 	}
    21. 	
    22. 	//我的会议、其他菜单会用到。
    23. 	private String getSQL() {
    24. 		return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" + 
    25. 				",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" + 
    26. 				",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" + 
    27. 				",a.state\r\n" + 
    28. 				",(case a.state\r\n" + 
    29. 				"when 0 then '取消会议'\r\n" + 
    30. 				"when 1 then '新建'\r\n" + 
    31. 				"when 2 then '待审核'\r\n" + 
    32. 				"when 3 then '驳回'\r\n" + 
    33. 				"when 4 then '待开'\r\n" + 
    34. 				"when 5 then '进行中'\r\n" + 
    35. 				"when 6 then '开启投票'\r\n" + 
    36. 				"else '结束会' end\r\n" + 
    37. 				") as meetingState\r\n" + 
    38. 				",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" + 
    39. 				"FROM t_oa_meeting_info a\r\n" + 
    40. 				"inner join t_oa_user b on a.zhuchiren = b.id\r\n" + 
    41. 				"left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
    42. 	}
    43. 	
    44. //	我的会议
    45. 	public List> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
    46. 		String sql = getSQL();
    47. 		String title = info.getTitle();
    48. 		if(StringUtils.isNotBlank(title)) {
    49. 			sql += " and title like '%"+title+"%'";
    50. 		}
    51. 		//根据当前登陆用户ID作为主持人字段的条件
    52. 		sql+=" and zhuchiren="+info.getZhuchiren();
    53. 		//按照会议ID降序排序
    54. //		sql+=" order by a.id desc";
    55. 		System.out.println(sql);
    56. 		return super.executeQuery(sql, pageBean);
    57. 	}
    58. 	
    59. //	取消会议
    60. 	public int updateState(MeetingInfo info) throws Exception {
    61. 		String sql = "update t_oa_meeting_info set state = 0 where  id = ?";
    62. 		return super.executeUpdate(sql, info,new String[] {"id"} );
    63. 	}
    64. 	
    65. 	
    66. //	根据会议ID更新会议的排座图片
    67. 	public int updateSeatPicById(MeetingInfo info) throws Exception {
    68. 		String sql="update t_oa_meeting_info set seatPic=? where id=?";
    69. 		return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
    70. 	}
    71. 	
    72. //	根据会议ID更新会议的审批人（送审）
    73. 	public int updateAuditorById(MeetingInfo info) throws Exception {
    74. 		String sql="update t_oa_meeting_info set auditor=?,state=2 where id=?";
    75. 		return super.executeUpdate(sql, info, new String[] {"auditor","id"});
    76. 	}
    77. }

    meetingInfoAction

    1. package com.zking.web;
    2.  
    3. import java.util.Date;
    4. import java.util.List;
    5. import java.util.Map;
    6. import java.util.UUID;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10.  
    11. import org.apache.commons.beanutils.ConvertUtils;
    12.  
    13. import com.zking.dao.MeetingInfoDao;
    14. import com.zking.entity.MeetingInfo;
    15. import com.zking.framework.ActionSupport;
    16. import com.zking.framework.ModelDriver;
    17. import com.zking.util.Base64ImageUtils;
    18. import com.zking.util.MyDateConverter;
    19. import com.zking.util.PageBean;
    20. import com.zking.util.PropertiesUtil;
    21. import com.zking.util.R;
    22. import com.zking.util.ResponseUtil;
    23.  
    24. public class MeetingInfoAction extends ActionSupport implements ModelDriver{
    25. 	private MeetingInfo info = new MeetingInfo();
    26. 	private MeetingInfoDao infoDao = new MeetingInfoDao();
    27.  
    28. 	@Override
    29. 	public MeetingInfo getModel() {
    30. //		注册一个转换器
    31. 		ConvertUtils.register(new MyDateConverter(), Date.class);
    32. 		return info;
    33. 	}
    34.  
    35. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    36. 		try {
    37. //			rs是sql语句执行的影响行数
    38. 			int rs = infoDao.add(info);
    39. 			if(rs > 0) {
    40. 				ResponseUtil.writeJson(resp, R.ok(200, "会议信息数据新增成功"));
    41. 			}else {
    42. 				ResponseUtil.writeJson(resp, R.error(0, "会议信息数据新增失败"));
    43. 			}
    44. 			
    45. 		} catch (Exception e) {
    46. 			e.printStackTrace();
    47. 			try {
    48. 				ResponseUtil.writeJson(resp, R.error(0, "会议信息数据新增失败"));
    49. 			} catch (Exception e1) {
    50. 				e1.printStackTrace();
    51. 			}
    52. 		}
    53. 		return null;
    54. 	}
    55. 	
    56. //	我的会议
    57. 	public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
    58. 		try {
    59. 			PageBean pageBean = new PageBean();
    60. 			pageBean.setRequest(req);
    61. 			List> list = infoDao.myInfos(info, pageBean);
    62. //			注意：layui中的数据表格的格式
    63. 			ResponseUtil.writeJson(resp, R.ok(0, "我的会议数据查询成功" , pageBean.getTotal(), list));
    64. 		} catch (Exception e) {
    65. 			e.printStackTrace();
    66. 			try {
    67. 				ResponseUtil.writeJson(resp, R.error(0, "我的会议数据查询失败"));
    68. 			} catch (Exception e1) {
    69. 				e1.printStackTrace();
    70. 			}
    71. 		}
    72. 		return null;
    73. 	}
    74. 	
    75. //	取消会议
    76. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    77. 		try {
    78. 			PageBean pageBean = new PageBean();
    79. 			pageBean.setRequest(req);
    80. 			int upd = infoDao.updateState(info);
    81. //			注意：layui中的数据表格的格式
    82. 			if(upd > 0) {
    83. 				ResponseUtil.writeJson(resp, R.ok(200, "会议取消成功"));
    84. 			}else {
    85. 				ResponseUtil.writeJson(resp, R.error(0, "会议取消失败"));
    86. 			}
    87. 					} catch (Exception e) {
    88. 			e.printStackTrace();
    89. 			try {
    90. 				ResponseUtil.writeJson(resp, R.error(0, "会议取消失败"));
    91. 			} catch (Exception e1) {
    92. 				e1.printStackTrace();
    93. 			}
    94. 		}
    95. 		return null;
    96. 	}
    97. 	
    98. 	
    99. 	
    100. //	根据会议id更新排座
    101. 	public String updateSeatPicById(HttpServletRequest req,
    102. 			HttpServletResponse resp) throws Exception{
    103. 		try {
    104. 			//1.将排座图片保存到指定的位置并得到图片路径
    105. 			//1) 定义会议图片的保存路径
    106. 			String serverPath=PropertiesUtil.getValue("serverPath");
    107. 			String dirPath=PropertiesUtil.getValue("dirPath");
    108. 			//2) 定义会议排座图片的名称(最终要保存到数据库表中)，例如：/uploads/xxxxx.jpg
    109. 			String fileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
    110. 			//3) 拼接成完整的路径
    111. 			String realPath=dirPath+fileName;
    112. 			//4) 将图片保存到指定位置
    113. 			Base64ImageUtils.GenerateImage(info.getSeatPic().replace("data:image/png;base64,",""), realPath);
    114. 			
    115. 			//2.根据会议ID修改会议图片信息
    116. 			info.setSeatPic(serverPath+fileName);
    117. 			infoDao.updateSeatPicById(info);
    118. 			ResponseUtil.writeJson(resp, R.ok(200, "更新会议的排座图片成功"));
    119. 		} catch (Exception e) {
    120. 			e.printStackTrace();
    121. 			try {
    122. 				ResponseUtil.writeJson(resp, R.error(0, "更新会议的排座图片失败"));
    123. 			} catch (Exception e1) {
    124. 				e1.printStackTrace();
    125. 			}
    126. 		}
    127. 		return null;
    128. 	}
    129. 	
    130. //	根据会议ID更新会议的审批人（送审）
    131. 	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
    132. 		try {
    133. 			int rs = infoDao.updateAuditorById(info);
    134. 			if (rs > 0) {
    135. 				ResponseUtil.writeJson(resp, R.ok(200, "会议审批成功"));
    136. 			}else {
    137. 				ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));
    138. 			}
    139. 		} catch (Exception e) {
    140. 			e.printStackTrace();
    141. 			try {
    142. 				ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));
    143. 			} catch (Exception e1) {
    144. 				e1.printStackTrace();
    145. 			}
    146. 		}
    147. 		return null;
    148. 	}
    149. }

     

            2、前端编码

            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. 	$.getJSON('${pageContext.request.contextPath }/user.action',{
    152. 		'methodName':'queryUserByMeetingId',
    153. 		'meetingId':'${param.id}'
    154. 	},function(rs){
    155. 		console.log(rs);
    156. 		let data=rs.data;
    157. 		$.each(data,function(i,e){
    158. 			$('#dan_input').val(e.name);
    159. 			addDanMu();
    160. 		});
    161. 	});
    162. }
    163.  
    164.  
    165. //添加会议排座
    166. function addDanMu() {
    167. 	var dan = document.getElementById("dan_input").value;
    168. 	if (dan == "") {
    169. 		alert("请先输入座次~");
    170. 		return false;
    171. 	} else {
    172. 		document.getElementById("dan_input").value = ""; //清空 弹幕输入框
    173. 		// var br = document.createElement("BR");  // 
    174. 		var node = document.createElement("DIV"); // 
    175. 		var tipsArr = document.getElementsByClassName('tips');
    176. 		var i;
    177. 		// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
    178. 		if (tipsArr.length == 0) {
    179. 			i = 1
    180. 		} else {
    181.  
    182. 			i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
    183. 		}
    184. 		// var aNode = document.createElement("P");   // 
    185. 		node.setAttribute("class", "tips");
    186. 		node.setAttribute("id", "tips" + i);
    187. 		node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
    188. 		var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 
        中
    189. 		// aNode.appendChild(textnode);
    190. 		node.appendChild(textnode);
    191. 		// document.body.appendChild(br);
    192. 		// document.body.appendChild(node);
    193.  
    194. 		document.getElementById("tu").appendChild(node);
    195. 		return true;
    196. 	}
    197. }
    198. 	script>
    199. html>

            myMeeting.js

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

    四、效果展示

                    先发布一个新的会议

     

    直接点击送审

     

    排座

     

     

     

     重新送审

  • 相关阅读:
    小米面试题——不用加减乘除计算两数之和
    Java代码审计——URL 跳转漏洞
    vue3 传值
    Metabase学习教程：仪表盘-3
    记录一次通过openVPN访问域名无法访问的问题
    【Go语言入门教程】Go语言简介
    【技术实战】Linux中的命令行【实战篇】【一】
    Tomcat - mac - 启动/关闭
    Ribbon负载均衡 (源码分析)
    个人项目（玩具）列表（可能会更新）
  • 原文地址：https://blog.csdn.net/qq_62331938/article/details/125980657