YD_SmartSports.Web/src/views/userManage/trainingRecord.vue

<template>
    <commonDialog :list="data.dialogData" @cancle="cancle" @confirm="confirm">
        <template #cont>
            <div class="trainingRecord">
                <div class="head">
                    <div class="left">
                        <div class="search-item">
                            <p class="desctipt">类型:</p>
                            <el-select v-model="data.tableNeed.type" class="m-2" clearable placeholder="请选择类型">
                                <el-option label="个人" :value="1" />
                                <el-option label="团队" :value="2" />
                            </el-select>
                        </div>
                        <div class="search-item">
                            <p class="desctipt">训练模式:</p>
                            <el-select v-model="data.tableNeed.mode" class="m-2" clearable placeholder="请选择训练模式">
                                <el-option label="自由训练" :value="1" />
                                <el-option label="计时训练" :value="2" />
                                <el-option label="计数训练" :value="3" />
                            </el-select>
                        </div>
                        <div class="search-item">
                            <p class="desctipt">训练时间:</p>
                            <el-date-picker
                                v-model="data.tableNeed.timeRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                class="date-picker"
                            />
                        </div>
                    </div>
                    <div class="right">
                        <p class="search" @click="getTrainingRecords">查询</p>
                        <p class="reset" @click="resetSearch">重置</p>
                    </div>
                </div>
                <div class="cont">
                    <el-table :data="data.tableNeed.tableData" style="width: 100%; height: calc(100% - 60px);" fit="true"
                        :header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }"
                        :cell-style="getCellStyles" :row-style="{ height: '0px' }">
                        <el-table-column fixed prop="ind" label="序号" width="60" />
                        <el-table-column prop="type" label="类型" width="100">
                            <template #default="scope">
                                {{ scope.row.type === 1 ? '个人' : scope.row.type === 2 ? '团队' : '未知' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mode" label="训练模式" width="120">
                            <template #default="scope">
                                {{ scope.row.mode === 1 ? '自由训练' : scope.row.mode === 2 ? '计时训练' : scope.row.mode === 3 ? '计数训练' : '未知' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="duration" label="训练时长(分钟)" width="120" />
                        <el-table-column prop="jumpCount" label="跳绳数(个)" width="120" />
                        <el-table-column prop="calories" label="消耗热量(千卡)" width="120" />
                        <el-table-column prop="trainingTime" label="训练时间" width="180" />
                    </el-table>
                    <el-pagination class="pagination" :current-page="data.tableNeed.pageIndex"
                        :page-size="data.tableNeed.pageSize" :page-sizes="[10, 50, 100, 200]"
                        layout="total, sizes, prev, pager, next, jumper" :total="data.tableNeed.total"
                        @size-change="handleSizeChange" @current-change="changePage" />
                </div>
            </div>
        </template>
    </commonDialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from 'vue';
import commonDialog from '@/components/commonDialog/index.vue';
import * as _api from '@/api/user';
import { ElMessage } from 'element-plus';

const props = defineProps({
    userId: {
        type: Number,
        required: true
    },
    visible: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:visible']);

// 页面数据
const data = reactive({
    tableNeed: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        type: null,
        mode: null,
        timeRange: [],
        tableData: []
    },
    dialogData: {
        dialogVisible: true,
        title: '训练记录',
        confirmText: '确定',
        cancleText: '取消',
    }
});

// 单元格样式
const getCellStyles = ({ row, column, rowIndex, columnIndex }) => {
    return {
        'text-align': 'center',
        'font-size': '12px',
        'color': '#3F404A',
        'padding': '3px',
        'height': '50px'
    };
};

// 获取训练记录列表
const getTrainingRecords = async () => {
    if (!props.userId) {
        ElMessage.warning('用户ID不能为空');
        return;
    }

    try {
        const startTime = data.tableNeed.timeRange && data.tableNeed.timeRange[0] ? data.tableNeed.timeRange[0] : '';
        const endTime = data.tableNeed.timeRange && data.tableNeed.timeRange[1] ? data.tableNeed.timeRange[1] : '';

        const res = await _api.getUserTrainingRecords(
            props.userId,
            data.tableNeed.pageIndex,
            data.tableNeed.pageSize,
            data.tableNeed.type,
            data.tableNeed.mode,
            startTime,
            endTime
        );

        if (res && res.datas) {
            data.tableNeed.tableData = res.datas.map((item, index) => {
                return {
                    ...item,
                    ind: (data.tableNeed.pageIndex - 1) * data.tableNeed.pageSize + index + 1
                };
            });
            data.tableNeed.total = res.total;
        }
    } catch (error) {
        console.error('获取训练记录失败', error);
    }
};

// 重置搜索条件
const resetSearch = () => {
    data.tableNeed.type = null;
    data.tableNeed.mode = null;
    data.tableNeed.timeRange = [];
};

// 分页大小变化
const handleSizeChange = (val) => {
    data.tableNeed.pageSize = val;
    data.tableNeed.pageIndex = 1;
    getTrainingRecords();
};

// 页码变化
const changePage = (val) => {
    data.tableNeed.pageIndex = val;
    getTrainingRecords();
};

// 对话框取消
const cancle = () => {
    emit('update:visible', false);
};

// 对话框确认
const confirm = () => {
    emit('update:visible', false);
};

// 监听visible变化
watch(() => props.visible, (newVal) => {
    if (newVal) {
        getTrainingRecords();
    }
});

// 页面加载时获取列表
onMounted(() => {
    if (props.visible) {
        getTrainingRecords();
    }
});
</script>

<style lang="scss" scoped>
.trainingRecord {
    width: 100%;
    height: 600px;
    box-sizing: border-box;

    .head {
        width: 100%;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        flex-wrap: wrap;

        .left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            flex: 1;

            .search-item {
                display: flex;
                align-items: center;
                margin-right: 20px;
                margin-bottom: 5px;
            }

            .desctipt {
                font-size: 14px;
                font-weight: 400;
                color: #3F404A;
                margin-right: 10px;
                white-space: nowrap;
            }

            .m-2 {
                width: 150px;
            }

            .date-picker {
                width: 240px;
            }
        }

        .right {
            display: flex;
            align-items: center;
            flex-shrink: 0;

            p {
                width: 80px;
                height: 32px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                line-height: 32px;
                text-align: center;
                margin-left: 10px;
                cursor: pointer;
            }

            .search {
                background: #3E7BFA;
                color: #FFFFFF;
            }

            .reset {
                background: #F8F8FA;
                color: #3F404A;
            }
        }
    }

    .cont {
        width: 100%;
        height: calc(100% - 60px);
        box-sizing: border-box;
        position: relative;
        padding: 0 20px;

        .pagination {
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
    }
}
</style>