会议审批查询&会议签字

VIP文章 Lme1216

已于 2022-07-28 01:21:54 修改

阅读量3.7k

点赞数

文章标签： java

于 2022-07-28 00:38:11 首次发布

本文链接：https://blog.csdn.net/qq_44247968/article/details/126026041

版权

一、前端

1、addMeetingAudit.jsp

会议审批包含了会议查询和审批签字两个功能。

1.会议查询：在我的审批界面，当前用户点击查询，显示的是他还未进行审批的会议数据

2.审批签字：当审批人浏览完该会议内容后，可以选择驳回或者通过该会议，如果通过该会议则进行签字，驳回则不需要签字。审批签字运用到了在线绘画工具的一个插件以及签字截图功能，类似于ps美化签字图片。在后端运用到了批处理方法，同时处理将被审批的会议新增入库以及修改会议状态的事务，业务处理结果必须保持一致。

一、前端

1、addMeetingAudit.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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/plugins/sign/css/www.jsdaima.com.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/plugins/sign/font/iconfont.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeetingAudit.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.min.js"></script> --%>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/plugins/sign/index.js"></script>  --%>
<title>发布会议</title>
</head>
<style>
body{
	margin:5px;
}
</style>
<body>
<div style="padding:10px 20px 10px 10px;">
    <form class="layui-form layui-form-pane" lay-filter="audit">
  		<input type="hidden" id="id" name="id"/>
  		<input type="hidden" id="auditor" value="${sessionScope.user.id }"/>
        <div class="layui-form-item">
            <label class="layui-form-label">会议标题</label>
            <div class="layui-input-block">
               <input type="text" name="title" autocomplete="off" class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">会议内容</label>
		    <div class="layui-input-block">
		      <textarea placeholder="请输入内容" name="content" class="layui-textarea" readonly="readonly"></textarea>
		    </div>
		</div>
		<!-- <div class="layui-form-item layui-form-text"> -->
		    <!-- <label class="layui-form-label">会议内容</label> -->
		    <!-- <div class="layui-input-block"> -->
		    	<div class="canvasBox">
					<div class="contro">
						<ul class="drawType">				
							<li data-name="pen" data-nameNum="0">
								<span class="icon iconfont icon-qianbi"></span>
								<span class="iconAlert">铅笔</span>
							</li>		
							<!-- <li class="downLoad">					
								<span class="icon iconfont icon-baocun"></span>
								<span class="iconAlert">保存</span>
								<img src="" alt="" class="downImg">
							</li>						
							<li data-name="eraser"  >
								<span class="icon iconfont icon-xiangpi"></span>
								<span class="iconAlert">橡皮</span>
							</li>	 -->
							<li class="remote">
								<span class="icon iconfont icon-delete"></span>
								<span class="iconAlert">清空</span>
							</li>				
						</ul>			
					</div>	
					<div class="canvasDraw">
						<div class="drawFont" data-type="hide">
							<span class="intoFont"></span>
							<input type="text" class="intoFontInput">
						</div>
						<canvas id="canvas" width="550" height="150"></canvas>			
					</div>		
				</div>
		  <!--   </div>
		</div> -->
    </form>
</div>
</body>
</html>

2、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>

3、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 "<img width='120px' src='"+d.seatPic+"'/>";
                }
            },
            {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;
        }
    });
}

最低0.47元/天解锁文章

Lme1216

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
会议审批查询&会议签字

会议审批包含了会议查询和审批签字两个功能。1.会议查询在我的审批界面，当前用户点击查询，显示的是他还未进行审批的会议数据2.审批签字当审批人浏览完该会议内容后，可以选择驳回或者通过该会议，如果通过该会议则进行签字，驳回则不需要签字。审批签字运用到了在线绘画工具的一个插件以及签字截图功能，类似于ps美化签字图片。在后端运用到了批处理方法，同时处理将被审批的会议新增入库以及修改会议状态的事务，业务处理结果必须保持一致。......
复制链接

扫一扫