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

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

    <div>

        <div class="box-mian">
            <el-table v-loading="loading" :data="tableData.list" style="width: 100%" height="300" show-empty>
                <template v-for="(item, index) in tableHead">
                    <el-table-column stripe fixed width="70" :cell-style="cellStyle" :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="150" align="center">
                            <template slot-scope="scope">
                                <p>
                                    {{ scope.row[item.filed].shiftInfoName }}</p>

                                <span
                                    :style="{ color: getAttendanceStatusColor(scope.row[item.filed].attendanceStatus), textAlign: 'center' }">
                                    {{ scope.row[item.filed].attendanceStatus }}</span>
                            </template>
                        </el-table-column>
                    </div>
                </template>
            </el-table>
        </div>
        <div class="box-button1">
            <p v-for="(  item, index  ) in   tableData.remark  ">{{ item }}</p>
        </div>
        <template>
            <!-- <div>
            
                <el-loading :visible="loading" text="正在加载中...">
               
                    <el-table :data="tableData.list" style="width: 100%" height="300" show-empty>
                        ...
                    </el-table>
                </el-loading>
            </div> -->
        </template>
    </div>
</template>

<script>
export default {
    watch: {
        param(value) {
            // Assuming value is an array
            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;
        },
        cellStyle() {
            return {
                color: 'black'
            };
        },
        getAttendanceStatusColor1(status) {
            if (status === '上班打卡&下班打卡正常') {
                return 'blue';
            } else if (status === '上班打卡迟到/下班打卡早退') {
                return 'orange';
            } else if (status === '上班/下班外勤打卡') {
                return 'green';
            } else {
                return 'transparent';
            }
        },
        getAttendanceStatusColor(status) {
            if (status === '正常' || status === '已打卡' || status === '上班未打卡' || status === '下班缺卡') {
                return 'blue';
            } else if (status === '迟到' || status === "早退") {
                return 'orange';
            } else if (status === '外勤') {
                return 'green';
            } else {
                return ''; // 或者其他默认颜色
            }
        }
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box-mian {
    background-color: rgb(243, 246, 244);
}

.color {
    background-color: rgb(red, green, blue);
}

.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 {
    padding: 5px;
    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;
    color: #fff;
    background-color: rgb(158, 158, 212);
    border-radius: 1px
}
</style>