企业协同办公系统(OA)-【短消息】模块开发详解
前端:vue3.js/html 后端:golang
1. 功能需求说明
在企业协同办公系统(OA)中,短消息功能模块作为核心通信组件,承担着连接用户、驱动协作的关键角色。其核心价值在于构建了一套高效、安全、精准的消息传递与任务提醒机制,不仅支撑了系统内用户间的实时交互,更通过标准化接口为各业务模块提供了统一的消息服务能力,成为串联企业协同流程的“神经脉络”。主要功能包括:
- 消息列表展示:按类型分组显示接收和发送的消息,支持未读状态标识
- 分类过滤:支持按消息类型(系统通知、工作安排、任务通知、会议通知、其他消息)筛选
- 高级搜索:支持按发送者、类型、日期范围等条件进行精确搜索
- 消息发送:支持发送新消息、回复消息,可选择单个或多个接收者
- 附件功能:支持上传和预览多种格式的文件附件(图片、文档、PDF等)
- 消息状态管理:支持标记已读、删除消息(软删除机制)、取消提醒等操作
- 权限控制:确保用户只能查看和操作自己相关的消息
2. 前端功能数据展示图
前端界面采用现代企业级应用设计风格,主要包含以下展示区域:
- 顶部操作栏:包含页面标题、发送消息按钮、查询按钮和刷新按钮
- 左侧导航区:包含消息类型分类列表,显示各类消息的未读数量
- 右侧消息列表区:展示消息列表,每条消息显示发送者信息、时间、内容摘要、附件信息和操作按钮
- 模态框组件:包括发送消息模态框、附件预览模态框、删除确认模态框、接收人选择面板等
界面采用响应式设计,在不同屏幕尺寸下均能提供良好的用户体验。
3. 用户前端操作流程图
flowchart TD
A[用户登录系统] --> B[进入短信页面]
B --> C{操作类型选择}
C -->|查看消息| D[加载消息列表]
D --> E[显示消息内容]
E --> F{消息操作}
F -->|标记已读| G[调用标记已读API]
F -->|删除消息| H[显示删除确认]
F -->|回复消息| I[打开发送模态框]
F -->|预览附件| J[打开附件预览]
C -->|发送新消息| K[打开发送模态框]
K --> L[选择接收人]
L --> M[填写消息内容]
M --> N{是否添加附件}
N -->|是| O[选择并上传文件]
N -->|否| P[点击发送]
O --> P
P --> Q[调用发送消息API]
C -->|搜索/过滤| R[输入搜索条件]
R --> S[执行消息过滤]
S --> D
H -->|确认删除| T[调用删除消息API]
T --> D
H -->|取消删除| D
G --> D
Q --> D
4. 前后端数据交互流程图
flowchart TD
subgraph 前端应用
FE1[用户界面操作]
FE2[请求构建]
FE3[数据展示与更新]
FE4[错误处理与提示]
end
subgraph 后端服务
BE1[控制器接收请求]
BE2[参数验证与解析]
BE3[服务层业务处理]
BE4[数据持久化操作]
BE5[响应构建与返回]
end
FE1 --> FE2
FE2 -->|HTTP请求| BE1
BE1 --> BE2
BE2 --> BE3
BE3 --> BE4
BE4 --> BE5
BE5 -->|JSON响应| FE3
BE5 -->|错误响应| FE4
FE3 --> FE1
FE4 --> FE1
%% 具体API交互流程
subgraph 具体API流程
API1[获取消息列表]
API2[发送消息]
API3[回复消息]
API4[标记已读]
API5[删除消息]
end
FE2 --> API1
FE2 --> API2
FE2 --> API3
FE2 --> API4
FE2 --> API5
API1 --> BE1
API2 --> BE1
API3 --> BE1
API4 --> BE1
API5 --> BE1
5. 前端VUE函数说明
5.1 核心功能方法
- loadMessages(): 加载用户接收的消息列表,调用
/api/sms/received接口,处理分页和数据格式化 - sendMessage(): 发送新消息或回复消息,支持多接收者和文件上传,调用
/api/sms/create或/api/sms/reply接口 - deleteMessage(): 删除消息,先显示确认模态框,确认后调用删除API
- markAsRead(): 将消息标记为已读,调用
/api/sms/read接口 - filterMessages(): 根据搜索关键词、消息类型和查询参数过滤消息列表
- selectRecipient(): 打开接收人选择面板,支持部门、岗位筛选和全选功能
5.2 辅助功能方法
- groupMessagesByType(): 将消息按类型分组,用于左侧导航显示
- calculateUnreadCounts(): 计算各类消息的未读数量
- previewAttachment(): 预览附件文件,根据文件类型选择不同的预览方式
- handleFiles(): 处理文件上传,包括文件类型和大小验证
- formatDate()/formatDateTime(): 格式化日期时间显示
- getSenderName(): 根据发送者ID获取发送者名称
5.3 计算属性
- departmentsWithLevel: 处理部门层级显示
- sR_filteredPositions: 根据选中的部门过滤岗位列表
- groupedMessages: 按类型分组的消息数据
- filteredMessages: 经过筛选后的消息列表
6. 前端数据结构说明
6.1 消息数据结构
{
id: Number, // 消息ID
from_id: Number, // 发送者ID
to_id: Number, // 接收者ID
type: Number, // 消息类型
content: String, // 消息内容
send_time: String, // 发送时间
is_read: Boolean, // 是否已读
has_attachment: Boolean, // 是否有附件
attachment_name: String, // 附件名称
attachment_path: String, // 附件路径
attachment_size: Number, // 附件大小
// 其他字段...
}
6.2 新消息数据结构
{
recipients: String, // 接收者ID列表,逗号分隔
type: String, // 消息类型
content: String, // 消息内容
remindTime: String, // 提醒时间
remindCount: Number // 提醒次数
}
6.3 查询参数数据结构
{
sender: String, // 发送者名称
type: String, // 消息类型
startDate: String, // 开始日期
endDate: String // 结束日期
}
7. 后端服务结构说明
7.1 数据模型 (models/system_sms.go)
SystemSms结构体定义了短信的数据模型,包含了丰富的字段来存储消息的各种属性:
- 基本信息字段: ID, FromId, ToId, Type, Content, SendTime
- 状态跟踪字段: IsRead, ReadTime, Status, DeleteFlag
- 提醒相关字段: RemindFlag, RemindTime, RemindCount
- 文件相关字段: HasAttachment, AttachmentType, AttachmentPath, AttachmentName, AttachmentSize
- 扩展信息字段: RelateUrl, RelateTable, RelateId, Priority, Category, ExtraData, MessageGroupID
该模型支持软删除机制,通过DeleteFlag字段区分不同的删除状态(0-未删除,1-发送者删除,2-接收者删除,3-双方删除)。
7.2 控制器接口 (controllers/system_sms_controller.go)
控制器提供了完整的RESTful API接口:
- PostCreate: 创建新消息,支持多接收者和文件上传
- GetReceived: 获取接收的消息列表
- GetSent: 获取发送的消息列表
- GetDetail: 获取消息详情
- PostRead: 标记消息为已读
- DeleteBy: 删除消息(软删除)
- GetUnreadCount: 获取未读消息数量
- PostReply: 回复消息接口
每个接口都包含了完善的权限验证和错误处理机制。
7.3 服务层接口 (services/system_sms_service.go)
服务层封装了核心的业务逻辑:
- CreateMessage: 创建并保存新消息
- GetMessagesByReceiver: 获取用户接收的消息列表
- GetMessagesBySender: 获取用户发送的消息列表
- GetMessageByID: 根据ID获取消息详情
- MarkAsRead: 标记消息为已读
- DeleteMessage: 实现软删除逻辑
- GetUnreadCount: 统计未读消息数量
服务层与数据访问层交互,实现了业务逻辑与数据操作的分离。
8. 用户增删改查操作流程图
8.1 新增消息流程
sequenceDiagram
participant 用户
participant 前端应用
participant 后端控制器
participant 业务服务
participant 数据库
用户->>前端应用: 点击"发送消息"按钮
前端应用->>前端应用: 打开发送消息模态框
用户->>前端应用: 选择接收人、填写内容、上传附件
用户->>前端应用: 点击"发送"按钮
前端应用->>后端控制器: POST /api/sms/create (FormData)
后端控制器->>业务服务: 调用CreateMessage服务
业务服务->>数据库: 保存消息记录
数据库-->>业务服务: 返回保存结果
业务服务-->>后端控制器: 返回处理结果
后端控制器-->>前端应用: 返回JSON响应
前端应用->>前端应用: 刷新消息列表
前端应用->>用户: 显示操作成功提示
8.2 查询消息流程
sequenceDiagram
participant 用户
participant 前端应用
participant 后端控制器
participant 业务服务
participant 数据库
用户->>前端应用: 进入短信页面/点击刷新/选择类型/输入搜索
前端应用->>后端控制器: GET /api/sms/received
后端控制器->>业务服务: 调用GetMessagesByReceiver服务
业务服务->>数据库: 查询用户接收的消息
数据库-->>业务服务: 返回消息列表
业务服务-->>后端控制器: 返回处理结果
后端控制器-->>前端应用: 返回JSON响应
前端应用->>前端应用: 处理、过滤和展示消息
前端应用->>用户: 显示消息列表
8.3 删除消息流程
sequenceDiagram
participant 用户
participant 前端应用
participant 后端控制器
participant 业务服务
participant 数据库
用户->>前端应用: 点击消息的"删除"按钮
前端应用->>前端应用: 显示删除确认模态框
用户->>前端应用: 确认删除
前端应用->>后端控制器: DELETE /api/sms/{id}
后端控制器->>业务服务: 调用DeleteMessage服务
业务服务->>数据库: 更新消息删除标志
数据库-->>业务服务: 返回更新结果
业务服务-->>后端控制器: 返回处理结果
后端控制器-->>前端应用: 返回JSON响应
前端应用->>前端应用: 从列表中移除消息
前端应用->>用户: 显示操作成功提示
9. 系统技术架构特点
- 前后端分离:采用Vue 3作为前端框架,Go语言作为后端服务,通过RESTful API进行通信
- 数据安全:实现了完善的权限控制机制,确保用户只能访问和操作自己的消息
- 软删除机制:通过DeleteFlag字段实现消息的软删除,保证数据可恢复性
- 响应式设计:前端界面适配不同屏幕尺寸,提供良好的跨设备体验
- 模块化设计:后端采用控制器-服务-模型的分层架构,代码结构清晰,易于维护和扩展
- 文件管理:实现了完善的文件上传、存储和预览功能,支持多种文件格式
短消息系统(SMS)是企业协同办公系统的重要组成部分,负责处理用户之间的内部通信。该功能模块通过RESTful API提供了消息的发送、接收、回复、标记已读和删除等操作。 通过以上技术实现,为用户提供了高效、安全、便捷的内部通信体验。
短消息功能模块后续优化与功能扩展建议
基于对现有短消息功能模块的全面分析,现提出以下优化建议和功能扩展方案:
一、性能优化建议
1. 数据库层面优化
-
添加索引: 在 的 SystemSms 模型中,为常用查询字段添加索引,特别是 ToId、FromId、IsRead、CreateTime 等字段
// 在模型中添加索引标签 type SystemSms struct { // ...现有字段 ToId int `json:"toId" xorm:"not null index(to_id) comment('接收者ID')"` FromId int `json:"fromId" xorm:"not null index(from_id) comment('发送者ID')"` IsRead int `json:"isRead" xorm:"not null index(is_read) comment('是否已读')"` CreateTime time.Time `json:"createTime" xorm:"not null index(create_time) comment('创建时间')"` // ...其他字段 } -
分页查询优化: 优化 中的 GetMessagesByReceiver 和 GetMessagesBySender 方法,实现基于游标的分页查询,减少大数据量下的查询压力
2. 文件上传与存储优化
-
文件压缩处理: 在 的 PostCreate 和 PostReply 方法中,添加对大文件的自动压缩功能
-
CDN 集成: 对于静态资源(如图片、文档),考虑集成 CDN 加速访问,优化文件访问性能
3. 前端渲染优化
-
虚拟列表渲染: 优化 中的消息列表渲染,引入虚拟列表技术,只渲染可视区域内的消息项,提升大数据量下的渲染性能
-
懒加载附件: 实现附件的懒加载功能,只有当用户点击预览或下载时才加载附件内容
二、用户体验改进
1. 消息通知机制
-
实时消息推送: 集成 WebSocket 技术,实现消息的实时推送功能,当有新消息时无需刷新页面即可收到通知
-
未读消息提醒: 增强未读消息的提醒方式,如声音提醒、桌面通知等,并支持用户自定义提醒方式
2. 消息编辑与撤回
-
消息编辑功能: 增加消息编辑功能,允许用户在发送后一定时间内编辑已发送的消息
-
消息撤回功能: 实现消息撤回功能,支持用户在特定条件下撤回已发送的消息
3. 消息搜索与过滤
-
高级搜索功能: 增加按内容、时间、发送者等多维度的消息搜索功能
-
消息过滤与分类: 添加消息过滤和分类功能,支持按类型、重要程度等条件筛选消息
三、功能扩展建议
1. 消息分组与会话管理
-
会话管理: 增加会话概念,将同一对话双方的消息组合成会话,方便用户管理和查看
-
消息归档: 实现消息归档功能,允许用户将不常用的消息会话归档保存
2. 富文本编辑器
- 替换当前的简单文本输入框,集成富文本编辑器,支持格式化文本、表情、图片插入等功能
3. 批量操作功能
-
批量标记已读/未读: 允许用户批量标记多条消息为已读或未读
-
批量删除: 支持批量删除多条消息的功能
4. 消息模板功能
- 添加常用消息模板管理功能,用户可以创建、保存和使用常用的消息模板,提高工作效率
5. 消息转发与引用回复
-
实现消息转发功能,支持将消息转发给其他用户
-
添加引用回复功能,在回复消息时可以引用之前的消息内容
6. 消息统计与分析
- 增加消息统计功能,提供消息发送/接收趋势、常用联系人等数据统计和可视化展示
四、安全性增强
1. 敏感内容过滤
- 在 中添加敏感内容过滤机制,对用户发送的消息内容进行检测和过滤
2. 文件安全检查
- 增强文件上传的安全检查,添加病毒扫描、恶意文件检测等功能
3. 权限控制优化
- 细化消息操作的权限控制,例如限制普通用户发送消息给特定用户组的权限
五、技术架构优化
1. 前后端分离重构
- 将当前的混合开发模式重构为前后端分离架构,前端使用 Vue/React 等框架独立开发,后端提供 RESTful API
2. 微服务拆分
- 考虑将短信服务从主系统中拆分出来,形成独立的微服务,提高系统的可扩展性和可维护性
3. 缓存机制引入
- 引入 Redis 等缓存机制,对频繁访问的消息数据进行缓存,提高系统响应速度
以上优化建议和功能扩展方案,可以根据实际业务需求和技术资源情况,分阶段、有优先级地实施,进一步提升短信功能模块的性能、用户体验和业务价值。