【024】Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)(含源码、数据库、运行教程、实验报告)

前排提示：项目源码已放在文末
基于Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)
在这里插入图片描述

开发环境：Springboot+Mysql+Vue+Nodejs+Maven+JDK1.8
技术栈：spring-boot、mysql、mybatis-plus、druid连接池。
与【023】相比，【024】增加了轮播图功能，数据库的测试用例创建也比较清晰，而且有两份课设报告，绝对物超所值！
身份目录：
在这里插入图片描述

源码、数据库、课设获取：

百度云链接：https://pan.baidu.com/s/1qXJwWxwh2PUD-BnM9N9jjg 
提取码：6wsw

部分功能及代码介绍：
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.打卡类型

             <el-button type="primary" @click="changeState(0)" :disabled='isHere'>上班打卡</el-button>
            <el-button type="success" @click="changeState(1)" :disabled='!isHere'>下班打卡</el-button>
            <el-button type="danger" @click="changeState(2)" :disabled='!isHere'>外出打卡</el-button>
            <el-button type="warning" @click="changeState(3)" :disabled='isHere'>返回打卡</el-button>

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.员工信息展示

<el-table
        :data="page"
        border
        style="width: 100%"
        >
    <el-table-column
        prop="empId"
        label="员工ID"
    >
    </el-table-column>
    <el-table-column
        prop="account"
        label="工号">
    </el-table-column>
    
    <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>
</el-table>

部分报告截图：
在这里插入图片描述