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

    目录

    一、会议排座插件介绍

    1、会议排座背景

    2、需求分析

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

    三、会议排座图片生产及展示

    四、会议送审

    一、会议排座插件介绍

    1、会议排座背景

    参会人员每个人位置是有讲究的，不是随便坐的；就像请人吃饭，请客的人是坐在主位；参会的人并且重要的人，他也会坐主位上面

    2、需求分析

    ①、查询出本场会议中的所有参与人员

    ②、需要完成在页面上元素的拖动功能，把对应的参会人员放在指定位置，如：重要的人就放在主位

    ③、将已经画好的会议座位图，保存下来，并且绑定到本次会议数据上去

    流程：

    ①找网上素材，多找几个，挑出一个最适合的

    例如：

    第一种：

    效果： 

    第二种: 

    效果： 

     根据以上两种的效果的对比，可以知道第一种的效果，是比较贴近的。所以选择第一种。

    ③、插件改进

    根据效果分析得知：①、元素重叠，无法判断有几人参加、②、元素模块太小看不清。

      将position这个样式去掉后，可以看见每一个元素占一行。

    改进后：

    样式改进： 

    1. .tips {
    2. 				/* position: absolute; */
    3. 				background: #eee;
    4. 				display: inline-block;
    5. 				height: 60px;
    6. 				width: 60px;
    7. 				line-height: 60px;
    8. 				text-align: center;
    9. 				margin: 5px;
    10. 			}

     ④、分析怎么和项目进行关联

    当我们点击下载后，可以发现他默认下载的地址是在D:\TSBrowserDownloads

     查看源代码，分析图片生成的原因/步骤
            下载 按钮是绑定了一个方法，这个主要的方法是downloadFile方法
            downloadFile方法有两个参数：FileName、content，接下就是思考哪个参数与图片有关系
            结论：通过分析downloadFile方法中content参数就代表了那张图片-前端

    ⑤、content需要传递到后台，并且生成图片，只有这样，我们才能通过代码决定图片存放在哪里
            ①、怎么传后台-$.post
                $.get(不行的，因为参数太大)    错
            ②、String content 字符串要转换成图片 

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

    seatPic.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    12. 会议座位安排
    16.     
    17.     
    18. 	
    19. 		
    20. 			
    21.

    •  将以下方法加入到myMeeting.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. }

     修改部分：

    原本是layer.msg("排座")给改为open(row.id);

     效果：

     效果中的abcd那些均为点击添加座位的效果

     sql语句编写

    1. -- 会议排座用户查询
    2. select * from t_oa_meeting_info where id = 8
    3. -- 期望结果
    4. select * from t_oa_meeting_info where id in (1,2,3,4)
    5. select concat(canyuze,',',liexize,',',zhuchiren) from t_oa_meeting_info where id = 8
    6.  
    7. select * from t_oa_meeting_info where id in (select concat(canyuze,',',liexize,',',zhuchiren) from t_oa_meeting_info where id = 8)
    8. -- 实际结果
    9. select * from t_oa_meeting_info where id in ('1,2,3,4,5')
    10. -- FIND_IN_SET
    11. -- 第一个参数：数据库列段
    12. -- 第二个参数：是列段的条件
    13. select * from t_oa_user WHERE FIND_IN_SET(id,(select concat(canyuze,',',liexize,',',zhuchiren) from t_oa_meeting_info where id = 8
    14. ))

    效果：

    将以下红框中的加入到项目中 

     

     将以下方法加入到UserAction中

    1. 	public String queryUserByMeetingId(HttpServletRequest req, HttpServletResponse resp) {
    2. 		try {
    3. 			String parameter = req.getParameter("meetingId");
    4. 			List users = userDao.list(Integer.valueOf(parameter));
    5. //			注意：layui中的数据表格的格式
    6. 			ResponseUtil.writeJson(resp, R.ok(0, "会议用户数据初始化成功" , 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. 		return null;
    16. 	}

     将以下方法加入到UserDao中

    1. public List list(Integer valueOf) 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 = "+valueOf+" ))";
    4. 		return super.executeQuery(sql, User.class, null);
    5. 	}

    效果：

    可以点击会议排座后，该会议参加的人员展现出来了 

    三、会议排座图片生产及展示

    将以下方法放入MeetingInfoAction中

    1. public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) {
    2. 		/*
    3. 		 * 1.接收前端页面传递到后台的图片对应的字符串
    4. 		 * 2.借助工具类将字符串生成一个图片，保存到配置文件中所配置的路径下
    5. 		 * 3.添加服务器硬盘与请求地址的映射，即可访问
    6. 		 * 4.将请求地址保存到数据库中
    7. 		 */
    8. 		try {
    9. //			E:/temp/images/T280/abcde.png
    10. //			获取图片存放地址
    11. 			String dirPath = PropertiesUtil.getValue("dirPath");
    12. //			获取浏览器请求路径，为了后续保存到数据库
    13. 			String serverPath = PropertiesUtil.getValue("serverPath");
    14. //			随机生产一个图片名称
    15. 			String fileName=UUID.randomUUID().toString().replaceAll("-", "")+".png";
    16. 			meetingInfo.getSeatPic();//图字符串
    17. 			Base64ImageUtils.GenerateImage(meetingInfo.getSeatPic()
    18. 					.replaceAll("data:image/png;base64,", ""), dirPath+fileName);
    19. 			
    20. //			将seatPic中内容修改为请求地址
    21. 			meetingInfo.setSeatPic(serverPath+fileName);
    22. 			
    23. //			修改会议排座数据库图片对应的数据库列段
    24. 			int rs = meetingInfoDao.updateSeatPicById(meetingInfo);
    25. 			if(rs>0) {
    26. 				ResponseUtil.writeJson(resp, R.ok(200, "会议排座成功"));
    27. 			}
    28. 			else {
    29. 				ResponseUtil.writeJson(resp, R.ok(0, "会议排座失败"));
    30. 			}
    31. 		} catch (Exception e) {
    32. 			e.printStackTrace();
    33. 			try {
    34. 				ResponseUtil.writeJson(resp, R.ok(0, "会议排座失败"));
    35. 			} catch (Exception e1) {
    36. 				// TODO Auto-generated catch block
    37. 				e1.printStackTrace();
    38. 			}
    39. 		}
    40. 		return null;
    41. 	}

     将以下方法放入MeetingInfoDao

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

    效果：

     

     

    四、会议送审

    前端：

    myMeeting.js:

    1. let layer,$,table,form;
    2. var row;
    3. layui.use(['jquery', 'layer', 'table','form'], function(){
    4. 	layer = layui.layer
    5. 	,$ = layui.jquery
    6. 	,form = layui.form
    7. 	,table = layui.table;
    8. 	//初始化数据表格
    9. 	initTable();
    10. 	//绑定查询按钮的点击事件
    11. 	$('#btn_search').click(function(){
    12. 		query();
    13. 	});
    14. 	
    15. 	//绑定新增按钮的点击事件
    16. 	$('#btn_add').click(function(){
    17. 		row=null;
    18. 		open('新增');
    19. 	});
    20. 	
    21. //	初始化审批人
    22. 	initFormSelects();
    23. });
    24.  
    25. //1.初始化数据表格
    26. function initTable(){
    27. 	table.render({           //执行渲染
    28.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    29. //        url: 'user.action?methodName=list',     //请求地址
    30.         height: 340,         //自定义高度
    31.         loading: false,      //是否显示加载条（默认 true）
    32.         cols: [[             //设置表头
    33.             {field: 'id', title: '会议编号', width: 120},
    34.             {field: 'title', title: '会议标题', width: 120},
    35.             {field: 'location', title: '会议地点' , width: 140},
    36.             {field: 'startTime', title: '开始时间', width: 120},
    37.             {field: 'endTime', title: '结束时间', width: 120},
    38.             {field: 'meetingstate', title: '会议状态', width: 140},
    39.             {field: 'seatPic', title: '会议排座', width: 120,templet: function(d){
    40.                 console.log(d.LAY_INDEX); //得到序号。一般不常用
    41.                 console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用
    42.                 console.log(d)
    43.                 //得到当前行数据，并拼接成自定义模板
    44.                 return ''">'}},
    45.             {field: 'auditorname', title: '审批人', width: 120},
    46.             {field: '', title: '操作', width: 220,toolbar:'#tbar'},
    47.             
    48.         ]]
    49.     });
    50. 	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    51. 	table.on('tool(tb)', function (obj) {
    52. 		row = obj.data;
    53. 		if (obj.event == "seat") {
    54. 			 open(row.id);
    55. 		}else if(obj.event == "send"){
    56. //			layer.msg("送审");
    57. //			判断有是否已经排座
    58. 			if(row.seatPic==null||row.seatPic==""){
    59. 				layer.msg('先请完成会议排座，在进行送审操作！',function(){});
    60. 				return false;
    61. 			}
    62. //			弹出层中的会议送审人员必须查询出来后台已经完成，在多功能下拉框中已经完成
    63. 			  //在打开送审页面之前，先请完成会议ID的赋值操作
    64. 			  $('#meetingId').val(row.id);
    65. //			打卡会议送审HTML页面层
    66. 			  openLayerAudit();
    67. 		}else if(obj.event == "del"){
    68. 			layer.msg("取消会议");
    69. 		}else if(obj.event == "back"){
    70. 			layer.msg("反馈详情");
    71. 		}else{
    72. 			
    73. 		}
    74. 	});
    75. 	
    76. }
    77.  
    78. //2.点击查询
    79. function query(){
    80. //	console.log($("#ctx").val());
    81. 	table.reload('tb', {
    82.         url: 'info.action',     //请求地址
    83.         method: 'POST',                    //请求方式，GET或者POST
    84.         loading: true,                     //是否显示加载条（默认 true）
    85.         page: true,                        //是否分页
    86.         where: {                           //设定异步数据接口的额外参数，任意设
    87.         	'methodName':'myInfos',
    88.         	'title':$('#title').val(),
    89.         	'zhuchiren':$("#zhuchiren").val()
    90.         },  
    91.         request: {                         //自定义分页请求参数名
    92.             pageName: 'page', //页码的参数名称，默认：page
    93.             limitName: 'rows' //每页数据量的参数名，默认：limit
    94.         }
    95.    });
    96. }
    97.  
    98. //打开会议排座对话框
    99. function open(id){
    100. 	layer.open({
    101.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    102.         title: '会议排座',                   //对话框标题
    103.         area: ['460px', '340px'],   //宽高
    104.         skin: 'layui-layer-rim',    //样式类名
    105.         content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    106.     });
    107. }
    108.  
    109. //初始化审批人
    110. function initFormSelects(){
    111. 	$.getJSON($("#ctx").val()+'/user.action',{
    112. 		'methodName':'queryUserAll'
    113. 	},function(rs){
    114. 		console.log(rs);
    115. 		let data=rs.data;
    116. 		$.each(data,function(i,e){
    117. 			$('#auditor').append(new Option(e.name,e.value));
    118. 		});
    119. 		//重新渲染
    120. 		form.render('select');
    121. 	});
    122. }
    123.  
    124. //会议送审
    125. function openLayerAudit(){
    126. 	//每次打开都对送审人进行初始化默认值设置
    127. 	$('#auditor').val("");
    128. 	//必须重新渲染
    129. 	form.render('select');
    130. 	//弹出对话框
    131.     layer.open({
    132.         type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    133.         title:'会议送审',
    134.         area: ['426px', '140px'],   //宽高
    135.         skin: 'layui-layer-rim',    //样式类名
    136.         content: $('#audit'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    137.     });
    138. }
      139. 效果：
      将以下方法加入到MeetingInfoDao 
      1. //	会议送审
      2. 	public int updateAuditorById(MeetingInfo meetingInfo) throws Exception {
      3. 		String sql=" update t_oa_meeting_info set auditor=?,state=2 where id=?";
      4. 		return super.executeUpdate(sql, meetingInfo, new String[] {"auditor","id"});
      5. 	}
      将以下方法加入到 MeetingInfoAction
      1. //	会议送审
      2. 	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
      3. 		try {
      4. //			rs是sql语句执行的影响行数
      5. 			int rs = meetingInfoDao.updateAuditorById(meetingInfo);
      6. 			if(rs>0) {
      7. 				ResponseUtil.writeJson(resp, R.ok(200, "会议送审成功"));
      8. 			}
      9. 			else {
      10. 				ResponseUtil.writeJson(resp, R.ok(0, "会议送审失败"));
      11. 			}
      12. 		} catch (Exception e) {
      13. 			e.printStackTrace();
      14. 			try {
      15. 				ResponseUtil.writeJson(resp, R.ok(0, "会议送审失败"));
      16. 			} catch (Exception e1) {
      17. 				// TODO Auto-generated catch block
      18. 				e1.printStackTrace();
      19. 			}
      20. 		}
      21. 		return null;
      22. 	}
      将以下方法加入到myMeeting.js中
       
 
      就该方法放到初始化审批人下 
       
 
      1. //送审
      2. 	$('#btn_auditor').click(function(){
      3. 		$.post($("#ctx").val()+'/info.action',{
      4. 			'methodName':'updateAuditorById',
      5. 			'id':$('#meetingId').val(),
      6. 			'auditor':$('#auditor').val()
      7. 		},function(rs){
      8. 			if(rs.success){
      9. 				//关闭对话框
      10. 				layer.closeAll();
      11. 				//刷新列表
      12. 				query();
      13. 			}else{
      14. 				layer.msg(rs.msg,{icon:5},function(){});
      15. 			}
      16. 		},'json');
      17. 		return false;
      18. 	});
       

      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. }
      效果暂时还要错误还在解决中
    139. 

                    相关阅读:
      
                    
CrossOver2024中文免费版虚拟机软件                            
      
分销系统开发|如何正确定义三级分销？                            
      
Mac book pro 睡眠唤醒之后，外接显示器再也无法点亮，只能重启，怎么解决？                            
      
ssm毕设项目学生社团管理系统jcjyw（java+VUE+Mybatis+Maven+Mysql+sprnig）                            
      
Taurus.MVC WebMVC 入门开发教程6：路由配置与路由映射                            
      
Jmeter性能监控                            
      
leetcode刷题日志-28.找出字符串中第一个匹配项的下标                            
      
力扣记录：Hot100（1）——1-19                            
      
数字化转型时代，商业智能BI到底是什么？                            
      
使用 B+ 树 or 使用跳表？                            
      
                          
                
    140. 
                    原文地址：https://blog.csdn.net/m0_62604616/article/details/125986959
                
      141.