• 会议审批 查询&会议签字

    目录

    一、前端

    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>
    11. <%--  --%>
    12. <%--   --%>
    13. 发布会议
    18.     
    19.   		
    20.   		
    21.         
    22.             
    23.             
    24.                
    25.
  • 铅笔
  • 清空

    • 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>
    14.   
    15.     
    16.     
    17.       
    18.       
    19.     
    20.   
    21.   
    22.     
    23.   
    27.

    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 "";
    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. }
    106.  
    107. // 添加审批意见
    108. function addMeetingAudit(params){
    109. 	params['methodName']="add";
    110. 	console.log(params);
    111. 	$.post($("#ctx").val()+'/audit.action',params,function(rs){
    112. 		if(rs.success){
    113. 			layer.closeAll();
    114. 			query();
    115. 		}else{
    116. 			layer.msg(rs.msg,{icon:5},function(){});
    117. 		}
    118. 	},'json');
    119. }
    120.  
    121.

    4、addMeetingAudit.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. 	if(parent.row!=null){
    10. 		form.val('audit',$.extend({}, parent.row||{}));
    11. 	}
    12. 	
    13. 	
    14. 	init();
    15. 	function init() {
    16. 		$('.strokeColorBox').css('border',"4px solid "+$('.strokeColor').val()).find('.icon').css('color',$('.strokeColor').val());
    17. 		$('.weightBox .icon').html($('.weight').val()+'px');
    18. 		$('.drawFont').css({
    19. 			'height': $('.font_box_size').val()
    20. 		})
    21. 	}
    22. 	/**
    23. 	 * 右键按下不显示浏览器自带框
    24. 	 */
    25. 	$('#canvas').get(0).oncontextmenu = function (e) { 
    26. 		showMyselfBox(e);
    27. 		return false;
    28. 	}; 
    29.  
    30. 	/**
    31. 	 * 显示自定义框
    32. 	 */
    33. 	function showMyselfBox (e) {
    34. 		var left = e.offsetX;
    35. 		var top = e.offsetY;
    36. 		$('.myselfBox').css({
    37. 			left: left,
    38. 			top: top
    39. 		}).show();
    40. 	}
    41.  
    42. 	/**
    43. 	 * 鼠标滑过工具台
    44. 	 */
    45. 	
    46. 	$('.contro li').on('mouseover', function () {
    47. 		$(this).on('mouseout', function () {
    48. 			$('.contro li').find('.iconAlert').hide()
    49. 		});
    50. 		$(this).find('.iconAlert').show();
    51. 	});
    52.  
    53. 	/**
    54. 	 * 点击工具台
    55. 	*/
    56.  
    57. 	$('.drawType li').on('click touchstart', function (e) {
    58. 		if (e.type == "touchstart") {
    59. 			e.preventDefault();
    60. 		}
    61. 		$(this).addClass('drawTypeChoose').siblings().removeClass('drawTypeChoose');
    62. 		initData.drawType = $(this).attr('data-name');
    63. 		initData.drayTypeNum= $(this).attr('data-nameNum')
    64. 	})
    65.  
    66.  
    67. 	/**
    68. 	 * 改变线条颜色
    69. 	*/
    70. 	$('.strokeColor').on('change', function (e) {
    71. 		initData.color = $(this).val();
    72. 		$('.strokeColorBox').css('border','4px solid '+initData.color).find('.icon').css('color',initData.color);
    73. 	})
    74.  
    75. 	/**
    76. 	 * 改变背景色
    77. 	*/
    78. 	$('.backgroundColor').on('change', function (e) {
    79. 		initData.background = $(this).val();
    80. 		$('.backgroundColor').css('border','4px solid '+initData.background).find('.icon').css('color',initData.background);
    81. 	})
    82. 	$('.fillDraw').on('click touchstart',function (e) {
    83. 		if (e.type == "touchstart") {
    84. 			e.preventDefault()
    85. 		}
    86. 		if ($(this).attr('data-choose') == 'false') {
    87. 			$(this).attr('data-choose','true').addClass('fillBg');
    88. 			$('.backgroundColorBox').css({'border':'4px solid '+initData.background,'background':'#fff'}).find('.icon').css('color',initData.background);
    89. 			$('.backgroundColor').show();
    90. 			initData.isFill = true;
    91. 		} else {
    92. 			initData.isFill = false;
    93. 			$(this).attr('data-choose','false').removeClass('fillBg');
    94. 			$('.backgroundColor').hide();
    95. 			$('.backgroundColorBox').css({'border':'4px solid #07133d','background':'#07133d'}).find('.icon').css('color','#666');
    96. 		}
    97. 	})
    98.  
    99. 	/**
    100. 	 * 改变线条粗细
    101. 	*/
    102.  
    103. 	$('.weight').on('change', function () {
    104. 		initData.size = $(this).val();
    105. 		$('.weightBox .icon').html($('.weight').val()+'px');
    106. 	})
    107.  
    108.  
    109. 	/**
    110. 	 * 绘制还是移动
    111. 	*/
    112. 	$('.drawOrMove').on('click touchstart',function (e) {
    113. 		if (e.type == "touchstart") {
    114. 			e.preventDefault()
    115. 		}
    116. 		$(this).addClass('drawOrmoveChoose').siblings('.drawOrMove').removeClass('drawOrmoveChoose');
    117. 		if ($(this).attr('data-name') == 'move') {
    118. 			// if (initData.drawType == 'line' || initData.drawType == 'pen' || initData.drawType == 'line' || initData.drawType == 'signet' || initData.drawType == 'eraser') {
    119. 			// 	alert('')
    120. 			// }
    121. 			$('.maskLi').show();
    122. 			initData.drawOrMove = $(this).attr('data-name');
    123. 			$('#canvas').css('cursor','move');
    124. 		} else {
    125. 			initData.drawOrMove = $(this).attr('data-name');
    126. 			$('.maskLi').hide();
    127. 			$('#canvas').css('cursor','crosshair');
    128. 		}
    129. 	})
    130.  
    131. 	/**
    132. 	 * 绘制文字
    133. 	*/
    134.  
    135. 	$('.intoFontInput').on('input', function () {
    136. 		$('.intoFont').html($(this).val());
    137. 		initData.context = $(this).val();
    138. 	})
    139. 	$('.font_box_size').on('change',function () {
    140. 		initData.fontSize = $(this).val();
    141. 	})
    142.  
    143. 	/**
    144. 	 * 清除画布
    145. 	*/
    146.  
    147. 	$('.remote').on('mousedown touchstart',function (e) {
    148. 		if (e.type == "touchstart") {
    149. 			e.preventDefault()
    150. 		}
    151. 		initData.context2d.clearRect(0,0,initData.canvasWidth,initData.canvasHeight);
    152. 		initData.drawHistoryArrData = [];
    153. 		initData.drawHistoryArrData.length = 0;
    154. 	})
    155.  
    156. 	/**
    157. 	 * 保存图片
    158. 	*/
    159. 	$('.downLoad').on('mousedown touchstart',function (a) {
    160. 		//debugger;
    161. 		save();
    162. 		
    163. 	})
    164. 	
    165. 	
    166. 	
    167.  
    168. 	/**
    169. 	 * 鼠标在canvas按下
    170. 	*/
    171. 	$('#canvas').on('mousedown touchstart',function (e) {
    172. 		if (e.type == "touchstart") {
    173. 			e.preventDefault()
    174. 		}
    175. 		if (e.button == '0' || e.type == "touchstart") { // 判断是左键按下
    176. 			$('.myselfBox').hide();
    177. 			initData.mouseDown(e);
    178. 			$(this).on('mousemove touchmove', function (e) {
    179. 				if (e.type == "touchmove") {
    180. 					e.preventDefault()
    181. 				}
    182. 				initData.mouseMove(e);
    183. 			})
    184. 		}
    185. 	})
    186.  
    187.  
    188. 	/**
    189. 	 * 鼠标抬起
    190. 	*/
    191. 	$('html').on('mouseup touchend',function(){
    192. 	    initData.mouseUp();
    193. 	})
    194.  
    195. 	var initData= {
    196. 		drawHistoryArrData: [], // 存放所有绘制图形的数据
    197. 		context2d: $('#canvas').get(0).getContext('2d'), // canvas绘图2d环境
    198. 		canvasWidth: $('#canvas').width(),
    199. 		canvasHeight: $('#canvas').height(),
    200. 		relPosX: 0, // 鼠标在绘制图形中按下相对该图形左面的距离
    201. 		relPosY: 0, // 鼠标在绘制图形中按下相对该图形上面的距离
    202. 		relPosToX: 0, // 鼠标在绘制图形中按下相对该图形左面的距离
    203. 		relPosToY: 0, 
    204. 		initLeft: 0,
    205. 		initTop: 0,
    206. 		chooseIndex: 0, // 选中图形在drawHistoryArrData数据中的index
    207. 		drawOrMove: 'draw', // 当前模式是拖拽还是绘制
    208. 		isMove: false, // 是否可以拖拽
    209. 		drawType: 'pen', // 绘制图形的类型
    210. 		drawTypeNum: '1', // 用于区分同一图形不同形状
    211. 		size: 2, // 绘制的粗细
    212. 		fontSize: $('.font_box_size').val(),
    213. 		context:'',
    214. 		color: $('.strokeColor').val(), // 绘制颜色
    215. 		isFill: false, // 是否填充
    216. 		background: $('.backgroundColor').val(),
    217. 		msgArr:[], // 画笔信息
    218. 		/**
    219. 		 * 矩形绘制轨迹
    220. 		*/
    221. 		drawTypeArr: function (arr,j) {
    222. 			var drawTypeFn = { // 绘制方法
    223. 				rect: function () { // 矩形
    224. 					initData.context2d.beginPath();
    225. 					initData.context2d.lineWidth = arr[j].size;
    226. 					initData.context2d.strokeStyle = arr[j].color;
    227. 					initData.context2d.rect(arr[j].x, arr[j].y, arr[j].w,arr[j].h);
    228. 					if (arr[j].fill) {
    229. 						initData.context2d.fillStyle = arr[j].fill;
    230. 						initData.context2d.fill();
    231. 					}
    232. 					initData.context2d.stroke();
    233. 				},
    234. 				line: function () { // 线
    235. 					initData.context2d.beginPath();
    236. 					initData.context2d.moveTo (arr[j].x,arr[j].y);       //设置起点状态
    237. 					initData.context2d.lineTo (arr[j].toX,arr[j].toY);       //设置末端状态
    238. 					initData.context2d.lineWidth = arr[j].size;          //设置线宽状态
    239. 					initData.context2d.strokeStyle = arr[j].color;  //设置线的颜色状态
    240. 					initData.context2d.stroke(); 
    241. 				},
    242. 				circle: function () { // 圆
    243. 					initData.context2d.beginPath();
    244. 					initData.context2d.lineWidth = arr[j].size;          //设置线宽状态
    245. 					initData.context2d.strokeStyle = arr[j].color;
    246. 					initData.context2d.arc(arr[j].x,arr[j].y,arr[j].r,0,2*Math.PI);
    247. 					if (arr[j].fill) {
    248. 						initData.context2d.fillStyle = arr[j].fill;
    249. 						initData.context2d.fill();
    250. 					}
    251. 					initData.context2d.stroke()
    252. 				},
    253. 				delta: function () { // 三角
    254. 					var w = arr[j].toX-arr[j].x;
    255. 					var h = arr[j].toY-arr[j].y;
    256. 					var harfDis = Math.tan(30/2)*h ;
    257. 					if (arr[j].toX-arr[j].x>0) {
    258. 						harfDis = harfDis
    259. 					} else {
    260. 						harfDis = -harfDis
    261. 					}
    262. 					initData.context2d.beginPath();
    263. 					initData.context2d.moveTo (arr[j].x,arr[j].y);       //设置起点状态
    264. 					initData.context2d.lineTo (arr[j].toX,arr[j].toY);
    265. 					initData.context2d.lineTo (arr[j].toX + 2*harfDis,arr[j].toY);
    266. 					initData.context2d.lineTo (arr[j].x,arr[j].y);       //设置末端状态
    267. 					initData.context2d.lineWidth = arr[j].size;          //设置线宽状态
    268. 					initData.context2d.strokeStyle = arr[j].color;  //设置线的颜色状态
    269. 					if (arr[j].fill) {
    270. 						initData.context2d.fillStyle = arr[j].fill;
    271. 						initData.context2d.fill();
    272. 					}
    273. 					initData.context2d.stroke(); 
    274. 				},
    275. 				ellipse: function () {
    276. 					initData.context2d.beginPath();
    277. 					initData.context2d.lineWidth = arr[j].size;          //设置线宽状态
    278. 					initData.context2d.strokeStyle = arr[j].color;
    279. 					initData.context2d.ellipse(arr[j].x,arr[j].y,Math.abs(arr[j].toX - arr[j].x),Math.abs(arr[j].toY -arr[j].y),0,0,Math.PI*2); 
    280. 					if (arr[j].fill) {
    281. 						initData.context2d.fillStyle = arr[j].fill;
    282. 						initData.context2d.fill();
    283. 					}
    284. 		            initData.context2d.stroke();
    285. 				},
    286. 				polygon: function () {
    287. 					var y1 = (arr[j].toY-arr[j].y)/2;
    288. 					var tan = Math.tan((90-(arr[j].reg/2))*(2*Math.PI/360));
    289. 					var x1 = y1*tan;
    290. 					initData.context2d.beginPath();
    291. 					initData.context2d.moveTo (arr[j].x,arr[j].y);       //设置起点状态
    292.  
    293. 					initData.context2d.lineTo (arr[j].toX,arr[j].y);
    294.  
    295. 					initData.context2d.lineTo (arr[j].toX+x1,arr[j].y+y1);
    296.  
    297. 					initData.context2d.lineTo (arr[j].toX,arr[j].toY);       //设置末端状态
    298.  
    299. 					initData.context2d.lineTo (arr[j].x,arr[j].toY); 
    300.  
    301. 					initData.context2d.lineTo (arr[j].x-x1,arr[j].y+y1); 
    302.  
    303. 					initData.context2d.lineTo (arr[j].x,arr[j].y); 
    304. 					initData.context2d.lineWidth = arr[j].size;          //设置线宽状态
    305. 					initData.context2d.strokeStyle = arr[j].color;  //设置线的颜色状态
    306. 					if (arr[j].fill) {
    307. 						initData.context2d.fillStyle = arr[j].fill;
    308. 						initData.context2d.fill();
    309. 					}
    310. 					initData.context2d.stroke(); 
    311. 				},
    312. 				font: function () {
    313. 					// initData.context2d.beginPath();
    314. 					initData.context2d.font = arr[j].fontSize+'px  Verdana';
    315. 					initData.context2d.textAlign = 'center';
    316. 					initData.context2d.textBaseline = 'bottom';
    317. 					initData.context2d.fillStyle = arr[j].color;
    318. 					// if (arr[j].fill) {
    319. 					initData.context2d.fillText(arr[j].context, arr[j].x, arr[j].y); 
    320. 					// }
    321. 					// initData.context2d.strokeText(arr[j].context, arr[j].x, arr[j].y);
    322. 					// initData.context2d.lineWidth = 1;
    323. 					// initData.context2d.strokeStyle = 'transparent';
    324. 					// initData.context2d.rect(arr[j].x, arr[j].y, arr[j].w,arr[j].h);
    325. 					// initData.context2d.stroke();
    326. 					$('.drawFont').hide();
    327. 					// initData.context = ""
    328. 					$('.intoFont').html('');
    329. 					$('.intoFontInput').val('');
    330. 					$('.drawFont').attr('data-type','hide');
    331. 				},
    332. 				signet: function () {
    333. 					var img = new Image();
    334. 					img.src = 'data:image/png;base64,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';
    335. 					img.onload = function(){
    336. 						initData.context2d.drawImage(img, arr[j].x-50, arr[j].y-50,100,100);
    337. 					}
    338. 				},
    339. 				pen: function () {
    340. 					var lineWidth = arr[j].size;
    341. 					var radius=lineWidth/2;
    342. 					var lineColor =arr[j].color;
    343. 					initData.context2d.beginPath();
    344. 					$.each(arr[j].msgArr,function (index,val) {
    345. 		            	initData.context2d.lineWidth= lineWidth; 
    346. 		                initData.context2d.lineTo(val.x, val.y);  
    347. 		                initData.context2d.strokeStyle = lineColor;
    348. 		                initData.context2d.stroke();  
    349. 		                initData.context2d.beginPath();  
    350. 		                initData.context2d.arc(val.x, val.y, radius, 0, 360, false);
    351. 		                initData.context2d.fillStyle = lineColor;
    352. 		                initData.context2d.fill();  
    353. 		                initData.context2d.beginPath();  
    354. 		                initData.context2d.moveTo(val.x, val.y);  
    355. 		                initData.context2d.stroke(); 
    356. 					})
    357. 				},
    358. 				eraser: function () {
    359. 					$.each(arr[j].msgArr,function (index,val) {
    360. 		            	initData.context2d.clearRect(val.x,val.y,arr[j].size,arr[j].size);
    361. 					})
    362. 				}
    363. 			};
    364. 			switch (arr[j].drawType) {
    365. 				case 'rect':drawTypeFn.rect(); break;
    366. 				case 'line':drawTypeFn.line(); break;
    367. 				case 'circle':drawTypeFn.circle(); break;
    368. 				case 'delta':drawTypeFn.delta(); break;
    369. 				case 'ellipse':drawTypeFn.ellipse(); break;
    370. 				case 'polygon': drawTypeFn.polygon(); break;
    371. 				case 'font': drawTypeFn.font(); break;
    372. 				case 'signet': drawTypeFn.signet(); break;
    373. 				case 'pen': drawTypeFn.pen(); break;
    374. 				case 'eraser': drawTypeFn.eraser(); break;
    375. 			}
    376.  
    377. 		},
    378.  
    379. 		/**
    380. 		 * 统一绘制方法
    381. 		*/
    382. 		drawArr: function (arr) {
    383. 			for (var j in arr) {
    384. 				this.drawTypeArr(arr,j)
    385. 			}
    386. 		},
    387.  
    388. 	
    389. 		/**
    390. 		 * 鼠标按下执行
    391. 		*/
    392. 		mouseDown: function (e) { // 鼠标按下
    393. 			initData.initLeft = e.offsetX?e.offsetX:e.originalEvent.targetTouches[0].pageX - $('#canvas').offset().left;//获取鼠标起始位置
    394. 			initData.initTop = e.offsetY?e.offsetY:e.originalEvent.targetTouches[0].pageY - $('#canvas').offset().top;	
    395. 			initData.msgArr = [];
    396. 			if (initData.drawHistoryArrData.length>0) {
    397. 				function getChooseIndex() {
    398. 					for(var i in initData.drawHistoryArrData) {
    399. 		    			initData.drawArr([initData.drawHistoryArrData[i]]);
    400. 		    			if (initData.drawOrMove == 'move') {
    401. 		    				if(initData.context2d.isPointInPath(initData.initLeft,initData.initTop)) {
    402. 				    			initData.drawArr(initData.drawHistoryArrData);
    403. 				    			initData.relPosX = initData.initLeft - initData.drawHistoryArrData[i].x;
    404. 				    			initData.relPosY = initData.initTop - initData.drawHistoryArrData[i].y;
    405. 				    			initData.relPosToX = initData.initLeft - initData.drawHistoryArrData[i].toX;
    406. 				    			initData.relPosToY = initData.initTop - initData.drawHistoryArrData[i].toY;
    407. 				    			initData.isMove = true;
    408. 				    			return i; 
    409. 				    		} 
    410. 		    			}
    411. 			    	}
    412. 			    	if (initData.drawOrMove == 'move') {
    413. 			    		return -1;
    414. 			    	} else {
    415. 			    		return initData.drawHistoryArrData.length;
    416. 			    	}
    417. 			    	
    418. 				}
    419. 				initData.chooseIndex = getChooseIndex();
    420. 			} else {
    421. 				if (initData.drawOrMove == 'move') {
    422. 			    	initData.chooseIndex =  -1;
    423. 			    } 
    424. 			}
    425. 			if ($('.drawFont').attr('data-type') == 'hide') {
    426. 				if (this.drawType == 'font') {
    427. 					var x = initData.initLeft;
    428. 					var y = initData.initTop;
    429. 					$('.drawFont').attr('data-type','show');
    430. 					$('.drawFont').css({
    431. 						'left':initData.initLeft+"px",
    432. 						'top':initData.initTop+"px"
    433. 					}).show();
    434. 					$('.intoFontInput').on('blur', function () {
    435. 						initData.context = $('.intoFontInput').val();
    436. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    437. 							drawType: initData.drawType,
    438. 							drawTypeNum: initData.drawTypeNum,
    439. 							fill: initData.isFill?initData.background:'',
    440. 							size: initData.size,
    441. 							fontSize: initData.fontSize,
    442. 							context:initData.context,
    443. 							color: initData.color,
    444. 							x: x,
    445. 							y: y,
    446. 							w: $('.intoFontInput').width(),
    447. 							h: $('.intoFontInput').height()
    448. 						};
    449. 						initData.drawArr(initData.drawHistoryArrData);
    450. 					})
    451. 				}
    452. 			}
    453. 			if (this.drawType == 'signet') {
    454. 				initData.drawHistoryArrData[initData.chooseIndex] = {
    455. 					drawType: initData.drawType,
    456. 					drawTypeNum: initData.drawTypeNum,
    457. 					fill: initData.isFill?initData.background:'',
    458. 					size: initData.size,
    459. 					color: initData.color,
    460. 					x: initData.initLeft,
    461. 					y: initData.initTop
    462. 				};
    463. 				initData.drawArr(initData.drawHistoryArrData);
    464. 			}
    465. 		}, 
    466.  
    467. 		/**
    468. 		 * 鼠标移动执行
    469. 		*/
    470. 		mouseMove: function (e) { // 鼠标移动
    471. 			initData.context2d.clearRect(0,0,initData.canvasWidth,initData.canvasHeight);
    472. 			var moveX = e.offsetX?e.offsetX:e.originalEvent.targetTouches[0].pageX - $('#canvas').offset().left;
    473. 			var moveY = e.offsetY?e.offsetY:e.originalEvent.targetTouches[0].pageY - $('#canvas').offset().top;
    474. 			var moveWidth = moveX - initData.initLeft;
    475. 			var moveHeight = moveY - initData.initTop;
    476. 			if (initData.isMove) {
    477. 				switch (initData.drawHistoryArrData[initData.chooseIndex].drawType) {
    478. 					case 'rect':
    479. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    480. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    481. 							drawTypeNum: initData.drawHistoryArrData[initData.chooseIndex].drawTypeNum,
    482. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    483. 							size: initData.drawHistoryArrData[initData.chooseIndex].size,
    484. 							color: initData.drawHistoryArrData[initData.chooseIndex].color,
    485. 							x: moveWidth + initData.initLeft  - initData.relPosX,
    486. 							y: moveHeight + initData.initTop - initData.relPosY,
    487. 							w: initData.drawHistoryArrData[initData.chooseIndex].w,
    488. 							h: initData.drawHistoryArrData[initData.chooseIndex].h
    489. 						}; break;
    490. 					case 'line':
    491. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    492. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    493. 							drawTypeNum: initData.drawHistoryArrData[initData.chooseIndex].drawTypeNum,
    494. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    495. 							size: initData.drawHistoryArrData[initData.chooseIndex].size,
    496. 							color: initData.drawHistoryArrData[initData.chooseIndex].color,
    497. 							x: initData.drawHistoryArrData[initData.chooseIndex].x+moveX,
    498. 							y: initData.drawHistoryArrData[initData.chooseIndex].y +moveY,
    499. 							toX: moveX,
    500. 							toY: moveY
    501. 						}; break;
    502. 					case 'circle':
    503. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    504. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    505. 							drawTypeNum: initData.drawTypeNum,
    506. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    507. 							size: initData.size,
    508. 							color: initData.color,
    509. 							x: moveWidth + initData.initLeft  - initData.relPosX,
    510. 							y: moveHeight + initData.initTop - initData.relPosY,
    511. 							r: initData.drawHistoryArrData[initData.chooseIndex].r,
    512. 						}; break;
    513. 					case 'delta':
    514. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    515. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    516. 							drawTypeNum: initData.drawTypeNum,
    517. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    518. 							size: initData.size,
    519. 							color: initData.color,
    520. 							x: moveWidth + initData.initLeft  - initData.relPosX,
    521. 							y: moveHeight + initData.initTop - initData.relPosY,
    522. 							toX: moveWidth + initData.initLeft  - initData.relPosToX,
    523. 							toY: moveHeight + initData.initTop - initData.relPosToY,
    524. 						}; break;
    525. 					case 'ellipse':
    526. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    527. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    528. 							drawTypeNum: initData.drawTypeNum,
    529. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    530. 							size: initData.size,
    531. 							color: initData.color,
    532. 							x: moveWidth + initData.initLeft  - initData.relPosX,
    533. 							y: moveHeight + initData.initTop - initData.relPosY,
    534. 							toX: moveWidth + initData.initLeft  - initData.relPosToX,
    535. 							toY: moveHeight + initData.initTop - initData.relPosToY,
    536. 						}; break;
    537. 					case 'polygon':// 六边形
    538. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    539. 							drawType: initData.drawHistoryArrData[initData.chooseIndex].drawType,
    540. 							drawTypeNum: initData.drawTypeNum,
    541. 							fill: initData.drawHistoryArrData[initData.chooseIndex].fill,
    542. 							size: initData.size,
    543. 							color: initData.color,
    544. 							x: moveWidth + initData.initLeft  - initData.relPosX,
    545. 							y: moveHeight + initData.initTop - initData.relPosY,
    546. 							reg: initData.drawHistoryArrData[initData.chooseIndex].reg,
    547. 							toX: moveWidth + initData.initLeft  - initData.relPosToX,
    548. 							toY: moveHeight + initData.initTop - initData.relPosToY
    549. 						}; break;
    550. 				}
    551. 			} else {
    552. 				if (initData.chooseIndex != -1) {
    553.  
    554. 					switch (this.drawType) {
    555. 					case 'rect': // 矩形
    556. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    557. 							drawType: initData.drawType,
    558. 							drawTypeNum: initData.drawTypeNum,
    559. 							fill: initData.isFill?initData.background:'',
    560. 							size: initData.size,
    561. 							color: initData.color,
    562. 							x: initData.initLeft,
    563. 							y: initData.initTop,
    564. 							w: moveWidth,
    565. 							h: moveHeight
    566. 						}; break;
    567. 					case 'line': // 线
    568. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    569. 							drawType: initData.drawType,
    570. 							drawTypeNum: initData.drawTypeNum,
    571. 							fill: initData.isFill?initData.background:'',
    572. 							size: initData.size,
    573. 							color: initData.color,
    574. 							x: initData.initLeft,
    575. 							y: initData.initTop,
    576. 							toX: moveX,
    577. 							toY: moveY
    578. 						}; break;
    579. 					case 'circle': //圆
    580. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    581. 							drawType: initData.drawType,
    582. 							drawTypeNum: initData.drawTypeNum,
    583. 							fill: initData.isFill?initData.background:'',
    584. 							size: initData.size,
    585. 							color: initData.color,
    586. 							x: initData.initLeft,
    587. 							y: initData.initTop,
    588. 							r: Math.sqrt(moveWidth*moveWidth+moveHeight*moveHeight)
    589. 						}; break;
    590. 					case 'delta': // 三角
    591. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    592. 							drawType: initData.drawType,
    593. 							drawTypeNum: initData.drawTypeNum,
    594. 							fill: initData.isFill?initData.background:'',
    595. 							size: initData.size,
    596. 							color: initData.color,
    597. 							x: initData.initLeft,
    598. 							y: initData.initTop,
    599. 							toX: moveX,
    600. 							toY: moveY,
    601. 						}; break;
    602. 					case 'ellipse': // 椭圆
    603. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    604. 							drawType: initData.drawType,
    605. 							drawTypeNum: initData.drawTypeNum,
    606. 							fill: initData.isFill?initData.background:'',
    607. 							size: initData.size,
    608. 							color: initData.color,
    609. 							x: initData.initLeft,
    610. 							y: initData.initTop,
    611. 							toX: moveX,
    612. 							toY: moveY,
    613. 						}; break;
    614. 					case 'polygon':// 六边形
    615. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    616. 							drawType: initData.drawType,
    617. 							drawTypeNum: initData.drawTypeNum,
    618. 							fill: initData.isFill?initData.background:'',
    619. 							size: initData.size,
    620. 							color: initData.color,
    621. 							x: initData.initLeft,
    622. 							y: initData.initTop,
    623. 							reg: $('.polygon_1_deg').val(),
    624. 							toX: moveX,
    625. 							toY: moveY,
    626. 						}; break;
    627. 					case 'pen':
    628. 						initData.msgArr.push({
    629. 							x: moveX,
    630. 							y: moveY
    631. 						})
    632. 						var msg = initData.msgArr.concat();
    633. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    634. 							drawType: initData.drawType,
    635. 							drawTypeNum: initData.drawTypeNum,
    636. 							fill: initData.isFill?initData.background:'',
    637. 							size: initData.size,
    638. 							color: initData.color,
    639. 							x: initData.initLeft,
    640. 							y: initData.initTop,
    641. 							toX: moveX,
    642. 							toY: moveY,
    643. 							msgArr:msg
    644. 						}; break;
    645. 					case 'eraser': 
    646. 						initData.msgArr.push({
    647. 							x: moveX,
    648. 							y: moveY
    649. 						})
    650. 						var msg = initData.msgArr.concat();
    651. 						initData.drawHistoryArrData[initData.chooseIndex] = {
    652. 							drawType: initData.drawType,
    653. 							drawTypeNum: initData.drawTypeNum,
    654. 							fill: initData.isFill?initData.background:'',
    655. 							size: initData.size,
    656. 							color: initData.color,
    657. 							x: initData.initLeft,
    658. 							y: initData.initTop,
    659. 							toX: moveX,
    660. 							toY: moveY,
    661. 							msgArr:msg
    662. 						}; break;
    663. 					// case 'signet': // 印章
    664. 					// 	initData.drawHistoryArrData[initData.chooseIndex] = {
    665. 					// 		drawType: initData.drawType,
    666. 					// 		drawTypeNum: initData.drawTypeNum,
    667. 					// 		fill: initData.isFill?initData.background:'',
    668. 					// 		size: initData.size,
    669. 					// 		color: initData.color,
    670. 					// 		x: initData.initLeft,
    671. 					// 		y: initData.initTop,
    672. 					// 		toX: moveX,
    673. 					// 		toY: moveY,
    674. 					// 	}; break;
    675. 					// case 'delta'
    676. 					// case 'circle'
    677. 					// case 'ellipse'
    678. 					// case 'line'
    679. 					// 
    680. 					// case 'signet'
    681. 					// case 'pen'
    682. 					// case 'brush'
    683. 					}
    684. 				}
    685. 			}
    686. 			initData.drawArr(initData.drawHistoryArrData);
    687. 		},
    688.  
    689. 		/**
    690. 		 * 鼠标抬起执行
    691. 		*/
    692. 		mouseUp: function () {
    693. 			initData.msgArr = [];
    694. 			initData.isMove = false;
    695. 			initData.relPosX = 0;
    696. 			initData.relPosY = 0;
    697. 			$('#canvas').off('mousemove');
    698. 		}
    699. 	};
    700.  
    701. });
    702.  
    703. function save(){
    704. 	var mycanvas = document.getElementById("canvas");  
    705.     var image    = mycanvas.toDataURL("image/png");  
    706. 	let params={
    707. 		'sign':image
    708. 	};
    709. 	return params;
    710. }

    5、导入插件

    二、后端

    1、MeetingAuditDao

    1. package com.zking.dao;
    2.  
    3. import com.zking.entity.MeetingAudit;
    4. import com.zking.util.BaseDao;
    5. import com.zking.util.StringUtils;
    6.  
    7. public class MeetingAuditDao extends BaseDao{
    8.  
    9. 	/*
    10. 	 * 1.将图片的字符串 转成 图片保存起来
    11. 	 * 2.将审批人的意见数据入库 t_oa_meeting_audit
    12. 	 * 3.修改会议状态 t_oa_meeting_info
    13. 	 */
    14. //	批处理
    15. //	public int add(MeetingAudit audit) {
    16. 		将审批人的意见数据入库  t_oa_meeting_audit
    17. //		String sql1="insert into t_oa_meeting_audit(meetingId,auditor,sign) values("+audit.getMeetingId()+","+audit.getAuditor()+",'"+audit.getSign()+"')";
    18. 		state有两种，审批通过即 待开，审批驳回即 驳回 状态
    19. 		修改会议状态 t_oa_meeting_info
    20. //		int state=StringUtils.isBlank(audit.getSign())?3:4;
    21. //		String sql2="update t_oa_meeting_info set state="+state+" where id="+audit.getId();
    22. 		同时执行多个sql语句，其目的在于事务的一致性，要么业务处理同时成功，要么同时失败
    23. //		return super.executeUpdateBatch(new String[] {sql1,sql2});
    24. //	}
    25. 	public void add(MeetingAudit audit) {
    26. 		//1.新增会议审批记录
    27. 		String sql="insert into t_oa_meeting_audit(meetingId,auditor,sign)"
    28. 				+ " values("+audit.getMeetingId()+","+audit.getAuditor()+",'"+audit.getSign()+"')";
    29. 		//2.根据会议ID更新会议的状态（3=驳回，4=待开）
    30. 		int state=StringUtils.isBlank(audit.getSign())?3:4;
    31. 		String sql1="update t_oa_meeting_info set state="+state+" where id="+audit.getMeetingId();
    32. 		//如何一次执行两条SQL，使用数据库事务？
    33. 		super.executeUpdateBatch(new String[] {sql,sql1});
    34. 	}
    35. }
    36.

     2、MeetingAudit

    1. package com.zking.entity;
    2.  
    3. import java.io.Serializable;
    4. import java.util.Date;
    5.  
    6. public class MeetingAudit implements Serializable {
    7. 	private Integer id;
    8. 	private Long meetingId;
    9. 	private String auditor;
    10. 	private String sign;
    11. 	private Date createdate;
    12. 	public Integer getId() {
    13. 		return id;
    14. 	}
    15. 	public void setId(Integer id) {
    16. 		this.id = id;
    17. 	}
    18. 	public Long getMeetingId() {
    19. 		return meetingId;
    20. 	}
    21. 	public void setMeetingId(Long meetingId) {
    22. 		this.meetingId = meetingId;
    23. 	}
    24. 	public String getAuditor() {
    25. 		return auditor;
    26. 	}
    27. 	public void setAuditor(String auditor) {
    28. 		this.auditor = auditor;
    29. 	}
    30. 	public String getSign() {
    31. 		return sign;
    32. 	}
    33. 	public void setSign(String sign) {
    34. 		this.sign = sign;
    35. 	}
    36. 	public Date getCreatedate() {
    37. 		return createdate;
    38. 	}
    39. 	public void setCreatedate(Date createdate) {
    40. 		this.createdate = createdate;
    41. 	}
    42. 	public MeetingAudit() {
    43. 		super();
    44. 		// TODO Auto-generated constructor stub
    45. 	}
    46. 	@Override
    47. 	public String toString() {
    48. 		return "MeetingAudit [id=" + id + ", meetingId=" + meetingId + ", auditor=" + auditor + ", sign=" + sign
    49. 				+ ", createdate=" + createdate + "]";
    50. 	}
    51. 	
    52. 	
    53. }
    54.

    3、MeetingAuditAction

    1. package com.zking.web;
    2.  
    3. import java.io.File;
    4. import java.util.UUID;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8.  
    9. import com.zking.dao.MeetingAuditDao;
    10. import com.zking.entity.MeetingAudit;
    11. import com.zking.framework.ActionSupport;
    12. import com.zking.framework.ModelDriver;
    13. import com.zking.util.Base64ImageUtils;
    14. import com.zking.util.CommonUtils;
    15. import com.zking.util.ImageUtils;
    16. import com.zking.util.PropertiesUtil;
    17. import com.zking.util.StringUtils;
    18.  
    19. public class MeetingAuditAction extends ActionSupport implements ModelDriver{
    20. 	private MeetingAudit audit=new MeetingAudit();
    21. 	private MeetingAuditDao auditDao=new MeetingAuditDao();
    22. 	
    23. //	public String add(HttpServletRequest req, HttpServletResponse resp) {
    24. //		try {
    25. 			保存会议签字的图片
    26. //			if(StringUtils.isNotBlank(audit.getSign())) {
    27. 				定义保存路径  dirPathSign=E:/temp/images/T280/sign/
    28. //				String path1=PropertiesUtil.getValue("dirPathSign");
    29. 				定义请求地址 serverPathSign=/upload/sign/
    30. //				String path2=PropertiesUtil.getValue("serverPathSign");
    31. 				定义会议签字剪裁前图片名称
    32. //				String file1=UUID.randomUUID().toString().replace("-", "")+".jpg";
    33. 				定义会议签字剪裁后图片名称
    34. //				String file2=UUID.randomUUID().toString().replace("-", "")+".jpg";
    35. 				拼接图片完成路径
    36. //				String wc=path1+file1;
    37. 				拼接裁剪图片路径
    38. //				String cj=path1+file2;
    39. 				上传签字图片并保存到指定位置
    40. //				Base64ImageUtils.GenerateImage(audit.getSign().replace("data:image/png;base64,", ""), wc);
    41. 				裁剪原图
    42. //				ImageUtils.shearImg(wc, cj);
    43. 				替换sign的图片路径
    44. //				audit.setSign(path2+file2);
    45. 				删除原图
    46. //				File file=new File(wc);
    47. //				if(file.exists())
    48. //					file.delete();
    49. 				新增会议审批记录
    50. //				auditDao.add(audit);
    51. //				CommonUtils.toJson(true, "会议审批成功", resp);
    52. //			}
    53. //		} catch (Exception e) {
    54. //			e.printStackTrace();
    55. //			CommonUtils.toJson(true, "会议审批失败", resp);
    56. //		}
    57. //		return null;
    58. //	}
    59. 	
    60. 	public String add(HttpServletRequest req,
    61. 			HttpServletResponse resp) throws Exception{
    62. 		try {
    63. 			//1.保存会议签字的图片
    64. 			if(StringUtils.isNotBlank(audit.getSign())) {
    65. 				//定义保存路径	dirPathSign=E:/temp/images/T280/sign/
    66. 				String sourceFilePath=PropertiesUtil.getValue("dirPathSign");
    67. 				//定义请求地址	serverPathSign=/test_layui/upload/sign/
    68. 				String requestFilePath = PropertiesUtil.getValue("serverPathSign");
    69. 				//定义会议签字图片名称(原图名称)
    70. 				String sourcefileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
    71. 				//定义会议签字图片名称(裁剪后的名称)
    72. 				String targetfileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
    73. 				//拼接图片完成路径（原图）
    74. 				String realPath=sourceFilePath+sourcefileName;
    75. 				//拼接裁剪图路径
    76. 				String targetPath=sourceFilePath+targetfileName;
    77. 				//上传签字图片并保存到指定位置
    78. 				Base64ImageUtils.GenerateImage(audit.getSign().replace("data:image/png;base64,", ""), realPath);
    79. 				//裁剪原图
    80. 				ImageUtils.shearImg(realPath, targetPath);
    81. 				//替换sign的图片路径
    82. 				audit.setSign(requestFilePath+targetfileName);
    83. 				//删除原图
    84. 				File file=new File(realPath);
    85. 				if(file.exists())
    86. 					file.delete();
    87. 			}
    88. 			//2.新增会议审批记录及更新会议状态
    89. 			auditDao.add(audit);
    90. 			CommonUtils.toJson(true, "审批成功！", resp);
    91. 		} catch (Exception e) {
    92. 			e.printStackTrace();
    93. 			CommonUtils.toJson(false, "审批失败！", resp);
    94. 		}
    95. 		return null;
    96. 	}
    97. 	@Override
    98. 	public MeetingAudit getModel() {
    99. 		return audit;
    100. 	}
    101.  
    102. }
    103.

    4、配置xml

    2. <config>
    3.  
    4. 	<action path="/user" type="com.zking.web.UserAction">
    5. 	action>
    6. 	
    7. 	<action path="/permission" type="com.zking.web.PermissionAction">
    8. 	action>
    9. 	
    10. 	<action path="/info" type="com.zking.web.MeetingInfoAction">
    11. 	action>
    12.  
    13. 	<action path="/audit" type="com.zking.web.MeetingAuditAction">
    14. 	action>
    15. config>

    三、运行效果

  • 相关阅读:
    IO多路复用 select/poll/epoll
    【C++】string介绍
    PSO-DBSCAN聚类
    LeetCode第100题—相同的树
    git基本使用
    闲人闲谈PS之二十九——关于精确统计工程合同产值问题
    8、Shell函数
    LeetCode算法导航
    ROS环境下使用WHEELTEC N100惯导模块
    【股票价格预测】基于改进莱维飞行和混沌映射的粒子群优化BP神经网络预测股票价格研究（Matlab代码实现）
  • 原文地址：https://blog.csdn.net/qq_44247968/article/details/126026041