jhbigscreen/src/pages/components/AttendanceDetailDialog.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 :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" :src="row.recentPhoto" :preview-src-list="[row.recentPhoto]" style="height:60px"/>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="性别" align="center" prop="attendanceType" >
        <template slot-scope="{row}">{{ row.gender==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.inTime">{{ row.inTime|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.outTime">{{ row.outTime|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="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 {
            show: false,
            tableData: [],
            projectId:0,
            deptId:0,
            size:10,
            index:1,
            total:0,
            nav:1
        };
    },

    mounted() {
        this.tableData = [
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04',username:'haha' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' }
        ]
    },

    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.$api.attendance.todayAttendance(postData).then(d=>{
                this.total=d.total||0;
                this.tableData=d.rows||[];
            })
        }
    },
};
</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>