选择时间和部门后填充数据

浅浅的花香味﹌ 2024-02-05 20:15 43阅读 0赞

![在这里插入图片描述][e49a210c218345d6bb7bd3843f7861a8.png]

<template >
        
    
        <div class="box">
    
            <div class="box-mian">
                <div class="box-color">
                    <el-table v-loading="loading" :data="tableData.list" style="width: 100%" show-empty>
                        <template v-for="(item, index) in  tableHead ">
                            <el-table-column stripe fixed width="70" align="center" :label="item.name" :prop="item.filed"
                                v-if="item.filed == 'userName'">
                                <template slot-scope="scope">
                                    {
       { scope.row[item.filed] }}
                                </template>
    
                            </el-table-column>
                            <div class="color" v-else>
                                <el-table-column :label="item.name" :prop="item.filed" width="84" align="center">
                                    <template slot-scope="scope">
                                        <div :style="{
                                            backgroundColor: getBackgroundColor(scope.row[item.filed].attendanceStatus), display: 'flex',
                                            flexDirection: 'column',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            textAlign: 'center',
                                            height: '90px',
                                            marginRight: '1px',
                                        }">
                                            <p>
                                                {
       { scope.row[item.filed].shiftInfoName }}</p>
                                            <span class="box-colir" :style="{
                                                color: getAttendanceStatusColor(scope.row[item.filed].attendanceStatus), textAlign: 'center', borderRadius: '12px',
                                                backgroundColor: getBorderStyle(scope.row[item.filed].attendanceStatus), padding: '0px 10px',
                                                fontSize: '12px'
                                            }
                                                ">
                                                {
       { scope.row[item.filed].attendanceStatus }}</span>
                                        </div>
    
                                    </template>
                                </el-table-column>
                            </div>
                        </template>
                    </el-table>
                </div>
    
            </div>
            <div class="box-button1">
                <p v-for="(   item, index   ) in    tableData.remark   ">{
       { item }}</p>
            </div>
            <template>
            </template>
        </div>
    </template>
    
    <script>
    export default {
        watch: {
            param(value) {
                this.fetchData()
            }
        },
        data() {
            return {
                param: {},
                tableHead: [],
                tableData: { remark: [], list: [] },
                loading: false,
    
            };
        },
        methods: {
            fetchData() {
                let ArrayList = this.param.result.list;
                let remark = this.param.result.remark
                let tableHead = [];
                let tableData = [];
                tableHead.push({ name: "员工", filed: "userName" });
    
                for (let index = 0; index < ArrayList.length; index++) {
                    const item = ArrayList[index];
                    let json = {};
    
                    for (let index2 = 0; index2 < item.list.length; index2++) {
                        const item2 = item.list[index2];
    
                        let day = new Date(item2.today)
                        let date = day.getMonth() + 1 + '-' + day.getDate()
                        // 填充表头
                        if (index == 0) {
                            tableHead.push({ name: date, filed: date });
                        }
                        // 填充表数据
                        if (index2 == 0) {
                            json["userName"] = item.userName;
                        }
                        json[date] = item2;
                    }
    
                    tableData.push(json);
                }
    
                this.$set(this.tableData, 'remark', remark)
                this.$set(this.tableData, 'list', tableData)
                this.tableHead = tableHead;
            },
            // 整体背景颜色
            getBackgroundColor(status) {
                if (status === '正常') {
                    return 'rgba(238, 243, 248,1 )';
                } else if (status === '迟到' || status === '早退') {
                    return 'rgb(255, 247, 248)';
    
                } else if (status === '外勤') {
                    return 'rgba(234, 250, 242, 1)';
                } else if (status === '未排班') {
                    return 'rgba(248, 250, 251,1)';
                }
                else {
                    return 'rgba(248, 250, 251,1)';
                }
            },
            // 字体颜色
            getAttendanceStatusColor(status) {
                if (status === '上班未打卡' || status === '下班缺卡' || status === '下班未打卡' || status === '上班缺卡') {
                    return 'blue';
                }
                else {
                    return '';
                }
            },
            // 字体背景颜色
            getBorderStyle(status) {
                if (status === '正常') {
                    return 'rgb(57, 117, 197)';
                } else if (status === '外勤') {
                    return 'rgb(66, 195, 130)';
                } else if (status === '已打卡') {
                    return 'rgb(57, 117, 197)';
                } else if (status === '迟到') {
                    return 'rgb(255, 60, 78)';
                } else {
                    return '';
                }
            }
    
        }
    };
    </script>
    
    <style  lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        overflow: auto;
        height: 15px;
    
    
    }
    
    // .box {
    //     background-color: #fff !important;
    // }
    
    ::v-deep .el-table__fixed {
        height: 94% !important;
    }
    
    .color {
        background-color: #d3e4bd;
    
    }
    
    .box-mian {
        // padding: 0 10px;
        background-color: #fff;
        width: 100%;
        height: 100%;
    }
    
    // ::v-deep .el-table__fixed-body-wrapper {
    
    // }
    
    // ::v-deep .el-table th>.cell {
    //     left: 10px;
    
    // }
    
    .van-grid {
        margin-top: 20px;
        height: 100%;
    }
    
    .box-button {
        margin-top: 30px;
    }
    
    .box-button1 {
        background-color: rgb(248, 248, 248);
        margin: 30px;
        width: 100%;
    }
    
    .grid-container {
    
        display: flex;
        justify-content: space-around;
    
    
    }
    
    .grid-item {
        width: 60px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    
    }
    
    /* .box-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-x: auto;
      
    } */
    
    .box-button {
        margin-top: 0;
        width: 60px;
        height: 60px;
        text-align: center;
    
    }
    
    .el-table::before {
        height: 0px;
    }
    
    ::v-deep.el-table td .box-1 {
        margin: 5px;
        background-color: rgb(158, 158, 212);
        border-radius: 1px
    }
    
    ::v-deep .el-table .cell {
        padding: 0;
    }
    
    ::v-deep .el-table--enable-row-transition .el-table__body td {
        padding: 0;
    }
    
    ::v-deep.el-table--enable-row-transition .el-table__body td span.box-colir {
        color: white;
        text-align: center;
        border-radius: 3px;
    
    }
    
    /* 迟到、早退 */
    &.late-early {
        background-color: #260606;
    }
    
    /* 外勤 */
    &.outdoor {
        background-color: #d3e4bd;
    }
    </style>

[e49a210c218345d6bb7bd3843f7861a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4d99a5b79b8a4b2cac121d5124aa548a.png