2026/8/25 21:18:58
FEATURED · 精选文章 
1. 引言在 OA 办公系统的日常使用中会议申请是最为高频的流程之一。传统的会议申请往往存在两个痛点一是申请页面字段冗长、操作路径深用户体验不佳二是会议审批通过后参会人无法及时获知会议信息经常出现“会议开了人没到齐”的尴尬局面。本文将围绕点狮OA的会议申请模块分享一次完整的升级实践一方面对申请页面进行交互与字段优化另一方面新增“通知参会人”功能让会议信息在审批通过后自动触达每一位参会人。文中会附带关键代码片段方便读者直接参考落地。相关链接 官网http://www.dianshixinxi.com/ 演示站http://admin.dianshixinxi.com:90/源码地址 Giteehttps://gitee.com/shandong-dianshi-information/L-ONE.git GitCodehttps://gitcode.com/Glory_Lion/pointlion-cloud点狮OA增加通知参会人功能2. 需求分析与整体设计2.1 现状问题梳理在动手改造之前我们先梳理一下原会议申请模块存在的典型问题申请页面字段过多必填项与选填项区分不明显用户填写成本高会议时间、地点、参会人等信息分散在不同区块缺乏合理的分组与引导审批通过后没有任何通知机制参会人需要人工口头转达或事后翻看记录缺少对参会人范围的校验容易误选或漏选。2.2 升级目标本次升级聚焦三个核心目标页面优化重构申请表单按“基本信息—时间地点—参会人员”三步分组减少认知负担通知参会人审批通过后自动向参会人发送站内消息与邮件通知可配置与可追溯通知模板支持后台配置发送记录可查询。2.3 技术选型点狮OA后端基于 Java 技术栈本次改造涉及的主要组件如下模块技术方案后端框架Spring Boot持久层MyBatis-Plus工作流引擎Activiti审批流消息通知站内信 邮件JavaMailSender前端Vue 2 Element UI3. 数据库表结构设计为了支撑“通知参会人”功能我们需要在原有会议申请表的基础上新增一张参会人通知记录表。3.1 会议申请表已有表增加字段在原有oa_meeting表上增加两个字段用于标记通知状态ALTERTABLEoa_meetingADDCOLUMNnotify_statusTINYINT(1)DEFAULT0COMMENT通知状态0-未通知 1-已通知,ADDCOLUMNnotify_timeDATETIMEDEFAULTNULLCOMMENT通知发送时间;3.2 参会人通知记录表新增CREATETABLEoa_meeting_notify_log(idBIGINT(20)NOTNULLAUTO_INCREMENTCOMMENT主键,meeting_idBIGINT(20)NOTNULLCOMMENT会议ID,user_idBIGINT(20)NOTNULLCOMMENT参会人用户ID,notify_typeVARCHAR(20)NOTNULLCOMMENT通知方式SITE-站内信 EMAIL-邮件,statusTINYINT(1)DEFAULT0COMMENT发送状态0-失败 1-成功,error_msgVARCHAR(500)DEFAULTNULLCOMMENT失败原因,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMPCOMMENT创建时间,PRIMARYKEY(id),KEYidx_meeting_id(meeting_id))ENGINEInnoDBDEFAULTCHARSETutf8mb4COMMENT会议参会人通知记录表;4. 申请页面优化4.1 表单分组与校验优化前端使用 Element UI 的el-steps组件将表单分为三步配合el-form的分步校验显著降低填写压力。template div classmeeting-apply el-steps :activeactiveStep finish-statussuccess align-center el-step title基本信息 / el-step title时间地点 / el-step title参会人员 / /el-steps el-form refmeetingForm :modelform :rulesrules label-width100px !-- 第一步基本信息 -- div v-showactiveStep 0 el-form-item label会议主题 proptitle el-input v-modelform.title placeholder请输入会议主题 maxlength50 show-word-limit / /el-form-item el-form-item label会议内容 propcontent el-input typetextarea v-modelform.content :rows4 placeholder请输入会议议程或讨论内容 / /el-form-item /div !-- 第二步时间地点 -- div v-showactiveStep 1 el-form-item label开始时间 propstartTime el-date-picker v-modelform.startTime typedatetime placeholder选择开始时间 / /el-form-item el-form-item label结束时间 propendTime el-date-picker v-modelform.endTime typedatetime placeholder选择结束时间 / /el-form-item el-form-item label会议地点 proplocation el-input v-modelform.location placeholder请输入会议室或线上会议链接 / /el-form-item /div !-- 第三步参会人员 -- div v-showactiveStep 2 el-form-item label参会人员 propparticipants el-select v-modelform.participants multiple filterable placeholder请选择参会人 stylewidth: 100% el-option v-foru in userList :keyu.id :labelu.realName :valueu.id / /el-select /el-form-item el-form-item label通知参会人 el-switch v-modelform.notifyParticipants active-text审批通过后自动通知 / /el-form-item /div div classstep-actions el-button v-ifactiveStep 0 clickactiveStep--上一步/el-button el-button v-ifactiveStep 2 typeprimary clicknextStep下一步/el-button el-button v-ifactiveStep 2 typeprimary clicksubmitForm提交申请/el-button /div /el-form /div /template4.2 分步校验逻辑methods:{nextStep(){conststepFields[[title,content],[startTime,endTime,location],[participants]];this.$refs.meetingForm.validateField(stepFields[this.activeStep],(valid){if(valid){this.activeStep;}});},submitForm(){this.$refs.meetingForm.validate((valid){if(valid){// 提交申请this.$http.post(/api/meeting/apply,this.form).then((){this.$message.success(会议申请已提交等待审批);this.$router.push(/meeting/my-apply);});}});}}5. 后端接口改造5.1 会议申请接口后端在接收申请时除了保存会议基本信息外还需要保存参会人关联关系并记录是否需要通知。PostMapping(/api/meeting/apply)ApiOperation(提交会议申请)publicResultVoidapply(RequestBodyValidMeetingApplyDTOdto){// 1. 保存会议主表MeetingmeetingnewMeeting();BeanUtils.copyProperties(dto,meeting);meeting.setStatus(MeetingStatus.PENDING);meeting.setNotifyStatus(NotifyStatus.NOT_NOTIFIED);meetingService.save(meeting);// 2. 保存参会人关联ListMeetingParticipantparticipantsdto.getParticipantIds().stream().map(userId-{MeetingParticipantpnewMeetingParticipant();p.setMeetingId(meeting.getId());p.setUserId(userId);returnp;}).collect(Collectors.toList());meetingParticipantService.saveBatch(participants);// 3. 启动审批流程workflowService.startMeetingApproval(meeting.getId(),dto.getApplicantId());returnResult.success();}5.2 审批通过后的通知触发审批通过后在 Activiti 流程监听器中触发通知逻辑。这里采用 Spring 事件机制解耦避免流程引擎与通知逻辑强耦合。ComponentpublicclassMeetingApprovalListenerimplementsActivitiEventListener{AutowiredprivateApplicationEventPublishereventPublisher;Overridepublicvoidnotify(ActivitiEventevent){if(ActivitiEventType.PROCESS_COMPLETED.equals(event.getType())){StringprocessInstanceIdevent.getProcessInstanceId();LongmeetingIdworkflowService.getMeetingIdByProcessInstance(processInstanceId);// 发布会议审批通过事件eventPublisher.publishEvent(newMeetingApprovedEvent(this,meetingId));}}}6. 通知参会人功能实现6.1 通知服务设计通知服务采用策略模式支持站内信与邮件两种渠道后续可平滑扩展短信、企业微信等渠道。publicinterfaceNotifyStrategy{NotifyTypegetType();voidsend(Meetingmeeting,LonguserId);}ComponentpublicclassSiteMessageStrategyimplementsNotifyStrategy{AutowiredprivateSiteMessageServicesiteMessageService;OverridepublicNotifyTypegetType(){returnNotifyType.SITE;}Overridepublicvoidsend(Meetingmeeting,LonguserId){StringcontentString.format(您有一场新会议【%s】时间%s ~ %s地点%s,meeting.getTitle(),meeting.getStartTime(),meeting.getEndTime(),meeting.getLocation());siteMessageService.send(userId,会议通知,content);}}ComponentpublicclassEmailNotifyStrategyimplementsNotifyStrategy{AutowiredprivateJavaMailSendermailSender;Value(${spring.mail.username})privateStringfrom;OverridepublicNotifyTypegetType(){returnNotifyType.EMAIL;}Overridepublicvoidsend(Meetingmeeting,LonguserId){// 查询用户邮箱StringemailuserService.getEmailByUserId(userId);SimpleMailMessagemessagenewSimpleMailMessage();message.setFrom(from);message.setTo(email);message.setSubject(【会议通知】meeting.getTitle());message.setText(buildEmailContent(meeting));mailSender.send(message);}}6.2 通知执行与日志记录审批通过事件监听器负责编排通知流程并记录发送日志保证可追溯。ComponentpublicclassMeetingApprovedEventListener{AutowiredprivateMeetingServicemeetingService;AutowiredprivateMeetingParticipantServiceparticipantService;AutowiredprivateNotifyStrategyFactorystrategyFactory;AutowiredprivateMeetingNotifyLogServicenotifyLogService;EventListenerAsyncpublicvoidonMeetingApproved(MeetingApprovedEventevent){LongmeetingIdevent.getMeetingId();MeetingmeetingmeetingService.getById(meetingId);// 查询所有参会人ListMeetingParticipantparticipantsparticipantService.listByMeetingId(meetingId);for(MeetingParticipantparticipant:participants){// 站内信通知sendWithLog(meeting,participant.getUserId(),NotifyType.SITE);// 邮件通知sendWithLog(meeting,participant.getUserId(),NotifyType.EMAIL);}// 更新通知状态meeting.setNotifyStatus(NotifyStatus.NOTIFIED);meeting.setNotifyTime(newDate());meetingService.updateById(meeting);}privatevoidsendWithLog(Meetingmeeting,LonguserId,NotifyTypetype){MeetingNotifyLoglognewMeetingNotifyLog();log.setMeetingId(meeting.getId());log.setUserId(userId);log.setNotifyType(type.name());try{NotifyStrategystrategystrategyFactory.getStrategy(type);strategy.send(meeting,userId);log.setStatus(1);}catch(Exceptione){log.setStatus(0);log.setErrorMsg(e.getMessage());}notifyLogService.save(log);}}6.3 通知模板可配置为了让通知内容可维护我们将模板存入数据库支持后台配置。这里给出一个简单的模板渲染工具类ComponentpublicclassNotifyTemplateRenderer{AutowiredprivateNotifyTemplateServicetemplateService;publicStringrender(StringtemplateCode,Meetingmeeting){StringtemplatetemplateService.getByCode(templateCode).getContent();MapString,ObjectvarsnewHashMap();vars.put(title,meeting.getTitle());vars.put(startTime,meeting.getStartTime());vars.put(endTime,meeting.getEndTime());vars.put(location,meeting.getLocation());vars.put(content,meeting.getContent());for(Map.EntryString,Objectentry:vars.entrySet()){templatetemplate.replace(${entry.getKey()},String.valueOf(entry.getValue()));}returntemplate;}}7. 效果与总结7.1 升级效果本次升级上线后主要带来了三方面改善申请效率提升三步分步表单配合即时校验申请填写时间平均缩短约 40%通知及时触达审批通过后参会人自动收到站内信与邮件会议到场率明显提升过程可追溯通知发送记录完整落库出现漏发时可快速定位原因并手动补发。7.2 后续优化方向支持参会人“接受/拒绝/待定”状态反馈让发起人实时掌握出席情况对接企业微信/钉钉机器人扩展通知渠道在通知中附带日历附件.ics方便参会人一键加入日程。8. 结语会议申请看似是一个基础功能但做好页面体验与通知闭环能实实在在提升团队的协作效率。本文从需求分析、表结构设计、页面优化到通知功能实现完整走了一遍点狮OA会议申请模块的升级路径。希望其中的设计思路与代码片段能为你自己的 OA 系统改造提供参考。
点狮OA会议申请模块升级：申请页面优化与参会人通知功能实战
1. 引言在 OA 办公系统的日常使用中会议申请是最为高频的流程之一。传统的会议申请往往存在两个痛点一是申请页面字段冗长、操作路径深用户体验不佳二是会议审批通过后参会人无法及时获知会议信息经常出现“会议开了人没到齐”的尴尬局面。本文将围绕点狮OA的会议申请模块分享一次完整的升级实践一方面对申请页面进行交互与字段优化另一方面新增“通知参会人”功能让会议信息在审批通过后自动触达每一位参会人。文中会附带关键代码片段方便读者直接参考落地。相关链接 官网http://www.dianshixinxi.com/ 演示站http://admin.dianshixinxi.com:90/源码地址 Giteehttps://gitee.com/shandong-dianshi-information/L-ONE.git GitCodehttps://gitcode.com/Glory_Lion/pointlion-cloud点狮OA增加通知参会人功能2. 需求分析与整体设计2.1 现状问题梳理在动手改造之前我们先梳理一下原会议申请模块存在的典型问题申请页面字段过多必填项与选填项区分不明显用户填写成本高会议时间、地点、参会人等信息分散在不同区块缺乏合理的分组与引导审批通过后没有任何通知机制参会人需要人工口头转达或事后翻看记录缺少对参会人范围的校验容易误选或漏选。2.2 升级目标本次升级聚焦三个核心目标页面优化重构申请表单按“基本信息—时间地点—参会人员”三步分组减少认知负担通知参会人审批通过后自动向参会人发送站内消息与邮件通知可配置与可追溯通知模板支持后台配置发送记录可查询。2.3 技术选型点狮OA后端基于 Java 技术栈本次改造涉及的主要组件如下模块技术方案后端框架Spring Boot持久层MyBatis-Plus工作流引擎Activiti审批流消息通知站内信 邮件JavaMailSender前端Vue 2 Element UI3. 数据库表结构设计为了支撑“通知参会人”功能我们需要在原有会议申请表的基础上新增一张参会人通知记录表。3.1 会议申请表已有表增加字段在原有oa_meeting表上增加两个字段用于标记通知状态ALTERTABLEoa_meetingADDCOLUMNnotify_statusTINYINT(1)DEFAULT0COMMENT通知状态0-未通知 1-已通知,ADDCOLUMNnotify_timeDATETIMEDEFAULTNULLCOMMENT通知发送时间;3.2 参会人通知记录表新增CREATETABLEoa_meeting_notify_log(idBIGINT(20)NOTNULLAUTO_INCREMENTCOMMENT主键,meeting_idBIGINT(20)NOTNULLCOMMENT会议ID,user_idBIGINT(20)NOTNULLCOMMENT参会人用户ID,notify_typeVARCHAR(20)NOTNULLCOMMENT通知方式SITE-站内信 EMAIL-邮件,statusTINYINT(1)DEFAULT0COMMENT发送状态0-失败 1-成功,error_msgVARCHAR(500)DEFAULTNULLCOMMENT失败原因,create_timeDATETIMEDEFAULTCURRENT_TIMESTAMPCOMMENT创建时间,PRIMARYKEY(id),KEYidx_meeting_id(meeting_id))ENGINEInnoDBDEFAULTCHARSETutf8mb4COMMENT会议参会人通知记录表;4. 申请页面优化4.1 表单分组与校验优化前端使用 Element UI 的el-steps组件将表单分为三步配合el-form的分步校验显著降低填写压力。template div classmeeting-apply el-steps :activeactiveStep finish-statussuccess align-center el-step title基本信息 / el-step title时间地点 / el-step title参会人员 / /el-steps el-form refmeetingForm :modelform :rulesrules label-width100px !-- 第一步基本信息 -- div v-showactiveStep 0 el-form-item label会议主题 proptitle el-input v-modelform.title placeholder请输入会议主题 maxlength50 show-word-limit / /el-form-item el-form-item label会议内容 propcontent el-input typetextarea v-modelform.content :rows4 placeholder请输入会议议程或讨论内容 / /el-form-item /div !-- 第二步时间地点 -- div v-showactiveStep 1 el-form-item label开始时间 propstartTime el-date-picker v-modelform.startTime typedatetime placeholder选择开始时间 / /el-form-item el-form-item label结束时间 propendTime el-date-picker v-modelform.endTime typedatetime placeholder选择结束时间 / /el-form-item el-form-item label会议地点 proplocation el-input v-modelform.location placeholder请输入会议室或线上会议链接 / /el-form-item /div !-- 第三步参会人员 -- div v-showactiveStep 2 el-form-item label参会人员 propparticipants el-select v-modelform.participants multiple filterable placeholder请选择参会人 stylewidth: 100% el-option v-foru in userList :keyu.id :labelu.realName :valueu.id / /el-select /el-form-item el-form-item label通知参会人 el-switch v-modelform.notifyParticipants active-text审批通过后自动通知 / /el-form-item /div div classstep-actions el-button v-ifactiveStep 0 clickactiveStep--上一步/el-button el-button v-ifactiveStep 2 typeprimary clicknextStep下一步/el-button el-button v-ifactiveStep 2 typeprimary clicksubmitForm提交申请/el-button /div /el-form /div /template4.2 分步校验逻辑methods:{nextStep(){conststepFields[[title,content],[startTime,endTime,location],[participants]];this.$refs.meetingForm.validateField(stepFields[this.activeStep],(valid){if(valid){this.activeStep;}});},submitForm(){this.$refs.meetingForm.validate((valid){if(valid){// 提交申请this.$http.post(/api/meeting/apply,this.form).then((){this.$message.success(会议申请已提交等待审批);this.$router.push(/meeting/my-apply);});}});}}5. 后端接口改造5.1 会议申请接口后端在接收申请时除了保存会议基本信息外还需要保存参会人关联关系并记录是否需要通知。PostMapping(/api/meeting/apply)ApiOperation(提交会议申请)publicResultVoidapply(RequestBodyValidMeetingApplyDTOdto){// 1. 保存会议主表MeetingmeetingnewMeeting();BeanUtils.copyProperties(dto,meeting);meeting.setStatus(MeetingStatus.PENDING);meeting.setNotifyStatus(NotifyStatus.NOT_NOTIFIED);meetingService.save(meeting);// 2. 保存参会人关联ListMeetingParticipantparticipantsdto.getParticipantIds().stream().map(userId-{MeetingParticipantpnewMeetingParticipant();p.setMeetingId(meeting.getId());p.setUserId(userId);returnp;}).collect(Collectors.toList());meetingParticipantService.saveBatch(participants);// 3. 启动审批流程workflowService.startMeetingApproval(meeting.getId(),dto.getApplicantId());returnResult.success();}5.2 审批通过后的通知触发审批通过后在 Activiti 流程监听器中触发通知逻辑。这里采用 Spring 事件机制解耦避免流程引擎与通知逻辑强耦合。ComponentpublicclassMeetingApprovalListenerimplementsActivitiEventListener{AutowiredprivateApplicationEventPublishereventPublisher;Overridepublicvoidnotify(ActivitiEventevent){if(ActivitiEventType.PROCESS_COMPLETED.equals(event.getType())){StringprocessInstanceIdevent.getProcessInstanceId();LongmeetingIdworkflowService.getMeetingIdByProcessInstance(processInstanceId);// 发布会议审批通过事件eventPublisher.publishEvent(newMeetingApprovedEvent(this,meetingId));}}}6. 通知参会人功能实现6.1 通知服务设计通知服务采用策略模式支持站内信与邮件两种渠道后续可平滑扩展短信、企业微信等渠道。publicinterfaceNotifyStrategy{NotifyTypegetType();voidsend(Meetingmeeting,LonguserId);}ComponentpublicclassSiteMessageStrategyimplementsNotifyStrategy{AutowiredprivateSiteMessageServicesiteMessageService;OverridepublicNotifyTypegetType(){returnNotifyType.SITE;}Overridepublicvoidsend(Meetingmeeting,LonguserId){StringcontentString.format(您有一场新会议【%s】时间%s ~ %s地点%s,meeting.getTitle(),meeting.getStartTime(),meeting.getEndTime(),meeting.getLocation());siteMessageService.send(userId,会议通知,content);}}ComponentpublicclassEmailNotifyStrategyimplementsNotifyStrategy{AutowiredprivateJavaMailSendermailSender;Value(${spring.mail.username})privateStringfrom;OverridepublicNotifyTypegetType(){returnNotifyType.EMAIL;}Overridepublicvoidsend(Meetingmeeting,LonguserId){// 查询用户邮箱StringemailuserService.getEmailByUserId(userId);SimpleMailMessagemessagenewSimpleMailMessage();message.setFrom(from);message.setTo(email);message.setSubject(【会议通知】meeting.getTitle());message.setText(buildEmailContent(meeting));mailSender.send(message);}}6.2 通知执行与日志记录审批通过事件监听器负责编排通知流程并记录发送日志保证可追溯。ComponentpublicclassMeetingApprovedEventListener{AutowiredprivateMeetingServicemeetingService;AutowiredprivateMeetingParticipantServiceparticipantService;AutowiredprivateNotifyStrategyFactorystrategyFactory;AutowiredprivateMeetingNotifyLogServicenotifyLogService;EventListenerAsyncpublicvoidonMeetingApproved(MeetingApprovedEventevent){LongmeetingIdevent.getMeetingId();MeetingmeetingmeetingService.getById(meetingId);// 查询所有参会人ListMeetingParticipantparticipantsparticipantService.listByMeetingId(meetingId);for(MeetingParticipantparticipant:participants){// 站内信通知sendWithLog(meeting,participant.getUserId(),NotifyType.SITE);// 邮件通知sendWithLog(meeting,participant.getUserId(),NotifyType.EMAIL);}// 更新通知状态meeting.setNotifyStatus(NotifyStatus.NOTIFIED);meeting.setNotifyTime(newDate());meetingService.updateById(meeting);}privatevoidsendWithLog(Meetingmeeting,LonguserId,NotifyTypetype){MeetingNotifyLoglognewMeetingNotifyLog();log.setMeetingId(meeting.getId());log.setUserId(userId);log.setNotifyType(type.name());try{NotifyStrategystrategystrategyFactory.getStrategy(type);strategy.send(meeting,userId);log.setStatus(1);}catch(Exceptione){log.setStatus(0);log.setErrorMsg(e.getMessage());}notifyLogService.save(log);}}6.3 通知模板可配置为了让通知内容可维护我们将模板存入数据库支持后台配置。这里给出一个简单的模板渲染工具类ComponentpublicclassNotifyTemplateRenderer{AutowiredprivateNotifyTemplateServicetemplateService;publicStringrender(StringtemplateCode,Meetingmeeting){StringtemplatetemplateService.getByCode(templateCode).getContent();MapString,ObjectvarsnewHashMap();vars.put(title,meeting.getTitle());vars.put(startTime,meeting.getStartTime());vars.put(endTime,meeting.getEndTime());vars.put(location,meeting.getLocation());vars.put(content,meeting.getContent());for(Map.EntryString,Objectentry:vars.entrySet()){templatetemplate.replace(${entry.getKey()},String.valueOf(entry.getValue()));}returntemplate;}}7. 效果与总结7.1 升级效果本次升级上线后主要带来了三方面改善申请效率提升三步分步表单配合即时校验申请填写时间平均缩短约 40%通知及时触达审批通过后参会人自动收到站内信与邮件会议到场率明显提升过程可追溯通知发送记录完整落库出现漏发时可快速定位原因并手动补发。7.2 后续优化方向支持参会人“接受/拒绝/待定”状态反馈让发起人实时掌握出席情况对接企业微信/钉钉机器人扩展通知渠道在通知中附带日历附件.ics方便参会人一键加入日程。8. 结语会议申请看似是一个基础功能但做好页面体验与通知闭环能实实在在提升团队的协作效率。本文从需求分析、表结构设计、页面优化到通知功能实现完整走了一遍点狮OA会议申请模块的升级路径。希望其中的设计思路与代码片段能为你自己的 OA 系统改造提供参考。 
![洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表](http://pic.xiahunao.cn/yaotu/洛谷 P7912：[CSP-J 2021 T4] 小熊的果篮 ← 双向链表)
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
