teacher-assessment/src/views/reviewManagement/stepComponent/evaluationProgressComponent/ReviewAccountTableData.vue

<!-- 评价账号使用统计表 -->
<template>
    <div class="end_item">
        <div class=" page_search">
            <div class="search_content">
                <div class="content_left">
                    <div class="grade_title">评价账号使用统计表</div>
                </div>
                <div class="content_right">

                    <FormSearchGroup :searchList="searchList" 
                        @searchChange="HandleSearchChange">
                    </FormSearchGroup>
                 
                    <el-button class="button_refresh" @click="HandleExportExcel">导出Excel</el-button>
                </div>
            </div>
        </div>
        <Table :currentPage="currentPage" :pageSize="pageSize" 
            :tableColumns="reviewAccountUseTableColumns" 
            :tableData="tableData"
            :totalNum="totalNum"
            @paginationChange="HandlePaginationChange">
            <template #num="{row,currentIndex}">
                {{  currentIndex + pageSize * (currentPage - 1) }}
            </template>
            <template #evaluationStatus="{row}">
                <TableRowStatus :statusMsg="statusMsg" :useStatus="row.evaluationStatus">
                </TableRowStatus>
            </template>
        </Table>
    </div>
</template>

<script setup lang="ts">
import Table from '@/baseComponents/Table.vue';
import {  ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

import {reviewAccountUseTableColumns} from  './table'
import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';

import {searchList} from './formSearchGroup'
import TableRowStatus from '@/baseComponents/TableRowStatus.vue';

import { getEvaluationAccountUseStatisticsApi, reviewAccountGradeListApi, reviewAccountDataExportExcelApi } from '@/api/evaluationProgressComponent.js';

const route = useRoute()

const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)

const tableData = ref([])

const statusMsg = ref([
    {
        statusFlag:0,
        title:'未使用',
        themeClass:'need_summary_icon',  
    },
    {
        statusFlag:1,
        title:'已使用',
        themeClass:'not_included_icon',  
    },
    {
        statusFlag:2,
        title:'已提交',
        themeClass:'normal_icon', 
    },

])


const searchParams = ref({
    grade:'',
    status:''
})

// 处理查询条件的变更
const HandleSearchChange = async (params,key)=>{
    console.log('触发的查询参数___',params)
    searchParams.value = {
        ...searchParams.value,
        ...params
    }
    await GetEvaluationAccountUseStatistics()
}

// 处理表格分页
const HandlePaginationChange = async (params)=>{
    const { type, val } = params
    if(type == 'currentPage'){
        currentPage.value = val
        await GetEvaluationAccountUseStatistics()
    }
}

// 获取评价账号使用统计表的数据
const GetEvaluationAccountUseStatistics = async ()=>{
    let params = {
        evaluationId: route.query.id,
        evaluationGradeId: searchParams.value.grade == 'all' ? '' : searchParams.value.grade,  //年级id
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        evaluationStatus: searchParams.value.status == 'all' ? '' : searchParams.value.status     // 评价码状态
    }
    let res = await getEvaluationAccountUseStatisticsApi(params)
    if(res?.code == 200){
        tableData.value = res?.data?.records || []
        totalNum.value = res?.data?.total
    }
}

// 获取年级列表
const GetGradeList = async ()=> {
    let res = await  reviewAccountGradeListApi(route.query.id)
    if(res?.code == 200){
        let gradeOption = res.data.map(item=>{
            return {
                label:item.evaluationGradeName,
                value:item.evaluationGradeId
            }
        })
        // 初始化年级下拉
        searchList.value = searchList.value.map(item=>{
            if(item.key == 'grade'){
                item.options = [
                    {
                        label:'全部年级',
                        value:'all'
                    },
                    ...gradeOption
                ]  
                item.defaultValue = 'all'
            }
            return item
        })
    }
}


// 处理excel导出
const HandleExportExcel = async ()=>{
     let params = {
        evaluationGenderStatus:null,  //性别 必传，值为空
        evaluationId: route.query.id,
        evaluationGradeId: searchParams.value.grade == 'all' ? '' : searchParams.value.grade,  //年级id
        evaluationStatus: searchParams.value.status == 'all' ? '' : searchParams.value.status     // 评价码状态
    }
    let res = await reviewAccountDataExportExcelApi(params)
    if(res?.code == 200){
        const blob =  new Blob([res.data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        });

        // 3. 创建指向该 Blob 的临时 URL
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '评价账号使用统计表.xlsx'; 
        document.body.appendChild(link);
        link.click();

        // 清理内存
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    }
}

onMounted(async()=>{
    await GetGradeList()
    await GetEvaluationAccountUseStatistics()
})
</script>


<style lang="scss" scoped>

.end_item{
    height: 100%;
}

.search_content{
    margin-bottom: 10px;
}

</style>