我的会议（会议通知）-阿里云开发者社区

前言:

我们在实现了发布会议功能，我的会议功能的基础上，继续来实现会议通知的功能。

4.1实现的特色功能：

当有会议要参加时，通过查询会议通知可以知道会议的内容，以及当前会议状态（未读）

4.2思路：

不同的用户登录显示的通知，在我的会议中可以选择是否参会，可以查看当前会议状态。

当前id获取当前的会议信息sql：

SELECT * FROM t_oa_meeting_info  where FIND_IN_SET(2,CONCAT(canyuze,',',zhuchiren,',',liexize))

4.3演示效果：

4.4功能实现：

dao层:

public List<Map<String, Object>> queryMeetingFeedBackByUserId(MeetingFeedBack mfback, PageBean pageBean)
      throws InstantiationException, IllegalAccessException, SQLException {
    String sql = "select t1.*,ifnull(f.result,-1) result from \r\n" + "(select * from t_oa_meeting_info where "
        + "find_in_set('" + mfback.getPersonId() + "',concat(canyuze,',',liexize,',',zhuchiren))) t1 \r\n"
        + "left join t_oa_meeting_feedback f on " + "t1.id=f.meetingId and personId=" + mfback.getPersonId()
        + " where f.result is null ";
    sql += " order by t1.id desc";
    return super.executeQuery(sql, pageBean);
  }

meetingNotify.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">
<script type="text/javascript" src="static/js/meeting/meetingNotify.js"></script>
</head>
<title>会议通知</title>
<style>
body{
  margin:15px;
}
 .layui-table-cell {height: inherit;}
 .layui-layer-page .layui-layer-content {  overflow: visible !important;}
</style>
<body>
<!-- 搜索栏 -->
<div class="layui-form-item" style="margin:15px 0px;">
  <div class="layui-inline">
    <label class="layui-form-label">会议标题</label>
    <div class="layui-input-inline">
      <input type="hidden" id="personId" value="${user.id }"/>
      <input type="text" id="title" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-inline">
    <button id="btn_search" type="button" class="layui-btn"><i class="layui-icon layui-icon-search"></i> 查询</button>
  </div>
</div>
<!-- 数据表格 -->
<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px"></table>
<script type="text/html" id="tbar">
  {{# if(d.result==-1){ }}
  <a class="layui-btn layui-btn-xs" lay-event="edit">是否参会</a>
  {{# } }}
</script>
</body>
</html>

meetingNotify.js

let layer,table,$,form,test;
var row;
layui.use(['layer','table','jquery','form','test'],function(){
  layer=layui.layer,
  table=layui.table,
  form=layui.form,
  test=layui.test,
  $=layui.jquery;
  initTable();
  //查询事件
  $('#btn_search').click(function(){
    query();
  });
});
//初始化数据表格  我的通知
function initTable(){
  table.render({          //执行渲染
        elem: '#tb',   //指定原始表格元素选择器（推荐id选择器）
        height: 400,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '会议编号', width: 90},
            {field: 'title', title: '会议标题', width: 120},
            {field: 'location', title: '会议地点', width: 140},
            {field: 'startTime', title: '开始时间', width: 120,
              templet:function(d){
                return test.toDate(new Date(d.startTime));
              }
            },
            {field: 'endTime', title: '结束时间', width: 120,
              templet:function(d){
                return test.toDate(new Date(d.endTime));
              }
            },
            {field: 'result', title: '反馈状态', width: 120,
              templet: function(d){
                    if(d.result==1)
                      return "参会";
                    else if(d.result==2)
                      return "缺席";
                    else
                      return "未读";
                }
            },
            {field: '', title: '操作', width: 200,toolbar:'#tbar'},
        ]]
   });
}
//点击查询
function query(){
  table.reload('tb', {
        url: 'feedBack.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
          'methodName':'queryMeetingFeedBackByUserId',
          'personId':$('#personId').val(),
          'title':$('#title').val(),
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        },
        done: function (res, curr, count) {
          console.log(res);
        }
   });
  //工具条事件
  table.on('tool(tb)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    row = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    console.log(row);
    if(layEvent === 'edit'){ //是否参会
     openLayer(row.id);
    } else {
    }
  });
}
function openLayer(id){
    layer.open({
        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        title: '会议反馈',                   //对话框标题
        area: ['660px', '400px'],   //宽高
        skin: 'layui-layer-rim',    //样式类名
        content: 'jsp/meeting/addFeedBack.jsp?id='+id,                //弹出内容。可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
        btn:['会议反馈','关闭'],
        yes:function(index,layero){
          //layer.msg('保存');
          //调用子页面中提供的getData方法，快速获取子页面的form表单数据
            let data= $(layero).find("iframe")[0].contentWindow.getData();
            addMeetingFeedBack(data);
        },
        btn2:function(){
          layer.closeAll();
        }
    });
}
// 对会议通知进行 参会/不参会的反馈
function addMeetingFeedBack(params){
  params['methodName']="add";
  console.log(params);
  $.post('feedBack.action',params,function(rs){
    if(rs.success){
      layer.closeAll();
      query();
    }else{
      layer.msg(rs.msg,{icon:5},function(){});
    }
  },'json');
}

是否参会的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">
<script type="text/javascript" src="static/js/meeting/addFeedBack.js"></script>
</head>
<title>会议通知中的会议反馈</title>
<style>
body{
  margin:5px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="back">
      <!-- <div class="layui-form-item">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="meeting">立即提交</button>
        <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div> -->
      <input type="hidden" name="meetingId" value="${param.id }"/>
      <input type="hidden" name="personId" value="${sessionScope.user.id }"/>
         <div class="layui-form-item">
            <label class="layui-form-label">人员类型</label>
            <div class="layui-input-block">
                <select id="personType" name="personType">
                <option value="">请选择人员类型</option>
                <option value="1">参会</option>
                <option value="2">列席</option>
      </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">反馈结果</label>
            <div class="layui-input-block">
                <select id="result" name="result">
                <option value="">请选择反馈结果</option>
                <option value="1">参加</option>
                <option value="2">不参加</option>
      </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">不参与会议的原因</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" name="reason" class="layui-textarea"></textarea>
        </div>
    </div>
    </form>
</div>
</body>
</html>

是否参会的js

let form,$;
layui.use(['form','jquery'],function(){
  form=layui.form,
  $=layui.jquery;
});
function getData(){
  return form.val('back');
}

我的会议（会议通知）

前言:

4.1实现的特色功能：

4.2思路：

4.3演示效果：

4.4功能实现：

dao层:

meetingNotify.jsp(会议通知的页面)

meetingNotify.js

是否参会的jsp

是否参会的js

热门文章

最新文章

相关电子书