• OA项目之会议发布

    目录

    一、多功能下拉框

    ①参考资料

    文档地址
    下载地址
    文档
    在这里插入图片描述
    下载地址
    在这里插入图片描述
    按照图片操作下载
    在这里插入图片描述
    得到一个压缩包
    在这里插入图片描述
    我们把这四个搬到项目中
    在这里插入图片描述

    ②使用步骤

    1） 使用步骤：导入formSelects，将资料中的《layui-formSelects-master.zip》解压并导入dist目录中的核心js和css到项目的指定路径中
    在这里插入图片描述
    按照该层级结构把js放进去
    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    页面引入

    <!-- 引入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>

    • 1
    • 2
    • 3
    • 4

    效果
    在这里插入图片描述

    3）定义formSelects组件及表单验证设置
    官方文档本地绑数据
    在这里插入图片描述
    把实例放进项目js

    let $,formSelects;
layui.use(['jquery','formSelects'],function(){
	$=layui.jquery,formSelects=layui.formSelects;
	//添加多功能下拉框
	formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	
	//local模式
	formSelects.data('canyuze', 'local', {
	    arr: [
	        {"name": "分组-1", "type": "optgroup"},
	        {"name": "北京", "value": 1},
	        {"name": "上海", "value": 2},
	        {"name": "分组-2", "type": "optgroup"},
	        {"name": "广州", "value": 3},
	        {"name": "深圳", "value": 4},
	        {"name": "天津", "value": 5}
	    ]
	});
	
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    效果
    在这里插入图片描述
    4）初始化formSelects

    let formSelects;
      layui.use(['formSelects'],function(){
	  formSelects=layui.formSelects;
	  //必须进行初始化操作
	  formSelects.btns('liexize', ['select', 'remove', 'reverse']);
	  formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
      });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    5）动态绑定数据（后台列席者和参与者接口定义及测试）

     let data=doAjax("userAction.action",{
		methodName:'queryUserAll'
      });
      formSelects.data('liexize', 'local',{arr:data.data});
      formSelects.data('canyuze', 'local',{arr:data.data});

    • 1
    • 2
    • 3
    • 4
    • 5

    注：
    后台数据JSON格式必须是：{name:‘’,value:‘’}，如果不喜欢name,value可以使用config重新定义！！！

    二、会议发布时间段

    我们直接去官网看实例
    在这里插入图片描述
    源代码
    在这里插入图片描述
    引入到项目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
	  });
	  
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    效果
    在这里插入图片描述
    定义时间端格式
    在这里插入图片描述
    我们把中间的-换成至

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    三、会议发布

    到官网查看如何提交表单
    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    我们打印一下data（点击提价按钮）
    在这里插入图片描述

    ①搭建后端

    要用到的数据表t_oa_meeting_info
    在这里插入图片描述
    所有我们要建立一个实体类MeetingInfo.java

    package com.xlb.entity;

import java.util.Date;

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 + "]";
	}
    
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158

    dao层MeetingInfoDao.java

    package com.xlb.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"});
	}
	
	
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    action层MeetingInfoAction.java

    package com.xlb.web;

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

import com.xlb.dao.MeetingInfoDao;
import com.xlb.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;
	}
	
	//用户新增
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是影响行数
			int rs = infoDao.add(info);
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "会议信息新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.error(0, "会议信息新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "会议信息新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	

}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    配置mvc

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

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

	<action path="/permission" type="com.xlb.web.PermissionAction">

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

	</action>
	
</config>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    到这我们运行会报错
    因为String不能转为data
    在这里插入图片描述
    那么我们就用一个工具类转

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    工具类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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    ②前端搭建

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

    //监听提交
	  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;
	  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    打印结果
    在这里插入图片描述
    然后我们利用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;
	  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    结果
    在这里插入图片描述

  • 相关阅读:
    concat和apply实现多维数组扁平化、深入理解concat/apply
    C进阶 - 指针进阶
    java毕业设计超市购物系统mybatis+源码+调试部署+系统+数据库+lw
    前端入门-HTML篇
    【CVPR2022】NFormer: Robust Person Re-identification with Neighbor Transformer
    Java基础：Java程序设计环境
    C语言学习笔记（十七）
    canvas之时钟
    K8S之Job和CronJob控制器
    Android studio自定义输出编译apk的名称
  • 原文地址：https://blog.csdn.net/qq_63531917/article/details/125914297