当前位置：网站首页>Conference publishing function of conference OA project

Conference publishing function of conference OA project

2022-07-24 12:08:00 【lion tow】

Catalog

One 、 Preparation

Preface ：

Today, Xiaobian brings the meeting OA Conference release function of project function , We officially enter this meeting today OA Project sharing .

Product prototype ：

Analysis shows that in this interface is LayUi So we can directly find the corresponding source code on the official website OK Here I'll give you the front-end code of this page directly ：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/head.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/addMeeting.js"></script>
<title> Release meeting </title>
</head>
<body>
<form class="layui-form layui-form-pane">
	<div class="layui-form-item">
	   <button id="btn_add" type="submit" class="layui-btn" lay-submit="" lay-filter="meeting"> Submit... Immediately </button>
	   <button id="btn_reset" type="reset" class="layui-btn layui-btn-primary"> Reset </button>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> The title of the meeting </label>
	    <div class="layui-input-block">
	      <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder=" Please enter a title " class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item layui-form-text">
	    <label class="layui-form-label"> The content of the meeting </label>
	    <div class="layui-input-block">
	      <textarea name="content" lay-verify="required" placeholder=" Please enter the content " class="layui-textarea"></textarea>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> participants </label>
	    <div class="layui-input-block">
	     	<select name="canyuze" xm-select="canyuze" lay-verify="required" lay-vertype="tips">
			    <option value="">--- Please select ---</option>
			</select>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> Non voting attendees </label>
	    <div class="layui-input-block">
	     	<select name="liexize" xm-select="liexize" lay-verify="required" lay-vertype="tips">
			    <option value="">--- Please select ---</option>
			</select>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> host </label>
	    <div class="layui-input-block">
	      <input type="text" readonly="readonly" name="zhuchirenname" value="${user.name }" autocomplete="off" placeholder=" Please enter a title " class="layui-input">
	      <input type="hidden" name="zhuchiren" value="${user.id }"/>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> Place of meeting </label>
	    <div class="layui-input-block">
	      <input type="text" lay-verify="required" name="location" autocomplete="off" placeholder=" Please enter the meeting place " class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label"> Meeting time </label>
	    <div class="layui-input-block">
	      <input type="text" readonly="readonly" lay-verify="required" id="dt" name="dt" autocomplete="off" placeholder=" Please select the meeting time " class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item layui-form-text">
	    <label class="layui-form-label"> remarks </label>
	    <div class="layui-input-block">
	      <textarea name="remark" placeholder=" Please enter comments " class="layui-textarea"></textarea>
	    </div>
	</div>
</form>
</body>
</html>

Database preparation ：

Two 、 Back end code

Highlight features 1 Select from the multi-function drop-down box layui And formSelects Multiple component definitions ：

Document address ：https://hnzzmsf.github.io/example/example_v4.html#download

First we need to download js Files and css file

Select the download address to download and use for the next step

choice dist All the documents we need （js/css） It's all in here

After downloading, we got the four files needed to import them into the project , And in addMeeting.jsp introduce


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<!--  introduce formSelects The core css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css" />
<!--  introduce formSelects The core js -->
<script src="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeeting.js"></script>
</head>

After doing these preparations, we can follow the introduction of the official website , Come on, let's go addMeeting.js Coding of

First of all, we have to see how the official website makes multi-function drop-down box selection

The first is to make our drop-down box multifunctional ： Future generations 、 Reset 、 Reverse election

The second is to display data

addMeeting.js


let $,formSelects;
layui.use(['jquery','formSelects'],function(){
	$=layui.jquery,formSelects=layui.formSelects;
	// Add multi-function drop-down options 
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	
	//local Pattern 
	formSelects.data('canyuze', 'local', {
	    arr: [
	        {"name": " Guangzhou ", "value": 3},
	        {"name": " Shenzhen ", "value": 4},
	        {"name": " tianjin ", "value": 5}
	    ]
	});
})

stay UserDao Add a method to query all users ：


// Query all users to bind the multi-function drop-down box 
	public List<Map<String, Object>> queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql="select id as value,name from t_oa_user";
		return super.executeQuery(sql, pageBean);
	}

UserAction Corresponding new ：

// Query all users to bind the multi-function drop-down box 
	public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<Map<String, Object>> users = userDao.queryUserAll(user, null);
//		 Be careful ：layui Format of data table in 
			ResponseUtil.writeJson(resp, R.ok(0, " Multi function drop-down box data query succeeded ",users));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Multi function drop-down box data query failed "));
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return null;
	}

With data binding, we will js Code update


let $,formSelects;
layui.use(['jquery','formSelects'],function(){
	$=layui.jquery,formSelects=layui.formSelects;
	// Add multi-function drop-down options 
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	
	$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
		
		//local Pattern 
		formSelects.data('canyuze', 'local', {
			arr: rs.data
		});
		formSelects.data('liexize', 'local', {
			arr: rs.data
		});
	})
 
 
})

So far, the highlight function 1 complete ！

Highlight features 2 Data selection of meeting time period

Similarly, we first check the source code on the official website to see if there are components selected in the time range

After finding copy Source code

There's a problem here , How do we put the front （ Back ） Time to start （ end ） Go in time ？

To facilitate segmentation , The one among us “-” Change it to “ to ”,

Official document display ：

Next How to submit form Forms ？

MeetingInfo Entity class ：

package com.zking.entity;
 
import java.util.Date;
/**
 * 
 * @author  Zhang Qiang 
 *
 */
public class MeetingInfo {
    private Long id;
 
    private String title;
 
    private String content;
 
    private String canyuze;
 
    private String liexize;
 
    private String zhuchiren;
 
    private String location;
 
    private Date startTime;
 
    private Date endTime;
 
    private String fujian;
 
    private Integer state;
 
    private String seatPic;
 
    private String remark;
    
    private String auditor;
 
	public String getAuditor() {
		return auditor;
	}
 
	public void setAuditor(String auditor) {
		this.auditor = auditor;
	}
 
	public Long getId() {
		return id;
	}
 
	public void setId(Long id) {
		this.id = id;
	}
 
	public String getTitle() {
		return title;
	}
 
	public void setTitle(String title) {
		this.title = title;
	}
 
	public String getContent() {
		return content;
	}
 
	public void setContent(String content) {
		this.content = content;
	}
 
	public String getCanyuze() {
		return canyuze;
	}
 
	public void setCanyuze(String canyuze) {
		this.canyuze = canyuze;
	}
 
	public String getLiexize() {
		return liexize;
	}
 
	public void setLiexize(String liexize) {
		this.liexize = liexize;
	}
 
	public String getZhuchiren() {
		return zhuchiren;
	}
 
	public void setZhuchiren(String zhuchiren) {
		this.zhuchiren = zhuchiren;
	}
 
	public String getLocation() {
		return location;
	}
 
	public void setLocation(String location) {
		this.location = location;
	}
 
	public Date getStartTime() {
		return startTime;
	}
 
	public void setStartTime(Date startTime) {
		this.startTime = startTime;
	}
 
	public Date getEndTime() {
		return endTime;
	}
 
	public void setEndTime(Date endTime) {
		this.endTime = endTime;
	}
 
	public String getFujian() {
		return fujian;
	}
 
	public void setFujian(String fujian) {
		this.fujian = fujian;
	}
 
	public Integer getState() {
		return state;
	}
 
	public void setState(Integer state) {
		this.state = state;
	}
 
	public String getSeatPic() {
		return seatPic;
	}
 
	public void setSeatPic(String seatPic) {
		this.seatPic = seatPic;
	}
 
	public String getRemark() {
		return remark;
	}
 
	public void setRemark(String remark) {
		this.remark = remark;
	}
 
	public MeetingInfo() {
		super();
		// TODO Auto-generated constructor stub
	}
 
	@Override
	public String toString() {
		return "MeetingInfo [id=" + id + ", title=" + title + ", content=" + content + ", canyuze=" + canyuze
				+ ", liexize=" + liexize + ", zhuchiren=" + zhuchiren + ", location=" + location + ", startTime="
				+ startTime + ", endTime=" + endTime + ", fujian=" + fujian + ", state=" + state + ", seatPic=" + seatPic + ", remark=" + remark + "]";
	}
    
}

MeetingInfoDao：

package com.zking.dao;
 
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
 
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"});
	}
}

MeetingInfoAction：


package com.zking.web;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
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() {
		return info;
	}
 
	//	 Add meetings 
	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, " Meeting information increased successfully "));
			}else {
				ResponseUtil.writeJson(resp, R.error(0, " Failed to add meeting information "));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, " Meeting information query failed "));
			} catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return null;
	}
	
}

mvc.xml Add one more line


	<action path="info" type="com.zking.web.MeetingInfoAction"> </action>

But here we submit an error report ：

The reason is that we increased the meeting time to date type , And we actually request All forms of price increase are String Type, so we need to catch a tool class to convert

package com.zking.util;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
import org.apache.commons.beanutils.Converter;
 
public class MyDateConverter implements Converter {
	@Override
	public Object convert(Class type, Object value) {
		String dateStr = (String)value;
		SimpleDateFormat spdt = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		try {
			Date date = spdt.parse(dateStr);
			return date;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

stay MeetingInfoAction Inside Register an adapter ：

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

At this time, we click submit to succeed ！

This meeting Oa The release meeting function of the project is completed ！

3、 ... and 、 The front-end code

原网站

版权声明
本文为[lion tow]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207220749191021.html