Meeting OA project seating function and submission function

Catalog

One 、 Back end

Two 、 front end

3、 ... and 、 Running effect

---

One 、 Back end

MeetingInfoDao

//	 Set the picture of meeting seating 
	public int updateSeatPicById(MeetingInfo info) throws Exception {
		String sql =" update t_oa_meeting_info set seatPic=? where id=?";
		return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
	}

//	 According to the meeting ID Update the approver of the meeting （ submit for censorship ）
	public int updateAuditorById(MeetingInfo info) throws Exception {
		String sql="update t_oa_meeting_info set auditor=?,state=2 where id=?";
		return super.executeUpdate(sql, info, new String[] {"auditor","id"});
	}

MeetingInfoAction

public String updateSeatPicById(HttpServletRequest req, HttpServletResponse resp) {
		/*
		 * 1. Receive the string corresponding to the picture passed from the front-end page to the background 
		 * 2. With the help of tool classes, the string is generated into an image , Save to the path configured by the configuration file 
		 * 3. Add the mapping between the server hard disk and the request address , Can access 
		 * 4. Save the request address to the database 
		 */
		try {
//			E:/temp/images/T280/abcdefg.png
//			 Get the storage address of pictures 	dirPath=E:/temp/images/T280/
			String dirPath = PropertiesUtil.getValue("dirPath");
//			 Get the browser request path , For subsequent saving to the database     serverPath=/upload/paizuo/
			String serverPath = PropertiesUtil.getValue("serverPath");
//			 Randomly generate a picture name 
			String fileName = UUID.randomUUID().toString().replaceAll("-", "")+".png";
			info.getSeatPic();// Picture string 
			Base64ImageUtils.GenerateImage(info.getSeatPic().replaceAll("data:image/png;base64,", ""), dirPath+fileName);
//			 take seatPic The content in is modified as   Request address 
			info.setSeatPic(serverPath+fileName);
			
//			 Modify the meeting seating   Database image   Corresponding database column segment 
			int rs = meetingInfoDao.updateSeatPicById(info);
			if (rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, " The meeting was successfully booked "));
			}else {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting seating failed "));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting seating failed "));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}



//	 According to the meeting ID Update the approver of the meeting （ submit for censorship ）
	public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int rs = meetingInfoDao.updateAuditorById(info);
			if (rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, " The meeting was approved successfully "));
			}else {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting approval failed "));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting approval failed "));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

Two 、 front end

myMeeting.js

let layer,$,table,form;
var row;
layui.use(['jquery','layer','table','form'],function(){
	layer=layui.layer,
	$=layui.jquery,
	form=layui.form,
	table=layui.table;
	// Initialization table 
	initTable();
	// Bind the click event of the query button 
	$('#btn_search').click(function(){
		query();
	});
	
	// Initialize approver 
	initFormSelects();
	
	// submit for censorship 
	$('#btn_auditor').click(function(){
		$.post($("#ctx").val()+'/info.action',{
			'methodName':'updateAuditorById',
			'id':$('#meetingId').val(),
			'auditor':$('#auditor').val()
		},function(rs){
			if(rs.success){
				// close dialog boxes 
				layer.closeAll();
				// Refresh List 
				query();
			}else{
				layer.msg(rs.msg,{icon:5},function(){});
			}
		},'json');
		return false;
	});
});

//1. Initialize the data table 
function initTable(){
	table.render({           // Perform rendering 
        elem: '#tb',         // Specify the original table element selector （ recommend id Selectors ）
//        url: 'user.action?methodName=list',     // Request address 
        height: 340,         // Custom height 
        loading: false,      // Whether to load the bar （ Default  true）
        cols: [[             // Set the header 
            {field: 'id', title: ' Conference number ', width: 120},
            {field: 'title', title: ' The title of the meeting ', width: 120},
            {field: 'location', title: ' Place of meeting ', width: 140},
            {field: 'startTime', title: ' Starting time ', width: 120},
            {field: 'endTime', title: ' End time ', width: 140},
            {field: 'meetingstate', title: ' Meeting status ', width: 120},
            {field: 'seatPic', title: ' Meeting row ', width: 140,templet: function(d){
                console.log(d);
                // Get the current row data , And spliced into a custom template 
                return '<img src="'+d.seatPic+'">'
              }},
            {field: 'auditorname', title: ' Approved by ', width: 120},
            {field: '', title: ' operation ', width: 220,toolbar:'#tbar'},
        ]]
    });
	
	// In the page <table> Must be configured in lay-filter="tb_goods" Attribute can trigger attribute !!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "seat") {
			open(row.id);
		}else if(obj.event == "send"){
//			layer.msg(" submit for censorship ");
//			 Judge whether the seats have been arranged 
			if(row.seatPic==null || row.seatPic==""){
				  layer.msg(' Please complete the meeting seating first , Then submit for approval ！',function(){});
				  return false;
			 }
			 // Before opening the submission page , Please finish the meeting first ID Assignment of 
			 $('#meetingId').val(row.id);
//			    Open the meeting for approval HTML  Page layer 
			 openLayerAudit();
		}else if(obj.event == "del"){
			layer.msg(" Cancel the meeting ");
		}else if(obj.event == "back"){
			layer.msg(" Feedback details ");
		}else {
			
		}
	});
}

// Open the meeting seating dialog box 
function open(id){
	layer.open({
        type: 2,                    //layer Provides 5 Layer type . The values that can be passed in are ：0（ Message box , Default ）1（ Page layer ）2（iframe layer ）3（ Loading layer ）4（tips layer ）
        title: ' Meeting row ',                   // Dialog title 
        area: ['460px', '340px'],   // Wide and high 
        skin: 'layui-layer-rim',    // Style class name 
        content: $("#ctx").val()+'/jsp/meeting/seatPic.jsp?id='+id,                // Pop up content . You can pass in ordinary html Content , You can also specify DOM, With more type Different but different 
    });
}
//2. Click to query 
function query(){
	table.reload('tb', {
        url: 'info.action',     // Request address 
        method: 'POST',                    // Request mode ,GET perhaps POST
        loading: true,                     // Whether to load the bar （ Default  true）
        page: true,                        // Pagination or not 
        where: {                           // Set additional parameters for asynchronous data interface , Arbitrarily set 
        	'methodName':'myInfos',
        	'title':$('#title').val(),
        	'zhuchiren':$("#zhuchiren").val()
        },  
        request: {                         // Custom paging request parameter name 
            pageName: 'page', // Parameter name of page number , Default ：page
            limitName: 'rows' // Parameter name of data volume per page , Default ：limit
        }
   });
}

// Initialize approver 
function initFormSelects(){
	$.getJSON($("#ctx").val()+'/user.action',{
		'methodName':'findAll'
	},function(rs){
		console.log(rs);
		let data=rs.data;
		$.each(data,function(i,e){
			$('#auditor').append(new Option(e.name,e.value));
		});
		// To render 
		form.render('select');
	});
}

// Meeting submission for approval 
function openLayerAudit(){
	// Each time you open it, you will initialize the submitter and set the default value 
	$('#auditor').val("");
	// You have to re render 
	form.render('select');
	// Pop-up dialog box 
    layer.open({
        type: 1,                    //layer Provides 5 Layer type . The values that can be passed in are ：0（ Message box , Default ）1（ Page layer ）2（iframe layer ）3（ Loading layer ）4（tips layer ）
        title:' Meeting submission for approval ',
        area: ['426px', '140px'],   // Wide and high 
        skin: 'layui-layer-rim',    // Style class name 
        content: $('#audit'),   // Pop up content . You can pass in ordinary html Content , You can also specify DOM, With more type Different but different 
    });
}

seatPic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.contextPath }/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/layui/layui.js"></script>
<script type="text/javascript" src="static/js/plugins/html2canvas/html2canvas.js"></script>
<title> Meeting seating </title>
</head>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
		
body{
	width: 100%;
	height: 100%;
	/* background: red; */
}

.tips {
	/* position: absolute; */
	background: pink;
	display: inline-block;
	height: 60px;
	/* width: 60px; */
	line-height: 60px;
	text-align: center;
	margin: 5px;
	padding: 0 10px;
}

.add {
	position: fixed;
	right: 10px;
	top: 10px;
	display:inline;
}

#tu {
	width: 100%;
	height: 100%;
	/* background: lightblue; */
		/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
}
.layui-input{
	height:30px;
}
</style>
<body id="screen_body">
    <div id="tu"></div>
    <!--  Don't use layui Form inline mode , It can lead to canvas Of toDataURL() The data is  data:, -->
	<div class="add">
		<div style="display:inline-block;">
			<input id="dan_input" type="text" value="" class="layui-input">
		</div>
		<div style="display:inline-block;">
			<button onclick="return addDanMu()" class="layui-btn layui-btn-sm"> Add seats </button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value=' download '>
		</div>
	</div>
</body>
<script type="text/javascript">
var $id = function(id) {
	return document.getElementById(id);
}
// Drag and drop in the meeting row 
var dragF = {
	locked: false,
	lastObj: undefined,
	drag: function(obj) {
		$id(obj).onmousedown = function(e) {
			var e = e ? e : window.event;
			if (!window.event) {
				e.preventDefault();
			} /*  Block annotation <a href='/site/js-5791-1.html' target='_blank'><u> browser </u></a> Drag down a,img Default event for  */
			dragF.locked = true;
			$id(obj).style.position = "absolute";
			$id(obj).style.zIndex = "100";
			if (dragF.lastObj && dragF.lastObj != $id(obj)) { /*  Multi element dragging needs to restore the last element state  */
				dragF.lastObj.style.zIndex = "1";
			}

			dragF.lastObj = $id(obj);
			var tempX = $id(obj).offsetLeft;
			var tempY = $id(obj).offsetTop;

			dragF.x = e.clientX;
			dragF.y = e.clientY;
			document.onmousemove = function(e) {
				var e = e ? e : window.event;
				if (dragF.locked == false) return false;
				$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
				$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
				if (window.event) {
					e.returnValue = false;
				} /*  prevent ie Next a,img Default event for  */

			}

			document.onmouseup = function() {
				dragF.locked = false;
			}
		}
	}
}
</script>

<script type="text/javascript">
var layer;
layui.use(['layer'],function(){
	layer=layui.layer;

    // Initialize meeting seating ： According to the meeting ID Get the names of all participants （ host + Participants + People in attendance ）
	initMeetingUsers();
	
	// Draw pictures of meeting seating 
	$("#jie_input").on("click", function(event) {
		$('.add').hide();
		event.preventDefault();
		html2canvas(document.getElementById("screen_body")).then(function(canvas) {
			var dataUrl = canvas.toDataURL();
			console.log(dataUrl);
			var param = {};
//			 The string corresponding to the image is passed to the background 
			param['seatPic'] = dataUrl;
			param['id'] = '${param.id}';
			param['methodName']='updateSeatPicById';
			console.log(param);
			// Here you need to upload the pictures of meeting seating 
			$.post('${pageContext.request.contextPath }/info.action',param,function(rs){
				if(rs.success){
					// Get the current status first iframe Layer index 
					var index = parent.layer.getFrameIndex(window.name); 
					// And then close it 
					parent.layer.close(index); 
					// Call the refresh method of the parent page 
					parent.query();
				}else{
					layer.msg(rs.msg,{icon:5},function(){});
				}
			},'json');
		});
	});
});

function initMeetingUsers(){
	//http://localhost:8080/xxx/seatPic.jsp?id=12  -> ${param.id}
	$.getJSON('${pageContext.request.contextPath }/user.action',{
		'methodName':'queryUserByMeetingId',
		'meetingId':'${param.id}'
	},function(rs){
		console.log(rs);
		let data=rs.data;
		$.each(data,function(i,e){
			$('#dan_input').val(e.name);
			addDanMu();
		});
	});
}


// Add meeting seating 
function addDanMu() {
	var dan = document.getElementById("dan_input").value;
	if (dan == "") {
		alert(" Please enter barrage ~");
		return false;
	} else {
		document.getElementById("dan_input").value = ""; // Empty   Bullet screen input box 
		// var br = document.createElement("BR");  // <br />
		var node = document.createElement("DIV"); // <div>
		var tipsArr = document.getElementsByClassName('tips');
		var i;
		// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
		if (tipsArr.length == 0) {
			i = 1
		} else {

			i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
		}
		// var aNode = document.createElement("P");   // <p>
		node.setAttribute("class", "tips");
		node.setAttribute("id", "tips" + i);
		node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
		var textnode = document.createTextNode(dan); //  Create a   Text node ,  A barrage of user input , Deposit in   Created   Element nodes  <p>   in 
		// aNode.appendChild(textnode);
		node.appendChild(textnode);
		// document.body.appendChild(br);
		// document.body.appendChild(node);

		document.getElementById("tu").appendChild(node);
		return true;
	}
}
	</script>
</html>

3、 ... and 、 Running effect