基于Java+SSM+Vue的企业员工信息HR人事管理系统设计与实现

一、系统概述

随着企业规模的不断扩大，传统的人工HR管理模式越来越难以满足高效、精准的人事管理需求。为此，开发一套基于B/S架构的企业员工信息HR人事管理系统显得尤为重要。本系统采用Java语言，后端基于SSM（Spring + SpringMVC + MyBatis）框架，前端采用Vue.js，实现了员工信息管理、部门管理、岗位管理、薪资管理、考勤管理、招聘管理、培训管理等核心功能，旨在为企业提供一站式人力资源解决方案。

二、技术选型

后端：Java 1.8、Spring 5.x、SpringMVC 5.x、MyBatis 3.x
前端：Vue 2.x/3 + Element UI + Axios
数据库：MySQL 5.7/8.0
服务器：Tomcat 8.5+
构建工具：Maven
开发工具：IDEA / Eclipse、VS Code
权限控制：Spring Security / Shiro（可选）
缓存：Redis（可选）

三、系统架构

系统采用前后端分离架构。前端使用Vue构建单页面应用（SPA），通过Axios调用后端RESTful API；后端SSM框架负责业务逻辑与数据持久化，返回JSON数据。前后端通过HTTP协议通信，接口清晰，易于扩展和维护。

分层设计：

表现层：Vue组件 + 路由
控制层：SpringMVC Controller
业务层：Service接口及实现
持久层：MyBatis Mapper
数据层：MySQL数据库

四、功能模块设计

1. 系统管理

用户登录/注销
用户管理（管理员、HR、普通员工）
角色管理
菜单权限管理
修改密码

2. 部门管理

部门列表（树形结构）
添加、编辑、删除部门
部门负责人设置

3. 岗位管理

岗位列表
岗位增删改查
岗位与部门关联

4. 员工管理

员工基本信息（工号、姓名、性别、出生日期、身份证、手机、邮箱、住址等）
员工列表（分页、条件查询）
员工入职、转正、调岗、离职操作
员工照片上传
员工合同管理
员工档案导出

5. 考勤管理

考勤记录导入/录入
考勤统计（日、月）
请假、加班、出差申请与审批
考勤异常处理

6. 薪资管理

薪资标准设置
月度薪资计算
薪资发放记录
薪资条生成与查看
社保公积金计算

7. 招聘管理

职位发布
简历管理
面试安排
录用管理

8. 培训管理

培训计划制定
培训报名
培训记录与反馈

9. 统计分析

员工人数统计
部门人数分布
考勤出勤率
薪资总额趋势
图表展示（ECharts）

五、数据库设计（主要表）

| 表名 | 说明 |
|------|------|
| sysuser | 系统用户表 |
| sysrole | 角色表 |
| sysmenu | 菜单权限表 |
| hrdepartment | 部门表 |
| hrposition | 岗位表 |
| hremployee | 员工信息表 |
| hrcontract | 合同表 |
| hrattendance | 考勤记录表 |
| hrleave | 请假表 |
| hrsalary | 薪资表 |
| hrrecruitment | 招聘表 |
| hrtraining | 培训表 |

其中hremployee表关键字段：id, empno, name, gender, birthdate, idcard, phone, email, address, deptid, positionid, hiredate, status, photo, createtime, update_time。

六、关键代码示例

1. 后端Controller示例（员工管理）

`java @RestController @RequestMapping("/api/employee") public class EmployeeController { @Autowired private EmployeeService employeeService;

@GetMapping("/list")
public Result list(@RequestParam Map params) {
PageResult page = employeeService.queryPage(params);
return Result.ok(page);
}

@PostMapping("/save")
public Result save(@RequestBody Employee employee) {
employeeService.save(employee);
return Result.ok();
}

@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable Long id) {
employeeService.removeById(id);
return Result.ok();
}
}
`

2. Vue前端示例（员工列表页面）

<template>
<div>
<el-table :data="employeeList" border>
<el-table-column prop="empNo" label="工号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="deptName" label="部门"></el-table-column>
<el-table-column prop="positionName" label="岗位"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="edit(scope.row)">编辑</el-button>
<el-button @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getEmployeeList, deleteEmployee } from '@/api/employee'
export default {
data() {
return { employeeList: [] }
},
created() {
this.fetchData()
},
methods: {
fetchData() {
getEmployeeList().then(res => {
this.employeeList = res.data.records
})
},
del(id) {
this.$confirm('确认删除?').then(() => {
deleteEmployee(id).then(() => {
this.$message.success('删除成功')
this.fetchData()
})
})
}
}
}
</script>