前言

一、需求分析

二、准备工作

三、编码

1、后台编码

2、前端编码

四、效果展示

前言

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

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

一、需求分析

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

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

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

会议排座：

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

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

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

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

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

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

所以没有排座不能送审。

二、准备工作

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

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

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

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

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

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

SQL语句分析：

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

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

find_in_set 与 in 的区别

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

三、编码

1、后台编码

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;
import com.zking.util.StringUtils;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()+"'";
//      根据sql查询符合条件的用户，通常只会返回一条数据List<User> users = super.executeQuery(sql, User.class, null);return users == null || users.size() == 0 ? null : users.get(0);
//      return super.executeQuery(sql, clz, pageBean);}//   查询用户信息及对应的角色，角色是通过case when得来的public List<Map<String, Object>> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sql = "SELECT *\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 \r\n" + ") roleName \r\n" + "from \r\n" + "t_oa_user where 1 = 1 ";String name = user.getName();if(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 InstantiationException, IllegalAccessException, SQLException{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> queryUserByMeetingId(Long meetingId) throws Exception{String sql="select * from t_oa_user where FIND_IN_SET(id,"+ "(select concat(canyuze,',',liexize,',',zhuchiren) uid "+ "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 com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.BaseDao;
import com.zking.util.CommonUtils;
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, R.error(0, "用户名密码错误"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));} catch (Exception e1) {e1.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) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));} catch (Exception e1) {e1.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) {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是sql语句执行的影响行数int rs = userDao.add(user);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 del(HttpServletRequest req, HttpServletResponse resp) {try {
//          rs是sql语句执行的影响行数int rs = userDao.del(user);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 edit(HttpServletRequest req, HttpServletResponse resp) {try {
//          rs是sql语句执行的影响行数int rs = userDao.edit(user);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 queryUserByMeetingId(HttpServletRequest req,HttpServletResponse resp) throws Exception{try {String meetingId = req.getParameter("meetingId");List<User> users = userDao.queryUserByMeetingId(Long.valueOf(meetingId));CommonUtils.toJson(true, users, resp);} catch (Exception e) {CommonUtils.toJson(false,"获取参会人员信息失败", resp);e.printStackTrace();}return null;}@Overridepublic 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"});}//我的会议、其他菜单会用到。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();//按照会议ID降序排序
//      sql+=" order by a.id desc";System.out.println(sql);return super.executeQuery(sql, pageBean);}// 取消会议public int updateState(MeetingInfo info) throws Exception {String sql = "update t_oa_meeting_info set state = 0 where  id = ?";return super.executeUpdate(sql, info,new String[] {"id"} );}//   根据会议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"});}// 根据会议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.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.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();@Overridepublic MeetingInfo getModel() {
//      注册一个转换器ConvertUtils.register(new MyDateConverter(), Date.class);return info;}public String add(HttpServletRequest req, HttpServletResponse resp) {try {
//          rs是sql语句执行的影响行数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>> list = infoDao.myInfos(info, pageBean);
//          注意：layui中的数据表格的格式ResponseUtil.writeJson(resp, R.ok(0, "我的会议数据查询成功" , pageBean.getTotal(), list));} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "我的会议数据查询失败"));} catch (Exception e1) {e1.printStackTrace();}}return null;}//   取消会议public String del(HttpServletRequest req, HttpServletResponse resp) {try {PageBean pageBean = new PageBean();pageBean.setRequest(req);int upd = infoDao.updateState(info);
//          注意：layui中的数据表格的格式if(upd > 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 updateSeatPicById(HttpServletRequest req,HttpServletResponse resp) throws Exception{try {//1.将排座图片保存到指定的位置并得到图片路径//1) 定义会议图片的保存路径String serverPath=PropertiesUtil.getValue("serverPath");String dirPath=PropertiesUtil.getValue("dirPath");//2) 定义会议排座图片的名称(最终要保存到数据库表中)，例如：/uploads/xxxxx.jpgString fileName=UUID.randomUUID().toString().replace("-", "")+".jpg";//3) 拼接成完整的路径String realPath=dirPath+fileName;//4) 将图片保存到指定位置Base64ImageUtils.GenerateImage(info.getSeatPic().replace("data:image/png;base64,",""), realPath);//2.根据会议ID修改会议图片信息info.setSeatPic(serverPath+fileName);infoDao.updateSeatPicById(info);ResponseUtil.writeJson(resp, R.ok(200, "更新会议的排座图片成功"));} 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 = 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;}
}

2、前端编码

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(){$.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>

myMeeting.js

let layer,table,$,form;
var 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();//送审$('#btn_auditor').click(function(){$.post('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选择器）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 "尚未排座";elsereturn "<img width='120px' src='"+d.seatPic+"'/>";}},{field: 'auditorName', title: '审批人', width: 120},{field: '', title: '操作', width: 200,toolbar:'#tbar'},]]});
}//2.点击查询
function query(){table.reload('tb', {url: 'info.action',     //请求地址method: 'POST',                    //请求方式，GET或者POSTloading: true,                     //是否显示加载条（默认 true）page: true,                        //是否分页where: {                           //设定异步数据接口的额外参数，任意设'methodName':'myInfos','zhuchiren':$('#zhuchiren').val(),'title':$('#title').val(),},  request: {                         //自定义分页请求参数名pageName: 'page', //页码的参数名称，默认：pagelimitName: '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);openLayerAudit();} else if(layEvent==="back"){ //反馈详情openLayerFeedBack(row.id);} else {layer.confirm('确认取消会议吗?', {icon: 3, title:'提示'}, function(index){$.post('info.action',{'methodName':'del','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,                    title: '会议排座',                   area: ['460px', '340px'],   //宽高skin: 'layui-layer-rim',    //样式类名content: 'jsp/meeting/seatPic.jsp?id='+id,                });
}//会议送审
function openLayerAudit(){//每次打开都对送审人进行初始化默认值设置$('#auditor').val("");//必须重新渲染form.render('select');//弹出对话框layer.open({type: 1,                    title:'会议送审',area: ['426px', '140px'],  skin: 'layui-layer-rim',    content: $('#audit'),   });
}//初始化审批人
function initFormSelects(){$.getJSON('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');});
}

四、效果展示

先发布一个新的会议

直接点击送审

排座

重新送审

会议OA项目(三)---我的会议（会议排座、送审）相关推荐

会议OA项目(待开会议历史会议所有会议)
文章目录一.会议OA项目名词介绍二.SQL编写待开会议SQL 所有 ...
会议OA之会议排座送审
目录最近这段时间一直都在与大家分享会议OA项目,今天继续分享关于会议OA项目的一个亮点功能,会议排座.以及一个送审功能. 一.会议排座二.送审最近这段时间一直都在与大家分享会议OA项目,今天继续 ...
会议OA项目(项目原型图介绍发布会议功能)
目录一.会议OA项目介绍为什么要开发OA会议管理会议OA管理的作用二.项目原型图介绍 1)会议管理 2)投票管理 3)会议室管理三.数据库表结构四.发布会议功能&多功能下拉框 La ...
会议OA项目之会议通知会议反馈反馈详情功能
目录一.需要的SQL语句 1.1 会议通知查询的SQL 1.2 反馈详情的SQL 二.会议通知的前台代码 2.1 会议通知的jsp文件 2.2 要封装的js文件三.会议通知查询的后台代码 2.1 ...
微信小程序-会议OA项目03
目录 1.Flex布局简介 1.1 什么是flex布局 1.2 flex属性 2.轮播图--组件的使用 3.会议OA项目-首页 1.Flex布局简介布局的传统解决方案,基于盒状模型,依赖 displ ...
会议OA项目--我的会议
目录一.我的会议sql语句编写二.我的会议后台代码三.我的会议前台代码四.异常处理一.我的会议sql语句编写 >我的会议< select a.id,a.title,a.cont ...
会议OA项目之会议发布（一）
目录前言: 会议发布的产品原型图: 1.会议发布 1.1实现的特色功能: 1.2思路: 使用的数据库 ...
微信小程序：会议OA项目-首页
目录一.flex布局 Flex布局简介什么是flex布局? flex属性 flex的属性二.轮播图组件及mockjs的使用三.会议OA小程序首页布局一.flex布局 Flex布局简介布局的 ...
会议OA项目之会议排座功能会议送审的实现
目录一.会议排座插件 1.1 插件文件&&jQuery的js文件 1.2 导入js文件 1.3 会议排座的jsp文件二.初始化参会用户 2.1 编写SQL语句 2.2 编写Dao方 ...

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

前言

一、需求分析

二、准备工作

三、编码

1、后台编码

2、前端编码

四、效果展示

会议OA项目(三)---我的会议（会议排座、送审）相关推荐

最新文章

热门文章