seatPic.jsp
注：添加jQuery、html2canvas相关插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <base href="${pageContext.request.contextPath }/"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="js/layui/css/layui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/layui/layui.js"></script> <script type="text/javascript" src="js/html2canvas/html2canvas.js"></script> <title>会议座位安排</title> </head> <style type="text/css"> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; /* background: red; */ } .tips { /* position: absolute; */ background: #eee; display: inline-block; height: 60px; /* width: 60px; */ line-height: 60px; text-align: center; margin: 5px; padding: 0 10px; } .add { position: fixed; right: 10px; top: 10px; display:inline; } #tu { width: 100%; height: 100%; /* background: lightblue; */ /*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/ } .layui-input{ height:30px; } </style> <body id="screen_body"> <div id="tu"></div> <!-- 下面不要使用layui的表单行内模式，会导致canvas的toDataURL()数据为 data:, --> <div class="add"> <div style="display:inline-block;"> <input id="dan_input" type="text" value="" class="layui-input"> </div> <div style="display:inline-block;"> <button onclick="return addDanMu()" class="layui-btn layui-btn-sm">添加座位</button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value='生成排座'> </div> </div> </body> <script type="text/javascript"> var $id = function(id) { return document.getElementById(id); } //会议排座拖拽 var dragF = { locked: false, lastObj: undefined, drag: function(obj) { $id(obj).onmousedown = function(e) { var e = e ? e : window.event; if (!window.event) { e.preventDefault(); } /* 阻止标注<a href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动a,img的默认事件 */ dragF.locked = true; $id(obj).style.position = "absolute"; $id(obj).style.zIndex = "100"; if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */ dragF.lastObj.style.zIndex = "1"; } dragF.lastObj = $id(obj); var tempX = $id(obj).offsetLeft; var tempY = $id(obj).offsetTop; dragF.x = e.clientX; dragF.y = e.clientY; document.onmousemove = function(e) { var e = e ? e : window.event; if (dragF.locked == false) return false; $id(obj).style.left = tempX + e.clientX - dragF.x + "px"; $id(obj).style.top = tempY + e.clientY - dragF.y + "px"; if (window.event) { e.returnValue = false; } /* 阻止ie下a,img的默认事件 */ } document.onmouseup = function() { dragF.locked = false; } } } } </script> <script type="text/javascript"> var layer; layui.use(['layer'],function(){ layer=layui.layer; //TODO 初始化会议排座：根据会议ID获取参会的所有人员的名字（主持人+参会人+列席人） arrangeSeat(); //绘制会议排座图片 $("#jie_input").on("click", function(event) { $('.add').hide(); event.preventDefault(); html2canvas(document.getElementById("screen_body")).then(function(canvas) { var dataUrl = canvas.toDataURL(); //console.log(dataUrl); var param = {}; param['seatPic'] = dataUrl; param['id'] = '${param.id}'; //console.log(param); //TODO 此处需要完成会议排座图片上传操作 $.ajax({ url: 'meetinginfoAction.action?methodName=addArrangeSeat', data: param, type: 'post', dataType: 'json', success: function(resp) { layer.msg(resp.msg); if(resp.code == 0) { //先得到当前iframe层的索引 var index = parent.layer.getFrameIndex(window.name); //再执行关闭 parent.layer.close(index); //调用父窗口的查询方法更新数据 parent.loadMeetingInfo(); } } }) }); }); }); //初始化排座人员信息 function arrangeSeat() { $.ajax({ url: "meetinginfoAction.action?methodName=listMeetingMemberById", data: { id: '${param.id}' }, type: 'get', dataType: 'json', success: function(resp) { //console.log(resp); $.each(resp.data, function(i,v) { $("#dan_input").val(v.name); addDanMu(); }); } }); } //添加会议排座 function addDanMu() { var dan = document.getElementById("dan_input").value; if (dan == "") { alert("请输入你要排座的人员") return false; } else { document.getElementById("dan_input").value = ""; //清空 弹幕输入框 var node = document.createElement("DIV"); // <div> var tipsArr = document.getElementsByClassName('tips'); var i; if (tipsArr.length == 0) { i = 1 } else { i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1; } node.setAttribute("class", "tips"); node.setAttribute("id", "tips" + i); node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');"); var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 <p> 中 node.appendChild(textnode); document.getElementById("tu").appendChild(node); return true; } } </script> </html>
会议送审
MeetingInfoDao.java
// 根据会议ID更新会议的审批人（送审） @Override public void updateMeetingState(Meetinginfo meetingInfo) { String sql = "update t_oa_meeting_info set state = ? where id = ?"; DbTemplate.update(sql, new Object[] {meetingInfo.getState(), meetingInfo.getId()}); }
MeetingInfoAction.java
/** * 会议送审，能够送审的前提是该会议已经排座，否则不能送审，此外 * 对于审核通过，结束，取消，进行中等状态的会议不能执行送审 * @param rep * @param resp */ public void sendAudit(HttpServletRequest rep, HttpServletResponse resp) { try { service.sendAudit(meetinginfo); CommonUtil.sendResponse(0, "送审成功", resp); } catch (Exception e) { e.printStackTrace(); CommonUtil.sendResponse(-1, "送审失败", resp); } }
myMeeting.js
<script> let table=null; let $ = null; var row = null; let formSelects = null; let form = null; let layer = null; layui.use(['table','jquery','formSelects','form','layer'], function(){ table = layui.table; $ = layui.jquery; formSelects = layui.formSelects; form = layui.form; layer = layui.layer; loadMeetingInfo(); //查询我的会议信息 $("#queryMeetingInfo").click(function() { loadMeetingInfo(); }); //对表格的功能按钮增加事件监听，如排座，送审，反馈按钮 table.on('tool(meetingInfoTable)', function(obj) { //排座 if(obj.event == 'seat') { //对于新建或驳回状态的会议可以执行排座 if(obj.data.state == 1 || obj.data.state == 3) { openSeatPic(obj.data.id); } else { layer.msg("对于审核通过，结束，取消，进行中等状态的会议不能再执行排座") } } //送审 if(obj.event == 'send') { if(obj.data.seatPic) { //对于新建或驳回状态的会议可以送审 if(obj.data.state == 1 || obj.data.state == 3) { openSendAudit(obj.data.id); } else { layer.msg("对于审核通过，结束，取消，进行中等状态的会议不能执行送审"); } } else { layer.msg("未进行排座不能送审"); } } //查看反馈 if(obj.event == 'feedback') { openFeedbackInfo(obj.data); } }); }); function openFeedbackInfo(data) { let ignore = [0,1,2,3]; if(ignore.indexOf(data.state) >= 0) { layer.msg("对于新建、驳回、取消、待审状态下的会议，不用查看反馈"); return; } debugger; layer.open({ type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title:'反馈详情', area: ['600px', '650px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: ctx+'/jsp/meeting/meetingFeedback.jsp?meetingId=' + data.id, btn:['关闭'], yes:function(index,layero){ layer.closeAll(); } }); } // 打开送审的对话框，执行送审 function openSendAudit(id) { let index = layer.open({ type: 1, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title: '送审', area: ['660px', '200px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: $("#auditDiv") //送审对应的div }); //初始化送审人员选择下拉列表的数据 formSelects.data('auditPerson', 'server', { url: ctx + '/meetinginfoAction.action?methodName=listMeetingMember' }); //添加送审按钮的监听事件，发送ajax请求执行送审 form.on('submit(sendAudit)', function(data) { console.log(data); data.field["id"] = id; console.log(data); $.ajax({ url: ctx + '/meetinginfoAction.action?methodName=sendAudit', data: data.field, type: 'post', dataType: 'json', success: function(resp) { layer.msg(resp.msg); layer.close(index); //送审成功，更新我的会议列表 loadMeetingInfo(); } }) }); } //会议排座 function openSeatPic(id) { row = null; layer.open({ type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title: '会议排座', area: ['660px', '350px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: ctx+'/jsp/meeting/seatPic.jsp?id='+id }); }; //查询会议信息 function loadMeetingInfo() { table.render({ elem: '#meetingInfoTable', url: ctx + '/meetinginfoAction.action?methodName=listMeetingInfo', cols: [[ {field:'id', width:60, title: 'ID'}, {field:'title', width:180, title: '会议标题', sort: true}, {field:'location', width:180, title: '会议地点', sort: true}, {field:'startTime', width:160, title: '开始时间'}, {field:'endTime', width:160, title: '结束时间'}, {field:'meetingState', width:180, title: '会议状态'}, //显示排座图片 {field: 'seatPic', title: '会议排座', width: 180, templet:function(d){ if(null==d.seatPic) return "尚未排座"; else return "<img height='180px' src='"+d.seatPic+"'/>"; } }, {field: '', title: '操作', width: 250, toolbar:'#toolbar'} ]], page: true, request: { pageName: 'page', limitName: 'rows' }, method: 'post', where: { title: $("#title").val() }, loading: true, }); } </script>
