<template>
|
<div class="silkRegister-form">
|
<div class="filter">
|
<div class="filter-card">
|
<CommonSearch
|
:show-add="false"
|
:show-download="false"
|
:amount-view="false"
|
:show-action-btn="false"
|
placeholder="请输入关键词"
|
@searchClick="onFilterSearch"
|
>
|
<template slot="leftButton">
|
<div class="margin_right_20px" style="width:200px;">
|
<el-date-picker v-model="object.date" style="width:100%"
|
@change="onFilterSearch"
|
:clearable="false" type="month" placeholder="选择日期"
|
:picker-options="pickerOptions"
|
value-format="yyyy-MM">
|
</el-date-picker>
|
</div>
|
</template>
|
</CommonSearch>
|
</div>
|
</div>
|
|
<div class="body">
|
<div class="body-card">
|
<div class="list-view">
|
<TableCommonView
|
ref="tableListRef"
|
v-loading="loading"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
@selCommonClick="(row,prop,item) => selCommonClick(row,prop,item)"
|
>
|
</TableCommonView>
|
</div>
|
<!-- <div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div> -->
|
</div>
|
</div>
|
<AttendanceStatisticsDetails ref="attendanceStatisticsDetails" :editRow="editRow" @shutdown="getData" />
|
</div>
|
</template>
|
|
<script>
|
import { getAttendanceStatistic } from "@/api/employeeSalary/attendanceManage.js"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import AttendanceStatisticsDetails from "@/views/employeeSalary/attendanceStatistics/components/AttendanceStatisticsDetails"
|
import NewDate from "@/api/date";
|
const { getPreviousMonth } = NewDate;
|
export default {
|
name: "attendanceStatistics",
|
props: {
|
},
|
mixins: [pageMixin],
|
components: {
|
AttendanceStatisticsDetails,
|
},
|
data() {
|
return {
|
tableList: {},
|
loading: false,
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > new Date().getTime() - 86400000;
|
},
|
},
|
object:{
|
date:getPreviousMonth()
|
},
|
editRow:{
|
|
},
|
searchOptions: [],
|
editConfig: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
keyword: "",
|
tableColumn: [
|
{ label: "姓名", prop: "workerName", min: 120, default: true },
|
{ label: "人员ID", prop: "workerId", min: 190,default: true},
|
{ label: "工种", prop: "workType", min: 100, },
|
{ label: "月份", prop: "month", min: 100 },
|
{ label: "工作日加班时长(小时)", prop: "weekdayOverTime", min: 180 },
|
{ label: "休息日加班时长(小时)", prop: "restDayOverTime", min: 180 },
|
{ label: "应出勤天数", prop: "requiredAttendanceDays", min: 110 },
|
{ label: "实际出勤天数", prop: "actualAttendanceDays", min: 110 },
|
],
|
showCol: [
|
"工种",
|
"月份",
|
"工作日加班时长(小时)",
|
"休息日加班时长(小时)",
|
"应出勤天数",
|
"实际出勤天数",
|
]
|
}
|
},
|
created() {
|
this.setTable()
|
this.getData(this.keyword)
|
},
|
computed: {
|
},
|
methods: {
|
setTable() {
|
this.tableList = {
|
selectIndex: true,
|
isFixed:true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showCol,
|
headerHeight:'47px',
|
tableColumn: this.setColumnVisible(this.showCol)
|
}
|
this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
|
this.searchOptions = []
|
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
|
const label = this.tableList.tableColumn[i].label
|
const value = this.tableList.tableColumn[i].prop
|
this.searchOptions.push({ value: value, label: label })
|
}
|
},
|
setColumnVisible(showCol) {
|
return this.tableColumn.map((ele) => {
|
return {
|
...ele,
|
isShowColumn:ele.default?true:showCol.includes(ele.label)
|
}
|
})
|
},
|
selTableCol(val) {
|
this.showcol = val;
|
this.tableList.tableColumn = this.setColumnVisible(val);
|
},
|
// 请求数据
|
async getData() {
|
this.loading = true
|
await getAttendanceStatistic({
|
keyword: this.keyword,
|
month:this.object.date,
|
// page: this.pagerOptions.currPage,
|
// pageSize: this.pagerOptions.pageSize
|
})
|
.then((res) => {
|
console.log(res)
|
if (res.code === 200) {
|
if (res.data.list && res.data.list.length > 0) {
|
let tableColumn1= [
|
{ label: "姓名", prop: "workerName", min: 120,default: true,fixed:'left' },
|
{ label: "人员ID", prop: "workerId", min: 120,default: true,fixed:'left'},
|
{ label: "工种", prop: "workType", min: 100,fixed:'left' },
|
{ label: "月份", prop: "month", min: 90 ,fixed:'left'},
|
];
|
let tableColumn3=[
|
{ label: "工作日加班时长(小时)", prop: "weekdayOverTime", min: 140,},
|
{ label: "休息日加班时长(小时)", prop: "restDayOverTime", min: 140, },
|
{ label: "应出勤天数", prop: "requiredAttendanceDays", min: 110 ,},
|
{ label: "实际出勤天数", prop: "actualAttendanceDays", min: 110,},
|
]
|
let tableColumn2=[]
|
let headerList=res.data.list.length>0?res.data.list[0]:[]
|
if(headerList.details&&headerList.details.length>0){
|
for(let i in headerList.details){
|
tableColumn2.push({
|
label:headerList.details[i].date+'',
|
weekDay:headerList.details[i].weekDay+'',
|
prop:'headerDate'+headerList.details[i].date,
|
min:80,
|
default:true,
|
isCallMethod:true,
|
isClass: true,
|
getClassName:this.getHeaderClass,
|
getCallMethod: this.getHeaderDate,
|
isCommonClick:true,
|
isIcon:true,
|
})
|
}
|
}
|
|
let tableColumn=tableColumn1.concat(tableColumn2).concat(tableColumn3)
|
this.tableColumn=tableColumn;
|
this.setTable()
|
const list = res.data.list.map((item) => {
|
let headerItem={}
|
let details=item.details?item.details:[]
|
for(let i in details){
|
headerItem['headerDate'+details[i].date]=details[i].status
|
}
|
return {
|
...item,
|
...headerItem,
|
}
|
})
|
this.tableList.tableInfomation = list || []
|
this.pagerOptions.totalCount = res.total
|
} else {
|
this.tableList.tableInfomation = []
|
}
|
} else {
|
this.tableList.tableInfomation = []
|
}
|
this.loading = false
|
})
|
.catch((err) => {
|
console.log(err)
|
this.tableList.tableInfomation = []
|
this.loading = false
|
})
|
},
|
getHeaderDate(val){
|
let string=''
|
// 1==正常 2===加班 3==休假 4===异常
|
if(val==1){
|
string="<i class='el-icon-circle-check'></i>"
|
}else if(val==2){
|
string='班'
|
}else if(val==3){
|
string='休'
|
}else if(val==4){
|
string='异'
|
}
|
return string
|
},
|
getHeaderClass(val){
|
let classname=''
|
// 1==正常 2===加班 3==休假 4===异常
|
if(val==1){
|
classname = "color_67c23a font_weight_700 font_size_20";
|
}else if(val==2){
|
classname = "color_FF9900 font_weight_700";
|
}else if(val==3){
|
classname = "color_333 font_weight_700";
|
}else if(val==4){
|
classname = "color_red font_weight_700";
|
}
|
return classname
|
},
|
// 搜索
|
onFilterSearch(searchText) {
|
this.keyword = searchText ?? ""
|
this.pagerOptions.currPage = 1
|
this.getData()
|
},
|
selCommonClick(row,prop,item){
|
let config=JSON.parse(JSON.stringify(row));
|
let details=config.details
|
let headerItem={}
|
for(let i in details){
|
if(details[i].date==item.label){
|
headerItem.classes=details[i].classes
|
headerItem.classesEndTime=details[i].classesEndTime
|
headerItem.classesStartTime=details[i].classesStartTime
|
headerItem.endWorkTime=details[i].endWorkTime
|
headerItem.startWorkTime=details[i].startWorkTime
|
headerItem.status=details[i].status
|
headerItem.dateDay=details[i].date
|
break;
|
}
|
}
|
this.editRow = {
|
...config,
|
...headerItem,
|
}
|
this.$refs.attendanceStatisticsDetails.islook = true;
|
},
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.silkRegister-form {
|
height: 100%;
|
overflow: hidden;
|
.filter {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 12px 20px 0 20px;
|
&-card {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 10px 20px;
|
flex: 1;
|
border-radius: 12px;
|
background-color: #fff;
|
}
|
}
|
.body {
|
box-sizing: border-box;
|
padding: 10px 20px;
|
border-radius: 12px;
|
height: calc(100% - 92px);
|
.body-card {
|
background-color: #fff;
|
border-radius: 12px;
|
height: 100%;
|
overflow: hidden;
|
}
|
.list-view {
|
height: calc(100% - 10px);
|
overflow: hidden;
|
}
|
.btn-pager {
|
display: flex;
|
margin-top: 10px;
|
.page {
|
margin-left: auto;
|
}
|
}
|
}
|
}
|
</style>
|
