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(101)">总包人员</div>
            <div :class="nav == 8 ? 'head-nav active' : 'head-nav'" @click="doNav(102)">监理人员</div>
            <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(103)">劳务人员</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.scanPhoto || row.recentPhoto || row.workerPhoto"
                        :src="row.scanPhoto || row.recentPhoto || 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: 101
        };
    },

    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 = {
                attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD"),
                projectId: this.projectId,
                pageSize: this.size,
                pageNum: this.index,
                companyTypeId: this.nav
            }
            this.tableData = [];
            this.loading = true;
            this.$api.attendance.listAttendance(postData).then(d => {
                this.total = d.total || 0;
                this.tableData = (d.rows || []).map(it => {
                    let dt1 = it.attendanceTime;
                    let dt2 = it.attendanceOutTime;
                    if ((!dt1 || !dt2) || dt1 == dt2) {
                        let dt = dt1 || dt2;
                        if (it.remark == "E") {
                            it.attendanceTime = dt;
                            it.attendanceOutTime = "";
                        } else {
                            it.attendanceTime = "";
                            it.attendanceOutTime = dt;
                        }
                    }
                    it.scanPhoto = it.scanPhoto && it.scanPhoto.indexOf("/profile") == 0 ? "/jhapi" + it.scanPhoto : it.scanPhoto;
                    return it;
                });
                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>