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

	<template >
    <!-- This is component 3 -->

    <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>