• OA项目之我的审批（查询&会议签字）

    目录

    一、会议签字插件介绍

    1.功能细分 

    2.目标

    二、我的审批

     1.我的审批中的会议查询

    三、会议签字 

    难点就在这

    ​编辑

    1.实体类 

    2.配置

    3.dao层

    4.dao层里面调用批处理方法

     四、总结

    一、会议签字插件介绍

    思考特殊功能完成步骤---->签字

    1.功能细分 

    ①人员签字功能

            1）会有相似插件完成

            2）优化插件使其在项目中使用

            3）研究里面不乏源码，寻找接入点

            4）接入到项目中

    2.目标

    第一个功能，点击我的审批然后点击查询就把我将要审批的会议查询出来，然后这里就会有一个按钮我要审批，然后审批通过然后输入你的名字，然后在审批通过。难点就在签字

    上网去百度找，然后找到类似的如图所示：

    我们就要对这个插件进行优化，最终优化结果如图所示：
     有一个笔，保存图片功能，橡皮擦功能，删除功能

     

    把上面那串二进制传递到后台去 

    二、我的审批

     1.我的审批中的会议查询

    我的会议其实和我的审批界面差不多

     当我们点击我的审批缺乏界面，我们就去建一个，注意目录所放在的位置

     ---------      myAudit.jsp代码块： 

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. 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>
    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>
    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>

    还有我们的myAduit.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. }

     

     

      

     运行一下：我们登陆何明香的账户登陆因为我们之前送审过给它记得要清楚一下缓存如图所示：

    MeetingInfoAction.java代码块：

    1. package com.zking.web;
    2.  
    3. import java.util.Date;
    4. import java.util.List;
    5. import java.util.Map;
    6. import java.util.UUID;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10.  
    11. import org.apache.commons.beanutils.ConvertUtils;
    12.  
    13. import com.zking.dao.MeetingInfoDao;
    14. import com.zking.entity.MeetingInfo;
    15. import com.zking.framework.ActionSupport;
    16. import com.zking.framework.ModelDriver;
    17. import com.zking.util.Base64ImageUtils;
    18. import com.zking.util.MyDateConverter;
    19. import com.zking.util.PageBean;
    20. import com.zking.util.PropertiesUtil;
    21. import com.zking.util.R;
    22. import com.zking.util.ResponseUtil;
    23.  
    24. public class MeetingInfoAction extends ActionSupport implements ModelDriver{
    25.  
    26. 	private MeetingInfo info = new MeetingInfo();
    27. 	private MeetingInfoDao infoDao = new MeetingInfoDao();
    28. 	
    29. 	@Override
    30. 	public MeetingInfo getModel() {
    31. //		注册一个转换器
    32. 		ConvertUtils.register(new MyDateConverter(), Date.class);
    33. 		return info;
    34. 	}
    35. 	
    36. 	
    37. 	public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) {
    38. 		try {
    39. //			E:/temp/images/T280/abcdefg.png
    40. //			获取图片的存放地址 		dirPath=/temp/images/T280/
    41. 			String dirPath = PropertiesUtil.getValue("dirPath");
    42. //			获取浏览器请求路径，为了后续保存到数据库   serverPath=/upload/paizuo/
    43. 			String serverPath = PropertiesUtil.getValue("serverPath");
    44. //			随机生成一个图片名称
    45. 			String fileName=UUID.randomUUID().toString().replace("-", "")+".png";
    46. 			info.getSeatPic();// 图片字符串
    47. 			Base64ImageUtils.GenerateImage(info.getSeatPic().replaceAll("data:image/png;base64", ""), dirPath+fileName);
    48. 		
    49. //			将seatPic中的内容修改为  请求地址
    50. 			info.setSeatPic(serverPath+fileName);
    51. 			
    52. //			修改会议排座  数据库 图片 对应的 数据库列段
    53. 			int rs = infoDao.updateSeatPicById(info);
    54. 			if(rs>0) {
    55. 				ResponseUtil.writeJson(resp, R.ok(200, "会议排座成功"));
    56. 			}
    57. 			else {
    58. 				ResponseUtil.writeJson(resp, R.ok(0, "会议排座失败"));
    59. 			}
    60. 		} catch (Exception e) {
    61. 			e.printStackTrace();
    62. 			try {
    63. 				ResponseUtil.writeJson(resp, R.error(0, "会议排座失败"));
    64. 			} catch (Exception e1) {
    65. 				// TODO Auto-generated catch block
    66. 				e1.printStackTrace();
    67. 			}
    68. 		 finally {
    69. }}
    70. 		return null;
    71. 	}
    72.  
    73. //	会议送审
    74. 	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
    75. 		try {
    76. //			n是sql语句执行的影响行数
    77. 			int n=infoDao.updateAuditorById(info);
    78. //			如果大于0说明可以新增
    79. 			if(n>0) {
    80. 				ResponseUtil.writeJson(resp, R.ok(200, "会议送审成功"));
    81. 			}
    82. 			else {
    83. 				ResponseUtil.writeJson(resp, R.ok(0, "会议送审失败"));
    84. 			}
    85. 		} catch (Exception e) {
    86. 			e.printStackTrace();
    87. 			try {
    88. 				ResponseUtil.writeJson(resp, R.error(0, "会议送审失败"));
    89. 			} catch (Exception e1) {
    90. 				// TODO Auto-generated catch block
    91. 				e1.printStackTrace();
    92. 			}
    93. 		}
    94. 		return null;
    95. 	}
    96. 	
    97. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    98. 		try {
    99. //			n是sql语句执行的影响行数
    100. 			int n=infoDao.add(info);
    101. //			如果大于0说明可以新增
    102. 			if(n>0) {
    103. 				ResponseUtil.writeJson(resp, R.ok(200, "会议信息数据新增成功"));
    104. 			}
    105. 			else {
    106. 				ResponseUtil.writeJson(resp, R.ok(0, "会议信息数据新增失败"));
    107. 			}
    108. 		} catch (Exception e) {
    109. 			e.printStackTrace();
    110. 			try {
    111. 				ResponseUtil.writeJson(resp, R.error(0, "会议信息数据新增失败"));
    112. 			} catch (Exception e1) {
    113. 				// TODO Auto-generated catch block
    114. 				e1.printStackTrace();
    115. 			}
    116. 		}
    117. 		return null;
    118. 	}
    119. 	
    120. 	
    121. //	我的会议
    122. 	public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
    123. 		try {
    124. 			PageBean pageBean = new PageBean();
    125. 			pageBean.setRequest(req);
    126. 			List> infos = infoDao.myInfos(info, pageBean);	
    127. //			注意：layui中的数据格式
    128. 			ResponseUtil.writeJson(resp, R.ok(0, "我的会议数据查询成功", pageBean.getTotal(), infos));
    129. 		} catch (Exception e) {
    130. 			e.printStackTrace();
    131. 			try {
    132. 				ResponseUtil.writeJson(resp, R.error(0, "我的会议数据查询错误"));
    133. 			} catch (Exception e1) {
    134. 				e1.printStackTrace();
    135. 			}
    136. 		}
    137. 		return null;
    138. 	}
    139. 	
    140. //	我的审批
    141. 	public String myAudit(HttpServletRequest req, HttpServletResponse resp) {
    142. 		try {
    143. 			PageBean pageBean = new PageBean();
    144. 			pageBean.setRequest(req);
    145. 			List> list = infoDao.myAudit(info, pageBean);	
    146. //			注意：layui中的数据格式
    147. 			ResponseUtil.writeJson(resp, R.ok(0, "我的审批查询成功", pageBean.getTotal(), list));
    148. 		} catch (Exception e) {
    149. 			e.printStackTrace();
    150. 			try {
    151. 				ResponseUtil.writeJson(resp, R.error(0, "我的审批查询错误"));
    152. 			} catch (Exception e1) {
    153. 				e1.printStackTrace();
    154. 			}
    155. 		}
    156. 		return null;
    157. 	}
    158. 	
    159. 	
    160.  
    161. }

     MeetingInfoDao.java代码块：

    1. package com.zking.dao;
    2.  
    3. import java.sql.SQLException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import com.zking.entity.MeetingInfo;
    8. import com.zking.util.BaseDao;
    9. import com.zking.util.PageBean;
    10. import com.zking.util.StringUtils;
    11.  
    12. public class MeetingInfoDao extends BaseDao<MeetingInfo>{
    13. 	
    14. 	
    15. 	
    16. //	会议信息新增
    17. 	public int add(MeetingInfo t) throws Exception {
    18. 		String sql="insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
    19. 		return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
    20. 	}
    21. 	
    22. //	我的会议，后续其他的菜单也会使用
    23. 	private String getSQL() {
    24. 		return "select a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren\r\n" + 
    25. 				",b.`name` zhuchirennmae,\r\n" + 
    26. 				"a.location,\r\n" + 
    27. 				"DATE_FORMAT(a.startTime,'%Y-%m-%d %H-%m-%s') startTime,\r\n" + 
    28. 				"DATE_FORMAT(a.endTime,'%Y-%m-%d %H-%m-%s') endTime,\r\n" + 
    29. 				"a.state,\r\n" + 
    30. 				"(\r\n" + 
    31. 				"	case a.state\r\n" + 
    32. 				"	when 0 then '取消会议'\r\n" + 
    33. 				"	when 1 then '新建'\r\n" + 
    34. 				"	when 2 then '待审核'\r\n" + 
    35. 				"	when 3 then '驳回'\r\n" + 
    36. 				"	when 4 then '待开'\r\n" + 
    37. 				"	when 5 then '进行中'\r\n" + 
    38. 				"	when 6 then '开始投票'\r\n" + 
    39. 				"	when 7 then '结束会议'\r\n" + 
    40. 				"	else '其他' end\r\n" + 
    41. 				") meetingstate,\r\n" + 
    42. 				"a.seatPic,a.remark,a.auditor,\r\n" + 
    43. 				"c.`name` auditorname from t_oa_meeting_info a \r\n" + 
    44. 				"inner join t_oa_user b on a.zhuchiren=b.id\r\n" + 
    45. 				"left join t_oa_user c on a.auditor=c.id where 1=1";
    46. 	}
    47. 	
    48. //	我的会议
    49. 	public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean)
    50. 			throws SQLException, InstantiationException, IllegalAccessException {
    51. //		拿到那些可能传的条件
    52. //		拿到我们封装好的SQL语句
    53. 		String sql = getSQL();
    54. //		会议标题
    55. 		String title = info.getTitle();
    56. 		if(StringUtils.isNotBlank(title)) {
    57. 			sql+=" and a.title like '%"+title+"%'";
    58. 		}
    59. 		sql+=" and a.zhuchiren = "+info.getZhuchiren();
    60. //		降序
    61. 		sql+=" order by a.id desc ";
    62. 		return super.executeQuery(sql, pageBean);
    63. 	}
    64.  
    65. //	设置会议排座图片
    66. 	public int updateSeatPicById(MeetingInfo info) throws Exception {
    67. 		String sql = " update t_oa_meeting_info set seatPic=? where id=?";
    68. 		return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
    69. 	}
    70.  
    71. //	会议送审
    72. 	public int updateAuditorById(MeetingInfo info) throws Exception {
    73. 		String sql = " update t_oa_meeting_info set auditor=?,state=2 where id=?";
    74. 		return super.executeUpdate(sql, info, new String[] {"auditor","id"});
    75. 	}
    76.  
    77. //	我的审批
    78. 	public List<Map<String, Object>> myAudit(MeetingInfo info, PageBean pageBean)
    79. 			throws SQLException, InstantiationException, IllegalAccessException {
    80. //		拿到那些可能传的条件
    81. //		拿到我们封装好的SQL语句
    82. 		String sql = getSQL();
    83. //		会议标题
    84. 		String title = info.getTitle();
    85. 		if(StringUtils.isNotBlank(title)) {
    86. 			sql+=" and a.title like '%"+title+"%'";
    87. 		}
    88. //		当前登录账号等于审批人字段值
    89. 		sql+=" and a.auditor = "+info.getAuditor();
    90. //		待审核状态的会议信息才需要查询出来
    91. 		sql+=" and a.state=2 ";
    92. //		降序
    93. 		sql+=" order by a.id desc ";
    94. 		return super.executeQuery(sql, pageBean);
    95. 	}
    96.  
    97. 	
    98.  
    99. }

    main.jsp代码块：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     
    4.     <%@include file="common/header.jsp" %>
    5. html>
    6. <html>
    7. <head>
    8. <meta charset="UTF-8">
    9. <script src="static/js/mian.js">script>
    10.  
    11. head>
    12. <body>
    13. <div class="layui-layout layui-layout-admin">
    14.   <div class="layui-header">
    15.     <div class="layui-logo layui-hide-xs layui-bg-black">会议OA项目div>
    16.     
    17.     <ul class="layui-nav layui-layout-left">
    18.       
    19.     ul>
    20.     
    21.     <ul class="layui-nav layui-layout-right">
    22.       <li class="layui-nav-item layui-hide layui-show-md-inline-block">
    23.         <a href="javascript:;">
    24.           <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
    25.           ${user.name }
    26.         a>
    27.         <dl class="layui-nav-child">
    28.           <dd><a href="">Your Profilea>dd>
    29.           <dd><a href="">Settingsa>dd>
    30.           <dd><a href="login.jsp">Sign outa>dd>
    31.         dl>
    32.       li>
    33.       <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
    34.         <a href="javascript:;">
    35.           <i class="layui-icon layui-icon-more-vertical">i>
    36.         a>
    37.       li>
    38.     ul>
    39.   div>
    40.   
    41.   <div class="layui-side layui-bg-black">
    42.     <div class="layui-side-scroll">
    43.       
    44.       <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
    45.       ul>
    46.     div>
    47.   div>
    48.   
    49.   <div class="layui-body">
    50.     
    51. 	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    52. 	  <ul class="layui-tab-title">
    53. 	    <li class="layui-this" lay-id="11">首页li>
    54. 	   
    55. 	  ul>
    56. 	  <div class="layui-tab-content">
    57. 	    <div class="layui-tab-item layui-show">内容1div>
    58. 	    
    59. 	  div>
    60. 	div>
    61.   div>
    62.   
    63.   <div class="layui-footer">
    64.     
    65.             底部固定区域
    66.   div>
    67. div>
    68. <script>
    69. //JS 
    70.  
    71. script>
    72. body>
    73. html>

    三、会议签字 

    当我们点审批的时候如图所示：

     

    然后我们就要去写这个界面，注意位置

    -------

    addMeetingAudit.jsp代码块：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. 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. 		
    38. 		    
    39. 		    
    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. 							
    48. 							<li class="remote">
    49. 								<span class="icon iconfont icon-delete">span>
    50. 								<span class="iconAlert">清空span>
    51. 							li>				
    52. 						ul>			
    53. 					div>	
    54. 					<div class="canvasDraw">
    55. 						<div class="drawFont" data-type="hide">
    56. 							<span class="intoFont">span>
    57. 							<input type="text" class="intoFontInput">
    58. 						div>
    59. 						<canvas id="canvas" width="550" height="150">canvas>			
    60. 					div>		
    61. 				div>
    62. 		  
    63.     form>
    64. div>
    65. body>
    66. html>

     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. }
    711.  
    712.  
    713.

    我们就还要导入我们的插件，关于签字的插件

     

     

     当我们点击审批的时候是不是要做数据回显啊就是上面这张图，就是用form.val的组件

     这里面的保存图片的save就是跟我们上次的会议排座的图片的字符串一样的

     

    这个就设计到了跨页面拿值 

     现在我们运行一下：现在可以签字了如图所示：

     待会我们签完字能让这个字居中显示，我们现在先保存下来：

    难点就在这

    当我们点击审批通过的时候步骤：

            1）将突破的字符串 转成 图片保存起来

            2）将审批人的意见数据入库  t_oa_meeting_audit

            3)  修改会议状态   t_oa_meeting_info

    1.实体类 

      MeetingAudit.java实体类：

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

    2.配置

    MeetingAuditAction.java代码块：

    1. package com.zking.web;
    2.  
    3. import java.io.File;
    4. import java.util.Date;
    5. import java.util.UUID;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9.  
    10. import org.apache.commons.beanutils.ConvertUtils;
    11.  
    12. import com.zking.dao.MeetingAuditDao;
    13. import com.zking.entity.MeetingAudit;
    14. import com.zking.framework.ActionSupport;
    15. import com.zking.framework.ModelDriver;
    16. import com.zking.util.Base64ImageUtils;
    17. import com.zking.util.ImageUtils;
    18. import com.zking.util.MyDateConverter;
    19. import com.zking.util.PropertiesUtil;
    20. import com.zking.util.R;
    21. import com.zking.util.ResponseUtil;
    22. import com.zking.util.StringUtils;
    23.  
    24. public class MeetingAuditAction extends ActionSupport implements ModelDriver{
    25.  
    26. 	private MeetingAudit audit = new MeetingAudit();
    27. 	private MeetingAuditDao auditDao = new MeetingAuditDao();
    28. 	
    29. 	@Override
    30. 	public MeetingAudit getModel() {
    31. //		注册一个转换器
    32. 		ConvertUtils.register(new MyDateConverter(), Date.class);
    33. 		return audit;
    34. 	}
    35. 	
    36. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    37. 		try {
    38. 			/*
    39. 			 * 将突破的字符串 转成 图片保存起来
    40. 			 * 将审批人的意见数据入库  t_oa_meeting_audit
    41. 			 * 修改会议状态   t_oa_meeting_info
    42. 			 */
    43. 			if(StringUtils.isNotBlank(audit.getSign())) {
    44. //				dirPathSign=E:/temp/images/T280/sign/
    45. //				拿到会议签字图片的存放地址
    46. 				String dirPath = PropertiesUtil.getValue("dirPathSign");
    47. //				serverPathSign=/upload/sign/
    48. //				存储到数据库中的地址，即浏览器访问的地址
    49. 				String serverPath = PropertiesUtil.getValue("serverPathSign");
    50. //				原图 图片名
    51. 				String fileName1=UUID.randomUUID().toString().replace("-", "")+".png";
    52. //				裁剪后的图片名
    53. 				String fileName2=UUID.randomUUID().toString().replace("-", "")+".png";
    54. //				生成签字图片
    55. 				Base64ImageUtils.GenerateImage(audit.getSign().replaceAll("data:image/png;base64", ""), dirPath+fileName1);
    56. //				将原图进行裁剪
    57. 				ImageUtils.shearImg(dirPath+fileName1,dirPath+fileName2 );
    58. //				删掉原图
    59. 				File file=new File(dirPath+fileName1);
    60. 				if(file.exists())
    61. 					file.delete();
    62. 				audit.setSign(serverPath+fileName2);
    63. 				
    64. 			}
    65. //			n是sql语句执行的影响行数
    66. 			int n=auditDao.add(audit);
    67. //			如果大于0说明可以新增
    68. 			if(n>0) {
    69. 				ResponseUtil.writeJson(resp, R.ok(200, "会议审批成功"));
    70. 			}
    71. 			else {
    72. 				ResponseUtil.writeJson(resp, R.ok(0, "会议审批失败"));
    73. 			}
    74. 		} catch (Exception e) {
    75. 			e.printStackTrace();
    76. 			try {
    77. 				ResponseUtil.writeJson(resp, R.error(0, "会议审批失败"));
    78. 			} catch (Exception e1) {
    79. 				// TODO Auto-generated catch block
    80. 				e1.printStackTrace();
    81. 			}
    82. 		}
    83. 		return null;
    84. 	}
    85.  
    86. }

    3.dao层

    MeetingAuditDao.java代码块：

    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. 	 * 将突破的字符串 转成 图片保存起来
    11. 	 * 将审批人的意见数据入库  t_oa_meeting_audit
    12. 	 * 修改会议状态   t_oa_meeting_info
    13. 	 */
    14.  
    15. //	批处理
    16. 	public int add(MeetingAudit audit) {
    17. //		将审批人的意见数据入库  t_oa_meeting_audit
    18. 		String sql1="insert into t_oa_meeting_audit(meetingId,auditor,sign) "
    19. 				+ "values("+audit.getMeetingId()+","+audit.getAuditor()+",'"+audit.getSign()+"')";
    20. //		state有两种，审批通过即   待开4，审批驳回 即  驳回  3状态
    21. //		判断是否有没有签字
    22. 		boolean f = StringUtils.isNotBlank(audit.getSign());
    23. //		然后为4就说明审核通过了,为3就说明驳回了
    24. 		int state = f ? 4 :3;
    25. //		修改会议状态   t_oa_meeting_info
    26. 		String sql2="update t_oa_meeting_info set state="+state+" where id="+audit.getMeetingId();
    27. //		同时执行多个SQL语句，其目的在于事务的一致性，要么业务处理同时成功，要么同时失败
    28. 		return super.executeUpdateBatch(new String[] {sql1,sql2});
    29. 	}
    30.  
    31. }

    4.dao层里面调用批处理方法

    1. /**
    2. 	 * 批处理
    3. 	 * @param sqlLst
    4. 	 * @return
    5. 	 */
    6. 	public static int executeUpdateBatch(String[] sqlLst) {
    7. 		Connection conn = null;
    8. 		PreparedStatement stmt = null;
    9. 		try {
    10. 			conn = DBAccess.getConnection();
    11. 			// 设置不自动提交
    12. 			conn.setAutoCommit(false);
    13. 			for (String sql : sqlLst) {
    14. 				stmt = conn.prepareStatement(sql);
    15. 				stmt.executeUpdate();
    16. 			}
    17. 			conn.commit();
    18. 		} catch (Exception e) {
    19. 			try {
    20. 				conn.rollback();
    21. 			} catch (SQLException e1) {
    22. 				e1.printStackTrace();
    23. 				throw new RuntimeException(e1);
    24. 			}
    25. 			e.printStackTrace();
    26. 			throw new RuntimeException(e);
    27. 		} finally {
    28. 			DBAccess.close(conn, stmt, null);
    29. 		}
    30. 		return sqlLst.length;
    31. 	}

     还没有写完全

     运行一下如图所示：这个就没一个居中显示 

    进行优化：用到的数据库ImageUtils.java代码块：

    1. package com.zking.util;
    2.  
    3. import javax.imageio.ImageIO;
    4. import java.awt.*;
    5. import java.awt.image.BufferedImage;
    6. import java.io.File;
    7. import java.io.IOException;
    8. import java.text.ParseException;
    9. import java.util.ArrayList;
    10. import java.util.Arrays;
    11. import java.util.UUID;
    12. import java.util.regex.Pattern;
    13.  
    14. public class ImageUtils {
    15.  
    16.     private static int WHITE = new Color(255, 255, 255).getRGB();
    17.     private static int BLACK = new Color(0, 0, 0).getRGB();
    18.  
    19.     public static int[] bufferedImageToIntArray(BufferedImage image, int width, int height) {
    20.         try {
    21.             int rgb = 0;
    22.             int x1 = width;
    23.             int y1 = height;
    24.             int x2 = 0;
    25.             int y2 = 0;
    26.             int temp1 = 0;
    27.             int temp2 = 0;
    28.             // 方式一：通过getRGB()方式获得像素数组
    29.             for (int i = 0; i < width; i++) {
    30.                 for (int j = 0; j < height; j++) {
    31.                     rgb = image.getRGB(i, j);
    32.                     if (rgb == -16777216) {
    33.                         temp1 = i;
    34.                         temp2 = j;
    35.                         // 计算最左侧
    36.                         if (x1 >= temp1) {
    37.                             x1 = temp1;
    38.                         }
    39.                         // 计算最右侧
    40.                         if (x2 <= temp1) {
    41.                             x2 = temp1;
    42.                         }
    43.                         // 计算最下方
    44.                         if (y2 <= temp2) {
    45.                             y2 = temp2;
    46.                         }
    47.                         // 计算最上方
    48.                         if (y1 >= temp2) {
    49.                             y1 = temp2;
    50.                         }
    51.                     }
    52.                 }
    53.             }
    54.             System.out.println("BLACK: " + BLACK);
    55.             System.out.println("x1: " + x1);
    56.             System.out.println("x2: " + x2);
    57.             System.out.println("y1: " + y1);
    58.             System.out.println("y2: " + y2);
    59.             System.out.println("宽度: " + String.valueOf(x2 - x1));
    60.             System.out.println("高度: " + String.valueOf(y2 - y1));
    61.             return new int[] {x1, y1, x2 - x1, y2 - y1};
    62.         } catch (Exception e) {
    63.             e.printStackTrace();
    64.         }
    65.         return null;
    66.     }
    67.     
    68.     /**
    69.      * 剪切图片
    70.      * @param source	原图片地址
    71.      * @param o			目标地址
    72.      * @throws IOException
    73.      */
    74.     public static void shearImg(String source,String target) throws IOException {
    75.         BufferedImage bufferedImage = ImageIO.read(new File(source));
    76.         int width = bufferedImage.getWidth();
    77.         int height = bufferedImage.getHeight();
    78.         System.out.println("原图片宽度" + width);
    79.         System.out.println("原图片高度" + height);
    80.         int[] arr = bufferedImageToIntArray(bufferedImage, width, height);
    81.         // blank是作为四周边距留白        
    82.         int blank = 0;
    83.         BufferedImage newBufferedImage = bufferedImage.getSubimage(arr[0] - blank, arr[1] - blank, arr[2] + blank * 2, arr[3] + blank * 2);
    84.         ImageIO.write(newBufferedImage, "png", new File(target));
    85.     }
    86.  
    87.     public static void main(String[] args) throws IOException {
    88.     	String source = "D:\\temp\\images\\T280\\sign\\df0862b3627649e7b36da63cf21ffd27.jpg";
    89.     	String target="D:\\temp\\images\\T280\\sign\\"+UUID.randomUUID().toString().replace("-", "")+".jpg";
    90.     	shearImg(source, target);
    91.     }
    92.  
    93. }

     运行结果如图所示：

     四、总结

    ①人员签字功能

            1）会有相似插件完成

            2）优化插件使其在项目中使用

            3）研究里面不乏源码，寻找接入点

            4）接入到项目中

    ②批处理

            1）处理多个SQL语句

    ③签字图片的裁剪

    ④会议信息详情界面，将会议所有相关信息（标题、内容、时间、参与人、附件、审批人签字图片）转成PDF

  • 相关阅读:
    嵌入式开发为什么要跑操作系统？
    linux espidf vscode
    Ubuntu的SELinux
    剑指Offer || 116.省份数量
    HandlerAdapter具有什么功能呢？
    Docker：容器网络互联
    完善系统的最后一公里，增加系统日志功能
    谁说前端不能搞红黑树，用这55张图拿JS一起手撕红黑树
    力扣刷题第二十七天--二叉树
    软件测试内容整理
  • 原文地址：https://blog.csdn.net/weixin_67465673/article/details/126016902