企业协同办公系统(OA)-【短消息】模块开发详解

86 阅读10分钟

企业协同办公系统(OA)-【短消息】模块开发详解

前端:vue3.js/html 后端:golang

1. 功能需求说明

在企业协同办公系统(OA)中,短消息功能模块作为核心通信组件,承担着连接用户、驱动协作的关键角色。其核心价值在于构建了一套高效、安全、精准的消息传递与任务提醒机制,不仅支撑了系统内用户间的实时交互,更通过标准化接口为各业务模块提供了统一的消息服务能力,成为串联企业协同流程的“神经脉络”。主要功能包括:

  • 消息列表展示:按类型分组显示接收和发送的消息,支持未读状态标识
  • 分类过滤:支持按消息类型(系统通知、工作安排、任务通知、会议通知、其他消息)筛选
  • 高级搜索:支持按发送者、类型、日期范围等条件进行精确搜索
  • 消息发送:支持发送新消息、回复消息,可选择单个或多个接收者
  • 附件功能:支持上传和预览多种格式的文件附件(图片、文档、PDF等)
  • 消息状态管理:支持标记已读、删除消息(软删除机制)、取消提醒等操作
  • 权限控制:确保用户只能查看和操作自己相关的消息

2. 前端功能数据展示图

image.png

image.png

image.png

image.png

image.png 前端界面采用现代企业级应用设计风格,主要包含以下展示区域:

  • 顶部操作栏:包含页面标题、发送消息按钮、查询按钮和刷新按钮
  • 左侧导航区:包含消息类型分类列表,显示各类消息的未读数量
  • 右侧消息列表区:展示消息列表,每条消息显示发送者信息、时间、内容摘要、附件信息和操作按钮
  • 模态框组件:包括发送消息模态框、附件预览模态框、删除确认模态框、接收人选择面板等

界面采用响应式设计,在不同屏幕尺寸下均能提供良好的用户体验。

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. 系统技术架构特点

  1. 前后端分离:采用Vue 3作为前端框架,Go语言作为后端服务,通过RESTful API进行通信
  2. 数据安全:实现了完善的权限控制机制,确保用户只能访问和操作自己的消息
  3. 软删除机制:通过DeleteFlag字段实现消息的软删除,保证数据可恢复性
  4. 响应式设计:前端界面适配不同屏幕尺寸,提供良好的跨设备体验
  5. 模块化设计:后端采用控制器-服务-模型的分层架构,代码结构清晰,易于维护和扩展
  6. 文件管理:实现了完善的文件上传、存储和预览功能,支持多种文件格式

短消息系统(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 等缓存机制,对频繁访问的消息数据进行缓存,提高系统响应速度

以上优化建议和功能扩展方案,可以根据实际业务需求和技术资源情况,分阶段、有优先级地实施,进一步提升短信功能模块的性能、用户体验和业务价值。