ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

基于 SSM + Vue 的企业协同办公平台设计与实现

基于 SSM + Vue 的企业协同办公平台设计与实现 基于 SSM Vue 的企业协同办公平台设计与实现一、前言在不少中小企业里日常办公信息的流转仍然相当原始放假通知发在微信群里两天后就被聊天记录淹没部门会议安排靠口头转达总有人错过时间制度文件躺在某台电脑的文件夹里新人来了根本不知道去哪找想找一位同事的联系方式得在一张传来传去的 Excel 通讯录里翻半天。这些琐事单个看都不大累积起来却持续消耗着组织效率。本文实现的「云枢协同办公平台」就是把这类零散事务收敛到一个 Web 平台里公告有统一发布入口和存档日程与会议安排落到每个人的日历上公文与制度文件集中存放、随取随下员工名录随时可查请假、报账、考勤、薪资等事务也都有线上台账。平台采用 SSMSpring SpringMVC MyBatis-Plus作为后端框架前端使用 Vue 2 Element UI 构建管理控制台管理员、员工两种身份进入同一平台按权限看到不同的功能菜单。二、技术栈与系统架构平台采用经典的前后端同域部署架构Vue 管理端打包后的静态资源与后端接口放在同一个 Web 应用里由同一个 Tomcat 对外服务天然避免了跨域问题部署也只需要一个 war 包。层次选型后端框架Spring 5 SpringMVC MyBatis-Plus 2.3数据访问MyBatis mapper Druid 连接池前端Vue 2 Element UI axiosSPAhash 路由数据存储MySQLutf816 张业务表认证方式登录颁发随机 Token前端统一放入请求头后端拦截器校验构建与运行Maven 打 war 包JDK 8 Tomcat 8.5整个平台的请求链路是这样的浏览器加载 Vue 单页应用后所有数据交互都走 axios 封装的统一入口——请求拦截器自动附带 Token响应拦截器集中处理 401 失效并跳回登录页SpringMVC 的 DispatcherServlet 把/实体/page、/实体/save这类 REST 风格请求分发到对应 ControllerController 通过 MyBatis-Plus 的通用 mapper 完成查询与持久化字典表驱动部门、职位、公文类型等下拉选项业务表之间用外键字段关联。权限方面平台在登录时根据账号所属表确定角色管理员走 users 表员工走 yonghu 表前端按角色渲染侧边菜单后端按模块和按钮两级粒度做权限校验例如「公文管理」下的查看、新增、修改、删除各自独立授权菜单项与接口能力保持一致。三、功能设计平台围绕「信息发布 — 日程任务 — 文档流转 — 人事台账」四条主线组织功能共 12 个业务模块。公告通知管理员在新闻信息管理里发布公司公告与行业动态公告带类型、发布时间和图文详情员工登录后可以按类型筛选查看重要通知不再被聊天刷屏。公告列表支持按名称模糊检索与分页。日程与会议安排日程管理是平台的协作中枢。每条日程绑定责任人分为会议安排、任务跟进两类并带「待办/已办」执行状态和执行时间。例会、需求评审、客户回访这类事项录入后管理者可以在同一张列表里看到每位员工的日程排布判断时间冲突员工登录后也能明确自己当天、本周的会议与任务节点办完一条勾一条避免口头布置的事情不了了之。任务协作与内部论坛论坛管理提供技术交流、经验分享、求助问答三类帖子员工与经理都可以发帖、回帖帖子下挂完整的回复列表。踩坑记录、周报模板、方案求证这些内容在组织内沉淀下来新同事检索历史帖子就能找到答案形成企业自己的轻量知识库与讨论区而不是让经验随人员流动而流失。文档共享公文公文管理承担制度文件与通知文件的集中存放——每份公文标注部门、类型通知文件/制度规范、发布经理与接收人附件一键下载。配合邮件管理的附件能力工作邮件/通知抄送组织内的文件流转全程留痕考勤制度、报销标准、保密规范这类文件有了唯一权威版本彻底告别「在群里翻聊天记录找文件」的窘境。员工通讯录员工管理维护全公司的人员名录含员工编号、姓名、手机号、部门、职位、头像与邮箱支持按部门、职位、姓名多条件组合检索是最常用的在线通讯录。部门任命模块则记录每一次人事调动原部门、原职位、现部门、现职位与任命缘由人事变动有据可查。事务台账考勤管理记录每日打卡正常、迟到、早退、缺勤、加班等八类状态与加班时长按员工维度汇总出勤表现请假管理由员工发起经理与管理员两级审核审核意见全程可见财务报账按差旅报销、办公费用分类金额、发票附件与两级审核结果构成完整台账薪资管理按月生成每位员工的工资条基本工资、奖金、绩效、补贴、扣款与实发一目了然。这四本台账共同覆盖了行政与人事最高频的事务场景纸质单据在流程里彻底消失。此外平台还内置了个人中心资料维护、密码修改与字典管理部门、职位、公文类型这些枚举值都可以在界面里直接增改系统的日常运维不需要触碰数据库。四、数据库设计平台共 16 张表围绕上述模块组织表名说明users / yonghu / jingli管理员、员工、经理三类账号news公告通知公司公告/行业动态richeng日程会议安排/任务跟进含待办已办状态gongwen / youjian公文与内部邮件附件、类型、接收人forum论坛帖子与回帖super_ids 关联父帖chuqin / qingjia / caiwubaozhang / xinzi考勤、请假、财务报账、薪资bumenrenming部门任命记录dictionary字典表部门、职位、公文类型、打卡类型等枚举token / config登录令牌与系统配置设计上有两个值得注意的点。其一字典表驱动的枚举管理部门、职位、公文类型、请假类型、打卡类型、审核状态等所有下拉枚举都集中在 dictionary 表里通过 dic_code code_index 定位新增一种报销类型不需要改任何代码。其二两级审核的状态建模请假、报账都拆成「管理员审核 经理审核」两组字段状态 意见 时间一次申请在两级审批线上的进度与结论分别留痕列表页可以直接按审核状态筛选。表间关系围绕「人」展开日程、请假、报账、薪资、考勤都以员工编号关联 yonghu 表公文与论坛帖以经理编号关联 jingli 表部门任命同时携带前后部门与职位信息。这样的星型结构让每个业务模块都能独立分页查询又在需要时通过一次联表把人与事拼出完整视图——例如日程列表直接呈现责任人姓名、手机号与头像不需要前端二次请求。五、系统演示登录页支持管理员与员工双角色入口选择角色后输入账号密码进入对应权限的工作台。管理员登录后进入首页工作台左侧菜单按角色动态渲染考勤、论坛、公告、日程、薪资、邮件、员工等模块一目了然。公告通知列表按类型与发布时间组织支持模糊检索与分页公告详情图文混排。日程管理以责任人维度展示所有日程会议安排与任务跟进分色标注待办、已办状态清晰可辨。公文管理集中存放制度与通知文件发布经理、所属部门、公文类型与附件下载入口齐备。员工管理是在线通讯录编号、手机号、部门、职位、邮箱、头像一表可查。请假列表展示申请明细与两级审核结论事假、病假分类统计。财务报账以类型、金额、发票附件为要素构成可追溯的费用台账。内部论坛按身份展示发帖人与回帖支持查看论坛回复、修改与删除帖子。内部邮件支持工作邮件与通知抄送两类附件随邮件下载。考勤列表记录每日打卡状态与加班时长八类打卡状态覆盖全部出勤场景。部门任命与薪资管理补全人事与薪酬两本台账。六、小结本文完成的云枢协同办公平台用 SSM Vue 这套成熟稳定的技术组合把公告、日程、公文、通讯录、论坛以及考勤、请假、报账、薪资等企业内部事务收敛到一个统一的 Web 平台里。项目中比较有意思的实践一是字典表驱动的枚举管理让业务扩展基本零代码改动二是前后端同域部署加统一 Token 拦截的认证方案把权限控制的复杂度收敛在一处。对需要一套开箱即用的协同办公系统做课程设计、毕设参考或企业内部工具原型的开发者来说这套模块划分和表结构设计都有不错的借鉴价值。如果在实现类似系统时有其他想法欢迎评论区交流。云枢协同办公平台源码 SSMVueMySQL12 模块/含数据库脚本/课程设计可用
返回列表