【023】Springboot+vue+mysql员工考勤管理系统（多角色登录、请假、打卡）(含源码、数据库、运行教程)

前排提示：项目源码已放在文末
开发环境：Springboot+Mysql+Vue+Nodejs+Maven+JDK1.8
技术栈：spring-boot、mysql、mybatis-plus、druid连接池。

部分功能及代码介绍：
1.员工类型：部门经理、副总经理、总经理、人事人员、财务人员

<el-form-item label="员工角色">
    <el-select v-model="employer.role" placeholder="请选择员工类型">
        <el-option label="员工" value="0"></el-option>
        <el-option label="部门经理" value="1"></el-option>
        <el-option label="副总经理" value="2"></el-option>
        <el-option label="总经理" value="3"></el-option>
        <el-option label="人事人员" value="4"></el-option>
        <el-option label="财务人员" value="5"></el-option>
    </el-select>

2.请假申请可以经过部门经理、总经理审核同意

       <template slot="title">请假及审核</template>
          <el-menu-item index="/apply/addApply">添加申请</el-menu-item>
          <el-menu-item index="/apply/applyList">请假记录</el-menu-item>
          <el-menu-item index="/apply/ManageApply" :disabled="ismanager">部门经理审核申请</el-menu-item>
          <el-menu-item index="/apply/ManageApplyX" :disabled="ismanager">总经理审核申请</el-menu-item>

3.请假类型：

formatType(row){
            if (row.type == 0) {
                return '事假';
            } else if (row.type == 1) {
                return '年假';
            } else if (row.type == 2) {
                return '婚假';
            } else if (row.type == 3) {
                return '产检';
            } else if (row.type == 4) {
                return '产假';
            } else if (row.type == 5) {
                return '哺乳';
            } else if (row.type == 6) {
                return '陪产';
            } else if (row.type == 7) {
                return '外出';
            } 
        },

4.员工打卡类型：

   formatType(row){
            if (row.type == 0) {
                return '上班打卡';
            } else if (row.type == 1) {
                return '下班打卡';
            } else if (row.type == 2) {
                return '外出打卡';
            } else if (row.type == 3) {
                return '返回打卡';
            }
        },

5.员工当前状态：

  loadstate(){
            var empId = window.sessionStorage.getItem('empId');
            this.$http.get('/queryEmpStateById/'+empId).then(res => {
                if (res.data==0){
                    this.state = '下班';
                    this.isHere = false;
                }else if (res.data==1){
                    this.state = '在班';
                    this.isHere = true;
                }else if (res.data==2){
                    this.state = '外出';
                    this.isHere = false;
                }else if (res.data==3){
                    this.state = '假期';
                    this.isHere = false;
                }else if (res.data==4){
                    this.state = '请假';
                    this.isHere = false;
                }
            });
        },

6.员工信息展示

<el-table-column
    prop="name"
    label="姓名"
    >
</el-table-column>
<el-table-column
    prop="gender"
    label="性别"
    :formatter="formatGender"
    >
</el-table-column>
<el-table-column
    prop="phone"
    label="手机号"
    >
</el-table-column>
<el-table-column
    prop="role"
    label="职位"
    :formatter="formatRole">
</el-table-column>

运行截图展示：

一.vscode前端运行过程：
1.安装依赖

npm i

或者

cnpm i

2.启动项目

cnpm run dev

6.跳转即可打开

（数据库请自行导入，这里就不展开）

IDEA后端连接数据库 教程（保姆级）：
(注意：建议使用jdk1.8）

选择对应目录

选择从外部模型导入maven项目

在右侧连接数据库

分别填入用户名、数据库密码、数据库名称

记得修改springboot-vue-student-master\springboot-vue-student-master\src\main\resources下application.yml配置文件的密码为自己数据库的密码。

更新maven文件

运行成功

以上操作配置完，便可以打开

http://localhost:8080/#/login

运行啦

源码及数据库：
百度云链接：https://pan.baidu.com/s/1SaXwgl71MovWqdzHyLTR8g
提取码：78on

也可以添加cynm-2233获取，码字不易，还望点赞~