• OA项目之会议通知（查询&是否参会&反馈详情）

    目录

    会议查询

    是否参会

    反馈详情

    讲解思路

    • 会议通知SQL语句分析

    • 反馈详情SQL语句分析

    • 后台代码编写

    • 前端代码编写

      效果预览

       

    会议查询

    MeetingFeedBack.java

    1. package com.zking.oa.model;
    2.  
    3. import org.lisen.mvc.util.AutoIncrement;
    4. import org.lisen.mvc.util.Key;
    5. import org.lisen.mvc.util.Table;
    6.  
    7. import com.zking.oa.util.CacheUtil;
    8. @Table("t_oa_meeting_feedback")
    9. public class MeetiingFeedback {
    10. 	
    11. 	@AutoIncrement
    12. 	@Key
    13. 	private Integer id;
    14. 	
    15. 	private Integer meetingId;
    16. 	
    17. 	private int personType;
    18. 	
    19. 	private int personId;
    20. 	
    21. 	private int result;
    22. 	
    23. 	private String reason;
    24.  
    25. 	
    26. 	
    27. 	public Integer getId() {
    28. 		return id;
    29. 	}
    30.  
    31. 	public void setId(Integer id) {
    32. 		this.id = id;
    33. 	}
    34.  
    35. 	public Integer getMeetingId() {
    36. 		return meetingId;
    37. 	}
    38.  
    39. 	public void setMeetingId(Integer meetingId) {
    40. 		this.meetingId = meetingId;
    41. 	}
    42.  
    43. 	public int getPersonType() {
    44. 		return personType;
    45. 	}
    46.  
    47. 	public void setPersonType(int personType) {
    48. 		this.personType = personType;
    49. 	}
    50.  
    51. 	public int getPersonId() {
    52. 		return personId;
    53. 	}
    54.  
    55. 	public void setPersonId(int personId) {
    56. 		this.personId = personId;
    57. 	}
    58.  
    59. 	public int getResult() {
    60. 		return result;
    61. 	}
    62.  
    63. 	public void setResult(int result) {
    64. 		this.result = result;
    65. 	}
    66.  
    67. 	public String getReason() {
    68. 		return reason;
    69. 	}
    70.  
    71. 	public void setReason(String reason) {
    72. 		this.reason = reason;
    73. 	}
    74.  
    75. 	
    76. 	public MeetiingFeedback(Integer id, Integer meetingId, int personType, int personId, int result, String reason) {
    77. 		super();
    78. 		this.id = id;
    79. 		this.meetingId = meetingId;
    80. 		this.personType = personType;
    81. 		this.personId = personId;
    82. 		this.result = result;
    83. 		this.reason = reason;
    84. 	}
    85. 	
    86.  
    87. 	public MeetiingFeedback() {
    88. 		super();
    89. 		// TODO Auto-generated constructor stub
    90. 	}
    91.  
    92. 	@Override
    93. 	public String toString() {
    94. 		return "MeetiingFeedback [id=" + id + ", meetingId=" + meetingId + ", personType=" + personType + ", personId="
    95. 				+ personId + ", result=" + result + ", reason=" + reason + "]";
    96. 	}
    97.  
    98. 	/**
    99. 	 * 获取参与人员类型描述，是参与者还是列席者
    100. 	 * @return
    101. 	 */
    102. 	public String getMeetingJoinTypeName() {
    103. 		return CacheUtil.getMeetingJoinType(this.personId);
    104. 	}
    105.  
    106. 	/**
    107. 	 * 获取参与者名称
    108. 	 * @return
    109. 	 */
    110. 	public String getPersonName() {
    111. 		return CacheUtil.getUser(this.getPersonId()).getName();
    112. 	}
    113. 	
    114. 	
    115. 	
    116.  
    117. }

     MeetingFeedBackDao.java

    1. /**
    2. 	 * 会议通知：查询出我（当前登陆用户）需要参与的会议及会议的反馈信息（参会、缺席以及未读）
    3. 	 * @param back
    4. 	 * @param pageBean
    5. 	 * @return
    6. 	 * @throws SQLException 
    7. 	 * @throws IllegalAccessException 
    8. 	 * @throws InstantiationException 
    9. 	 */
    10. @Override
    11. 	public List<MeetiingFeedback> listMeetingFeedback(MeetiingFeedback meetingFeedback, PageBean pageBean) {
    12. 		String sql = "SELECT t1.id,t1.meetingId, t1.personType, t1.personId, t1.result, t1.reason\r\n" + 
    13. 				"   FROM t_oa_meeting_feedback t1\r\n"  +
    14. 				"   WHERE 1=1 ";
    15. 		
    16. 		List<Object> param = new ArrayList<Object>();
    17. 		if(meetingFeedback != null && meetingFeedback.getResult()+"" != null) {
    18. 			sql += " and t1.result = ? ";
    19. 			param.add(meetingFeedback.getResult());
    20. 		}
    21. 		if(meetingFeedback != null && meetingFeedback.getMeetingId() != null) {
    22. 			sql += " and t1.meetingId = ? ";
    23. 			param.add(meetingFeedback.getMeetingId());
    24. 		}
    25. 		
    26. 		return DbTemplate.query(sql, param.toArray(), pageBean, MeetiingFeedback.class);
    27. 	}

    MeetingFeedBackAction.java

    1. /**
    2. 	 * 查询会议相关人员的反馈信息
    3. 	 * @param req
    4. 	 * @param resp
    5. 	 */
    6. 	public void listMeetingFeedback(HttpServletRequest req, HttpServletResponse resp) {
    7. 		
    8. 		try {
    9. 			PageBean pageBean = new PageBean();
    10. 			pageBean.setRequest(req);
    11. 			List<MeetiingFeedback> list = service.listMeetingFeedback(meetingFeedback, pageBean);
    12. 			CommonUtil.sendResponse(0, "会议反馈查询成功", pageBean.getTotal(), list, resp);
    13. 		} catch (Exception e) {
    14. 			e.printStackTrace();
    15. 			CommonUtil.sendResponse(0, "会议反馈查失败", resp);
    16. 		}
    17. 	}

    config.xml

    1. "1.0" encoding="UTF-8"?>
    2. config[
    3. 	config (action*)>
    4. 	action (forward*)>
    5. 	forward EMPTY>
    6. 	action
    7. 	  path CDATA #REQUIRED
    8. 	  type CDATA #REQUIRED
    9. 	>
    10. 	forward
    11. 	  name CDATA #REQUIRED
    12. 	  path CDATA #REQUIRED
    13. 	  redirect (true|false) "false"
    14. 	>
    15. ]>
    16. <config>
    17.  
    18. 	<action type="com.zking.oa.action.UserAction" path="/userAction"> action>
    19.  
    20. 	<action type="com.zking.oa.action.PermissionAction" path="/permissionAction"> action>
    21.  
    22. 	<action type="com.zking.oa.action.MeetinginfoAction" path="/meetinginfoAction"> action>
    23. 	
    24. 	<action type="com.zking.oa.action.MeetingAuditAction" path="/meetingAuditAction"> action>
    25. 	
    26. 	<action type="com.zking.oa.action.meetingFeedbackAction" path="/meetingFeedbackAction"> action>
    27. 	
    28. 	
    29. config>

    DateUtil.java

    1. package com.zking.oa.util;
    2.  
    3. import java.text.SimpleDateFormat;
    4. import java.util.Date;
    5.  
    6.  
    7. /**
    8.  * 日期帮助类
    9.  * @author lisensir
    10.  */
    11. public final class DateUtil {
    12. 	
    13. 	private DateUtil() {}
    14. 	
    15. 	private static final String FORMCAT_STR = "yyyy-MM-dd HH:mm:ss";
    16. 	
    17. 	
    18. 	/**
    19. 	 * 将日期格式化为yyyy-MM-dd HH:mm:ss格式的字符串
    20. 	 * @param date 需要格式化的日期
    21. 	 * @return
    22. 	 */
    23. 	public static String format(Date date) {
    24. 		
    25. 		if(date == null) return "";
    26. 		
    27. 		SimpleDateFormat sdf  = new SimpleDateFormat(FORMCAT_STR);
    28. 		
    29. 		return sdf.format(date);
    30. 	}
    31. 	
    32. 	
    33. 	/**
    34. 	 * 将日期格式化为yyyy-MM-dd HH:mm:ss格式的字符串
    35. 	 * @param date 需要格式化的日期
    36. 	 * @param format 指定的格式字符串
    37. 	 * @return
    38. 	 */
    39. 	public static String format(Date date, String format) {
    40. 		
    41. 		if(date == null) return "";
    42. 		
    43. 		SimpleDateFormat sdf  = new SimpleDateFormat(format);
    44. 		
    45. 		return sdf.format(date);
    46. 	}
    47. 	
    48. 	
    49. 	public static void main(String[] args) {
    50. 		Date date = new Date(System.currentTimeMillis());
    51. 		String s = format(date);
    52. 		System.out.println(s);
    53. 	}
    54.  
    55. }

    meetingNotify.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <!DOCTYPE html>
    4. <html>
    5. <head>
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. <title>Insert title here</title>
    8. <%@ include file="/common/head.jsp" %>
    9. <title>会议通知</title>
    10. <style>
    11. .layui-inline {
    12. 	margin-top: 20px;
    13. }
    14. .seatPicDiv {
    15. 	height: 180px;
    16. }
    17. .seatPic:active {
    18. 	height: 360px;
    19. }
    20.  
    21. .layui-layer-page .layui-layer-content {
    22. 	/* 解决送审对话框中人员选择下拉框不能完全显示问题 */
    23. 	overflow: visible;!important
    24. }
    25. </style>
    26.  
    27. </head>
    28. <body>
    29.  
    30.     <!-- 查询条件 -->
    31. 	<div class="layui-inline">
    32. 	  <label class="layui-form-label">标题：</label>
    33. 	  <div class="layui-input-block">
    34. 	    <input type="text" name="title" id="title" placeholder="会议标题" class="layui-input">
    35. 	  </div>
    36. 	</div>
    37. 	<div class="layui-inline">
    38. 	  <button class="layui-btn" id="queryMeetingInfo"><i class="layui-icon layui-icon-search"></i>查询</button>
    39. 	</div>
    40.   	
    41. 	<!-- 用户信息表格 -->
    42. 	<table class="layui-hide" id="meetingInfoTable" lay-filter="meetingInfoTable"></table>
    43. 	
    44. 	<!-- 使用了layui自定义语法，当会议不能送审或排座时将按钮显示为禁用状态 -->
    45. 	<script type="text/html" id="toolbar">
    46.        <button class="layui-btn layui-btn-sm" lay-event="feeback">反馈</button>
    47. 	</script>
    48. 	
    49. </body>
    50. </html>

    meetingNotify.js

    1. <script>
    2. let table=null;
    3. let $ = null;
    4. var row = null;
    5. let formSelects = null;
    6. let form = null;
    7. let layer = null;
    8.  
    9. layui.use(['table','jquery','formSelects','form','layer'], function(){
    10. 	table = layui.table;
    11. 	$ = layui.jquery;
    12. 	formSelects = layui.formSelects;
    13. 	form = layui.form;
    14. 	layer = layui.layer;
    15. 	
    16. 	loadMeetingInfo();
    17. 	
    18. 	//查询我的会议信息
    19. 	$("#queryMeetingInfo").click(function() {
    20. 		loadMeetingInfo();
    21. 	});
    22. 	
    23. 	//对表格的功能按钮增加事件监听，如排座，送审，反馈按钮
    24. 	table.on('tool(meetingInfoTable)', function(obj) {
    25. 		if(obj.event == 'feeback') {
    26. 			openFeebackDialog(obj.data);
    27. 		}
    28. 	});
    29.   
    30. });
    31.  
    32. var row = null;
    33. function openFeebackDialog(data) {
    34. 	row = data;
    35. 	layer.open({
    36.         type: 2,   //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    37.         title:'会议反馈',
    38.         area: ['654px', '420px'],   //宽高
    39.         skin: 'layui-layer-rim',    //样式类名
    40.         content: ctx + '/jsp/meeting/addFeedBack.jsp',  //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    41.         btn: ['确定', '关闭'],
    42.         yes: function(index,layero) {
    43.         	let formData = $(layero).find("iframe")[0].contentWindow.getFormData();
    44.         	console.log(formData);
    45.         	addMeetingFeedback(formData);
    46. 	    },
    47. 	    btn2: function(index,layero){
    48. 	    	
    49. 	    }
    50. 	});
    51. }
    52.  
    53.  
    54.  
    55. //查询会议信息
    56. function loadMeetingInfo() {
    57. 	
    58. 	table.render({
    59. 	    elem: '#meetingInfoTable',
    60. 	    url: ctx + '/meetinginfoAction.action?methodName=listRelatedMeetingInfoByUserId',
    61. 	    cols: [[
    62. 	      {field:'id', width:80, title: 'ID'},
    63. 	      {field:'title', width:180, title: '会议标题', sort: true},
    64. 	      {field:'location', width:180, title: '会议地点', sort: true},
    65. 	      {field:'startTime', width:180, title: '开始时间'},
    66. 	      {field:'endTime', width:180, title: '结束时间'},
    67. 	      {field:'meetingState', width:180, title: '会议状态'},
    68. 	      {fixed:'right', title: '操作', width:200, align:'left', unresize: true, toolbar:'#toolbar'}
    69. 	    ]],
    70. 	    page: true,
    71. 	    request: {
    72. 	    	pageName: 'page',
    73. 	    	limitName: 'rows'
    74. 	    },
    75. 	    method: 'post',
    76. 	    where: {
    77. 	    	title: $("#title").val()
    78. 	    },
    79. 	    loading: true,
    80. 	  });
    81. }
    82. </script>

    是否参会

    MeetingFeedBackDao.java

    1. /**
    2. 	 * 新增会议反馈
    3. 	 * @param back
    4. 	 */
    5. 	public void addMeetingFeedback(MeetiingFeedback back) {
    6. 		String sql="insert into t_oa_meeting_feedback(meetingId,personType,personId,result,reason) values(?,?,?,?,?)";
    7. 		super.executeUpdate(sql, new Object[] {
    8. 			back.getMeetingId(),
    9. 			back.getPersonType(),
    10. 			back.getPersonId(),
    11. 			back.getResult(),
    12. 			back.getReason()
    13. 		});
    14. 	}

    MeetingFeedBackAction.java

    1. /**
    2. 	 * 增加会议反馈
    3. 	 * @param req
    4. 	 * @param resp
    5. 	 */
    6. 	public void addMeetingFeedback(HttpServletRequest req, HttpServletResponse resp) {
    7. 		
    8. 		try {
    9. 			service.addMeetingFeedback(meetingFeedback);
    10. 			CommonUtil.sendResponse(0, "会议反馈成功", resp);
    11. 		} catch (Exception e) {
    12. 			e.printStackTrace();
    13. 			CommonUtil.sendResponse(0, "会议反馈失败", resp);
    14. 		}
    15. 	}

    meetingNotify.js

    1. <script>
    2. let table=null;
    3. let $ = null;
    4. var row = null;
    5. let formSelects = null;
    6. let form = null;
    7. let layer = null;
    8.  
    9. layui.use(['table','jquery','formSelects','form','layer'], function(){
    10. 	table = layui.table;
    11. 	$ = layui.jquery;
    12. 	formSelects = layui.formSelects;
    13. 	form = layui.form;
    14. 	layer = layui.layer;
    15. 	
    16. 	loadMeetingInfo();
    17. 	
    18. 	//查询我的会议信息
    19. 	$("#queryMeetingInfo").click(function() {
    20. 		loadMeetingInfo();
    21. 	});
    22. 	
    23. 	//对表格的功能按钮增加事件监听，如排座，送审，反馈按钮
    24. 	table.on('tool(meetingInfoTable)', function(obj) {
    25. 		if(obj.event == 'feeback') {
    26. 			openFeebackDialog(obj.data);
    27. 		}
    28. 	});
    29.   
    30. });
    31.  
    32. var row = null;
    33. function openFeebackDialog(data) {
    34. 	row = data;
    35. 	layer.open({
    36.         type: 2,   //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    37.         title:'会议反馈',
    38.         area: ['654px', '420px'],   //宽高
    39.         skin: 'layui-layer-rim',    //样式类名
    40.         content: ctx + '/jsp/meeting/addFeedBack.jsp',  //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
    41.         btn: ['确定', '关闭'],
    42.         yes: function(index,layero) {
    43.         	let formData = $(layero).find("iframe")[0].contentWindow.getFormData();
    44.         	console.log(formData);
    45.         	addMeetingFeedback(formData);
    46. 	    },
    47. 	    btn2: function(index,layero){
    48. 	    	
    49. 	    }
    50. 	});
    51. }
    52.  
    53. //增加会议反馈
    54. function addMeetingFeedback(param) {
    55. 	
    56. 	$.ajax({
    57. 		url: ctx + "/meetingFeedbackAction.action?methodName=addMeetingFeedback",
    58. 		data: param,
    59. 		type: 'post',
    60. 		dataType: 'json',
    61. 		success: function(resp) {
    62. 			layer.msg(resp.msg,{
    63. 				  icon: 1,
    64. 				  time: 2000 //2秒关闭（如果不配置，默认是3秒）
    65. 				},function() {
    66. 					layer.closeAll();
    67. 				});
    68. 		}
    69. 	});
    70. }
    71.  
    72. //查询会议信息
    73. function loadMeetingInfo() {
    74. 	
    75. 	table.render({
    76. 	    elem: '#meetingInfoTable',
    77. 	    url: ctx + '/meetinginfoAction.action?methodName=listRelatedMeetingInfoByUserId',
    78. 	    cols: [[
    79. 	      {field:'id', width:80, title: 'ID'},
    80. 	      {field:'title', width:180, title: '会议标题', sort: true},
    81. 	      {field:'location', width:180, title: '会议地点', sort: true},
    82. 	      {field:'startTime', width:180, title: '开始时间'},
    83. 	      {field:'endTime', width:180, title: '结束时间'},
    84. 	      {field:'meetingState', width:180, title: '会议状态'},
    85. 	      {fixed:'right', title: '操作', width:200, align:'left', unresize: true, toolbar:'#toolbar'}
    86. 	    ]],
    87. 	    page: true,
    88. 	    request: {
    89. 	    	pageName: 'page',
    90. 	    	limitName: 'rows'
    91. 	    },
    92. 	    method: 'post',
    93. 	    where: {
    94. 	    	title: $("#title").val()
    95. 	    },
    96. 	    loading: true,
    97. 	  });
    98. }
    99. </script>

    addFeedBack.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <!DOCTYPE html>
    4. <html>
    5. <head>
    6. <%@include file="/common/head.jsp" %>
    7. </head>
    8. <style>
    9. body{
    10. 	margin:5px;
    11. }
    12. </style>
    13.  
    14. <body>
    15. <div style="padding:10px;">
    16.  
    17. 	<!-- 反馈表单 -->
    18.     <form class="layui-form layui-form-pane" lay-filter="back">
    19.   		<input type="hidden" name="meetingId" id="meetingId"/>
    20.   		<input type="hidden" name="personId" value="${sessionScope.user.id }"/>
    21.   		
    22.         <div class="layui-form-item">
    23.             <label class="layui-form-label">人员类型</label>
    24.             <div class="layui-input-block">
    25.             	<!-- 
    26.                 <select id="personType" name="personType">
    27. 	                <option value="">请选择人员类型</option>
    28. 	                <option value="1">参会</option>
    29. 	                <option value="2">列席</option>
    30. 				</select> -->
    31. 				<input type="hidden" name="personType" id="personType"/>
    32. 				<input type="text" id="personTypeName" autocomplete="off" readonly="readonly" class="layui-input">
    33.             </div>
    34.         </div>
    35.         
    36.         <div class="layui-form-item" pane="">
    37.             <label class="layui-form-label">反馈结果</label>
    38.             <div class="layui-input-block" >
    39.             	<!--
    40.                 <select id="result" name="result">
    41. 	                <option value="">请选择反馈结果</option>
    42. 	                <option value="1">参加</option>
    43. 	                <option value="2">不参加</option>
    44. 				</select> -->
    45. 				<input type="radio" name="result" value="1" title="参加" checked>
    46.       			<input type="radio" name="result" value="2" title="不参加">
    47.             </div>
    48.         </div>
    49.         
    50.         <div class="layui-form-item layui-form-text">
    51. 		    <label class="layui-form-label">不参与会议的原因</label>
    52. 		    <div class="layui-input-block">
    53. 		      <textarea placeholder="请输入内容" name="reason" class="layui-textarea"></textarea>
    54. 		    </div>
    55. 		</div>
    56. 		
    57.     </form>
    58.     
    59. </div>
    60. </body>
    61. </html>

    addFeedBack.js  

    1. <script>
    2. let form = null;
    3. layui.use(['jquery', 'form'], function() {
    4. 	let $ = layui.$;
    5. 	form = layui.form;
    6. 	
    7. 	//获取会议记录信息
    8. 	let data = parent.row || {};
    9. 	
    10. 	//获取当前登录用户ID
    11. 	let currentUserId = '${sessionScope.user.id}';
    12. 	
    13. 	//设置会议ID
    14. 	$("#meetingId").val(data.id);
    15. 	
    16. 	//判断当前用户是存在与参与者中，如果是则设置人员类型为参与者
    17. 	let canyuze = data.canyuze.split(",");
    18. 	if(canyuze.indexOf(currentUserId) > -1) {
    19. 		$("#personTypeName").val("参与者");
    20. 		$("#personType").val("1");
    21. 	}
    22. 	
    23. 	//判断当前用户是存在与列席者中，如果是则设置人员类型为列席者
    24. 	let liexize = data.liexize.split(",");
    25. 	if(liexize.indexOf(currentUserId) > -1) {
    26. 		$("#personTypeName").val("列席者");
    27. 		$("#personType").val("2");
    28. 	}
    29. });
    30.  
    31. //获取表单数据，在父窗口（会议通知）会调用该方法获取表单数据用于提交
    32. function getFormData() {
    33. 	return form.val('back');
    34. }
    35. </script>

    反馈详情

    MeetingFeedBackDao.java

    1. 	/**
    2. 	 * 根据会议ID获取会议反馈详情信息
    3. 	 * @param back
    4. 	 * @return
    5. 	 */
    6. 	@SuppressWarnings("unchecked")
    7. 	public List<Map<String,Object>> queryBackPersons(MeetiingFeedback back){
    8. 		String sql="select " + 
    9. 				"f.result,GROUP_CONCAT(u.name) as name " + 
    10. 				"from " + 
    11. 				"t_oa_meeting_feedback f,t_oa_user u " + 
    12. 				"where f.personId=u.id and meetingId="+back.getMeetingId()+" group by f.result";
    13. 		System.out.println(sql);
    14. 		return super.executeQuery(sql, null, new convert<Map<String,Object>>() {
    15. 			@Override
    16. 			public List<Map<String, Object>> forEach(ResultSet rs) throws Exception {
    17. 				return CommonUtils.toList(rs);
    18. 			}
    19. 		});
    20. 	}

    MeetingFeedBackAction.java

    1. /**
    2. 	 * 查询会议相关人员的反馈信息
    3. 	 * @param req
    4. 	 * @param resp
    5. 	 */
    6. 	public void listMeetingFeedback(HttpServletRequest req, HttpServletResponse resp) {
    7. 		
    8. 		try {
    9. 			PageBean pageBean = new PageBean();
    10. 			pageBean.setRequest(req);
    11. 			List<MeetiingFeedback> list = service.listMeetingFeedback(meetingFeedback, pageBean);
    12. 			CommonUtil.sendResponse(0, "会议反馈查询成功", pageBean.getTotal(), list, resp);
    13. 		} catch (Exception e) {
    14. 			e.printStackTrace();
    15. 			CommonUtil.sendResponse(0, "会议反馈查失败", resp);
    16. 		}
    17. 	}

    myMeeting.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <!DOCTYPE html>
    4. <html>
    5. <head>
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. <%@ include file="/common/head.jsp" %>
    8. <title>Insert title here</title>
    9. <style>
    10. .layui-inline {
    11. 	margin-top: 20px;
    12. }
    13. .seatPicDiv {
    14. 	height: 180px;
    15. }
    16. .seatPic:active {
    17. 	height: 360px;
    18. }
    19.  
    20. .layui-layer-page .layui-layer-content {
    21. 	/* 解决送审对话框中人员选择下拉框不能完全显示问题 */
    22. 	overflow: visible;!important
    23. }
    24. </style>
    25.  
    26. </head>
    27. <body>
    28.  
    29.     <!-- 查询条件 -->
    30. 	<div class="layui-inline">
    31. 	  <label class="layui-form-label">标题：</label>
    32. 	  <div class="layui-input-block">
    33. 	    <input type="text" name="title" id="title" placeholder="会议标题" class="layui-input">
    34. 	  </div>
    35. 	</div>
    36. 	<div class="layui-inline">
    37. 	  <button class="layui-btn" id="queryMeetingInfo"><i class="layui-icon layui-icon-search"></i>查询</button>
    38. 	</div>
    39.   	
    40. 	<!-- 用户信息表格 -->
    41. 	<table class="layui-hide" id="meetingInfoTable" lay-filter="meetingInfoTable"></table>
    42. 	
    43. 	<!-- 使用了layui自定义语法，当会议不能送审或排座时将按钮显示为禁用状态 -->
    44. 	<script type="text/html" id="toolbar">
    45. 	   {{# if(d.state==1 || d.state==3){ }}
    46.        <button class="layui-btn layui-btn-sm" lay-event="seat">排座</button>
    47.        <button class="layui-btn layui-btn-sm" lay-event="send">送审</button>
    48.        {{# } else{ }}
    49. 	   <button class="layui-btn layui-btn-sm layui-btn-disabled" lay-event="seat">排座</button>
    50.        <button class="layui-btn layui-btn-sm layui-btn-disabled" lay-event="send">送审</button>
    51.        {{# } }}
    52.        <button class="layui-btn layui-btn-sm" lay-event="feedback">反馈</button>
    53. 	</script>
    54. 	
    55. 	<!-- 送审对话框内容 -->
    56. 	<div id="auditDiv" style="display:none;">
    57. 		<form style="margin:20px 15px;" class="layui-form layui-form-pane" id="sendAudit" lay-filter="sendAudit">
    58. 			<div class="layui-inline">
    59. 			   <label class="layui-form-label">送审人</label>
    60. 			   <div class="layui-input-inline">
    61. 			      <select name="auditPerson" xm-select="auditPerson" xm-select-radio>
    62. 			        <option value="" disabled="disabled">--请选择--</option>
    63.       			</select>
    64. 			   </div>
    65. 			   <div class="layui-input-inline">
    66. 			     <!-- <button id="btn_auditor" class="layui-btn" lay-filter="sendAudit">送审</button> -->
    67. 			     <button type="button" id="sendAudit" lay-submit lay-filter="sendAudit" class="layui-btn layui-btn-normal">送审</button>
    68. 			   </div>
    69. 			</div>
    70. 		</form>
    71. 	</div>
    72. 	
    73. </body>
    74. </html>

    myMeeting.js

    1. <script>
    2. let table=null;
    3. let $ = null;
    4. var row = null;
    5. let formSelects = null;
    6. let form = null;
    7. let layer = null;
    8.  
    9. layui.use(['table','jquery','formSelects','form','layer'], function(){
    10.   table = layui.table;
    11.   $ = layui.jquery;
    12.   formSelects = layui.formSelects;
    13.   form = layui.form;
    14.   layer = layui.layer;
    15.   
    16.   loadMeetingInfo();
    17.   
    18.   //查询我的会议信息
    19.   $("#queryMeetingInfo").click(function() {
    20. 	  
    21. 	  loadMeetingInfo();
    22.   });
    23.   
    24.   //对表格的功能按钮增加事件监听，如排座，送审，反馈按钮
    25.   table.on('tool(meetingInfoTable)', function(obj) {
    26. 	  
    27. 	  //排座
    28. 	  if(obj.event == 'seat') {
    29. 		  //对于新建或驳回状态的会议可以执行排座
    30. 		  if(obj.data.state == 1 || obj.data.state == 3) {
    31. 			  openSeatPic(obj.data.id);
    32. 		  } else {
    33. 			  layer.msg("对于审核通过，结束，取消，进行中等状态的会议不能再执行排座")
    34. 		  }
    35. 	  }
    36. 	  
    37. 	  //送审
    38. 	  if(obj.event == 'send') {
    39. 		  if(obj.data.seatPic) {
    40. 			  //对于新建或驳回状态的会议可以送审
    41. 			  if(obj.data.state == 1 || obj.data.state == 3) {
    42. 				  openSendAudit(obj.data.id);
    43. 			  } else {
    44. 				  layer.msg("对于审核通过，结束，取消，进行中等状态的会议不能执行送审");
    45. 			  }
    46. 		  } else {
    47. 			  layer.msg("未进行排座不能送审");
    48. 		  }
    49. 	  }
    50. 	  
    51. 	  //查看反馈
    52. 	  if(obj.event == 'feedback') {
    53. 		  openFeedbackInfo(obj.data);
    54. 	  }
    55. 	  
    56.   });
    57.   
    58. });
    59.  
    60.  
    61. function openFeedbackInfo(data) {
    62. 	
    63. 	let ignore = [0,1,2,3];
    64. 	if(ignore.indexOf(data.state) >= 0) {
    65. 		layer.msg("对于新建、驳回、取消、待审状态下的会议，不用查看反馈");
    66. 		return;
    67. 	}
    68. 	
    69. 	debugger;
    70. 	
    71. 	layer.open({
    72.         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    73.         title:'反馈详情',
    74.         area: ['600px', '650px'],   //宽高
    75.         skin: 'layui-layer-rim',    //样式类名
    76.         content: ctx+'/jsp/meeting/meetingFeedback.jsp?meetingId=' + data.id,
    77.         btn:['关闭'],
    78.         yes:function(index,layero){
    79.         	layer.closeAll();
    80.         }
    81.     });
    82. }
    83.  
    84. // 打开送审的对话框，执行送审
    85. function openSendAudit(id) {
    86. 	
    87. 	let index = layer.open({
    88.         type: 1,  //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    89.         title: '送审',
    90.         area: ['660px', '200px'],   //宽高
    91.         skin: 'layui-layer-rim',    //样式类名
    92.         content: $("#auditDiv")     //送审对应的div
    93.    	});
    94. 	
    95. 	//初始化送审人员选择下拉列表的数据
    96. 	formSelects.data('auditPerson', 'server', {
    97. 	    url: ctx + '/meetinginfoAction.action?methodName=listMeetingMember'
    98. 	});
    99. 	
    100. 	//添加送审按钮的监听事件，发送ajax请求执行送审
    101. 	form.on('submit(sendAudit)', function(data) {
    102. 		console.log(data);
    103. 		data.field["id"] = id;
    104. 		console.log(data);
    105. 		
    106. 		$.ajax({
    107. 			url: ctx + '/meetinginfoAction.action?methodName=sendAudit',
    108. 			data: data.field,
    109. 			type: 'post',
    110. 			dataType: 'json',
    111. 			success: function(resp) {
    112. 				layer.msg(resp.msg);
    113. 				layer.close(index);
    114. 				//送审成功，更新我的会议列表
    115. 				loadMeetingInfo();
    116. 			}
    117. 		})
    118. 	});
    119. }
    120.  
    121.  
    122. //会议排座
    123. function openSeatPic(id) {
    124. 	  row = null;
    125. 	  layer.open({
    126. 	       type: 2,  //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    127. 	       title: '会议排座',
    128. 	       area: ['660px', '350px'],   //宽高
    129. 	       skin: 'layui-layer-rim',    //样式类名
    130. 	       content: ctx+'/jsp/meeting/seatPic.jsp?id='+id
    131. 	  });
    132. };
    133.  
    134. //查询会议信息
    135. function loadMeetingInfo() {
    136. 	
    137. 	
    138.  
    139. 	
    140. 	table.render({
    141. 	    elem: '#meetingInfoTable',
    142. 	    url: ctx + '/meetinginfoAction.action?methodName=listMeetingInfo',
    143. 	    cols: [[
    144. 	      {field:'id', width:60, title: 'ID'},
    145. 	      {field:'title', width:180, title: '会议标题', sort: true},
    146. 	      {field:'location', width:180, title: '会议地点', sort: true},
    147. 	      {field:'startTime', width:160, title: '开始时间'},
    148. 	      {field:'endTime', width:160, title: '结束时间'},
    149. 	      {field:'meetingState', width:180, title: '会议状态'},
    150. 	      
    151. 	      //显示排座图片
    152. 	      {field: 'seatPic', title: '会议排座', width: 180,
    153. 		    	templet:function(d){
    154. 		    		if(null==d.seatPic)
    155. 		    			return "尚未排座";
    156. 		    		else
    157. 		    			return "";
    158. 		    	}
    159. 		  },
    160. 		  
    161. 	      {field: '', title: '操作', width: 250, toolbar:'#toolbar'}
    162. 	    ]],
    163. 	    page: true,
    164. 	    request: {
    165. 	    	pageName: 'page',
    166. 	    	limitName: 'rows'
    167. 	    },
    168. 	    method: 'post',
    169. 	    where: {
    170. 	    	title: $("#title").val()
    171. 	    },
    172. 	    loading: true,
    173. 	  });
    174. }
    175. </script>

  • 相关阅读:
    理论问题与工程问题的差异在哪里？
    助力企业前行——Scala&Spark最佳实践课程
    自然语言处理NLP程序包（NLTK/spaCy）使用总结
    堆--堆排序
    001、Nvidia Jetson Nano Developer KIT（b01）-系统与登录
    中班防暴力安全教案
    关于新版的Maven创建Maven项目的时候只有Maven Archetype,而找不到Maven的这个问题
    网络安全（大厂面试真题集）
    3.1、前端异步编程（超详细手写实现Promise；实现all、race、allSettled、any；async/await的使用）
    经典中的经典之字符串
  • 原文地址：https://blog.csdn.net/qq_73126462/article/details/132594922