DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

考勤功能完成

Browse Source
This commit is contained in:
86156
2024-11-05 18:55:58 +08:00
parent fee5e4edb7
commit 36d06eeb53
16 changed files with 942 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
ruoyi-ui/src/views/oa/attendance/index.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div class="app-container" v-loading="loading">
<el-row :gutter="20">
<el-col :span="14">
签到表
<table>
<thead>
<tr>
<th width="80"></th>
<th v-for="(item,index) in 31" :class="selectHead===index+1?'selectBox':''" @click="selectMany(index+1)">
{{ index + 1 }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in userList">
<td :class="(item.userId===selectUser.userId || selectAll)?'selectBox':''">{{ item.nickName }}</td>
<td v-for="(item2,index2) in 31" @click="selectAttendDay(item,index,index2+1)"
:style="{backgroundColor:(item.attendances.length>0 && item.attendances.findIndex(i=>i.attendanceDay === index2+1) >-1) ?item.attendances[item.attendances.findIndex(i=>i.attendanceDay === index2+1)].color:(index2+1===selectIndex&&(item.userId===selectUser.userId || selectAll)?'#f3ff52':'')}"></td>
</tr>
</tbody>
</table>
</el-col>
<el-col :span="5">
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-s-order"></i> 项目列表</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
</div>
<div v-for="(item,index) in projectList" style="display: flex;justify-content: space-between">
<el-button class="text" :style="{backgroundColor:item.color===''?'':item.color}" @click="signIn(item)">{{ item.projectName }}
</el-button>
<el-color-picker class="text" v-model="item.color" @change="changeItemColor(item)"></el-color-picker>
</div>
</el-card>
</el-col>
<el-col :span="5">
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-timer"></i>工作时长</span>
<div style="margin: 20px 0 ">
<el-radio-group v-model="timeFlag">
<el-radio :label="0">天计</el-radio>
<el-radio :label="1">小时计</el-radio>
</el-radio-group>
</div>
<el-select v-if="timeFlag===0" v-model="form.dayLength" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
<el-select v-if="timeFlag===1" v-model="form.hour" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length_hour"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import {listWorker} from "@/api/system/user";
import {listProject, updateProject} from "@/api/oa/project";
import {listOaAttendance} from "@/api/oa/oaAttendance";
import {addBatchOaAttendance, addOaAttendance} from "../../../api/oa/oaAttendance";
export default {
name: "Project",
dicts: ['work_time_length','work_time_length_hour'],
data() {
return {
// 选择索引
selectIndex: new Date().getDate(),
// 用户列表
userList: [],
// 项目列表
projectList: [],
loading: true,
selectHead: new Date().getDate(),
// 提交表单
form: {},
// 查询参数
userQueryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined
},
queryParams:{
pageNum: 1,
pageSize: 50,
},
selectArrayIndex:new Date().getDate(),
timeFlag: 0,
// 项目查询参数
projectQueryParams: {
pageNum: 1,
pageSize: 10,
projectName: undefined,
projectNum: undefined,
beginTime: undefined,
finishTime: undefined
},
selectUser: {},
// 日期范围
dateRange: [],
selectAll: true,
}
},
mounted() {
const day = new Date().getDate();
},
created() {
this.getList();
},
methods: {
selectAttendDay(item,index, index2) {
this.selectIndex = index2;
this.selectAll = false;
this.selectUser = item;
this.selectHead = index2
this.selectArrayIndex = index
},
selectMany(index) {
this.selectAll = true;
this.selectIndex = index;
this.selectHead = index
},
/** 查询用户列表 */
getList() {
this.loading = true;
listOaAttendance(this.queryParams).then(res=>{
console.log(res.data)
this.userList = res.data;
this.total = res.total;
});
listProject(this.projectQueryParams).then(response => {
this.projectList = response.rows;
this.total = response.total;
this.loading = false;
})
},
changeItemColor(item) {
updateProject(item);
this.getList();
},
signIn(project){
// 一个签到
if (this.form.dayLength === undefined && this.timeFlag === 0) {
this.$message({ message: '请选择工作时长', type: 'warning' })
return;
}
if (this.form.hour === undefined && this.timeFlag === 1) {
this.$message({ message: '请选择工作时长', type: 'warning' })
return;
}
let time = this.timeFlag===0?this.form.dayLength:this.form.hour
if (!this.selectAll){
this.form = {
projectId:project.projectId,
userId:this.selectUser.userId,
attendanceDay:this.selectIndex,
dayLength: this.timeFlag===0?this.form.dayLength:undefined,
hour:this.timeFlag===1?this.form.hour:undefined
}
addOaAttendance(this.form).then(res=>{
this.selectUser = this.selectArrayIndex>=this.userList.length-1?this.selectUser:this.userList[this.selectArrayIndex+1]
this.getList()
})
}else{
this.form = {
projectId:project.projectId,
attendanceDay:this.selectIndex,
dayLength: this.timeFlag===0?this.form.dayLength:undefined,
hour:this.timeFlag===1?this.form.hour:undefined
}
// 集体赋予状态
addBatchOaAttendance(this.form).then(res=>{
this.getList()
})
}
},
}
};
</script>
<style scoped>
table {
border: 1px solid #000;
table-layout: fixed;
width: 100%;
}
th {
border: 1px solid;
height: 15px;
overflow: hidden;
}
td {
border: 1px solid;
white-space: nowrap;
}
table {
border-collapse: collapse;
}
.selectDay {
background-color: #00afff;
}
.selectBox {
background-color: #f3ff52;
}
.text {
font-size: 16px;
border-bottom: #cccccc 1px dashed;
margin: 5px 0;
}
</style>