jhbigscreen/src/pages/components/JobWorkerDialog.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="today-attendance-detail">
        <template v-if="isGroup">
            <template slot="title">{{jobType==0?'在岗':'离岗'}}人数({{ total }})</template>
            <el-table :data="tableData" class="mytable" max-height="750" style="width: 100%;background: transparent;"
                ref="fbsubordinateUnit" :show-summary="tableData.length > 1">
                <el-table-column label="项目名称" align="left" prop="prjName" />
                <el-table-column label="部门" align="left" prop="dptName"></el-table-column>
                <el-table-column label="总包人数" align="center" prop="data101" />
                <el-table-column label="监理人数" align="center" prop="data102" />
                <el-table-column label="劳务7人数" align="center" prop="data103" />
                <el-table-column label="合计" align="center" prop="total">
                    <template slot-scope="{row}"><span style="font-size:16px;font-weight: bold;color:#87e3fa;">{{row.total }}</span></template>
                </el-table-column>
            </el-table>

        </template>
        <template v-else>
            <template slot="title">在岗人数({{ indexData.total }})</template>
            <div class="head-title-tab" style="padding: 10px 0px;">
                <div :class="nav == 101 ? 'head-nav active' : 'head-nav'" @click="doNav(101)">总包人员({{ indexData.data101
                    }})</div>
                <div :class="nav == 102 ? 'head-nav active' : 'head-nav'" @click="doNav(102)">监理人员({{ indexData.data102
                    }})</div>
                <div :class="nav == 103 ? 'head-nav active' : 'head-nav'" @click="doNav(103)">劳务人员({{ indexData.data103
                    }})</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 :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="nativePlace" />
                <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="inTime" v-if="1 == 2">
                    <template slot-scope="{row}">{{ row.enterDate | formatDate }}</template>
                </el-table-column>
                <el-table-column label="分包商名称" align="center" prop="companyName">
                    <template slot-scope="{row}">{{row.companyName||row.degreeName}}</template>
                </el-table-column>
                <el-table-column label="所属班组" align="center" >
                    <template slot-scope="{row}">{{ row.groupName||row.remark }}</template>
                </el-table-column>
                <el-table-column label="岗位/工种" align="center" prop="workTypeName" />
            </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>
        </template>
    </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,
            isGroup: false,
            size: 10,
            index: 1,
            total: 0,
            jobType:0,
            nav: 101,
            indexData: {
                total: 0,
                data101: 0,
                data102: 0,
                data103: 0
            },
        };
    },

    mounted() {

    },

    methods: {
        handleCurrentChange(n) {
            this.index = n;
            this.loadData();
        },
        doNav(n) {
            this.nav = n;
            this.index = 1;
            this.loadData();
        },
        showDialog(data) {            
            const getData = id => {
                var tmps = data.datas.filter(d => d.text == id);
                return tmps.length > 0 ? tmps[0].cnt : 0;
            }
            this.indexData.total = data.total;
            this.jobType=data.type;
            this.indexData.data101 = getData("101");
            this.indexData.data102 = getData("102");
            this.indexData.data103 = getData("103");
            this.projectId = data?.projectId || 0;
            this.deptId = data?.deptId || 0;
            this.size = 10;
            this.index = 1;
            if (this.projectId == 0) {
                this.isGroup = true;
                this.loadGroupData();
            } else {
                this.isGroup = false;
                this.loadData();
            }
            this.show = true
        },
        loadGroupData() {
            this.$api.attendance.groupByWorkerState({ deptId: this.deptId,state:this.jobType==0?0:1 }).then(d => {
                const getTypeId = (id) => {
                    let typeId = { "101": [1, 6], "102": [8], "103": [0, 2, 3, 4, 5] }
                    for (let k in typeId) {
                        let v = typeId[k];
                        if (v.indexOf(id) >= 0) {
                            return k;
                        }
                    }
                    return "";
                }
                let tmps = (d.data || []).map(it => {
                    return {
                        prjName: it.name,
                        dptName: it.groupName,
                        companyId: getTypeId(+it.companyId),
                        cnt: it.cfgid
                    }
                });
                let sum = 0;
                let obj = {};
                tmps.forEach(it => {
                    let k = it.prjName + "_" + it.dptName + "_";
                    let o = null;
                    if (!obj[k]) {
                        o = {
                            prjName: it.prjName,
                            dptName: it.dptName,
                            data101: 0,
                            data102: 0,
                            data103: 0,
                            total:0,
                        };
                        obj[k] = o;
                    } else {
                        o = obj[k];
                    }
                    sum += it.cnt;
                    o['data' + it.companyId] += it.cnt;
                });
                this.tableData = [];
                for (let k in obj) {
                    let o=obj[k];
                    o.total=o.data101+o.data102+o.data103;
                    this.tableData.push(o);
                }
                this.total = sum;
            })
        },
        loadData() {
            let postData = {
                projectId: this.projectId,
                pageSize: this.size,
                pageNum: this.index,
                id: this.nav,
                state:this.jobType==0?0:1
            }
            this.tableData = [];
            this.loading = true;
            this.$api.attendance.queryWorkerByState(postData).then(d => {
                this.total = d.total || 0;
                this.tableData = (d.rows || []).map(it => {
                    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;
        }

        .head-title-tab {
            .head-nav {
                padding: 4px 36px;
            }
        }

    }
}
</style>