devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

会议审批 查询&会议签字_j.gs/drb5

作者：花生_TL007 | 2024-02-27 20:37:10

赞

踩

j.gs/drb5

目录

一、前端

1、addMeetingAudit.jsp

2、myAudit.jsp

3、myAudit.js

4、addMeetingAudit.js

5、导入插件

二、后端

1、MeetingAuditDao

 2、MeetingAudit

3、MeetingAuditAction

4、配置xml

三、运行效果

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

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

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

一、前端

1、addMeetingAudit.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. 	pageEncoding="UTF-8"%>
  3. <%@include file="/common/header.jsp"%>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/plugins/sign/css/www.jsdaima.com.css">
  9. <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/plugins/sign/font/iconfont.css">
  10. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeetingAudit.js"></script>
  11. <%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.min.js"></script> --%>
  12. <%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/plugins/sign/index.js"></script>  --%>
  13. <title>发布会议</title>
  14. </head>
  15. <style>
  16. body{
  17. 	margin:5px;
  18. }
  19. </style>
  20. <body>
  21. <div style="padding:10px 20px 10px 10px;">
  22.     <form class="layui-form layui-form-pane" lay-filter="audit">
  23.   		<input type="hidden" id="id" name="id"/>
  24.   		<input type="hidden" id="auditor" value="${sessionScope.user.id }"/>
  25.         <div class="layui-form-item">
  26.             <label class="layui-form-label">会议标题</label>
  27.             <div class="layui-input-block">
  28.                <input type="text" name="title" autocomplete="off" class="layui-input" readonly="readonly">
  29.             </div>
  30.         </div>
  31.         <div class="layui-form-item layui-form-text">
  32. 		    <label class="layui-form-label">会议内容</label>
  33. 		    <div class="layui-input-block">
  34. 		      <textarea placeholder="请输入内容" name="content" class="layui-textarea" readonly="readonly"></textarea>
  35. 		    </div>
  36. 		</div>
  37. 		<!-- <div class="layui-form-item layui-form-text"> -->
  38. 		    <!-- <label class="layui-form-label">会议内容</label> -->
  39. 		    <!-- <div class="layui-input-block"> -->
  40. 		    	<div class="canvasBox">
  41. 					<div class="contro">
  42. 						<ul class="drawType">				
  43. 							<li data-name="pen" data-nameNum="0">
  44. 								<span class="icon iconfont icon-qianbi"></span>
  45. 								<span class="iconAlert">铅笔</span>
  46. 							</li>		
  47. 							<!-- <li class="downLoad">					
  48. 								<span class="icon iconfont icon-baocun"></span>
  49. 								<span class="iconAlert">保存</span>
  50. 								<img src="" alt="" class="downImg">
  51. 							</li>						
  52. 							<li data-name="eraser"  >
  53. 								<span class="icon iconfont icon-xiangpi"></span>
  54. 								<span class="iconAlert">橡皮</span>
  55. 							</li>	 -->
  56. 							<li class="remote">
  57. 								<span class="icon iconfont icon-delete"></span>
  58. 								<span class="iconAlert">清空</span>
  59. 							</li>				
  60. 						</ul>			
  61. 					</div>	
  62. 					<div class="canvasDraw">
  63. 						<div class="drawFont" data-type="hide">
  64. 							<span class="intoFont"></span>
  65. 							<input type="text" class="intoFontInput">
  66. 						</div>
  67. 						<canvas id="canvas" width="550" height="150"></canvas>			
  68. 					</div>		
  69. 				</div>
  70. 		  <!--   </div>
  71. 		</div> -->
  72.     </form>
  73. </div>
  74. </body>
  75. </html>

2、myAudit.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@include file="/common/header.jsp"%>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/myAudit.js"></script>
  9. </head>
  10. <style>
  11. body{
  12. 	margin:15px;
  13. }
  14.  .layui-table-cell {height: inherit;}
  15.  .layui-layer-page .layui-layer-content {  overflow: visible !important;}
  16. </style>
  17. <body>
  18. <!-- 搜索栏 -->
  19. <div class="layui-form-item" style="margin:15px 0px;">
  20.   <div class="layui-inline">
  21.     <label class="layui-form-label">会议标题</label>
  22.     <div class="layui-input-inline">
  23.       <input type="hidden" id="auditor" value="${user.id }"/>
  24.       <input type="text" id="title" autocomplete="off" class="layui-input">
  25.     </div>
  26.   </div>
  27.   <div class="layui-inline">
  28.     <button id="btn_search" type="button" class="layui-btn"><i class="layui-icon layui-icon-search"></i> 查询</button>
  29.   </div>
  30. </div>
  31. <!-- 数据表格 -->
  32. <table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px"></table>
  33.  
  34. <script type="text/html" id="tbar">
  35.   <a class="layui-btn layui-btn-xs" lay-event="edit">审批</a>
  36. </script>
  37. </body>
  38. </html>

3、myAudit.js

  1. let layer,table,$,form;
  2. var row;
  3. layui.use(['layer','table','jquery','form'],function(){
  4. 	layer=layui.layer,
  5. 	table=layui.table,
  6. 	form=layui.form,
  7. 	$=layui.jquery;
  8. 	
  9. 	initTable();
  10. 	
  11. 	//查询事件
  12. 	$('#btn_search').click(function(){
  13. 		query();
  14. 	});
  15. 	
  16. });
  17.  
  18. //初始化数据表格（我的审批）
  19. function initTable(){
  20. 	table.render({          //执行渲染
  21.         elem: '#tb',   //指定原始表格元素选择器（推荐id选择器）
  22.         height: 400,         //自定义高度
  23.         loading: false,      //是否显示加载条（默认 true）
  24.         cols: [[             //设置表头
  25.             {field: 'id', title: '会议编号', width: 90},
  26.             {field: 'title', title: '会议标题', width: 120},
  27.             {field: 'location', title: '会议地点', width: 140},
  28.             {field: 'startTime', title: '开始时间', width: 120},
  29.             {field: 'endTime', title: '结束时间', width: 120},
  30.             {field: 'meetingstate', title: '会议状态', width: 120},
  31.             {field: 'seatPic', title: '会议排座', width: 120,
  32.             	templet: function(d){
  33.                     if(d.seatPic==null || d.seatPic=="")
  34.                     	return "尚未排座";
  35.                     else
  36.                     	return "<img width='120px' src='"+d.seatPic+"'/>";
  37.                 }
  38.             },
  39.             {field: '', title: '操作', width: 200,toolbar:'#tbar'},
  40.         ]]
  41.    });
  42. }
  43.  
  44. //点击查询
  45. function query(){
  46. 	table.reload('tb', {
  47.         url: $("#ctx").val()+'/info.action',     //请求地址
  48.         method: 'POST',                    //请求方式，GET或者POST
  49.         loading: true,                     //是否显示加载条（默认 true）
  50.         page: true,                        //是否分页
  51.         where: {                           //设定异步数据接口的额外参数，任意设
  52.         	'methodName':'myAudit',
  53.         	'auditor':$('#auditor').val(),
  54.         	'title':$('#title').val(),
  55.         },  
  56.         request: {                         //自定义分页请求参数名
  57.             pageName: 'page', //页码的参数名称，默认：page
  58.             limitName: 'rows' //每页数据量的参数名，默认：limit
  59.         },
  60.         done: function (res, curr, count) {
  61.         	console.log(res);
  62.         }
  63.    });
  64. 	
  65. 	//工具条事件
  66. 	table.on('tool(tb)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  67. 	  row = obj.data; //获得当前行数据
  68. 	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  69. 	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
  70. 	  console.log(row);
  71. 	  if(layEvent === 'edit'){ //审批
  72. 		  openLayer(row.id);
  73. 	  } else {
  74. 		  
  75. 	  }
  76. 	});
  77. }
  78.  
  79. // 打开审批页面
  80. function openLayer(id){
  81.     layer.open({
  82.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
  83.         title: '审批',                   //对话框标题
  84.         area: ['600px', '500px'],   //宽高
  85.         skin: 'layui-layer-rim',    //样式类名
  86.         content: $("#ctx").val()+'/jsp/meeting/addMeetingAudit.jsp',                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
  87.         btn:['审批通过','审批驳回'],
  88.         yes:function(index,layero){
  89.         	//layer.msg('保存');
  90.         	//调用子页面中提供的getData方法，快速获取子页面的form表单数据
  91.             let data= $(layero).find("iframe")[0].contentWindow.save();
  92.             data['meetingId']=id;
  93.             data['auditor']=$('#auditor').val();
  94.             addMeetingAudit(data);
  95.         },
  96.         btn2:function(){
  97.         	let data={};
  98.         	data['sign']=null;
  99.         	data['meetingId']=id;
  100.             data['auditor']=$('#auditor').val();
  101.             addMeetingAudit(data);
  102.             return false;
  103.         }
  104.     });
  105. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/155802
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号