会议OA项目

最新推荐文章于 2024-06-12 15:01:55 发布

無话可说.

最新推荐文章于 2024-06-12 15:01:55 发布

阅读量140

点赞数

分类专栏： javaweb eclipse MySQL 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_65565181/article/details/125921694

版权

eclipse 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

javaweb

25 篇文章 0 订阅

订阅专栏

MySQL

11 篇文章 0 订阅

订阅专栏

铁子们今天分享会议OA项目

好了老规矩先看目录

1、参考资料我们今天会用到formSelects多选下拉框组件

之前呢我发的layui那些博客界面框架的，如下

我们今天要完成的内容是会议发布

1、参考资料
我们今天会用到formSelects多选下拉框组件

所以我把那些参考资料的网址放到这里

文档地址：https://hnzzmsf.github.io/example/example_v4.html#download
下载地址：https://github.com/hnzzmsf/layui-formSelects

然后我们还会用到下载这边的dist

按照操作图下载

解压压缩包

点击去选择dist

然后导入

2使用步骤

使用步骤：导入formSelects，将资料中的《layui-formSelects-master.zip》解压并导入dist目录中的核心js和css到项目的指定路径中

addMeeting.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">
<!-- 引入formSelects核心css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css" />
<!-- 引入formSelects核心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>
<title>发布会议</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">立即提交</button>
	   <button id="btn_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">会议标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">会议内容</label>
	    <div class="layui-input-block">
	      <textarea name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">参与者</label>
	    <div class="layui-input-block">
	     	<select name="canyuze" xm-select="canyuze" lay-verify="required" lay-vertype="tips">
			    <option value="">---请选择---</option>
			</select>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">列席者</label>
	    <div class="layui-input-block">
	     	<select name="liexize" xm-select="liexize" lay-verify="required" lay-vertype="tips">
			    <option value="">---请选择---</option>
			</select>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">主持人</label>
	    <div class="layui-input-block">
	      <input type="text" readonly="readonly" name="zhuchirenname" value="${user.name }" autocomplete="off" placeholder="请输入标题" class="layui-input">
	      <input type="hidden" name="zhuchiren" value="${user.id }"/>
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">会议地点</label>
	    <div class="layui-input-block">
	      <input type="text" lay-verify="required" name="location" autocomplete="off" placeholder="请输入会议地点" class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">会议时间</label>
	    <div class="layui-input-block">
	      <input type="text" readonly="readonly" lay-verify="required" id="dt" name="dt" autocomplete="off" placeholder="请选择会议时间" class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">备注</label>
	    <div class="layui-input-block">
	      <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
	    </div>
	</div>
</form>
</body>
</html>

在页面中引入核心JS和CSS
引入js

let $,formSelects;
layui.use(['jquery','formSelects'],function(){
	$=layui.jquery,formSelects=layui.formSelects;
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
})

效果，我这个是已经绑定好数据的了，（没数据会显示没有选项）

接下来我们绑数据

代码如下

let form,layer,$,formSelects,laydate;
layui.use(['form','layer','jquery','laydate'],function(){
	form=layui.form,
	layer=layui.layer,
	$=layui.jquery,
	laydate=layui.laydate,
	//非模块化处理方式
	formSelects=layui.formSelects;
	
	//必须进行初始化操作
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	
	//会议时间组件初始化
	laydate.render({
	    elem: '#dt',
	    type: 'datetime',
	    range: '至'
	});
	
	//初始化多选下拉框
	initFormSelects();
	
	form.on('submit(meeting)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  let rs=data.field;
	  rs['startTime']=rs.dt.split('至')[0].trim();
	  rs['endTime']=rs.dt.split('至')[1].trim();
	  rs['methodName']='add';
	  console.log(rs);
	  $.post($("#ctx").val()+'/info.action',rs,function(json){
		  if(json.success){
			  layer.msg(json.msg,{icon:6},function(){});
			  $('#btn_reset').click();
		  }else{
			  layer.msg(json.msg,{icon:5},function(){});
		  }
	  },'json');
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
});
 
//初始化多选下拉框
function initFormSelects(){
	$.getJSON($("#ctx").val()+'/user.action',{
		'methodName':'queryUserAll'
	},function(rs){
		console.log(rs);
		formSelects.data('liexize', 'local',{arr:rs.data});
	    formSelects.data('canyuze', 'local',{arr:rs.data});
	});
}

UserDao.java

//	获取用户多选框数据
	public List<Map<String, Object>> queryUserAll(User user, PageBean pageBean) throws Exception {
		String sql = "SELECT name,id as value from t_oa_user";
		return super.executeQuery(sql, pageBean);
	}

UserAction.java

public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<Map<String, Object>> users = userDao.queryUserAll(user,null);
			ResponseUtil.writeJson(resp, R.ok(200, "获取用户多选框数据成功！！！", users));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "获取用户多选框数据失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

实现之后就可以成功使用下拉框了

二、会议发布时间段功能

我们直接去官网看实例，把日期那个弄好

代码拷下来

引入到项目js

let $,formSelects,laydate;
layui.use(['jquery','formSelects','laydate'],function(){
	$=layui.jquery,
	laydate=layui.laydate,
	formSelects=layui.formSelects;
	//添加多功能下拉框
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	
	$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
		console.log(rs);
		//local模式
		formSelects.data('canyuze', 'local', {
		    arr: rs.data
		});
		formSelects.data('liexize', 'local', {
		    arr: rs.data
		});
	});
	
	 //日期时间范围
	  laydate.render({
		  //#dt事件范围的id
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: true
	  });
	  
});

效果

到时候显示日期会有一条小杠的，我们把它改为至

 //日期时间范围
	  laydate.render({
		  //#dt事件范围的id
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: '至'
	  });

三、会议发布

到官网查看如何提交表单

//监听提交
	  form.on('submit(meeting)', function(data){
	    layer.alert(JSON.stringify(data.field), {
	      title: '最终的提交信息'
	    })
	    return false;
	  });

建立一个实体类MeetingInfo.java

package com.zking.entity;
 
import java.util.Date;
 
//数据库会议信息表t_oa_meeting_info对应的关系
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 + "]";
	}
    
}

dao层MeetingInfoDao.java

package com.zking.dao;
 
import java.util.List;
 
import com.xlb.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
 
public class MeetingInfoDao extends BaseDao<MeetingInfo>{
 
	//会议信息新增
	public int add (MeetingInfo t) throws Exception {
		String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,starTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","starTime","endTime","remark"});
	}
	
	
}

action层MeetingInfoAction.java

public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<Map<String, Object>> users = userDao.queryUserAll(user,null);
			ResponseUtil.writeJson(resp, R.ok(200, "获取用户多选框数据成功！！！", users));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "获取用户多选框数据失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

配置mvc

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

到这我们运行会报错
因为String不能转为data

用一个工具类转

@Override
	public MeetingInfo getModel() {
		//注册一个转换器
		ConvertUtils.register(new MyDateConverter(), Date.class);
		return info;
	}

工具类SimpleDateFormat

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

1、前端搭建

搭建好后端后我们把时间端分割开

//监听提交
	  form.on('submit(meeting)', function(data){
		  let rs=data.field;
		  //将原有的时间区间范围进行处理，拿到开始时间结束时间,并且去空格,放入Json对象rs中
		  rs["startTime"]=rrs.dt.split('至')[0].trim;
		  rs["endTime"]=rrs.dt.split('至')[1].trim;
		  rs["methodName"]="add";
		  //打印拿到的数据
		  console.log(rs);
		  return false;
	  });

然后我们利用post传输运行提示

 $.post("info.action",rs,function(res){
			  console.log(rs);
			  if(res.success){
				 layer.msg(res.msg,{icon:6},function(){});
			  }else{
				  layer.msg(res.msg,{icon:5},function(){});
			  }
		  },"json")
		  return false;
	  });

好了本次分享结束了我们下次见

無话可说.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
会议OA项目

铁子们今天分享会议OA项目好了老规矩先看目录之前呢我发的layui那些博客界面框架的，如下我们今天要完成的内容是会议发布一、多功能下拉框①、参考资料我们今天会用到formSelects多选下拉框组件所以我把那些参考资料的网址放到这里文档地址https下载地址https然后我们还会用到下载这边的dist按照操作图下载解压压缩包点击去选择dist然后导入。...
复制链接

扫一扫