目录
一、会议排座插件介绍
查看蓝色为背景的图片的源码
<html>
<head>
<title>会议座位安排</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.tips {
/* position: absolute; */
background: #eee;
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin: 5px;
}
.add {
position: fixed;
right: 0;
top: 0
}
#tu {
width: 564px;
height: 330px;
background: lightblue
/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<div id="tu"></div>
<!-- <div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
<img src="/images/skinslogo.gif"><br>图片可以拖动</div>
<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');">座位1
</div>
<div class="tips" id="tips3" onmouseover="dragF.drag('tips3');">座位2
</div> -->
<div class="add">
<input id="dan_input" type="text" value="">
<button onclick="return addDanMu()">添加座位</button>
<input id="jie_input" type="button" value='下载'>
</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>
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>
<script type="text/javascript">
$("#jie_input").on("click", function(event) {
event.preventDefault();
html2canvas(document.getElementById("tu")).then(function(canvas) {
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
// document.body.appendChild(newImg);
// console.log(dataUrl)
this.downloadFile('测试.png', dataUrl);
});
});
//下载
function downloadFile(fileName, content) {
debugger;
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
//aLink.click()
aLink.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
})); //兼容火狐
}
//base64转blob
function base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
}
</script>
</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))
结果：
点击会议排座时进入另一个页面
myMeeting.js中增加一段代码
//打开会议排座对话框
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的不同而不同
});
}写一个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>
写一个dao方法在UserDao
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class UserDao extends BaseDao<User> {
public User login(User user) throws Exception {
String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"' ";
// return super.executeQuery(sql, clz, pageBean);
//根据sql查询符合条件的用户，通常只会返回一条数据
List<User> users = super.executeQuery(sql, User.class,null);
return users == null || users.size() == 0 ? null : users.get(0);
}
// 查询用户信息及对应的角色 角色是通过case when得到的
public List<Map<String, Object>> list(User user,PageBean pageBean) throws Exception{
String sql = "select * \r\n " +
", \r\n " +
"(case rid \r\n " +
"when 1 then '管理员' \r\n" +
"when 2 then '发起者' \r\n" +
"when 3 then '审批者' \r\n" +
"when 4 then '参与者' \r\n" +
"when 5 then '会议室管理员' \r\n" +
"else '其他' end ) roleName \r\n" +
"FROM t_oa_user where 1 = 1";
String name = user.getName();
if(com.zking.util.StringUtils.isNotBlank(name)) {
sql += " and name like '%"+name+"%'";
}
//当实体类的属性完全包含数据库查询出来的列段的时候使用
// super.executeQuery(sql, User.class, pageBean) 返回List<Map<String, Object>>,对应的是联表查询，单个实体类对象，不完全包含查询的列段
return super.executeQuery(sql, pageBean);
}
//查询所有用户 用于绑定多功能下拉框
public List<Map<String, Object>> queryUserAll(User user,PageBean pageBean) throws Exception{
String sql = "select id as value,name from t_oa_user";
return super.executeQuery(sql, pageBean);
}
public int add(User user) throws Exception {
String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
return super.executeUpdate(sql,user,new String[] {"name","loginName","pwd"});
}
public int del(User user) throws Exception {
String sql = "delete from t_oa_user where id=?";
return super.executeUpdate(sql,user,new String[] {"id"});
}
public int edit(User user) throws Exception {
String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id=?";
return super.executeUpdate(sql,user,new String[] {"name","loginName","pwd","id"});
}
//会议排座用户信息查询
public List<User> list(Integer meetingId) throws Exception {
String sql = " select * from t_oa_user where FIND_IN_SET (id,(select CONCAT(canyuze,',',liexize,',',zhuchiren) from t_oa_meeting_info where id= "+meetingId+")) ";
return super.executeQuery(sql, User.class, null);
}
}
UserAction
package com.zking.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.catalina.util.RequestUtil;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User>{
private User user = new User();
private UserDao userDao = new UserDao();
public String login(HttpServletRequest req, HttpServletResponse resp) {
try {
User u = userDao.login(user);
//通过账户名密码查到了用户记录
if(u != null) {
// 登录成功
//ResponseUtil.writeJson(resp, new R().data("code", 200).data("msg","成功"));
ResponseUtil.writeJson(resp, R.ok(200, "成功"));
req.getSession().setAttribute("user", u);
}
else {
// 登录失败
//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","账户或密码错误"));
ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
}
} catch (Exception e) {
// TODO: handle exception
}
return null;
}
//会议排座用户查询
public String queryUserByMeetingId(HttpServletRequest req, HttpServletResponse resp) {
try {
String meetingId = req.getParameter("meetingId");
List<User> users = userDao.list(Integer.valueOf(meetingId));
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "会议排座数据查询成功",users));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "会议排座数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
//用户查询
public String list(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> users = userDao.list(user, pageBean);
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
//查询所有用户用于绑定多功能下拉框
public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Map<String, Object>> users = userDao.queryUserAll(user, null);
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框数据查询成功",users));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "多功能下拉框数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
//影响行数
int rs = userDao.add(user);
if(rs>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
//影响行数
int rs = userDao.del(user);
if(rs>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
//影响行数
int rs = userDao.edit(user);
if(rs>0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
@Override
public User getModel() {
return user;
}
}
从登录进去
记得引入插件
三、会议排座图片生成及展示
MeetingInfoDao
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class MeetingInfoDao extends BaseDao<MeetingInfo>{
//会议信息新增
public int add (MeetingInfo t) throws Exception {
String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
}
// 通用的会议查询SQL语句，包含会议信息表数据，主持人姓名、审批人姓名、会议状态
private String getSQL() {
return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" +
",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" +
",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" +
",a.state\r\n" +
",(case a.state\r\n" +
"when 0 then '取消会议'\r\n" +
"when 1 then '新建'\r\n" +
"when 2 then '待审核'\r\n" +
"when 3 then '驳回'\r\n" +
"when 4 then '待开'\r\n" +
"when 5 then '进行中'\r\n" +
"when 6 then '开启投票'\r\n" +
"else '结束会' end\r\n" +
") as meetingState\r\n" +
",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" +
"FROM t_oa_meeting_info a\r\n" +
"inner join t_oa_user b on a.zhuchiren = b.id\r\n" +
"left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
}
// 我的会议
public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
String sql = getSQL();
String title = info.getTitle();
if(StringUtils.isNotBlank(title)) {
sql += " and title like '%"+title+"%'";
}
//根据当前登陆用户ID作为主持人字段的条件
sql+=" and zhuchiren="+info.getZhuchiren();
//System.out.println(sql);
return super.executeQuery(sql, pageBean);
}
// 状态：0取消会议 1新建 2待审核 3驳回 4待开 5进行中 6开启投票 7结束会议，默认值为1
public int updatezt(MeetingInfo m) throws Exception {
String sql = "update t_oa_meeting_info set state=? where id = ?";
return super.executeUpdate(sql, m, new String[] {"state","id"});
}
//设置会议排座图片
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"});
}
}
MeetingInfoAction
package com.zking.web;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.ConvertUtils;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.Base64ImageUtils;
import com.zking.util.BaseDao;
import com.zking.util.MyDateConverter;
import com.zking.util.PageBean;
import com.zking.util.PropertiesUtil;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
private MeetingInfo info = new MeetingInfo();
private MeetingInfoDao infoDao = new MeetingInfoDao();
@Override
public MeetingInfo getModel() {
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
//会议排座图片生成
public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) throws Exception {
/**
* 1.接受前端页面传递到后台的图片对应的字符串
* 2.借助工具类将字符串生成一个图片，保存到配置文件所配置的路径下
* 3.添加服务器硬盘与 请求地址的映射，即可访问
* 4.将请求地址 保存到数据库中
*/
try {
// E:/T280/images/123.png
//获取到图片的存放地址
String dirPath = PropertiesUtil.getValue("dirPath");
//获取到浏览器请求路径，为了后续保存到数据库
String serverPath = PropertiesUtil.getValue("serverPath"); // serverPath=/test_layui/upload/paizuo/
//随机生成一个图片名称
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 = infoDao.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;
}
//用户新增
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = infoDao.add(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;
}
//我的会议
public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> lst = infoDao.myInfos(info, pageBean);
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "我的会议数据查询成功",pageBean.getTotal(),lst));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "我的会议数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
//我的会议：删除（取消会议）
public String updatezt(HttpServletRequest req, HttpServletResponse resp) {
try {
int rs = infoDao.updatezt(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;
let row;
layui.use(['layer','table','jquery','form'],function(){
layer=layui.layer,
table=layui.table,
form=layui.form,
$=layui.jquery;
initTable();
//查询事件
$('#btn_search').click(function(){
query();
});
//初始化审批人
initFormSelects();
});
//1.初始化数据表格
function initTable(){
table.render({ //执行渲染
elem: '#tb', //指定原始表格元素选择器（推荐id选择器）
height: 400, //自定义高度
loading: false, //是否显示加载条（默认 true）
cols: [[ //设置表头
{field: 'id', title: '会议编号', width: 90},
{field: 'title', title: '会议标题', width: 120},
{field: 'location', title: '会议地点', width: 140},
{field: 'startTime', title: '开始时间', width: 120},
{field: 'endTime', title: '结束时间', width: 120},
{field: 'meetingState', title: '会议状态', width: 120},
{field: 'seatPic', title: '会议排座', width: 120,
templet: function(d){
if(d.seatPic==null || d.seatPic=="")
return "尚未排座";
else
return "<img width='120px' src='"+d.seatPic+"'/>";
}
},
{field: 'auditName', title: '审批人', width: 120},
{field: '', title: '操作', width: 200,toolbar:'#tbar'},
]]
});
}
//2.点击查询
function query(){
table.reload('tb', {
url: $("#ctx").val()+'/info.action', //请求地址
method: 'POST', //请求方式，GET或者POST
loading: true, //是否显示加载条（默认 true）
page: true, //是否分页
where: { //设定异步数据接口的额外参数，任意设
'methodName':'myInfos',
'zhuchiren':$('#zhuchiren').val(),
'title':$('#title').val(),
},
request: { //自定义分页请求参数名
pageName: 'page', //页码的参数名称，默认：page
limitName: 'rows' //每页数据量的参数名，默认：limit
},
done: function (res, curr, count) {
console.log(res);
}
});
//工具条事件
table.on('tool(tb)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
row = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
console.log(row);
if(layEvent === 'seat'){ //会议排座
open(row.id);
} else if(layEvent === 'send'){ //送审
//判断有没有排座
if(row.seatPic==null || row.seatPic==""){
layer.msg('先请完成会议排座，再进行送审操作！',function(){});
return false;
}
//在打开送审页面之前，先请完成会议ID的赋值操作
$('#meetingId').val(row.id);
//打开会议送审html 页面层
openLayerAudit();
} else if(layEvent==="back"){ //反馈详情
} else {//删除
layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
$.post($("#ctx").val()+'/info.action',{
'methodName':'updatezt',
'state':0,
'id':row.id
},function(rs){
if(rs.success){
//调用查询方法刷新数据
query();
}else{
layer.msg(rs.msg,function(){});
}
},'json');
layer.close(index);
});
}
});
}
//打开会议排座对话框
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的不同而不同
});
}
//初始化审批人
function initFormSelects(){
$.getJSON($("#ctx").val()+'/user.action',{
'methodName':'queryUserAll'
},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的不同而不同
});
}
效果：
MeetingInfoDao
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class MeetingInfoDao extends BaseDao<MeetingInfo>{
//会议信息新增
public int add (MeetingInfo t) throws Exception {
String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
}
// 通用的会议查询SQL语句，包含会议信息表数据，主持人姓名、审批人姓名、会议状态
private String getSQL() {
return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" +
",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" +
",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" +
",a.state\r\n" +
",(case a.state\r\n" +
"when 0 then '取消会议'\r\n" +
"when 1 then '新建'\r\n" +
"when 2 then '待审核'\r\n" +
"when 3 then '驳回'\r\n" +
"when 4 then '待开'\r\n" +
"when 5 then '进行中'\r\n" +
"when 6 then '开启投票'\r\n" +
"else '结束会' end\r\n" +
") as meetingState\r\n" +
",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" +
"FROM t_oa_meeting_info a\r\n" +
"inner join t_oa_user b on a.zhuchiren = b.id\r\n" +
"left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
}
// 我的会议
public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
String sql = getSQL();
String title = info.getTitle();
if(StringUtils.isNotBlank(title)) {
sql += " and title like '%"+title+"%'";
}
//根据当前登陆用户ID作为主持人字段的条件
sql+=" and zhuchiren="+info.getZhuchiren();
//System.out.println(sql);
return super.executeQuery(sql, pageBean);
}
// 状态：0取消会议 1新建 2待审核 3驳回 4待开 5进行中 6开启投票 7结束会议，默认值为1
public int updatezt(MeetingInfo m) throws Exception {
String sql = "update t_oa_meeting_info set state=? where id = ?";
return super.executeUpdate(sql, m, new String[] {"state","id"});
}
//设置会议排座图片
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"});
}
//会议送审
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
package com.zking.web;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.ConvertUtils;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.Base64ImageUtils;
import com.zking.util.BaseDao;
import com.zking.util.MyDateConverter;
import com.zking.util.PageBean;
import com.zking.util.PropertiesUtil;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
private MeetingInfo info = new MeetingInfo();
private MeetingInfoDao infoDao = new MeetingInfoDao();
@Override
public MeetingInfo getModel() {
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
//会议排座图片生成
public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) throws Exception {
/**
* 1.接受前端页面传递到后台的图片对应的字符串
* 2.借助工具类将字符串生成一个图片，保存到配置文件所配置的路径下
* 3.添加服务器硬盘与 请求地址的映射，即可访问
* 4.将请求地址 保存到数据库中
*/
try {
// E:/T280/images/123.png
//获取到图片的存放地址
String dirPath = PropertiesUtil.getValue("dirPath");
//获取到浏览器请求路径，为了后续保存到数据库
String serverPath = PropertiesUtil.getValue("serverPath"); // serverPath=/test_layui/upload/paizuo/
//随机生成一个图片名称
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 = infoDao.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;
}
//会议送审
public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = infoDao.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;
}
//用户新增
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = infoDao.add(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;
}
//我的会议
public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> lst = infoDao.myInfos(info, pageBean);
// 注意：layui中的数据表格的格式
ResponseUtil.writeJson(resp, R.ok(0, "我的会议数据查询成功",pageBean.getTotal(),lst));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "我的会议数据查询失败"));
} catch (Exception e2) {
// TODO: handle exception
e2.printStackTrace();
}
}
return null;
}
//我的会议：删除（取消会议）
public String updatezt(HttpServletRequest req, HttpServletResponse resp) {
try {
int rs = infoDao.updatezt(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;
}
}
状态是待审核
3140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
