jhbigscreen/src/pages/components/AttendanceDetailDialog.vue

130 lines
4.4 KiB
Vue

<template>
<MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="today-attendance-detail">
<template slot="title">今日出勤</template>
<div class="head-title-tab" style="padding: 10px 0px;">
<div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">总包人员</div>
<div :class="nav == 8 ? 'head-nav active' : 'head-nav'" @click="doNav(8)">监理人员</div>
<div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">劳务人员</div>
</div>
<el-table v-loading="loading" :data="tableData" class="mytable" height="650" style="width: 100%;background: transparent;" ref="fbsubordinateUnit">
<el-table-column label="照片" align="center" prop="id">
<template slot-scope="{row}">
<el-image v-if="row.recentPhoto||row.scanPhoto||row.workerPhoto" :src="row.recentPhoto||row.scanPhoto||row.workerPhoto" :preview-src-list="[row.recentPhoto||row.scanPhoto||row.workerPhoto]" style="height:60px"/>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="workerName" />
<el-table-column label="性别" align="center" prop="attendanceType" >
<template slot-scope="{row}">{{ row.workerGender==1?'女':'男' }}</template>
</el-table-column>
<el-table-column label="分包商名称" align="center" prop="companyName" />
<el-table-column label="所属班组" align="center" prop="groupName" />
<el-table-column label="工种" align="center" prop="workTypeName" />
<el-table-column label="上午打卡(首次)" align="center" prop="inTime">
<template slot-scope="{row}">
<span v-if="row.attendanceTime">{{ row.attendanceTime|formatTime }}</span>
<i style="font-size: 20px;color: red;" v-else class="el-icon-close"></i>
</template>
</el-table-column>
<el-table-column label="下午打卡(末次)" align="center" prop="outTime" >
<template slot-scope="{row}">
<span v-if="row.attendanceOutTime">{{ row.attendanceOutTime|formatTime }}</span>
<i style="font-size: 20px;color: red;" v-else class="el-icon-close"></i>
</template>
</el-table-column>
</el-table>
<el-pagination layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index" class="bg-pagination"></el-pagination>
</MyDialog>
</template>
<script>
import MyDialog from '../components/MyDialog'
export default {
components: {
MyDialog,
},
name: 'JhbigscreenIndexDlg1',
data() {
return {
loading:false,
show: false,
tableData: [],
projectId:0,
deptId:0,
size:10,
index:1,
total:0,
nav:1
};
},
mounted() {
},
methods: {
handleCurrentChange(n){
this.index=n;
this.loadData();
},
doNav(n){
this.nav=n;
this.index=1;
this.loadData();
},
showDialog(data) {
this.projectId=data?.projectId||0;
this.deptId=data?.deptId||0;
this.size=10;
this.index=1;
this.loadData();
this.show = true
},
loadData(){
let postData={
projectId:this.projectId,
deptId:this.deptId,
size:this.size,
index:this.index,
id:this.nav
}
this.tableData=[];
this.loading=true;
this.$api.attendance.todayAttendance(postData).then(d=>{
this.total=d.total||0;
this.tableData=d.rows||[];
this.loading=false;
})
}
},
};
</script>
<style lang="less" scoped>
.mytable{
/deep/ th .cell{
color: aquamarine;
}
}
.today-attendance-detail{
/deep/ .quality-table .el-table .el-table__row{
background-image: none !important;
td{
border-bottom:solid 1px rgba(60,170,255,0.3);
}
}
}
</style>
<style lang="less">
.today-attendance-detail{
.popup-project-introduction-min {
transform: translateY(100px);
.bg-pagination{
margin-top:20px;
}
}
}
</style>