当前位置：网站首页>Conference OA project introduction & Conference release

Conference OA project introduction & Conference release

2022-07-22 17:41:00 【Drunken cat (^ ｪｪ^)】

Catalog

One 、 meeting OA Prototype business introduction of

Two 、 meeting OA Table design

3、 ... and 、 Realize multi-function drop-down box and conference publishing

One 、 meeting OA Prototype business introduction of

Starting to do OA Before the project , Let's take a look and analyze the meeting OA Prototype map ,

First of all Conference Management main interface ：

It is divided into three modules ,（ As shown in the above icon ） Namely Conference Management 、 Voting management 、 Conference room management .

What we want to achieve today is The meeting was announced function ：

After the meeting is released , The form will refresh , And then in My meeting You can view your latest conference in ：

After that, there will be Meeting row ：

（ reminder ： In fact, there will be a drop-down box below the download button , What kind of conference table is available , For example, there is a circle 、 ellipse 、 Square 、 Rectangle 、 Irregular circular conference table and so on , For the time being, only Simple version of Let's explain the prototype diagram of .）

After knitting the seats , Click on download , Will automatically generate a good picture , And in Meeting row There are pictures of the seats in that column （ Here's the picture ）：

When the host has edited all the content , Then click submit for censorship also Select the submitter ：

After choosing and confirming , that The person to be approved Will log into your own account See the menu My approval The status of one more meeting is To audit Conference ：

Then click The examination and approval ：

After passing , The host can be in My meeting See whether the meeting conclusion status you released is pending or rejected , If it is to be opened, you can go to the next step .

For example, the person who received the meeting was Zhang San 、 Li Si 、 Wang Wu 、 Zhao Liu , Then these people will receive Notice of meeting ：

Click on Whether to attend the meeting ：

After the feedback from those people , The host can be in my meeting Feedback details I saw the participants in the meeting 、 Absentees 、 And unread people （ It is not listed in detail in the prototype diagram ）：

And then in Meeting to be held You can see which meetings you want to hold ：

There will be a vote after the meeting ：

（ A meeting may correspond to multiple titles ）

Then you can see Voting options 、 Voting results and voting statements ：

The whole conference business is mainly based on Conference Management Mainly .

Two 、 meeting OA Table design

next Design the table according to our business ：

3、 ... and 、 Realize multi-function drop-down box and conference publishing

After login account comes in , Enter the meeting and release the meeting ：

layui And formSelects Multiple component definitions ：
Document address ：https://hnzzmsf.github.io/example/example_v4.html#download

Download address ：https://github.com/hnzzmsf/layui-formSelects

After decompressing ：

Introduce the following ：

Use steps ：
1） Import formSelects
Put... In the data 《layui-formSelects-master.zip》 Extract and import dist The core in the directory js and css To the specified path of the project
2） stay addMeeting.jsp Introduce the core into the page JS and CSS：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css" />

<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>

addMeeting.js：

Find the corresponding code on the advanced official website and copy ：

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：

// 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;
	}

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']);
	
	$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
		
		//local Pattern 
		formSelects.data('canyuze', 'local', {
			arr: rs.data
		});
		formSelects.data('liexize', 'local', {
			arr: rs.data
		});
	})


})

Look at the 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 ”,

See official website document ：

addMeeting.js：


	  // Date time range 
	  laydate.render({
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: ' to '
	  });

Next How to submit form Forms ？

Go to the official website ：

MeetingInfo Entity class ：

package com.zking.entity;

import java.util.Date;
/**
 *  Database conference information table t_oa_meeting_info The corresponding entity class 
 * @author  President Yang 
 *
 */
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：

<?xml version="1.0" encoding="UTF-8"?>
<config>

	<action path="/user" type="com.zking.web.UserAction">
	</action>

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

Click submit to report an error ：

String Unable to transfer date type

MyDateConverter Tool class ：

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;
	}
}

Run commit again , Increase success ：

Smiling face tips ：

let $,formSelects,laydate,form;
layui.use(['jquery','formSelects','laydate','form'],function(){
	$=layui.jquery
	,formSelects=layui.formSelects
	,form=layui.form
	,laydate=layui.laydate;
	
//	 How to submit form Forms 
	initForm();
	

	  // Monitor submission 
	  form.on('submit(meeting)', function(data){
		  let rs=data.field;
		  // Put the original time 、 Section 、 Range for processing , Get the start time 、 End time , And go to the space , Put in json object rs in 
		  rs["startTime"]=rs.dt.split(" to ")[0].trim();
		  rs["endTime"]=rs.dt.split(" to ")[1].trim();
		  rs["methodName"]="add";
		  $.post("info.action",rs,function(res){
			  if(res.success){
				  layer.msg(res.msg,{icon:6},function(){});
				  $("btn_reset").click();
			  }else{
				  layer.msg(res.msg,{icon:5},function(){});
			  }
		  },"json")
		  return false;
	    })
	  });
	


// initialization form Elements 
function initForm(){
	// 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
		});
	})

	  // Date time range 
	  laydate.render({
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: ' to '
	  });
	  
}

Running effect ：