一、为什么要做 HR 管理系统？传统人事管理的 4 大痛点
1.1 流程繁琐：手工操作效率低
- 员工请假、调休需 “填纸质表→找领导签字→交人事存档”，整个流程平均耗时 2 天，若领导出差则停滞；
- 工资计算需 “从考勤表摘数据→手动算社保公积金→录入 Excel”，100 人公司需 1 人 / 3 天完成，易因公式错误导致薪资偏差。
1.2 权限混乱：数据安全无保障
- 所有人事都能查看全员薪资、社保等敏感数据，存在信息泄露风险；
- 新员工入职后需手动配置系统权限，常出现 “权限多配（能看高管薪资）” 或 “少配（无法提交审批）” 问题。
1.3 数据孤岛：信息互通难
- 考勤数据存在考勤机、工资数据在 Excel、员工档案存文件夹，需人工汇总才能出 “人效分析报告”；
- 跨部门协作难，比如财务需人事提供 “社保缴费明细”，需人事单独导出表格发送，无法实时同步。
1.4 统计困难：决策缺乏依据
- 想了解 “各部门离职率、月度考勤异常率”，需从多个表格中筛选数据，手动制作图表，耗时且无法实时更新；
- 员工花名册查询不便，如需找 “3 年以上工龄的技术岗员工”，需逐行翻查纸质档案或 Excel，效率低。
二、系统核心价值：3 类角色的效率革命
2.1 管理员：全局管控，精准授权
- 权限一键分配：通过 RBAC 模型，给 “人事经理” 分配 “员工管理 + 社保配置” 权限，给 “薪资专员” 分配 “工资计算 + 报表导出” 权限，避免权限越界；
- 数据全局监控：实时查看 “各模块数据统计（如本月请假 20 人次、离职 5 人）”，支持导出 Excel 报表，辅助人事决策。
2.2 人事专员：流程自动化，减少手工操作
- 考勤自动关联工资：系统自动从考勤模块抓取 “出勤天数、加班时长”，同步到工资模块计算应发工资，无需手动录入；
- 审批流程线上化：员工提交请假申请后，系统自动推送至直属领导→人事审批，审批进度实时提醒，流程从 2 天缩短到 4 小时。
2.3 普通员工：自助操作，减少沟通成本
- 个人信息自助管理：登录系统即可修改 “联系方式、紧急联系人”，查看 “本月考勤记录、薪资明细”，无需反复找人事查询；
- 请假调休自主提交：在线填写申请单，选择请假类型（事假 / 病假），上传证明材料，一键提交，实时查看审批进度。
三、技术选型：为什么选 Vue+Node.js？贴合 HR 系统场景
系统围绕 “前端交互流畅、后端稳定、数据安全” 原则选型，技术栈覆盖 “前端 - 后端 - 数据库” 全流程：
| 技术模块 | 具体工具 / 框架 | 选型理由 |
|---|---|---|
| 前端开发 | Vue 2 + Element UI + Vuex | Vue 组件化开发，“员工列表、审批表单” 等模块可复用；Element UI 提供现成的表单、表格组件，开发效率提升 50%；Vuex 管理全局状态（如用户权限、当前登录角色） |
| 后端开发 | Node.js + Express | 与前端技术栈一致（JavaScript），减少跨语言沟通成本；Express 轻量灵活，适合快速搭建 API 接口（如 “获取考勤数据、提交审批”） |
| 数据库 | MySQL 8.0 | 关系型数据库支持事务（如 “工资发放时同时扣减社保”），确保数据一致性；支持复杂查询（如 “筛选 3 年工龄 + 技术岗员工”） |
| 权限控制 | RBAC 模型 | 基于 “用户 - 角色 - 权限” 三层架构，可灵活分配权限（如 “薪资专员” 角色仅含 “工资计算 + 报表导出” 权限），无需为每个用户单独配置 |
| 数据交互 | Axios | 支持前端与后端 API 的异步通信，拦截请求自动添加 Token，确保接口安全；支持请求重试，避免网络波动导致的数据提交失败 |
四、系统设计：从 “模块划分” 到 “数据库落地”
4.1 核心功能模块：9 大模块覆盖 HR 全流程
4.1.1 核心模块清单
| 模块名称 | 核心功能 |
|---|---|
| 首页模块 | 显示用户信息、工作日历、待办审批（如 “3 条请假申请待处理”）、系统主题切换 |
| 员工模块 | 员工列表（支持搜索 / 筛选）、查看 / 编辑员工详情（基础信息、教育 / 从业经历）、Excel 导入导出、花名册打印 |
| 考勤模块 | 展示全员考勤状态（正常 / 迟到 / 旷工）、修改考勤记录、配置考勤规则（如 “迟到 30 分钟扣半天工资”） |
| 工资模块 | 员工工资列表、调薪 / 定薪操作、自动关联考勤数据计算薪资、生成工资条 |
| 社保模块 | 查看各员工社保 / 公积金缴纳基数、配置参保城市、生成社保缴费明细报表 |
| 审批模块 | 处理请假 / 调休 / 离职申请、按 “审批中 / 通过 / 驳回” 筛选、查看申请附件 |
| 组织架构模块 | 树形展示公司部门层级、新增 / 编辑 / 删除部门、设置部门负责人 |
| 权限管理模块 | 维护权限点（如 “员工添加”“薪资查看”）、给角色分配权限 |
| 公司设置模块 | 管理公司角色（新增 / 编辑角色）、配置公司基本信息（名称、地址） |
4.1.2 关键流程示例：员工请假审批
- 员工登录系统→进入 “首页”→点击 “请假申请”→填写 “请假类型、天数、理由”→上传证明材料→提交；
- 系统自动推送审批通知给直属领导→领导登录系统→在 “审批模块” 查看申请→选择 “通过 / 驳回” 并填写意见；
- 审批通过后，系统自动同步至 “考勤模块”，标记员工对应日期为 “请假”；若驳回，通知员工修改后重新提交。
4.2 数据库设计：核心表结构
基于 “员工、考勤、工资、权限” 等核心实体，设计 9 张关键表，确保数据存储规范：
| 表名 | 核心字段 | 作用 |
|---|---|---|
employee（员工表） | id（主键）、name（姓名）、post（岗位）、department_id（部门 ID）、hire_date（入职日期） | 存储员工基础信息，关联部门表 |
attendance（考勤表） | id（主键）、employee_id（员工 ID）、att_date（考勤日期）、status（状态：正常 / 迟到） | 记录员工每日考勤情况，为工资计算提供数据 |
salary（工资表） | id（主键）、employee_id（员工 ID）、basic_salary（基本工资）、social_security（社保扣除）、real_salary（实发工资） | 存储员工薪资明细，自动关联考勤和社保数据 |
role（角色表） | id（主键）、role_name（角色名）、perm_ids（权限 ID 列表） | 定义系统角色及对应权限，支撑 RBAC 权限模型 |
approval（审批表） | id（主键）、employee_id（申请人 ID）、type（类型：请假 / 离职）、status（状态：审批中 / 通过） | 记录审批流程数据，支持流程追踪 |
三、系统实现：关键功能的代码与界面展示
3.1 核心功能实现：以 “RBAC 权限控制” 和 “考勤管理” 为例
3.1.1 RBAC 权限控制（前端 + 后端）
1. 后端接口设计（Node.js+Express） 实现 “根据用户角色获取权限列表” 接口，控制用户可访问的路由和按钮：
// 后端路由：获取当前用户权限
app.get('/api/user/perms', (req, res) => {
const { userId } = req.query;
// 1. 根据用户ID查角色（如“薪资专员”）
const role = db.query(`SELECT role_id FROM user_role WHERE user_id = ${userId}`)[0];
// 2. 根据角色查权限列表（如“工资计算、报表导出”）
const perms = db.query(`SELECT perm_code FROM role_perm WHERE role_id = ${role.role_id}`);
// 3. 返回权限列表
res.send({ code: 200, data: perms.map(item => item.perm_code) });
});
2. 前端权限拦截（Vue Router） 路由跳转前校验权限，无权限则跳转至 “无权限页面”：
// router/index.js
router.beforeEach((to, from, next) => {
const userPerms = localStorage.getItem('userPerms').split(','); // 从本地存储获取用户权限
// 若路由需权限且用户无此权限，跳转无权限页
if (to.meta.requirePerm && !userPerms.includes(to.meta.requirePerm)) {
next('/no-permission');
} else {
next();
}
});
// 路由配置示例（薪资模块需“salary:view”权限）
{
path: '/salary',
name: 'Salary',
component: () => import('@/views/Salary'),
meta: { requirePerm: 'salary:view' } // 配置所需权限
}
3.1.2 考勤状态修改（前端组件）
使用 Element UI 的 Dialog 组件实现 “点击考勤状态弹窗修改”，同步更新数据库：
<template>
<el-table :data="attendanceList" border>
<!-- 考勤状态列，点击可修改 -->
<el-table-column label="考勤状态">
<template #default="scope">
<el-button @click="showEditDialog(scope.row)">{{ scope.row.status }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 修改考勤状态弹窗 -->
<el-dialog title="修改考勤状态" v-model="dialogVisible">
<el-form :model="form">
<el-form-item label="考勤日期">
<el-input v-model="form.attDate" disabled></el-input>
</el-form-item>
<el-form-item label="新状态">
<el-select v-model="form.newStatus">
<el-option label="正常" value="normal"></el-option>
<el-option label="迟到" value="late"></el-option>
<el-option label="旷工" value="absent"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitEdit">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
attendanceList: [], // 考勤列表
dialogVisible: false,
form: { attDate: '', newStatus: '', id: '' }
};
},
methods: {
// 显示修改弹窗
showEditDialog(row) {
this.form = {
id: row.id,
attDate: row.attDate,
newStatus: row.status
};
this.dialogVisible = true;
},
// 提交修改
submitEdit() {
this.$axios.post('/api/attendance/edit', this.form).then(res => {
if (res.data.code === 200) {
this.$message.success('修改成功');
this.dialogVisible = false;
this.getAttendanceList(); // 重新获取考勤列表
}
});
}
}
};
</script>
3.2 关键界面展示
3.2.1 员工列表界面
- 左侧为功能菜单，右侧为员工表格，支持 “按部门 / 岗位筛选”“搜索员工姓名”；
- 操作列提供 “查看详情、编辑、删除” 按钮，批量操作支持 “Excel 导入导出、打印花名册”。
3.2.2 工资计算界面
- 顶部为 “调薪 / 定薪” 按钮，点击弹窗填写 “调整后基本工资、生效日期”；
- 表格显示 “员工姓名、基本工资、社保扣除、实发工资”，支持按 “部门” 分组查看，点击 “查看明细” 可展开社保、公积金等扣除项。
3.2.3 审批管理界面
- 左侧筛选 “审批类型（请假 / 离职）” 和 “审批状态（审批中 / 通过 / 驳回）”；
- 右侧列表显示 “申请人、申请时间、审批进度”，点击 “处理” 弹窗显示申请详情，支持 “通过” 或 “驳回” 并填写意见。
3.2.4 组织架构界面
- 以树形结构展示 “公司→部门→小组” 层级，如 “技术部→前端组 / 后端组”；
- 支持 “新增子部门、编辑部门名称、设置负责人”，点击部门节点可查看该部门员工列表。
3.3 系统运行截图
四、系统测试与应用效果
4.1 测试方案：功能、安全、性能全覆盖
- 功能测试：验证 “员工请假流程是否通、工资计算是否准确”，如 “考勤迟到 1 天，工资自动扣除 50 元”，通过率 100%；
- 安全测试：模拟 “无权限用户直接访问薪资页面”，系统自动跳转至 “无权限页”，敏感数据无泄露；
- 性能测试：模拟 “100 人同时登录、提交审批”，系统响应时间≤1 秒，CPU 占用率≤30%，无卡顿。
4.2 应用效果：某 100 人民营企业试点数据
- 效率提升：请假流程从 2 天缩短到 4 小时，工资计算从 3 天缩短到 1 小时，人事工作量减少 60%；
- 错误率降低：薪资计算错误率从 8% 降至 0，考勤统计错误率从 12% 降至 1%；
- 体验优化：员工查询薪资、请假进度无需找人事，自助操作占比达 90%，满意度提升 75%。
五、总结与优化方向
5.1 项目总结
本系统通过 “Vue 前端 + Node.js 后端 + MySQL 数据库”，实现了人力资源管理 “全流程线上化”，解决了传统人事管理 “流程繁、权限乱、数据散” 的问题，为中小型民营企业提供了低成本、易落地的数字化解决方案。
5.2 未来优化方向
- 集成招聘模块：新增 “简历管理、面试安排” 功能，实现 “招聘→入职→考勤→离职” 全生命周期管理；
- 数据可视化升级：用 ECharts 实现 “离职率趋势图、各部门人效分析图”，支持管理员实时查看人事数据洞察；
- 移动端适配：开发小程序版本，支持员工 “手机打卡、提交请假申请”，进一步提升便利性。
六、附：核心资料获取
完整开发资料包含：
- 前端源码（Vue 组件、路由配置、权限控制）；
- 后端源码（Node.js 接口、数据库脚本）；
- 测试用例（功能测试表、安全测试步骤）；
- 界面设计原型（Axure 文件）。
👉 关注博主，查看置顶文章，可获取系统相关技术文档与核心代码，助力 HR 系统项目落地或毕设开发。
如果本文对你的 HR 系统开发或毕设有帮助，欢迎点赞 + 收藏 + 关注，后续会分享更多 Vue 实战案例！
