<template >
<!-- This is component 3 -->
<div class="box">
<div class="box-mian">
<div class="box-color">
<el-table v-loading="loading" :data="tableData.list" style="width: 100%" show-empty>
<template v-for="(item, index) in tableHead ">
<el-table-column stripe fixed width="70" align="center" :label="item.name" :prop="item.filed"
v-if="item.filed == 'userName'">
<template slot-scope="scope">
{{ scope.row[item.filed] }}
</template>
</el-table-column>
<div class="color" v-else>
<el-table-column :label="item.name" :prop="item.filed" width="84" align="center">
<template slot-scope="scope">
<div :style="{
backgroundColor: getBackgroundColor(scope.row[item.filed].attendanceStatus), display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
height: '90px',
marginRight: '1px',
}">
<p>
{{ scope.row[item.filed].shiftInfoName }}</p>
<span class="box-colir" :style="{
color: getAttendanceStatusColor(scope.row[item.filed].attendanceStatus), textAlign: 'center', borderRadius: '12px',
backgroundColor: getBorderStyle(scope.row[item.filed].attendanceStatus), padding: '0px 10px',
fontSize: '12px'
}
">
{{ scope.row[item.filed].attendanceStatus }}</span>
</div>
</template>
</el-table-column>
</div>
</template>
</el-table>
</div>
</div>
<div class="box-button1">
<p v-for="( item, index ) in tableData.remark ">{{ item }}</p>
</div>
<template>
</template>
</div>
</template>
<script>
export default {
watch: {
param(value) {
this.fetchData()
}
},
data() {
return {
param: {},
tableHead: [],
tableData: { remark: [], list: [] },
loading: false,
};
},
methods: {
fetchData() {
let ArrayList = this.param.result.list;
let remark = this.param.result.remark
let tableHead = [];
let tableData = [];
tableHead.push({ name: "员工", filed: "userName" });
for (let index = 0; index < ArrayList.length; index++) {
const item = ArrayList[index];
let json = {};
for (let index2 = 0; index2 < item.list.length; index2++) {
const item2 = item.list[index2];
let day = new Date(item2.today)
let date = day.getMonth() + 1 + '-' + day.getDate()
// 填充表头
if (index == 0) {
tableHead.push({ name: date, filed: date });
}
// 填充表数据
if (index2 == 0) {
json["userName"] = item.userName;
}
json[date] = item2;
}
tableData.push(json);
}
this.$set(this.tableData, 'remark', remark)
this.$set(this.tableData, 'list', tableData)
this.tableHead = tableHead;
},
// 整体背景颜色
getBackgroundColor(status) {
if (status === '正常') {
return 'rgba(238, 243, 248,1 )';
} else if (status === '迟到' || status === '早退') {
return 'rgb(255, 247, 248)';
} else if (status === '外勤') {
return 'rgba(234, 250, 242, 1)';
} else if (status === '未排班') {
return 'rgba(248, 250, 251,1)';
}
else {
return 'rgba(248, 250, 251,1)';
}
},
// 字体颜色
getAttendanceStatusColor(status) {
if (status === '上班未打卡' || status === '下班缺卡' || status === '下班未打卡' || status === '上班缺卡') {
return 'blue';
}
else {
return '';
}
},
// 字体背景颜色
getBorderStyle(status) {
if (status === '正常') {
return 'rgb(57, 117, 197)';
} else if (status === '外勤') {
return 'rgb(66, 195, 130)';
} else if (status === '已打卡') {
return 'rgb(57, 117, 197)';
} else if (status === '迟到') {
return 'rgb(255, 60, 78)';
} else {
return '';
}
}
}
};
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
overflow: auto;
height: 15px;
}
// .box {
// background-color: #fff !important;
// }
::v-deep .el-table__fixed {
height: 94% !important;
}
.color {
background-color: #d3e4bd;
}
.box-mian {
// padding: 0 10px;
background-color: #fff;
width: 100%;
height: 100%;
}
// ::v-deep .el-table__fixed-body-wrapper {
// }
// ::v-deep .el-table th>.cell {
// left: 10px;
// }
.van-grid {
margin-top: 20px;
height: 100%;
}
.box-button {
margin-top: 30px;
}
.box-button1 {
background-color: rgb(248, 248, 248);
margin: 30px;
width: 100%;
}
.grid-container {
display: flex;
justify-content: space-around;
}
.grid-item {
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
}
/* .box-right {
width: 100%;
display: flex;
flex-direction: column;
overflow-x: auto;
} */
.box-button {
margin-top: 0;
width: 60px;
height: 60px;
text-align: center;
}
.el-table::before {
height: 0px;
}
::v-deep.el-table td .box-1 {
margin: 5px;
background-color: rgb(158, 158, 212);
border-radius: 1px
}
::v-deep .el-table .cell {
padding: 0;
}
::v-deep .el-table--enable-row-transition .el-table__body td {
padding: 0;
}
::v-deep.el-table--enable-row-transition .el-table__body td span.box-colir {
color: white;
text-align: center;
border-radius: 3px;
}
/* 迟到、早退 */
&.late-early {
background-color: #260606;
}
/* 外勤 */
&.outdoor {
background-color: #d3e4bd;
}
</style>
选择时间和部门后填充数据
于 2023-12-28 17:02:45 首次发布