02.OA项目之左侧菜单&动态选项卡

目录

  1.左侧导航

  参考地址：http://layui.org.cn/doc/element/nav.html

  2.导入数据表及无限级分类

  1) 数据导入（此步骤在第一次文章已完成）    2) 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）

  3.实现左侧菜单后台代码接口

  4.前端左侧菜单绑定 

  5.Tab选项卡

   Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

     Tab分类

     参考地址：http://layui.org.cn/doc/element/tab.html

     1）Tab简约风格

     2）Tab卡片风格       

     3）响应式Tab        当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。

     4）带删除的Tab

        与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

       

                          5）动态Tab

     1）根据模块名称判断是否已经存在tab选项卡          $(".layui-tab-title li[lay-id='" + name + "']").length > 0

     2）切换到指定选项卡     element.tabChange('tabs', name);

     3）动态添加选项卡

     // 新增一个Tab项     element.tabAdd('tabs', {    title : name,    content : tabContent,    id : name     })     // 切换刷新     element.tabChange('tabs', name);

     注：tabs为tab选项卡的lay-filter=""     

附录一：什么是lay-filter事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器

附录二：iframe

注：在index.jsp首页页面中请将更改成：不然会导致使用iframe动态打开页面的高度无法100%填充父容器；

附录三：如何隐藏tab第一个选项卡的删除图标

附录四：首页tab选项卡及body样式处理.layui-tab>.layui-tab-content{    padding:0px;}body,html{    padding:0px;    margin:0px;    overflow:hidden;}

一.会议发布

二.动态选项卡&左侧菜单

三.效果展示

左侧菜单

 动态选项卡

 会议发布界面

---

  1.左侧导航

  导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。
  面包屑结构简单，支持自定义分隔符。
  
  注：千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，
      如呼出二级菜单等，需借助element模块才能使用。

  参考地址：http://layui.org.cn/doc/element/nav.html

  2.导入数据表及无限级分类

  1) 数据导入（此步骤在第一次文章已完成）
  
  2) 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）

  3.实现左侧菜单后台代码接口

  4.前端左侧菜单绑定 

  5.Tab选项卡

   Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

     Tab分类

     参考地址：http://layui.org.cn/doc/element/tab.html

     1）Tab简约风格

       

      

        
• 网站设置

        
• 用户管理

        
• 权限分配

        
• 商品管理

        
• 订单管理

      

      

    

 

     2）Tab卡片风格

       

      

        
• 网站设置

        
• 用户管理

        
• 权限分配

        
• 商品管理

        
• 订单管理

      

      

        

1

        

2

        

3

        

4

        

5

        

6

      

    

     3）响应式Tab
    
    当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。

     4）带删除的Tab

        与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

       

      

        
• 网站设置

        
• 用户基本管理

        
• 权限分配

        
• 全部历史商品管理文字长一点试试

        
• 订单管理

      

      

        

1

        

2

        

3

        

4

        

5

        

6

      

    

     
     5）动态Tab

     1）根据模块名称判断是否已经存在tab选项卡
     
     $(".layui-tab-title li[lay-id='" + name + "']").length > 0

     2）切换到指定选项卡
     element.tabChange('tabs', name);

     3）动态添加选项卡

     // 新增一个Tab项
     element.tabAdd('tabs', {
    title : name,
    content : tabContent,
    id : name
     })
     // 切换刷新
     element.tabChange('tabs', name);

     注：tabs为tab选项卡的lay-filter=""
     

附录一：什么是lay-filter
事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器

附录二：iframe

注：在index.jsp首页页面中请将

更改成：

不然会导致使用iframe动态打开页面的高度无法100%填充父容器；

附录三：如何隐藏tab第一个选项卡的删除图标

附录四：首页tab选项卡及body样式处理
.layui-tab>.layui-tab-content{
    padding:0px;
}
body,html{
    padding:0px;
    margin:0px;
    overflow:hidden;
}

一.会议发布

初始化会议发布页面

addMeeting.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>





<%@include file="/common/head.jsp" %>





	

	
		

		    会议标题
		    

		      
		    
		
		
		

		    会议内容
		    

		      
		    
	  	
	  	
	  	

		    参与者
		    

		      	
			        --请选择--
      			
		    
	  	
	  	
	  	

		    列席者
		    

		      	
			        --请选择--
			        
      			
		    
	  	
	  	
	  	

		    主持人员
		    

		      
		   	  
		    
		
		
		

		    会议地点
		    

		      
		    
		
		
		

	        会议时间
	        

	        	
	        
	    
	    
	    

		    备注
		    

		      
		    
	  	
	    
	    

		   保存
		   重置
		
	  	
	

addMeeting.js

会议发布功能实现

IMeetingInfoDao.java

package com.zking.oa.dao;

import java.util.List;
import java.util.Map;

import org.lisen.mvc.util.PageBean;

import com.zking.oa.model.MeetingMember;
import com.zking.oa.model.Meetinginfo;
import com.zking.oa.model.User;

public interface IMeetinginfoDao {

	List listMeetingMember();

	/**
	 * 增加
	 * @param meetinginfo
	 */
	void addMeetinginfo(Meetinginfo meetinginfo);

	/**
	 * 获取我的会议信息
	 * @param meetingInfo
	 * @param pageBean
	 * @return
	 */
	List> listMeetingInfo(Meetinginfo meetingInfo, PageBean pageBean);

	
	List listMeetingMembersById(Integer id);

	void updateSeatPicById(Meetinginfo meetingInfo);

	/**
	 * 更新送审信息
	 * @param meetingInfo
	 */
	void sendAudit(Meetinginfo meetingInfo);

	/**
	 * 更新审核记录到指定装
	 * @param meetingInfo
	 */
	void updateMeetingState(Meetinginfo meetingInfo);

	/**
	 * 查询与当前登录用户相关的状态为待开的会议信息
	 * @param uid
	 * @param pageBean
	 * @return
	 */
	List listRelatedMeetingInfoByUserId(Integer uid,String title,Integer state, PageBean pageBean);

	/**
	 * 历史会议
	 * @param uid
	 * @param title
	 * @param state
	 * @param pageBean
	 * @return
	 */
	List listRelatedMeetingInfoByUserId2(Integer uid, String title, Integer state, PageBean pageBean);




}

MeetingInfoDao.java

package com.zking.oa.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.lisen.mvc.util.DbTemplate;
import org.lisen.mvc.util.PageBean;

import com.mysql.cj.util.StringUtils;
import com.zking.oa.model.MeetingMember;
import com.zking.oa.model.Meetinginfo;
import com.zking.oa.model.User;
import com.zking.oa.util.BaseDao;
import com.zking.oa.util.CommonUtils;


@SuppressWarnings("unchecked")
public class MeetinginfoDao extends BaseDao implements IMeetinginfoDao {

	@Override
	public List listMeetingMember(){
		
		String sql="select name,id from t_oa_user";
	
		return DbTemplate.query(sql, MeetingMember.class);
	}
	
	@Override
	public void addMeetinginfo(Meetinginfo meetinginfo) {
		DbTemplate.save(meetinginfo);
	}
	
	/**
	 * 封装sql：作为我的会议、我的审批、会议通知、代开会议、
	 * 历史会议级所有会议的基础SQL语句
	 * @return
	 */
	private String getSql() {
		return "SELECT \r\n" + 
				"m.id,m.title,m.content,m.canyuze,m.zhuchiren,m.liexize,u.name\r\n" + 
				",m.location,\r\n" + 
				"DATE_FORMAT(m.startTime,'%Y-%m-%d %H:%i:%s') as startTime,\r\n" + 
				"DATE_FORMAT(m.endTime,'%Y-%m-%d %H:%i:%s') as endTime,\r\n" + 
				"(case m.state\r\n" + 
				"	when 0 then '取消会议'\r\n" + 
				"	when 1 then '新建'\r\n" + 
				"	when 2 then '待审核'\r\n" + 
				"	when 3 then '驳回'\r\n" + 
				"	when 4 then '待开'\r\n" + 
				"	when 5 then '进行中'\r\n" + 
				"	when 6 then '开启投票'\r\n" + 
				"	ELSE '结束会议' end\r\n" + 
				") as meetingState,m.state,m.seatPic,m.remark,m.auditor,\r\n" + 
				"u2.name as auditName\r\n" + 
				"from \r\n" + 
				"t_oa_meeting_info m inner join t_oa_user u\r\n" + 
				"on m.zhuchiren=u.id\r\n" + 
				"LEFT JOIN t_oa_user u2\r\n" + 
				"on u2.id=m.auditor where 1=1 ";
	}
	
	@Override
	public List> listMeetingInfo(Meetinginfo meetingInfo, PageBean pageBean) {
		
		String sql=this.getSql();
		//按照会议标题模糊查询
		if(!StringUtils.isNullOrEmpty(meetingInfo.getTitle())) 
			sql+=" and title like '%"+meetingInfo.getTitle()+"%'";
		//按照 当前登录ID作为主持人字段条件
		sql+=" and zhuchiren="+meetingInfo.getZhuchiren();
		//sql +=" and state="+meetingInfo.getState();
		//按照会议ID降序排序
		sql+=" order by m.id desc";
		return super.executeQuery(sql, pageBean, new convert>() {
			@Override
			public List> forEach(ResultSet rs) throws SQLException, Exception {
				return CommonUtils.toList(rs);
			}
		});
	}
	
	@Override
	public void updateMeetingState(Meetinginfo meetingInfo) {
		String sql = "update t_oa_meeting_info set state = ? where id = ?";
		DbTemplate.update(sql, new Object[] {meetingInfo.getState(), meetingInfo.getId()});
	}
	
	@Override
public List listRelatedMeetingInfoByUserId(Integer uid, String title,Integer state,PageBean pageBean) {
		
		String sql = "SELECT t1.id,t1.auditor,t1.canyuze,t1.liexize,t1.content,DATE_FORMAT(t1.endTime,'%Y-%m-%d %H:%i:%s') as endTime,t1.fujian,\r\n" + 
				"       t1.location,t1.seatPic,DATE_FORMAT(t1.startTime,'%Y-%m-%d %H:%i:%s') as startTime,"
				+ "(case t1.state "
				+ " when 0 then '取消会议' "
				+ " when 1 then '新建' "
				+ " when 2 then '待审核'"
				+ " when 3 then '驳回'"
				+ " when 4 then '待开'"
				+ " when 5 then '进行中' "
				+ " when 6 then '开启投票' "
				+ " ELSE '结束会议' end) as meetingState,"
				+ "t1.title,t1.zhuchiren\r\n" + 
				"   FROM t_oa_meeting_info t1 INNER JOIN \r\n" + 
				"	(SELECT a.id,\r\n" + 
				"	        SUBSTRING_INDEX(SUBSTRING_INDEX( a.canyuze, ',', b.help_topic_id + 1 ), ',',- 1) AS userid \r\n" + 
				"	   FROM t_oa_meeting_info AS a\r\n" + 
				"		JOIN mysql.help_topic AS b ON b.help_topic_id < ( LENGTH( a.canyuze ) - LENGTH( REPLACE ( a.canyuze, ',', '' ) ) + 1 )\r\n" + 
				"          UNION ALL\r\n" + 
				"	  SELECT a.id,\r\n" + 
				"		 SUBSTRING_INDEX(SUBSTRING_INDEX( a.liexize, ',', b.help_topic_id + 1 ), ',',- 1) AS userid \r\n" + 
				"	     FROM t_oa_meeting_info AS a\r\n" + 
				"		  JOIN mysql.help_topic AS b ON b.help_topic_id < ( LENGTH( a.liexize ) - LENGTH( REPLACE ( a.liexize, ',', '' ) ) + 1 )\r\n" + 
				"         ) tmp ON t1.id = tmp.id\r\n" + 
				"WHERE tmp.userid = "+uid+" and t1.state ="+state;
		
		if(title!=null&&!"".equals(title)) {
			sql+=" and  t1.title like '"+title+"%'";
		}
		
		return super.executeQuery(sql, pageBean, new convert>() {
			@Override
			public List> forEach(ResultSet rs) throws SQLException, Exception {
				return CommonUtils.toList(rs);
			}
		});
	}
	
	@Override
	public List listRelatedMeetingInfoByUserId2(Integer uid, String title,Integer state,PageBean pageBean) {
		
		String sql = "SELECT t1.id,t1.auditor,t1.canyuze,t1.liexize,t1.content,DATE_FORMAT(t1.endTime,'%Y-%m-%d %H:%i:%s') as endTime,t1.fujian,\r\n" + 
				"       t1.location,t1.seatPic,DATE_FORMAT(t1.startTime,'%Y-%m-%d %H:%i:%s') as startTime,(case t1.state  when 0 then '取消会议'  when 1 then '新建'  when 2 then '待审核' when 3 then '驳回' when 4 then '待开' when 5 then '进行中'  when 6 then '开启投票'  ELSE '结束会议' end) as meetingState,t1.title,t1.zhuchiren\r\n" + 
				"   FROM t_oa_meeting_info t1\r\n" + 
				"WHERE t1.state=7 and FIND_IN_SET("+uid+",concat(t1.zhuchiren,',',t1.canyuze,',',t1.liexize))";
		
		if(title!=null&&!"".equals(title)) {
			sql+=" and  t1.title like '"+title+"%'";
		}
		
		return super.executeQuery(sql, pageBean, new convert>() {
			@Override
			public List> forEach(ResultSet rs) throws SQLException, Exception {
				return CommonUtils.toList(rs);
			}
		});
	}

	@Override
	public List listMeetingMembersById(Integer id) {
		String sql = "SELECT id,name,loginName,pwd,rid "
				+ "FROM t_oa_user id "
				+ "WHERE FIND_IN_SET(id, (SELECT CONCAT(t.canyuze,',',t.liexize,',',t.zhuchiren) FROM t_oa_meeting_info t WHERE t.id = ?))";
		
		return DbTemplate.query(sql, new Object[] {id}, User.class);
	}
	
	@Override
	public void updateSeatPicById(Meetinginfo meetingInfo) {
		String sql = "UPDATE t_oa_meeting_info SET seatPic = ? WHERE id = ? ";
		DbTemplate.update(sql, new Object[] {meetingInfo.getSeatPic(), meetingInfo.getId()});
	}
	
	@Override
	public void sendAudit(Meetinginfo meetingInfo) {
		String sql = "update t_oa_meeting_info set state = 2, auditor=? where id = ?";
		DbTemplate.update(sql, new Object[] {meetingInfo.getAuditor(), meetingInfo.getId()});
	}
	
	
	
	
	
	
	public static void main(String[] args) {
		MeetinginfoDao md = new MeetinginfoDao();
		Meetinginfo info = new Meetinginfo();
//		info.setZhuchiren("1");
//		List> listMeetingInfo = md.listMeetingInfo(info, new PageBean());
//		System.out.println(listMeetingInfo);
		//List listRelatedMeetingInfoByUserId = md.listRelatedMeetingInfoByUserId(1, 4, new PageBean());
		//System.out.println(listRelatedMeetingInfoByUserId);
	
}
}

MeetingInfoAction.java

package com.zking.oa.action;

import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;

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

import org.apache.commons.beanutils.ConvertUtils;
import org.apache.commons.beanutils.converters.DateConverter;
import org.lisen.mvc.framework.AbstractDispatchAction;
import org.lisen.mvc.framework.ModelDrive;
import org.lisen.mvc.util.PageBean;

import com.zking.oa.dao.MeetinginfoDao;
import com.zking.oa.model.MeetingMember;
import com.zking.oa.model.Meetinginfo;
import com.zking.oa.model.User;
import com.zking.oa.service.IMeetinginfoService;
import com.zking.oa.service.MeetinginfoService;
import com.zking.oa.util.Base64ImageUtils;
import com.zking.oa.util.CommonUtil;



public class MeetinginfoAction extends AbstractDispatchAction implements ModelDrive{

	private Meetinginfo meetinginfo = new Meetinginfo();
	
	private IMeetinginfoService service = new MeetinginfoService();

		
	@Override
	public Object getModel() {
		//日期转换器
		DateConverter converter = new DateConverter();
		converter.setPattern("yyyy-MM-dd HH:mm:ss");
		ConvertUtils.register(converter, Date.class);
		return meetinginfo;
	}
	
	
	public void listMeetingMember(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List list = service.listMeetingMember();
			CommonUtil.sendResponse(0, "成功", list,resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "获取会议参与人员失败", resp);
		}
	
	}
	
	public void addMeetinginfo(HttpServletRequest req,HttpServletResponse resp) {
		try {
			 service.addMeetinginfo(meetinginfo);
			CommonUtil.sendResponse(0, "会议发布成功", resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "会议发布失败", resp);
		}
	
	}

	/**
	 * 获取以当前用户为主持人的会议信息，即我的会议功能
	 * @param req
	 * @param resp
	 */
	public void listMeetingInfo(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			
			//从session中获取当前用户放入条件
			User user = (User)req.getSession().getAttribute("user");
			meetinginfo.setZhuchiren(user.getId().toString());
			
			List> list = service.listMeetingInfo(meetinginfo, pageBean);
			CommonUtil.sendResponse(0, "会议信息查询成功", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "会议信息查询失败",resp);
		}
		
	}
	
	
	/**
	 * 查询与当前登录用户相关的状态为待开的会议信息
	 * @return
	 */
	public void listRelatedMeetingInfoByUserId(HttpServletRequest req, HttpServletResponse resp) {
		MeetinginfoDao ma=new MeetinginfoDao();
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			
			//从session中获取当前用户，并且只查询待审记录
			User user = (User)req.getSession().getAttribute("user");
			List list = ma.listRelatedMeetingInfoByUserId(user.getId(),meetinginfo.getTitle(),4, pageBean);
			CommonUtil.sendResponse(0, "会议信息查询成功", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "会议信息查询失败",resp);
		}
		
	}
	
	
	/**
	 * 历史会议
	 * @return
	 */
	public void listRelatedMeetingInfoNotify(HttpServletRequest req, HttpServletResponse resp) {
		MeetinginfoDao ma=new MeetinginfoDao();
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			
			//从session中获取当前用户，并且只查询待审记录
			User user = (User)req.getSession().getAttribute("user");
			List list = ma.listRelatedMeetingInfoByUserId2(user.getId(),meetinginfo.getTitle(),7, pageBean);
			CommonUtil.sendResponse(0, "历史会议查询成功", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "历史会议查询失败",resp);
		}
		
	}
	
	/**
	 * 通过会议的Id获取与本次会议相关的参与人员信息
	 * @param req
	 * @param resp
	 */
	public void listMeetingMemberById(HttpServletRequest req, HttpServletResponse resp) {
		
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List list = service.listMeetingMembersById(meetinginfo.getId().intValue());
			CommonUtil.sendResponse(0, "会议信息查询成功", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "会议信息查询失败",resp);
		}
		
	}
	
	/**
	 * 保存排座图片到服务器的指定目录，并更新相关会议信息的排座图片字段
	 * @param req
	 * @param resp
	 */
	public void addArrangeSeat(HttpServletRequest req, HttpServletResponse resp) {
		
		try {
			String fName = UUID.randomUUID().toString().replace("-", "").concat(".jpg");
			String path = "D:\\temp\\images\\seatPic\\uploads\\" + fName;
			String base64Image = meetinginfo.getSeatPic().replace("data:image/png;base64,", "");
			//生成图片
			Base64ImageUtils.GenerateImage(base64Image, path);
			
			//更新会议信息表中的排座信息，需要设置tomcat的设置增加一个扩展web模块
			meetinginfo.setSeatPic("/uploads/"+fName);
			service.updateSeatPicById(meetinginfo);
			CommonUtil.sendResponse(0, "排座成功", resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "排座失败", resp);
		}
		
	}
	
	
	/**
	 * 我的审核，会议的审核人员是当前登录的用户，且会议的状态为待审
	 * @param req
	 * @param resp
	 */
	public void listMyAuditMeetingInfo(HttpServletRequest req, HttpServletResponse resp) {
		
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			
			//从session中获取当前用户，并且只查询待审记录
			User user = (User)req.getSession().getAttribute("user");
			meetinginfo.setAuditor(user.getId().toString());
			meetinginfo.setState(2);
			
			List> list = service.listMeetingInfo(meetinginfo, pageBean);
			CommonUtil.sendResponse(0, "会议信息查询成功", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "会议信息查询失败",resp);
		}
		
	}
	
	/**
	 * 会议送审，能够送审的前提是该会议已经排座，否则不能送审，此外
	 * 对于审核通过，结束，取消，进行中等状态的会议不能执行送审
	 * @param rep
	 * @param resp
	 */
	public void sendAudit(HttpServletRequest rep, HttpServletResponse resp) {
		
		try {
			service.sendAudit(meetinginfo);
			CommonUtil.sendResponse(0, "送审成功", resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtil.sendResponse(-1, "送审失败", resp);
		}
		
	}
	
	
	

}

二.动态选项卡&左侧菜单

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



  <%@include file="/common/head.jsp" %>




  

    
会议OA管理系统
    
    

      
      

        
      
    
    
    

      

        
          
          ${sessionScope.user.name }
        
        

          
个人中心
          
系统设置
          
安全退出
        
      
      

        
          
        
      
    
  
  
  

    

      
      

      
    
  
  
  

    

	  

	    
首页
	  
	  

	    

	    	
	    	
	    
	  
	
  
  
  

    
           Copyright @ 2008-2022 www.zking.com
  

三.效果展示

左侧菜单

 动态选项卡

 会议发布界面