Meeting OA project progress (II)

Catalog

Preface

One 、 functional requirement

Two 、 code （ My meeting ）

        1、 Background coding

        2、 Front end coding

---

Preface

The previous article described the background of this project , Purpose of development, etc .

The coding work has completed the release function of the meeting , The content shared this time is My meeting function .

---

One 、 functional requirement

My meeting ：

After logging in , The current account is the host of the meeting , Query and display the meeting .

Data query is through the primary and secondary person fields

  From the prototype of my conference product , Approvers use names instead of numbers , The meeting status should be a text description rather than a status number .

And when my meeting , When there is no approver in the meeting , Also show the meeting . I posted the meeting , But still considering the rationality of the meeting 、 Whether new content is needed , The approver has not been selected yet .

In the database startTime and endTime yes datetime type , The page will display a string of numbers , We need to format it .

  In combination with the above

To write SQL Statement for data query ,

SELECT
	a.id,
	a.title,
	a.content,
	a.canyuze,
	a.liexize,
	a.zhuchiren,
	b.NAME zhuchirenname,
	a.location,
	DATE_FORMAT( a.startTime, '%Y-%m-%d %H-%m-%s' ) startTime,
	DATE_FORMAT( a.endTime, '%Y-%m-%d %H-%m-%s' ) endTime,
	a.state,
	(
CASE
	a.state 
	WHEN 0 THEN
	' Cancel the meeting ' 
	WHEN 1 THEN
	' newly build ' 
	WHEN 2 THEN
	' To audit ' 
	WHEN 3 THEN
	' rejected ' 
	WHEN 4 THEN
	' To be opened ' 
	WHEN 5 THEN
	' Have in hand ' 
	WHEN 6 THEN
	' Start voting ' 
	WHEN 7 THEN
	' Close the meeting ' ELSE ' other ' 
END 
	) meetingstate,
	a.seatPic,
	a.remark,
	a.auditor,
	c.NAME auditorname 
FROM
	t_oa_meeting_info a
	INNER JOIN t_oa_user b ON a.zhuchiren = b.id
	LEFT JOIN t_oa_user c ON a.auditor = c.id

 

                           

  Now that the needs analysis is finished , Data query is almost done , Start coding my conference function .

Two 、 code （ My meeting ）

        1、 Background coding

 MeetingInfoDao

package com.zking.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class MeetingInfoDao extends BaseDao<MeetingInfo>{

//	 Conference information added 
	public int add(MeetingInfo t) throws Exception {
		String sql = "insert into t_oa_meeting_info"
				+ "(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) "
				+ "values(?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
	}
	
	// My meeting 、 Other menus will be used .
	private String getSQL() {
		return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" + 
				",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" + 
				",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" + 
				",a.state\r\n" + 
				",(case a.state\r\n" + 
				"when 0 then ' Cancel the meeting '\r\n" + 
				"when 1 then ' newly build '\r\n" + 
				"when 2 then ' To audit '\r\n" + 
				"when 3 then ' rejected '\r\n" + 
				"when 4 then ' To be opened '\r\n" + 
				"when 5 then ' Have in hand '\r\n" + 
				"when 6 then ' Start voting '\r\n" + 
				"else ' At the end of the meeting ' end\r\n" + 
				") as meetingState\r\n" + 
				",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" + 
				"FROM t_oa_meeting_info a\r\n" + 
				"inner join t_oa_user b on a.zhuchiren = b.id\r\n" + 
				"left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
	}
	
//	 My meeting 
	public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
		String sql = getSQL();
		String title = info.getTitle();
		if(StringUtils.isNotBlank(title)) {
			sql += " and title like '%"+title+"%'";
		}
		// According to the current login user ID As a condition of the host field 
		sql+=" and zhuchiren="+info.getZhuchiren();
		// According to the meeting ID null 
//		sql+=" order by a.id desc";
		System.out.println(sql);
		return super.executeQuery(sql, pageBean);
	}
	
//	 Cancel the meeting 
	public int updateState(MeetingInfo info) throws Exception {
		String sql = "update t_oa_meeting_info set state = 0 where  id = ?";
		return super.executeUpdate(sql, info,new String[] {"id"} );
	}
	
}

MeetingInfoDaoTest

package com.zking.dao;

import static org.junit.Assert.*;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import com.zking.entity.MeetingInfo;
import com.zking.util.PageBean;

public class MeetingInfoDaoTest {

	private MeetingInfoDao infoDao = new MeetingInfoDao();
	
	@Before
	public void setUp() throws Exception {
	}

	@After
	public void tearDown() throws Exception {
	}

	@Test
	public void testMyInfos() {
		MeetingInfo info = new MeetingInfo();
		PageBean pageBean = new PageBean();
		try {
			List<Map<String, Object>> myInfos = infoDao.myInfos(info, pageBean);
			for (Map<String, Object> map : myInfos) {
				System.out.println(map);
			}
			System.out.println(pageBean);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

}

  Write well dao Method first test , use junit.

 MeetingInfoAction

package com.zking.web;

import java.util.Date;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.ConvertUtils;

import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.MyDateConverter;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
	private MeetingInfo info = new MeetingInfo();
	private MeetingInfoDao infoDao = new MeetingInfoDao();

	@Override
	public MeetingInfo getModel() {
//		 Register a converter 
		ConvertUtils.register(new MyDateConverter(), Date.class);
		return info;
	}

	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
//			rs yes sql Number of lines affected by statement execution 
			int rs = infoDao.add(info);
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, " Conference information data added successfully "));
			}else {
				ResponseUtil.writeJson(resp, R.error(0, " Failed to add conference information data "));
			}
			
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Failed to add conference information data "));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
//	 My meeting 
	public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = infoDao.myInfos(info, pageBean);
//			 Be careful ：layui Format of data table in 
			ResponseUtil.writeJson(resp, R.ok(0, " My meeting data query succeeded " , pageBean.getTotal(), list));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " My meeting data query failed "));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
//	 Cancel the meeting 
	public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			int upd = infoDao.updateState(info);
//			 Be careful ：layui Format of data table in 
			if(upd > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, " The meeting was cancelled successfully "));
			}else {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting cancellation failed "));
			}
					} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting cancellation failed "));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
}

        2、 Front end coding

myMeeting.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/myMeeting.js"></script>
<title> User management </title>
</head>
<style>
body{
	margin:15px;
}
 .layui-table-cell {height: inherit;}
 .layui-layer-page .layui-layer-content {  overflow: visible !important;}
</style>
<body>
<!--  Search bar  -->
<div class="layui-form-item" style="margin:15px 0px;">
  <div class="layui-inline">
    <label class="layui-form-label"> The title of the meeting </label>
    <div class="layui-input-inline">
      <input type="hidden" id="zhuchiren" value="${user.id }"/>
      <input type="text" id="title" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-inline">
    <button id="btn_search" type="button" class="layui-btn"><i class="layui-icon layui-icon-search"></i>  Inquire about </button>
  </div>
</div>
<!--  Data table  -->
<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px"></table>
<!--  Dialog box （ submit for censorship ） -->
<div id="audit" style="display:none;">
	<form style="margin:20px 15px;" class="layui-form layui-form-pane" lay-filter="audit">
		<div class="layui-inline">
		   <label class="layui-form-label"> Submitter </label>
		   <div class="layui-input-inline">
		      <input type="hidden" id="meetingId" value=""/>
		      <select id="auditor" style="poistion:relative;z-index:1000">
				<option value="">--- Please select ---</option>
		      </select>
		   </div>
		   <div class="layui-input-inline">
		     <button id="btn_auditor" class="layui-btn"> submit for censorship </button>
		   </div>
		</div>
	</form>
</div>
<!--  Dialog box （ Feedback details ） -->
<div id="feedback" style="display:none;padding:15px;">
	<fieldset class="layui-elem-field layui-field-title">
	  <legend> Participants </legend>
	</fieldset>
	<blockquote class="layui-elem-quote" id="meeting_ok"></blockquote>
	<fieldset class="layui-elem-field layui-field-title">
	  <legend> Absentees </legend>
	</fieldset>
	<blockquote class="layui-elem-quote" id="meeting_no"></blockquote>
	<fieldset class="layui-elem-field layui-field-title">
	  <legend> Unread people </legend>
	</fieldset>
	<blockquote class="layui-elem-quote" id="meeting_noread"></blockquote>
</div>
<script type="text/html" id="tbar">
  {
   {#  if(d.state==1 || d.state==3){ }}
  <a class="layui-btn layui-btn-xs" lay-event="seat"> Meeting row </a>
  <a class="layui-btn layui-btn-xs" lay-event="send"> submit for censorship </a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> Delete </a>
  {
   {#  } }}
  {
   {#  if(d.state!=1 && d.state!=2 && d.state!=3){ }}
  <a class="layui-btn layui-btn-xs" lay-event="back"> Feedback details </a>
  {
   {#  } }}
</script>
</body>
</html>

myMeeting.js

let layer,table,$,form;
var row;
layui.use(['layer','table','jquery','form'],function(){
	layer=layui.layer,
	table=layui.table,
	form=layui.form,
	$=layui.jquery;
	
	initTable();
	
	// Query events 
	$('#btn_search').click(function(){
		query();
	});
	
});

//1. Initialize the data table 
function initTable(){
	table.render({          // Perform rendering 
        elem: '#tb',   // Specify the original table element selector （ recommend id Selectors ）
        height: 400,         // Custom height 
        loading: false,      // Whether to load the bar （ Default  true）
        cols: [[             // Set the header 
            {field: 'id', title: ' Conference number ', width: 90},
            {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: 120},
            {field: 'meetingState', title: ' Meeting status ', width: 120},
            {field: 'seatPic', title: ' Meeting row ', width: 120,
            	templet: function(d){
                    if(d.seatPic==null || d.seatPic=="")
                    	return " Not yet seated ";
                    else
                    	return "<img width='120px' src='"+d.seatPic+"'/>";
                }
            },
            {field: 'auditorName', title: ' Approved by ', width: 120},
            {field: '', title: ' operation ', width: 200,toolbar:'#tbar'},
        ]]
   });
}

//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',
        	'zhuchiren':$('#zhuchiren').val(),
        	'title':$('#title').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
        },
        done: function (res, curr, count) {
        	console.log(res);
        }
   });
	
	// Toolbar events 
	table.on('tool(tb)', function(obj){ // notes ：tool  Is the toolbar event name ,test  yes  table  Properties of the original container  lay-filter=" Corresponding value "
	  row = obj.data; // Get current row data 
	  var layEvent = obj.event; // get  lay-event  Corresponding value （ It can also be in the header  event  The corresponding value of the parameter ）
	  var tr = obj.tr; // Get the current line  tr  Of  DOM  object （ If any ）
	  console.log(row);
	  if(layEvent === 'seat'){ // Meeting row 
		  layer.msg(' Meeting row ');
	  } else if(layEvent === 'send'){ // submit for censorship 
		  layer.msg(' submit for censorship ');
	  } else if(layEvent==="back"){ // Feedback details 
		  layer.msg(' Feedback details ');
	  } else {
		  layer.confirm(' Are you sure to cancel the meeting ?', {icon: 3, title:' Tips '}, function(index){
			  $.post('info.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   // Call the query method to refresh the data 
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
	  }
	});
}

Seat the meeting , From text to picture

The operation effect is as follows ：