前排提示:项目源码已放在文末
基于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>
部分报告截图:
一.vscode前端运行过程:
1.安装依赖
npm i
或者
npm i
2.启动项目
npm 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/1CKMhVbtp8UTu7YRs2PDZug
提取码:6r5m