一、前言
1.什么是OA会议
会议OA指的是会议办公自动化(Office Automation)系统,也被称为会议管理系统或会议信息管理系统。它是一种通过计算机和信息技术来提高会议管理效率和便利性的系统。
会议OA系统可以帮助企业提高会议管理的效率和准确性,节省时间和资源,促进协作和沟通。它不仅适用于大型企业和组织,也可用于中小型企业和团队,以提升工作效率和组织的协同能力。
2.OA会议项目背景
推进林业厅内部公文流转无纸化办公;
林业厅本身职责绿化管理、湿地管理、林业监督管理等等;
关于林业管理,申请树苗采购传统都是通过纸质的方式进行审核盖章,推进采购流程速度效率较低;
采用信息化系统进行林业厅的内部管理,能够极大的提高单位的办公效率;
随着社会发展,以及内部的人员变动,老一代的信息化系统并不能满足现有的办公需要,新一代信息化系统应运而生。
二、会议发布功能实现
1.功能介绍
会议OA的会议发布功能是指在会议管理系统中,用户可以使用该功能发布新的会议信息。以下是会议发布功能的主要介绍:
- 登录和权限管理:用户需要通过登录自己的账号来访问会议发布功能。系统会根据用户的权限设置来确定用户能否发布会议信息。
- 会议信息填写:在发布会议时,用户需要填写相关的会议信息,包括会议主题、主办单位、参会人员、会议时间、地点等等。根据具体的系统设置,可能还需要填写其他相关信息。
- 会议审核:会议发布后还需要更高层的人员进行审核,审核会议是否可以举行和会议室安排是否冲突等等。
2.功能分析
1.原型图以及数据表分析
由上可知,我们会议发布只需要插入title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark
这些字段,默认的会议信息状态为“1”,新建状态。
用户角色:1 管理员 2 发起者 3 审批者 4 参与者 5 会议室管理员
会议状态:0取消会议1新建2待审核3驳回4待开5进行中6开启投票7结束会议,默认值为1
2.查看官网搭建JSP页面
温馨提示:找个差不读的就可以了,最终都是需要修改的。
这时候我们发现Layui官网无法完成我们的会议发布的需求,因为参与人员和列席人员不可能只有一个人,需要一个复选框供我们选择多条数据。这时候我们的多功能下拉框就上场了。
只需要下载它的js与css将其导入我们的项目中即可使用
⚠如果有想法不想用插件的小编这里提供原生的方式,效果是差不多的。
效果展示:
源码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html "> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown-content.open { display: block; } .option-label { display: block; } .option-checkbox { margin-right: 8px; } </style> </head> <body> <div class="dropdown"> <input type="text" id="inputBox" placeholder="点击输入框展示下拉列表"> <div class="dropdown-content" id="dropdownContent"> <label class="option-label"><input type="checkbox" class="option-checkbox" value="选项1">选项1</label> <label class="option-label"><input type="checkbox" class="option-checkbox" value="选项2">选项2</label> <label class="option-label"><input type="checkbox" class="option-checkbox" value="选项3">选项3</label> </div> </div> <script> var inputBox = document.getElementById("inputBox"); var dropdownContent = document.getElementById("dropdownContent"); var optionCheckboxes = document.getElementsByClassName("option-checkbox"); var selectedItems = []; inputBox.addEventListener("click", function() { dropdownContent.classList.toggle("open"); }); for (var i = 0; i < optionCheckboxes.length; i++) { optionCheckboxes[i].addEventListener("change", function() { if (this.checked) { selectedItems.push(this.value); } else { var index = selectedItems.indexOf(this.value); if (index > -1) { selectedItems.splice(index, 1); } } updateSelectedItems(); }); } function updateSelectedItems() { var selectedItemsText = selectedItems.join(", "); inputBox.value = selectedItemsText; } </script> </body> </html>
3.功能实现
1.实体类
依据我们的数据库表进行建立实体
Meetinginfo
package com.xw.entity; import java.util.Date; /** * 会议发布 * * @author 索隆 * */ 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 int state; private String seatPic; private String remark; private String auditor; public Meetinginfo() { // TODO Auto-generated constructor stub } public Meetinginfo(long id, String title, String content, String canyuze, String liexize, String zhuchiren, String location, Date startTime, Date endTime, String fujian, int state, String seatPic, String remark, String auditor) { super(); this.id = id; this.title = title; this.content = content; this.canyuze = canyuze; this.liexize = liexize; this.zhuchiren = zhuchiren; this.location = location; this.startTime = startTime; this.endTime = endTime; this.fujian = fujian; this.state = state; this.seatPic = seatPic; this.remark = remark; 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 int getState() { return state; } public void setState(int 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 String getAuditor() { return auditor; } public void setAuditor(String auditor) { this.auditor = auditor; } @Override public String toString() { return "Meetingroominfo [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 + ", auditor=" + auditor + "]"; } }