目录
一、后端
二、前端
三、运行效果
一、后端
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) {
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 ''
}},
{field: 'auditorname', title: '审批人', width: 120},
{field: '', title: '操作', width: 220,toolbar:'#tbar'},
]]
});
//在页面中的 中必须配置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或者POST
loading: true, //是否显示加载条（默认 true）
page: true, //是否分页
where: { //设定异步数据接口的额外参数，任意设
'methodName':'myInfos',
'title':$('#title').val(),
'zhuchiren':$("#zhuchiren").val()
},
request: { //自定义分页请求参数名
pageName: 'page', //页码的参数名称，默认：page
limitName: '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"%>
会议座位安排
添加座位
三、运行效果
