Vue 前后端分离的企业办公 OA 审批管理系统

PLC技术网抖音群

前言

企业办公中，请假、报销、任务下发、考勤统计这些事情每天都会发生。基于 SpringBoot + Vue 前后端分离架构，覆盖了日常办公中最常用的审批流程，从请假、报销到任务管理、考勤统计，整套流程都可以在线上完成，审批进度实时可查。

项目介绍

一个基于 SpringBoot + Vue 前后端分离的企业办公 OA 审批管理系统。系统按照岗位职责划分为管理员、经理、员工三种角色，每种角色进入系统后看到的功能模块和操作权限都不一样。

管理员负责全局配置，包括部门结构、员工信息、公告发布和系统数据统计。经理除了日常打卡和查看部门数据外，核心职责是审批员工提交的请假和报销申请，以及下发工作任务。员工则可以提交申请、处理任务、查看自己的考勤记录和审批进度。

项目功能

系统按角色划分功能模块，具体如下：

管理员角色

功能模块	说明
首页统计	查看系统整体数据概览，包括员工总数、待审批数量、近期动态等
部门管理	添加、编辑、删除部门，维护部门结构树
员工管理	管理所有员工信息，包括账号、姓名、所属部门、角色分配等
考勤管理	查看全员考勤记录，支持按部门和日期筛选
请假管理	查看所有请假申请，审批或驳回
报销管理	查看所有报销申请，审批或驳回
任务管理	查看和跟踪各部门任务执行情况
留言管理	查看和处理员工留言反馈
公告信息	发布系统公告，维护公告列表
个人信息	修改个人资料和登录密码

经理角色

功能模块	说明
首页统计	查看部门内数据统计，包括人员考勤、待审批事项等
上下班打卡	每日打卡登记，记录考勤状态
部门员工管理	查看本部门员工信息
部门考勤管理	查看部门内所有员工的考勤记录
请假管理	审批本部门员工提交的请假申请
报销管理	审批本部门员工提交的报销申请
任务管理	向本部门员工下发工作任务，跟踪任务进展
系统留言	查看和回复员工留言
系统公告	查看管理员发布的公告
个人信息	修改个人资料和登录密码

员工角色

功能模块	说明
登录系统	账号密码登录，角色权限自动加载
首页统计	查看个人待办任务、申请状态、考勤汇总等
上下班打卡	每日打卡，系统自动记录时间和状态
个人考勤查看	查看自己的历史考勤记录和统计汇总
请假管理	提交请假申请，查看审批进度和结果
个人报销管理	提交报销申请，上传凭证，查看审批状态
任务处理	查看经理下发的任务，更新任务完成进度
留言管理	提交留言反馈，查看回复
公告查看	查看系统公告列表和详情
个人信息	修改个人资料和登录密码

功能设计覆盖了 OA 系统中最高频的几个场景：打卡、请假、报销、任务、公告。流程上员工提交、经理审批、管理员全局管理，链条是完整的。

项目特点

特点	描述
前后端分离	前端 Vue 独立部署，后端 SpringBoot 提供 RESTful API，分工明确
角色权限分离	管理员、经理、员工三种角色各司其职，功能菜单根据角色动态渲染
审批流程完整	请假、报销从提交到审批再到结果反馈，全流程可追踪
打卡与考勤联动	上下班打卡数据自动归入考勤统计，支持按部门和个人维度查看
ECharts 数据可视化	首页统计使用 ECharts 图表展示，数据情况一目了然
Element UI 规范界面	组件风格统一，界面整洁，上手成本低
前后端联动校验	前端表单校验加后端业务校验，数据准确性有保障
可扩展性强	功能模块化设计，后续新增审批类型或流程节点都比较方便

这个系统最大的特点就是贴近实际。打卡、请假、报销、审批这些都是真实企业中每天都在发生的事情，做出来的东西有用，而不仅仅是堆功能。

项目技术

后端技术栈

技术	作用
SpringBoot	快速构建后端服务，自动配置，简化开发流程
SpringMVC	处理 HTTP 请求，RESTful 接口设计
Mybatis	ORM 框架，数据库访问层，SQL 灵活可控
MySQL	关系型数据库，存储业务数据
Maven	项目构建和依赖管理

前端技术栈

技术	作用
Vue	前端框架，组件化开发，数据双向绑定
Element UI	PC 端 UI 组件库，提供表格、表单、弹窗等常用组件
axios	HTTP 客户端，前后端数据通信
ECharts	数据可视化图表库，首页统计展示
Vue Router	前端路由管理，实现 SPA 页面切换
Vuex	状态管理，存储用户信息和权限数据

开发环境

IDEA 集成开发环境

JDK 1.8

MySQL 5.6 及以上

Node.js 前端运行环境

Maven 构建工具

项目代码

后端项目结构

src/main/java/com/oa/

├── controller/               # 控制器层，处理前端请求

│    ├── AdminController   # 管理员相关接口

│    ├── ManagerController  # 经理相关接口

│    └── EmployeeController  # 员工相关接口

├── service/                    # 业务逻辑层

│    ├── LeaveService        # 请假业务处理

│    ├── ReimburseService  # 报销业务处理

│    └── TaskService         # 任务业务处理

├── mapper/                     # Mybatis 数据访问层

├── entity/                     # 实体类，对应数据库表

├── dto/                          # 数据传输对象

├── config/                     # 配置类，跨域、拦截器等

└── utils/                       # 工具类

核心代码片段

请假申请的控制器接口大致是这样的：

@RestController

@RequestMapping("/api/leave")

publicclass  LeaveController  {

       @Autowired

       private  LeaveService leaveService;

       @PostMapping("/add")

       public  Result  add(@RequestBody LeaveDto dto)  {

             int  result = leaveService.addLeave(dto);

             return  result >  0  ? Result.success() : Result.error("提交失败");

      }

       @GetMapping("/list")

       public  Result  list(@RequestParam Integer userId, @RequestParam Integer page, @RequestParam Integer size)  {

            PageInfo<leave> pageInfo = leaveService.getLeaveList(userId, page, size);

             return  Result.success(pageInfo);

      }

}

请假审批的逻辑里有一个简单的流程状态流转：

public  Result  approve(Integer leaveId, Integer status)  {

      Leave leave = leaveMapper.selectById(leaveId);

       if  (leave ==  null) {

             return  Result.error("申请不存在");

      }

      leave.setStatus(status);   // 1-待审批 2-已通过 3-已驳回

      leave.setApproveTime(new  Date());

      leaveMapper.updateById(leave);

       return  Result.success();

}

前端项目结构

src/

├── api/                          # 接口请求封装

│    ├── leave.js              # 请假相关 API

│    ├── reimburse.js        # 报销相关 API

│    └── task.js               # 任务相关 API

├── views/                       # 页面视图

│    ├── admin/                 # 管理员页面

│    ├── manager/              # 经理页面

│    └── employee/            # 员工页面

├── components/               # 通用组件

├── router/                     # 路由配置

├── store/                       # Vuex 状态管理

└── utils/                       # 工具函数

前端通过 axios 拦截器统一处理请求和响应，登录时存储 token，请求时自动携带：

axios.interceptors.request.use(config  =>  {

       const  token = localStorage.getItem('token');

       if  (token) {

            config.headers['Authorization'] =  'Bearer '  + token;

      }

       return  config;

});

项目效果

登录与角色跳转：不同角色登录后，菜单栏根据权限动态生成。管理员看到系统管理类菜单，经理看到部门审批类菜单，员工看到个人事务类菜单，界面干净不杂乱。

请假审批流程：员工提交请假申请后，状态变为"待审批"。经理登录后在待办列表里看到申请，点击通过或驳回，员工端的状态实时更新。整个过程从提交到反馈在界面上的流转很清晰。

打卡与考勤统计：上下班打卡操作简单，点击按钮即可完成。考勤数据按天记录，支持按月汇总查看，经理还可以按部门维度查看所有人员的出勤情况。

数据统计看板：首页集成了 ECharts 图表，管理员可以看到员工分布、部门人数、近期审批趋势等统计信息，经理可以看到部门内的考勤汇总和任务完成率。

界面风格上，Element UI 的组件库让整个系统看起来很规整，表格、表单、弹窗、消息提示这些交互元素都很统一，不需要额外设计就能达到不错的视觉效果。

项目源码

项目源码完整，包含完整的数据库脚本、后端代码、前端代码和配置文件。可以直接导入 IDEA 和 VS Code 开发工具运行。

快速启动步骤

1、导入 MySQL 数据库脚本，创建数据库和表结构

2、用 IDEA 打开后端项目，修改  application.yml  中的数据库连接配置

3、启动后端 SpringBoot 服务

4、用 VS Code 或命令行进入前端项目目录，执行  npm install  安装依赖

5、执行  npm run dev  启动前端服务

6、浏览器访问前端地址，使用预设账号登录测试

默认账号

管理员：admin / 123456

经理：manager / 123456

员工：employee / 123456

项目由本人原创开发，经过多轮功能测试，核心流程运行稳定，可以直接使用。

GitHub：https://github.com/itcoderyhl/oa-approval-server

总结

OA 审批管理系统从企业办公的真实需求出发，把请假、报销、考勤、任务、公告这几个核心场景串联了起来。三种角色各司其职，功能边界清晰，审批流程完整可追踪。

技术层面，SpringBoot + Vue 的前后端分离架构是目前企业开发的主流模式，用这个项目来理解前后端如何协作、权限如何控制、数据如何流动，是一个很合适的范本。Element UI 和 ECharts 的引入也让界面和数据展示有了不错的表现力。

如果正在寻找一个功能完整、代码规范、能直接跑起来的 OA 系统作为课程设计或毕业设计，这套项目值得花点时间看一下。

关键词

SpringBoot、Vue、OA办公系统、审批管理、前后端分离、Element UI、ECharts、请假审批、报销管理、考勤打卡、任务管理、角色权限、毕业设计、Mybatis、MySQL

作者：小码编匠

出处：gitee.com/smallcore/DotNetCore

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！

END

往

期

精

彩

接入AI辅助后，后台管理平台开发到底省了哪些事？

一套前后端分离的轻量级智能BI系统

一款跨平台物联网设备配置管理工具

一套开源的多模式聚合支付系统（聚合支付多应用接入）

为什么我放弃了手写后台管理？聊聊这个开源免费的AI低代码平台，太实用了

一款集成报表、打印、大屏与仪表盘的免费开源工具

基于ReactViteTypeScript的天气可视化大屏

一个基于Vue3的开源流程设计器

JavaVueMySQL的物联网设备管理平台

一套完整的多租户SaaS架构，源码全放出来了，不玩虚的

一款开源可视化引擎面向Web与物联网场景

工业物联网和电力自动化场景拖拽式规则编排编辑器

电商项目无从下手？这个60kStar的实战项目一套代码，前台后台全搞定

一款面向智能制造的流程驱动型低代码平台

物联网设备接入太折腾？这个开源平台把MQTT、TCP、Modbus全包了

一款轻量级、开箱即用的自动化巡检工具

ElysiaJSArtDesignPro的现代化全栈后台管理系统

一个开源的轻量化3D场景编辑工具

工业物联网预测维护平台：基于Flink实时流处理Spark离线机器学习

Vue3PythonMySQL开发的监控数据可视化平台

ThreejsReact19ECharts的3D地图可视化大屏项目

可视化BPMN设计AI辅助：开源工作流编排平台

企业AI落地太难？这款开源智能体平台让事情变得简单

一款好用的SpringBoot后台脚手架：权限、日志、代码生成都有了

一款AI低代码引擎模式的Web快速开发平台

一套开源平台搞定企业应用，从表单配置到工作流都包了（微服务低代码）

基于Vue3TypeScript搭建的后台系统模板

开源快速开发平台：工作流、支付、商城、ERP全内置

GoVue3开发的现代化项目管理平台

新一代云原生大数据管家，快速实现部署、管理、监控以及自动化运维

一款基于React生态的大屏数据可视化设计器

拖拽即设计，一键云打印！这款基于Vue3开发的可视化工具绝了

一站式开源数据中台，搞定治理、开发、监控与数据服务

开源的"AI无代码"平台，快速开发业务系统

React18Supabase打造企业级ERP管理系统，内置40数据表！

开箱即用！这款生产就绪的智能体框架，让你5分钟快速上手

TypeScript跨平台图表库：模块化、高性能、支持主题定制

备注【开源】

方便大家交流、资源共享和共同成长

纯技术交流群、需要的小伙伴请扫码

有收获？不妨分享让更多人受益

关注「程序员开源栈」，共同提升技术实力

点分享

点收藏

点在看

点点赞

</leave>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！