OA项目之我的会议(查询&会议排座&送审)(一)

简介: OA项目之我的会议(查询&会议排座&送审)

思路:

  • 关键性会议SQL的编写
  • 后台实现
  • 前台实现

会议查询

MeetingInfoDao.java

//  通用的会议查询SQL语句,包含会议信息表数据,主持人姓名、审批人姓名、会议状态
  private String getSQL() {
    return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" + 
        ",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" + 
        ",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" + 
        ",a.state\r\n" + 
        ",(case a.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\r\n" + 
        ",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" + 
        "FROM t_oa_meeting_info a\r\n" + 
        "inner join t_oa_user b on a.zhuchiren = b.id\r\n" + 
        "left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
  }
//  我的会议
  public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
    String sql = getSQL();
    String title = info.getTitle();
    if(StringUtils.isNotBlank(title)) {
      sql += " and title like '%"+title+"%'";
    }
    //根据当前登陆用户ID作为主持人字段的条件
    sql+=" and zhuchiren="+info.getZhuchiren();
    //按照会议ID降序排序
    sql+=" order by a.id desc";
    System.out.println(sql);
    return super.executeQuery(sql, pageBean);
  }

MeetingInfoAction.java

// 我的会议
  public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
    try {
      PageBean pageBean = new PageBean();
      pageBean.setRequest(req);
      List<Map<String, Object>> infos = meetingInfoDao.myInfos(info, pageBean);
      ResponseUtil.writeJson(resp, R.ok(0, "我的会议查询成功!!!", pageBean.getTotal(), infos));
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "我的会议查询失败!!!"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }

myMeeting.jsp

<%@ 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">
<%@ include file="/common/head.jsp" %>
<title>Insert title here</title>
<style>
.layui-inline {
  margin-top: 20px;
}
.seatPicDiv {
  height: 180px;
}
.seatPic:active {
  height: 360px;
}
.layui-layer-page .layui-layer-content {
  /* 解决送审对话框中人员选择下拉框不能完全显示问题 */
  overflow: visible;!important
}
</style>
</head>
<body>
    <!-- 查询条件 -->
  <div class="layui-inline">
    <label class="layui-form-label">标题:</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="title" placeholder="会议标题" class="layui-input">
    </div>
  </div>
  <div class="layui-inline">
    <button class="layui-btn" id="queryMeetingInfo"><i class="layui-icon layui-icon-search"></i>查询</button>
  </div>
  <!-- 用户信息表格 -->
  <table class="layui-hide" id="meetingInfoTable" lay-filter="meetingInfoTable"></table>
  <!-- 使用了layui自定义语法,当会议不能送审或排座时将按钮显示为禁用状态 -->
  <script type="text/html" id="toolbar">
     {{# if(d.state==1 || d.state==3){ }}
       <button class="layui-btn layui-btn-sm" lay-event="seat">排座</button>
       <button class="layui-btn layui-btn-sm" lay-event="send">送审</button>
       {{# } else{ }}
     <button class="layui-btn layui-btn-sm layui-btn-disabled" lay-event="seat">排座</button>
       <button class="layui-btn layui-btn-sm layui-btn-disabled" lay-event="send">送审</button>
       {{# } }}
       <button class="layui-btn layui-btn-sm" lay-event="feedback">反馈</button>
  </script>
  <!-- 送审对话框内容 -->
  <div id="auditDiv" style="display:none;">
    <form style="margin:20px 15px;" class="layui-form layui-form-pane" id="sendAudit" lay-filter="sendAudit">
      <div class="layui-inline">
         <label class="layui-form-label">送审人</label>
         <div class="layui-input-inline">
            <select name="auditPerson" xm-select="auditPerson" xm-select-radio>
              <option value="" disabled="disabled">--请选择--</option>
            </select>
         </div>
         <div class="layui-input-inline">
           <!-- <button id="btn_auditor" class="layui-btn" lay-filter="sendAudit">送审</button> -->
           <button type="button" id="sendAudit" lay-submit lay-filter="sendAudit" class="layui-btn layui-btn-normal">送审</button>
         </div>
      </div>
    </form>
  </div>
</body>
</html>

myMeeting.js

<script>
let table=null;
let $ = null;
var row = null;
let formSelects = null;
let form = null;
let layer = null;
layui.use(['table','jquery','formSelects','form','layer'], function(){
  table = layui.table;
  $ = layui.jquery;
  formSelects = layui.formSelects;
  form = layui.form;
  layer = layui.layer;
  loadMeetingInfo();
  //查询我的会议信息
  $("#queryMeetingInfo").click(function() {
    loadMeetingInfo();
  });
  //对表格的功能按钮增加事件监听,如排座,送审,反馈按钮
  table.on('tool(meetingInfoTable)', function(obj) {
    //排座
    if(obj.event == 'seat') {
      //对于新建或驳回状态的会议可以执行排座
      if(obj.data.state == 1 || obj.data.state == 3) {
        openSeatPic(obj.data.id);
      } else {
        layer.msg("对于审核通过,结束,取消,进行中等状态的会议不能再执行排座")
      }
    }
    //送审
    if(obj.event == 'send') {
      if(obj.data.seatPic) {
        //对于新建或驳回状态的会议可以送审
        if(obj.data.state == 1 || obj.data.state == 3) {
          openSendAudit(obj.data.id);
        } else {
          layer.msg("对于审核通过,结束,取消,进行中等状态的会议不能执行送审");
        }
      } else {
        layer.msg("未进行排座不能送审");
      }
    }
    //查看反馈
    if(obj.event == 'feedback') {
      openFeedbackInfo(obj.data);
    }
  });
});
function openFeedbackInfo(data) {
  let ignore = [0,1,2,3];
  if(ignore.indexOf(data.state) >= 0) {
    layer.msg("对于新建、驳回、取消、待审状态下的会议,不用查看反馈");
    return;
  }
  debugger;
  layer.open({
        type: 2,                    //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
        title:'反馈详情',
        area: ['600px', '650px'],   //宽高
        skin: 'layui-layer-rim',    //样式类名
        content: ctx+'/jsp/meeting/meetingFeedback.jsp?meetingId=' + data.id,
        btn:['关闭'],
        yes:function(index,layero){
          layer.closeAll();
        }
    });
}
// 打开送审的对话框,执行送审
function openSendAudit(id) {
  let index = layer.open({
        type: 1,  //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
        title: '送审',
        area: ['660px', '200px'],   //宽高
        skin: 'layui-layer-rim',    //样式类名
        content: $("#auditDiv")     //送审对应的div
    });
  //初始化送审人员选择下拉列表的数据
  formSelects.data('auditPerson', 'server', {
      url: ctx + '/meetinginfoAction.action?methodName=listMeetingMember'
  });
  //添加送审按钮的监听事件,发送ajax请求执行送审
  form.on('submit(sendAudit)', function(data) {
    console.log(data);
    data.field["id"] = id;
    console.log(data);
    $.ajax({
      url: ctx + '/meetinginfoAction.action?methodName=sendAudit',
      data: data.field,
      type: 'post',
      dataType: 'json',
      success: function(resp) {
        layer.msg(resp.msg);
        layer.close(index);
        //送审成功,更新我的会议列表
        loadMeetingInfo();
      }
    })
  });
}
//会议排座
function openSeatPic(id) {
    row = null;
    layer.open({
         type: 2,  //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
         title: '会议排座',
         area: ['660px', '350px'],   //宽高
         skin: 'layui-layer-rim',    //样式类名
         content: ctx+'/jsp/meeting/seatPic.jsp?id='+id
    });
};
//查询会议信息
function loadMeetingInfo() {
  table.render({
      elem: '#meetingInfoTable',
      url: ctx + '/meetinginfoAction.action?methodName=listMeetingInfo',
      cols: [[
        {field:'id', width:60, title: 'ID'},
        {field:'title', width:180, title: '会议标题', sort: true},
        {field:'location', width:180, title: '会议地点', sort: true},
        {field:'startTime', width:160, title: '开始时间'},
        {field:'endTime', width:160, title: '结束时间'},
        {field:'meetingState', width:180, title: '会议状态'},
        //显示排座图片
        {field: 'seatPic', title: '会议排座', width: 180,
          templet:function(d){
            if(null==d.seatPic)
              return "尚未排座";
            else
              return "<img height='180px' src='"+d.seatPic+"'/>";
          }
      },
        {field: '', title: '操作', width: 250, toolbar:'#toolbar'}
      ]],
      page: true,
      request: {
        pageName: 'page',
        limitName: 'rows'
      },
      method: 'post',
      where: {
        title: $("#title").val()
      },
      loading: true,
    });
}
</script>


相关文章
|
30天前
|
SQL 存储 JavaScript
Layui之OA会议增删改查
Layui之OA会议增删改查
43 0
|
6月前
|
开发框架 JavaScript 前端开发
J2EE项目部署与发布(Windows版本)->会议OA单体项目Windows部署,spa前后端分离项目Windows部署
J2EE项目部署与发布(Windows版本)->会议OA单体项目Windows部署,spa前后端分离项目Windows部署
35 0
|
6月前
会议OA项目-其它页面->自定义组件应用,其它界面的布局
会议OA项目-其它页面->自定义组件应用,其它界面的布局
27 0
|
6月前
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
40 0
|
6月前
|
JSON 小程序 前端开发
小程序之自定义组件 结合案例(会议OA的会议/投票管理及个人中心的搭建)详解 (4)
小程序之自定义组件 结合案例(会议OA的会议/投票管理及个人中心的搭建)详解 (4)
|
6月前
|
JSON 小程序 前端开发
小程序之实例会议OA的首页 (3)
小程序之实例会议OA的首页 (3)
|
30天前
|
安全 网络安全 数据安全/隐私保护
OA办公系统选购注意的事项
随着数字化时代的到来,越来越多的企业开始选择使用OA办公系统来提高工作效率和管理效果。然而,在选购OA办公系统时,需要注意以下几点的事项,希望能对企业选购OA办公系统有所帮助。
42 4
|
30天前
|
UED
点晴OA办公系统如何实现业务表单的自定义设计
在点晴OA办公系统中,业务表单的自定义设计是一项重要的功能,它能够满足企业不同的业务需求,提高工作效率和协作能力。 随着企业的发展,不同的业务部门需要处理各种类型的表单,如人事表单、财务表单、项目表单等。如果这些表单无法根据实际需求进行自定义设计,就会导致工作效率低下、信息不准确、协作困难等问题。因此,实现业务表单的自定义设计是提高企业办公效率和协作能力的重要手段。
29 0
|
30天前
|
BI
四款OA办公系统快速提高企业效率
拥有合适企业的OA系统不仅可以实现办公自动化而且还能提高企业效率,今天盘点以下几家的OA办公系统。
35 0
|
30天前
|
数据安全/隐私保护
免费OA办公系统,提升工作效率与协作的智能选择
在当今快节奏的时代中,企业需要一种高效、智能的办公系统来提升工作效率,促进团队协作,并实现更好的信息管理。点晴OA办公系统是真正免费使用的,成为现在企业管理的重要工具之一。
37 2