一、后端

MeetingInfoDao

// 设置会议排座图片public int updateSeatPicById(MeetingInfo info) throws Exception {String sql =" update t_oa_meeting_info set seatPic=? where id=?";return super.executeUpdate(sql, info, new String[] {"seatPic","id"});}//  根据会议ID更新会议的审批人（送审）public int updateAuditorById(MeetingInfo info) throws Exception {String sql="update t_oa_meeting_info set auditor=?,state=2 where id=?";return super.executeUpdate(sql, info, new String[] {"auditor","id"});}

MeetingInfoAction

public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) {/** 1.接收前端页面传递到后台的图片对应的字符串* 2.借助工具类将字符串生成一个图片，保存到配置文件所配置的路径下* 3.添加服务器硬盘与请求地址的映射，即可访问* 4.将请求地址保存到数据库中*/try {
//          E:/temp/images/T280/abcdefg.png
//          获取图片的存放地址   dirPath=E:/temp/images/T280/String dirPath = PropertiesUtil.getValue("dirPath");
//          获取浏览器请求路径，为了后续保存到数据库    serverPath=/upload/paizuo/String serverPath = PropertiesUtil.getValue("serverPath");
//          随机生成一个图片名称String fileName = UUID.randomUUID().toString().replaceAll("-", "")+".png";info.getSeatPic();//图片字符串Base64ImageUtils.GenerateImage(info.getSeatPic().replaceAll("data:image/png;base64,", ""), dirPath+fileName);
//          将seatPic中内容修改为 请求地址info.setSeatPic(serverPath+fileName);//          修改会议排座 数据库图片 对应的数据库列段int rs = meetingInfoDao.updateSeatPicById(info);if (rs > 0) {ResponseUtil.writeJson(resp, R.ok(200, "会议排座成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "会议排座失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "会议排座失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}// 根据会议ID更新会议的审批人（送审）public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {try {int rs = meetingInfoDao.updateAuditorById(info);if (rs > 0) {ResponseUtil.writeJson(resp, R.ok(200, "会议审批成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}

二、前端

myMeeting.js

let layer,$,table,form;
var row;
layui.use(['jquery','layer','table','form'],function(){layer=layui.layer,$=layui.jquery,form=layui.form,table=layui.table;//初始化表格initTable();//绑定查询按钮的点击事件$('#btn_search').click(function(){query();});//初始化审批人initFormSelects();//送审$('#btn_auditor').click(function(){$.post($("#ctx").val()+'/info.action',{'methodName':'updateAuditorById','id':$('#meetingId').val(),'auditor':$('#auditor').val()},function(rs){if(rs.success){//关闭对话框layer.closeAll();//刷新列表query();}else{layer.msg(rs.msg,{icon:5},function(){});}},'json');return false;});
});//1.初始化数据表格
function initTable(){table.render({           //执行渲染elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址height: 340,         //自定义高度loading: false,      //是否显示加载条（默认 true）cols: [[             //设置表头{field: 'id', title: '会议编号', width: 120},{field: 'title', title: '会议标题', width: 120},{field: 'location', title: '会议地点', width: 140},{field: 'startTime', title: '开始时间', width: 120},{field: 'endTime', title: '结束时间', width: 140},{field: 'meetingstate', title: '会议状态', width: 120},{field: 'seatPic', title: '会议排座', width: 140,templet: function(d){console.log(d);//得到当前行数据，并拼接成自定义模板return '<img src="'+d.seatPic+'">'}},{field: 'auditorname', title: '审批人', width: 120},{field: '', title: '操作', width: 220,toolbar:'#tbar'},]]});//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!table.on('tool(tb)', function (obj) {row = obj.data;if (obj.event == "seat") {open(row.id);}else if(obj.event == "send"){
//          layer.msg("送审");
//          判断是否已经排座if(row.seatPic==null || row.seatPic==""){layer.msg('先请完成会议排座，再进行送审操作！',function(){});return false;}//在打开送审页面之前，先请完成会议ID的赋值操作$('#meetingId').val(row.id);
//             打开会议送审HTML 页面层openLayerAudit();}else if(obj.event == "del"){layer.msg("取消会议");}else if(obj.event == "back"){layer.msg("反馈详情");}else {}});
}//打开会议排座对话框
function open(id){layer.open({type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）title: '会议排座',                   //对话框标题area: ['460px', '340px'],   //宽高skin: 'layui-layer-rim',    //样式类名content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同});
}
//2.点击查询
function query(){table.reload('tb', {url: 'info.action',     //请求地址method: 'POST',                    //请求方式，GET或者POSTloading: true,                     //是否显示加载条（默认 true）page: true,                        //是否分页where: {                           //设定异步数据接口的额外参数，任意设'methodName':'myInfos','title':$('#title').val(),'zhuchiren':$("#zhuchiren").val()},  request: {                         //自定义分页请求参数名pageName: 'page', //页码的参数名称，默认：pagelimitName: 'rows' //每页数据量的参数名，默认：limit}});
}//初始化审批人
function initFormSelects(){$.getJSON($("#ctx").val()+'/user.action',{'methodName':'findAll'},function(rs){console.log(rs);let data=rs.data;$.each(data,function(i,e){$('#auditor').append(new Option(e.name,e.value));});//重新渲染form.render('select');});
}//会议送审
function openLayerAudit(){//每次打开都对送审人进行初始化默认值设置$('#auditor').val("");//必须重新渲染form.render('select');//弹出对话框layer.open({type: 1,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）title:'会议送审',area: ['426px', '140px'],   //宽高skin: 'layui-layer-rim',    //样式类名content: $('#audit'),   //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同});
}

seatPic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.contextPath }/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/layui/layui.js"></script>
<script type="text/javascript" src="static/js/plugins/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: pink;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;//初始化会议排座：根据会议ID获取参会的所有人员的名字（主持人+参会人+列席人）initMeetingUsers();//绘制会议排座图片$("#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}';param['methodName']='updateSeatPicById';console.log(param);//此处需要完成会议排座图片上传操作$.post('${pageContext.request.contextPath }/info.action',param,function(rs){if(rs.success){//先得到当前iframe层的索引var index = parent.layer.getFrameIndex(window.name); //再执行关闭parent.layer.close(index); //调用父页面的刷新方法parent.query();}else{layer.msg(rs.msg,{icon:5},function(){});}},'json');});});
});function initMeetingUsers(){//http://localhost:8080/xxx/seatPic.jsp?id=12  -> ${param.id}$.getJSON('${pageContext.request.contextPath }/user.action',{'methodName':'queryUserByMeetingId','meetingId':'${param.id}'},function(rs){console.log(rs);let data=rs.data;$.each(data,function(i,e){$('#dan_input').val(e.name);addDanMu();});});
}//添加会议排座
function addDanMu() {var dan = document.getElementById("dan_input").value;if (dan == "") {alert("请输入弹幕~");return false;} else {document.getElementById("dan_input").value = ""; //清空 弹幕输入框// var br = document.createElement("BR");  // <br />var node = document.createElement("DIV"); // <div>var tipsArr = document.getElementsByClassName('tips');var i;// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);if (tipsArr.length == 0) {i = 1} else {i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;}// var aNode = document.createElement("P");   // <p>node.setAttribute("class", "tips");node.setAttribute("id", "tips" + i);node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 <p>  中// aNode.appendChild(textnode);node.appendChild(textnode);// document.body.appendChild(br);// document.body.appendChild(node);document.getElementById("tu").appendChild(node);return true;}
}</script>
</html>

三、运行效果

会议OA项目排座功能以及送审功能相关推荐

会议oa之排座和送审
目录一.会议排座的背景二.后端三.前端一.会议排座的背景参会人员的每个座位都是有讲究的,是不可乱坐的.就像请客吃饭的人一样,一般请客的那个人是要做主位的,参会的人也一样,重要的人一般都是座主 ...
会议OA项目(我的会议中的会议排座送审功能)
文章目录一.会议排座插件介绍 1)会议项目为什么要有会议排座的功能 2)完成在页面上元素的拖动功能 2.1分析现有素材的不足 2.2修改现有素材的不足⬇⬇⬇ 2.3 content需要传递到后台,并 ...
会议OA项目(三)---我的会议（会议排座、送审）
目录前言一.需求分析二.准备工作三.编码 1.后台编码 2.前端编码四.效果展示前言上篇分享了会议OA项目的我的会议功能的查询.取消会议.本篇文章将完善我的会议功能. 我的会议功能有一个 ...
会议OA项目之会议通知会议反馈反馈详情功能
目录一.需要的SQL语句 1.1 会议通知查询的SQL 1.2 反馈详情的SQL 二.会议通知的前台代码 2.1 会议通知的jsp文件 2.2 要封装的js文件三.会议通知查询的后台代码 2.1 ...
会议OA项目(项目原型图介绍发布会议功能)
目录一.会议OA项目介绍为什么要开发OA会议管理会议OA管理的作用二.项目原型图介绍 1)会议管理 2)投票管理 3)会议室管理三.数据库表结构四.发布会议功能&多功能下拉框 La ...
微信小程序-会议OA项目03
目录 1.Flex布局简介 1.1 什么是flex布局 1.2 flex属性 2.轮播图--组件的使用 3.会议OA项目-首页 1.Flex布局简介布局的传统解决方案,基于盒状模型,依赖 displ ...
会议OA项目（六）--- （待开会议、历史会议、所有会议）
前言上一篇分享了会议通知以及会议反馈,根据需求来今天应该到了,历史会议.待开会议以及所有会议了. 一.需求分析历史会议:登录人员,属于参与者列席者或者主人其中一个时,并且会议状态为已结束时,要将数 ...
会议OA项目之会议发布（一）
目录前言: 会议发布的产品原型图: 1.会议发布 1.1实现的特色功能: 1.2思路: 使用的数据库 ...
会议OA项目(待开会议历史会议所有会议)
文章目录一.会议OA项目名词介绍二.SQL编写待开会议SQL 所有 ...

会议OA项目排座功能以及送审功能

一、后端

MeetingInfoDao

MeetingInfoAction

二、前端

myMeeting.js

seatPic.jsp

三、运行效果

会议OA项目排座功能以及送审功能相关推荐

最新文章

热门文章