OA项目之我的审批（查询&会议签字）
时间：2022-12-27 19:00:00
目录
- 一、我的审核查询
-
- ①实现思路
- ②后端编写
- ③前端搭建
- 二、会议签字
-
- ①前言
- ②实现思路
- ③后端实现
- ④前端实现
一、我的审核查询
①实现思路
实现思路
如果域想实现我的审核查询，我们在查询表时需要添加条件id==登录者，而且审核状态也需要是待审核
②后端编写
dao方法层
// 我的审批 public List<Map<String,Object>> myAudit(MeetingInfo info,PageBean pageBean) throws Exception{
String sql=this.getSQL(); String title = info.getTitle(); //按照会议标题模糊查询 if(!StringUtils.isNotBlank(title)) sql =" and a.title like '%" title "%'"; ///ID作为审批人字段的条件 sql =" and a.auditor=" info.getAuditor(); ////查询待审核的会议信息 sql =" and a.state=2"; //按会议ID降序排序 sql =" order by a.id desc"; return super.executeQuery(sql, pageBean); } 然后写下我们webceng
///我的审批 public String myAudit(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> infos = infoDao.myAudit(info, pageBean);
ResponseUtil.writeJson(resp, R.ok(0, "我的审批查询成功！！！", pageBean.getTotal(), infos));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "我的审批查询失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
③前端搭建
首先我们需要在点击我的审批时，需要弹出一个内嵌页面来显示我的会议查询出来的数据
myAudit.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/myAudit.js"></script>
</head>
<style>
body{
margin:15px;
}
.layui-table-cell {
height: inherit;}
.layui-layer-page .layui-layer-content {
overflow: visible !important;}
</style>
<body>
<!-- 搜索栏 -->
<div class="layui-form-item" style="margin:15px 0px;">
<div class="layui-inline">
<label class="layui-form-label">会议标题</label>
<div class="layui-input-inline">
<input type="hidden" id="auditor" value="${user.id }"/>
<input type="text" id="title" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button id="btn_search" type="button" class="layui-btn"><i class="layui-icon layui-icon-search"></i> 查询</button>
</div>
</div>
<!-- 数据表格 -->
<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px"></table>
<script type="text/html" id="tbar">
<a class="layui-btn layui-btn-xs" lay-event="edit">审批</a>
</script>
</body>
</html>
对应的js===myAudit.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(); }); }); //初始化数据表格（我的审批） 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 ""; } }, { field: '', title: '操作', width: 200,toolbar:'#tbar'}, ]] }); } //点击查询 function query(){ table.reload('tb', { url: $("#ctx").val()+'/info.action', //请求地址 method: 'POST', //请求方式，GET或者POST loading: true, //是否显示加载条（默认 true） page: true, //是否分页 where: { //设定异步数据接口的额外参数，任意设 'methodName':'myAudit', 'auditor':$('#auditor').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 === 'edit'){ //审批 openLayer(row.id); } else { } }); } // 打开审批页面 function openLayer(id){ layer.open({ type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title: '审批', //对话框标题 area: ['600px', '500px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: $("#ctx").val()+'/jsp/meeting/addMeetingAudit.jsp', //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同 btn:['审批通过','审批驳回'], yes:function(index,layero){ //layer.msg('保存'); //调用子页面中提供的getData方法，快速获取子页面的form表单数据 let data= $(layero).find("iframe")[0].contentWindow.save(); data['meetingId']=id; data['auditor']=$('#auditor').val(); addMeetingAudit(data); }, btn2:function(){ let data={ }; data['sign']=null; data['meetingId']=id; data['auditor']=$('#auditor').val(); addMeetingAudit(data); return false; } }); } // 添加审批意见 function addMeetingAudit(params){ params['methodName']="add"; console.log(params); $.post($("#ctx").val()+'/audit.action',params,function(rs){ if(rs.success){ layer.closeAll(); query(); }else{ layer.msg(rs.msg,{ icon:5},function(){ }); } },'json'); }
显示效果(图片博主删除了)
二、会议签字
①前言
会议系统签字功能，可能会在很多地方都需要用到签字，审批人签字，那么为了方便审批人线上签字，有更好的体验，那么我们就有了会议签字。
我们的会议签字可以审批通过，也可以驳回，那么这都需要审批人签字，签完字后为了客户的需要，我们还添加了下载功能，该下载防止签字人过多，所有采用了截取功能
②实现思路
在我们点击审核时，弹出一个内嵌页面称做我的审批的子页面，那么子页面里面需要绑定之前的数据，做一个数据回显，所有我们在绑定页面上时就把值也回显到相对应的位置上，然后就是我们的签字，当我们审批人签完字后，点击驳回或者审批通过都需要生成一个图片，且还要修改数据库的会议状态，同时截取图片，因为我们数据库是mySql，事物操作都是自动提交，所有我们写一个方法使其数据据不自动提交事物，实现两个sql语句一起使用,然后我们在借助截取图片工具类，把我们原来生成的原图截取到我们需要的部分，且把原图删除，那么这时我们的签字也就完成了
③后端实现
这里我们要用到新表 t_oa_meeting_audit
那么我们有新表要使用就要建立一个实体类MeetingAudit.java
package com.xlb.entity;
import java.io.Serializable;
import java.util.Date;
//对应审批表 t_oa_meeting_audit
public class MeetingAudit implements Serializable {
private Integer id;
private Long meetingId;
private String auditor;
private String sign;
private Date createdate;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Long getMeetingId() {
return meetingId;
}
public void setMeetingId(Long meetingId) {
this.meetingId = meetingId;
}
public String getAuditor() {
return auditor;
}
public void setAuditor(String auditor) {
this.auditor = auditor;
}
public String getSign() {
return sign;
}
public void setSign(String sign) {
this.sign = sign;
}
public Date getCreatedate() {
return createdate;
}
public void setCreatedate(Date createdate) {
this.createdate = createdate;
}
public MeetingAudit() {
super();
// TODO Auto-generated constructor stub
}
@Override
public String toString() {
return "MeetingAudit [id=" + id + ", meetingId=" + meetingId + ", auditor=" + auditor + ", sign=" + sign
+ ", createdate=" + createdate + "]";
}
}
因为我们要同时进行两个sql语句运行，所有就有批处理方法
/** * 批处理 * @param sqlLst * @return */
public static int executeUpdateBatch(String[] sqlLst) {
Connection conn = null;
PreparedStatement stmt = null;
try {
conn = DBAccess.getConnection();
// 设置不自动提交
conn.setAutoCommit(false);
for (String sql : sqlLst) {
stmt = conn.prepareStatement(sql);
stmt.executeUpdate();
}
conn.commit();
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
throw new RuntimeException(e1);
}
e.printStackTrace();
throw new RuntimeException(e);
} finally {
DBAccess.close(conn, stmt, null);
}
return sqlLst.length;
}
Dao层MeetingAuditDao.java
package com.xlb.web; import java.io.File; import java.sql.Date; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.beanutils.ConvertUtils; import com.xlb.dao.MeetingAuditDao; import com.xlb.entity.MeetingAudit; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.Base64ImageUtils; import com.zking.util.ImageUtils; import com.zking.util.MyDateConverter; import com.zking.util.PropertiesUtil; import com.zking.util.R; import com.zking.util.ResponseUtil; import com
