AIScoring/src/views/exam/examList.vue

<template>
    <!-- 考场名单 -->
  <div class="page_item page_list">
    <div class="search_content">
        <div class="content_left">
            <el-input placeholder="请输入学生姓名"  v-model="searchContent" @input="GoSearch" @change="GoSearch()" style="width:240px;" >
                <el-button @click="GoSearch()"  slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="content_right el_button">
            <el-button @click="Refresh()" class="refresh_btn"><i class="iconfont icon_shuaxin"></i>刷新</el-button>
            <!-- <el-button @click="ExportExamStudentList()" class="refresh_btn">
                <i class="iconfont icon_export" style="margin-right: 5px;"> </i> 导出
            </el-button> -->
            <el-button @click="BackToTemplate()" class="other_btn" >重新导入名单</el-button>
            <el-button @click="OpenAddStudent()" class="add_student" >新增学生</el-button>
            <el-button @click="BackToScan()" type="primary" >扫描页面</el-button>
        </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="table_content">
        <div class="content_left page_table">
            <el-table :data="examRoomList" style="width: 100%" :height="tableHeight">
                <el-table-column align="center" width="80"  prop="examInfo" >
                        <template v-slot="scope">
                            <el-radio v-model="selectExamRoomCode" :value="scope.row.examRoomCode"></el-radio>
                        </template>
                    </el-table-column>
                <el-table-column prop="examRoomName" label="班级" width="80" align="center">
                </el-table-column>
                <el-table-column prop="date" label="缺考/学生数" width="120" align="center">
                    <template v-slot="scope">
                        <div class="answer_input">
                            {{scope.row.missExamNum}}/{{scope.row.totalStudentNum}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="fullScore" label="异常数" width="80" align="center">
                    <template v-slot="scope">
                        <div class="full_mark_input">
                            {{scope.row.abnormalNum}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="已上传/学生数" align="center">
                    <template v-slot="scope">
                        <div class="full_mark_input">
                            {{scope.row.uploadedNum}}/{{scope.row.totalStudentNum}}
                        </div>
                   </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="content_right page_table">
            <el-table :data="examStudentList" style="width: 100%" :height="tableHeight">
                <el-table-column type="index" label="序号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="studentCode" label="学号" width="120" align="center">

                </el-table-column>
                <el-table-column prop="fullScore" label="姓名" width="120" align="center">
                    <template v-slot="scope">
                        <div class="full_mark_input">
                            {{scope.row.studentName}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="examCode" label="考号" width="170" align="center">
                    <template v-slot="scope">
                         {{scope.row.examCode}}
                   </template>
                </el-table-column>
                <el-table-column prop="adminClassName" label="行政班" width="120" align="center">
                    <template v-slot="scope">
                        {{scope.row.adminClassName}}
                   </template>
                </el-table-column>
                <el-table-column prop="teachingClassName" label="教学班" width="120" align="center">
                </el-table-column>
                <el-table-column  label="状态" width="130" align="center">
                    <template v-slot="scope">
                        <div class="table_row_scan_state"></div>
                        <div v-if="scope.row.scannedStatus==3" class="table_row_studentStatus"><div class="que_icon"></div>缺页</div>
                        <div v-if="scope.row.scannedStatus==0" class="table_row_studentStatus"><div class="no_scan_icon"></div>未扫描</div>
                        <div v-if="scope.row.scannedStatus==1" class="table_row_studentStatus"><div class="upload_icon"></div>已上传</div>
                        <div v-if="scope.row.scannedStatus==2" class="table_row_studentStatus"><div class="qk_icon"></div>缺考</div>
                   </template>
                </el-table-column>
                <el-table-column prop="name" label="操作" align="center">
                    <template v-slot="scope">
                        <div class="table_row_option" >
                                <div class="button_editor" @click="EditorStudent(scope.row)">
                                    编辑
                                </div>
                                <!-- 逻辑 有图片的才能查看  无图片的不能查看 -->
                                <div class="button_editor" v-if="scope.row.scanPictureVOS && scope.row.scanPictureVOS.length>0" @click="OpenImage(scope.row)">
                                    查看
                                </div>
                                <div class="editor_disable" v-else>
                                    查看
                                </div>
                                <div class="button_delete"  @click="ConfirmDelete(scope.row)" v-if="scope.row.scannedStatus==0">
                                    删除
                                </div>
                                <div class="editor_disable" v-else>
                                    删除
                                </div>
                            </div>  
                   </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_bottom">
        <div class="bottom_left">
            <span>班级数：{{examInfo.classCount}}个</span>
            <span>学生总数：{{examInfo.totalStudentCount}}个</span>
            <span>缺考人数:{{examInfo.missCount}}个</span>
            <span>已扫描学生：<span class="span_red">{{examInfo.uploadedCount}}个</span></span>
            <span>扫描进度：<span class="span_red">{{examInfo.scanRate}}%</span></span>
        </div>
        <div class="bottom_right">
            当前选中班级：{{selectExamRoomName}}  学生数：{{examStudentList.length }}人
        </div>
    </div>
    <AddStudent ref="addStudentRef"  v-model="showAddStudent" :selectSchoolId="selectSchoolId" @success="HandleSuccess" />
  </div>
</template>
<script lang="ts" setup>
import { getExamRoomList,getExamRoomStudentList,deleteExamRoomStudent,getClassListData} from '@/api/exam'
import { useExamStore } from '@/store/exam'
import { useRouter } from 'vue-router'
import { onMounted, onUnmounted, ref, nextTick,computed, watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'
import AddStudent from './components/addStudent.vue' // 新增学生弹窗
// 实例化 Store
const examStore = useExamStore()
const router = useRouter()

const examRoomList=ref([]);//考场列表
const examStudentList=ref([]);//考场学生列表
const selectSchoolId=ref(0);
const searchContent=ref('');//搜索内容
const selectExamRoomCode=ref('');//选择的考场code
const selectExamRoomName=ref('');//选择的考场名称

const showAddStudent=ref(false);//是否显示新增学生弹窗
const currentEditItem=ref<any>(null);//当前编辑的学生数据
const addStudentRef = ref<any>(null);//新增学生弹窗实例
const teachingClassList = ref<any[]>([]);
const adminClassList = ref<any[]>([]);
const studentTypeList=ref<any[]>([]);

const tableHeight=ref(400);//表格高度
const examInfo=ref({
    classCount:0,//班级数
    totalStudentCount:0,//学生总数
    missCount:0,//缺考人数
    uploadedCount:0,//已上传学生数
    abnormalCount:0,//异常数
    scanRate:0,//扫描进度
});

// 考试科目 ID
const examSubjectId = computed(() => {
  return examStore.currentExam?.id
})//计算属性

//学校id
const schoolId = computed(() => {
    return examStore.currentExam?.schoolInfoId || 0
})

//刷新
const Refresh = () => {
    examRoomList.value=[];
    examStudentList.value=[];
  GetExamRoomList();//获取考场列表
}
// 返回到扫描界面
const BackToScan = () => {

    router.push({
        path: '/exam/scanList',
        query: {
            examSubjectId: examSubjectId.value,
        },
    });
}

// 监听选择的考场代码变化，自动更新考场名称
watch(selectExamRoomCode, (newCode) => {
  if (!newCode || !examRoomList.value || examRoomList.value.length === 0) {
    selectExamRoomName.value = '';
    return;
  }

  // 在考场列表中查找匹配的项
  const selectedRoom = examRoomList.value.find((room: any) => room.examRoomCode === newCode);
  
  if (selectedRoom) {
    selectExamRoomName.value = selectedRoom.examRoomName;
    console.log('当前选中考场:', selectExamRoomName.value);
    
    // 可选：如果切换考场需要重新获取学生列表，可以在这里调用
    GetExamRoomStudentList(); 
  } else {
    selectExamRoomName.value = '';
  }
});

//搜索
const GoSearch=()=>{ 
    console.log('搜索内容:', searchContent.value);
    GetExamRoomStudentList();
}

//重新导入名单
const BackToTemplate =() =>
{

}

//导出学生名单
const ExportExamStudentList=()=>
{

}

//新增学生
const OpenAddStudent=()=>{
    showAddStudent.value=true;
}

//编辑学生
const EditorStudent=async (row:any)=>{
    console.log("打印编辑学生信息", row);
    if (addStudentRef.value) {
        addStudentRef.value.EditorStudent(row);
    }
    // 打开弹窗并传递编辑数据
    showAddStudent.value = true;
}

//编辑或者新增学生弹窗成功消息
const HandleSuccess=() => { 
   
}


//获取考试班级列表
const GetClassListData = () => {
  let param = {
    examSubjectId: examSubjectId.value,
    schoolId: schoolId.value,
  }
  
  getClassListData(param).then((res: any) => {
    if (res.code == 200) {
      adminClassList.value = res.data.adminClassSelect || []
      teachingClassList.value = res.data.teachClassSelect || []
      studentTypeList.value = res.data?.studentType || []
      examRoomList.value = res.data.examRoomSelect || []
    }
  })
}

//删除学生
const ConfirmDelete=(row:any)=>{
    console.log('删除',row);
    ElMessageBox.confirm('确认删除该学生吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass:'page_dialog'
    }).then(async () => {
        console.log('删除学生')
        const param={
            id:row.id,
        };
        const res = await deleteExamRoomStudent(param);
        console.log('删除结果:', res);
        if (res.code === 200) {
            ElMessage.success('删除成功');
            GetExamRoomStudentList();
        }
        else
        {
            ElMessage.error('删除失败!'+res.msg);
        }
        
    })
}
//获取考场列表
const GetExamRoomList = async () => {
    try {
        const params={
            examSubjectId:examSubjectId.value,
            schoolId:schoolId.value,
        };
        const res = await getExamRoomList(params);
        if (res.code === 200) {
            examRoomList.value = res.data.examRoomTblVOS;
            selectExamRoomCode.value = examRoomList.value[0]?.examRoomCode;

            examInfo.value={
                classCount:res.data.examRoomNum,//班级数
                totalStudentCount:res.data.totalStudentNum,//学生总数
                missCount:res.data.totalMissExamNum,//缺考人数
                uploadedCount:res.data.totalUploadedNum,//已上传学生数
                abnormalCount:0,//异常数
                scanRate:res.data.totalUploadRate,//扫描进度
            };
            GetExamRoomStudentList();
        }
        console.log('考场列表', res);
    } catch (error) {
        console.error('获取考场列表失败', error);
    }
};

//获取扫描考场的学生列表
const GetExamRoomStudentList = async () => {
    try {
        const params = {
            examSubjectId:examSubjectId.value,
            schoolId:schoolId.value,
            examRoomCode:selectExamRoomCode.value,
            studentName:searchContent.value,//学生姓名搜索
            pageNum:1,
            pageSize:1000,
        };
        console.log('获取考场学生列表参数', params); // 打印参数
        const res = await getExamRoomStudentList(params);
        if (res.code === 200) 
        {
            examStudentList.value = res.data.records;
        }
        console.log('获取考场学生列表成功', res);

    } catch (error) {
            console.error('获取考场学生列表失败', error);
        return error;
    }

}
//计算高度的函数
const CalculateTableHeight = () => {
  // nextTick 确保 DOM 更新后再获取尺寸
  nextTick(() => {
    // window.innerHeight 是浏览器可视区域高度

    // 简单算法：视窗高度 - 固定占用高度
    let computedHeight = window.innerHeight - 40 - 20 - 36 - 20 - 65;
    
    // 限制最小高度，防止太矮
    if (computedHeight < 200) {
      computedHeight = 200;
    }

    tableHeight.value = computedHeight;
  });
}; 

onMounted(() => {
  
    if (!examStore.currentExam) {
        console.warn('当前没有选中的考试信息')
        // 可选：如果没有数据，可以重定向回列表页或提示用户
        
    }
    GetExamRoomList();//获取考场列表

    
    // 初始化计算
    CalculateTableHeight();
  
    // 监听窗口大小变化
    window.addEventListener('resize', CalculateTableHeight);
})
// 卸载时移除监听，防止内存泄漏
onUnmounted(() => {
  window.removeEventListener('resize', CalculateTableHeight);
});
</script>
 
<style lang="scss" scoped>
.table_content
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 140px - 40px);

    .content_left
    {
        width: 35%;
        height: 100%;
    }

    .content_right
    {
        width: calc(65% - 20px);
        height: 100%;
    }
}

//状态
.table_row_studentStatus
{
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 5px;


    //缺页
    .que_icon
    {
        margin-left: 5px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #F56C6C;
    }

    //异常的
    .qk_icon
    {
        margin-left: 5px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FB9F34;
        
    }

    //已上传
    .upload_icon
    {
        margin-left: 5px;
        width: 6px;
        height: 6px;
        background: #2BC644;
        border-radius: 50%;
    }
    //未扫描
    .no_scan_icon
    {
        margin-left: 5px;
        width: 6px;
        height: 6px;
        background: #2E64FA;
        border-radius: 50%;
    }

}
</style>