Skip to content

第二现场

基础信息

说明
菜单路径/operationsManagement/taskManagement/emailManage
路由名称emailManage
页面组件src/views/operationsManagement/taskManagement/emailManage/index.vue
接口模块组件内 api.post(...) 直接调用(Vue3 setup)
Store
页面定位第二现场邮件管理,左侧文件夹树 + 右侧消息列表,支持条件/关键字查询、发送邮件、批量操作

页面功能

页面顶部为查询区(Tab 切换条件查询/关键字查询),下方为左右布局:左侧 LeftPanel(文件夹树 + 新建邮件)、右侧 MessageList(消息列表 + 详情)。

1. 查询区

  • 条件查询 Tab:第三方保单号、报案号、报案人电话、优先级、身份证号码、创建时间、创建人、承保公司(级联)。支持「展开/收起筛选」切换更多条件。
  • 关键字查询 Tab:输入关键字全局查询。
  • 查询、重置按钮。

2. 左侧文件夹树(LeftPanel)

  • 树形菜单:我的消息、我的待办、我的未读、已收藏、待回复、新评论、已发送、草稿箱、我的文件夹、邮件库。
  • 「我的文件夹」支持新建/重命名/删除子文件夹(右键菜单),新建邮件按钮打开 SendEmail
  • 未读数:通过 mails/countNoRead 每 60 秒轮询,展示邮件未读与新评论未读角标。

3. 消息列表(MessageList)

  • 收取:刷新当前菜单列表。
  • 批量操作:批量回复、批量已读、批量删除(按菜单类型动态展示)。
  • 排序下拉:按时间正序/倒序、附件、收藏。
  • 消息项:展示发件人、优先级、主题、创建时间、来源、评论数、未读评论数。支持无限滚动加载。
  • 右键菜单:标记待办/已读、移动到文件夹、收藏、置顶/固定、导出为 pdf、移出文件夹(按菜单类型动态展示)。
  • 点击消息:打开 Details 详情抽屉,含邮件内容、历史、评论、审核记录。

4. 发送邮件(SendEmail)

  • 通过左侧「新建」按钮或详情页回复触发,支持附件上传、多选收件人、音视频预览。

使用组件

组件路径用途
Container@/components/container页面容器
LeftPanel./LeftPanel.vue左侧文件夹树 + 新建邮件
MessageList./MessageList.vue右侧消息列表
Details./Details/index.vue邮件详情抽屉
SendEmail./SendEmail/index.vue发送邮件弹窗
ContextMenu@/components/ContextMenu右键菜单
Priority./components/Priority.vue优先级标签
insuranceCompanyCascader@/components/insuranceCompanyCascader承保公司级联
ImportPopup@/components/ImportPopup导入弹窗

使用 Store

无。

调用接口

所有接口实际请求统一带 /api 前缀(下表 URL 为业务路径简写)。

接口 URL用途
mails/page我的消息分页查询(菜单类型 a)
mails/myPage我的待办/未读/已收藏等待定菜单分页查询
mails/search关键字查询
mails/countNoRead邮件未读数与新评论未读数
mails/operateTodo / mails/operateCancelTodo标记/取消待办
mails/operateRead标记已读/未读
mails/operateFavorite / mails/operateCancelFavorite收藏/取消收藏
mails/operateTop / mails/operateCancelTop置顶/取消置顶
mails/operateReply批量回复
mails/operateCommentRead批量评论已读
mails/exportMails导出为 pdf
mails/edit批量删除(状态置 2)
wo/folders/folderList文件夹列表
wo/folders/add新建文件夹
wo/folders/rename重命名文件夹
wo/folders/delete删除文件夹
wo/mailFolder/move邮件移动到文件夹
wo/mailFolder/remove邮件移出文件夹

修改记录

修改人修改时间修改内容
zhouw2026-07-03初始化页面
zhouw2026-07-09编写页面内容