AIScoring/src/views/exam/scanDetail.vue

<template>
    <!-- 扫描详情 -->
  <div class="page_list">
    
    <div class="search_content">
        <div class="content_left">
            <el-select  v-model="params.batchNo"   placeholder="选择批次" @change="GoSearch()" class="select_width" >
                <el-option label="全部批次" value=""></el-option>
                <el-option v-for="item in batchList"
                :key="item.value"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select  v-model="params.batchNo"   placeholder="选择状态" @change="GoSearch()" class="select_width" >
                <el-option label="全部状态" value=""></el-option>
                <el-option v-for="item in batchList"
                :key="item.value"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input placeholder="考试名称，编号"  v-model="params.keyWord" @input="GoSearch" @change="GoSearch()" class="input_width" > 
                <el-button @click="GoSearch()"  slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="content_right">
            <el-button @click="Refresh" >
                <i class="iconfont icon_shuaxin"></i>刷新
            </el-button>
            

            
            <!-- <el-button class="delete_item" type="text" @click="OpenDeleteAllDialog"  v-if="tableData.length>0">删除所有</el-button> -->
            <el-button @click="OpenReIdentify" >重新识别</el-button>
            <el-button @click="OpenEditExamList()" type="primary" v-if="isImportStudent">编辑考场名单</el-button>
            <el-button @click="OpenImportStudent()" type="primary" v-else>导入考场名单</el-button>
        </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_content" >
        <div class="content_table">
            <div class="table_header">
                <div class="header_left">
                    <div class="scan_button_header">
                        <el-button @click="ChangeMode('list')" :type="listMode=='list'?'primary':''"><el-icon><Menu /></el-icon> 列表模式</el-button>
                        <el-button @click="ChangeMode('pic')" :type="listMode=='pic'?'primary':''"><el-icon><Picture /></el-icon> 图片模式</el-button>
                    </div>
    
                </div>
                <div class="header_right">
                    客户端状态:
                    <span class="scan_state_open" v-if="scanClientStates">
                        <i class="iconfont icon_open"></i>已打开</span>
                    <span class="scan_state_close" v-else>
                        <i class="iconfont icon_close"></i>未打开</span>
                </div>
            </div>
            <div class="page_jg_20"></div>
            <div class="page_table">
                <el-table :data="tableData" style="width: 100%" :height="tableHeight">
                    <el-table-column prop="questionName" label="序号" width="100" align="center" >
                    </el-table-column>
                    <el-table-column prop="questionType" label="批次" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="questionType" label="考号" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="date" label="客观题" align="center">
                        <template v-slot="scope">
                            
                        </template>
                    </el-table-column>
                    <el-table-column prop="fullScore" label="状态" width="120" align="center">
                        <template v-slot="scope">
                            <div class="full_mark_input">
                                <el-input v-model="scope.row.fullScore" maxlength="3" @input="(val: any) => onScoreInput(scope.row, 'fullScore', val)"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作" width="150" align="center">
                        <template v-slot="scope">
                            <div class="ele_button table_row_button">
                                <span class="btn_editor">编辑</span>
                                <span class="btn_delete" @click="DeleteSingle(scope.row)">删除</span>
                            </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="content_right">
            <div class="right_header">
               <span> 扫描 设置</span>
               <span>
                识别号:
                <el-select v-model="params.batchNo" placeholder="请选择" @change="GoSearch()" style="width: 120px;">
                    <el-option label="全部状态" value=""></el-option>
                    <el-option v-for="item in batchList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
               </span>
            </div>
            <div class="right_center">
                <div class="scan_buttons" @click="OpenScan">
                    <ScanButton></ScanButton>
                </div>
                <div class="scan_list">
                    <div class="list_item no_scan" >
                        <div class="list_item_info " @click="GotoDetail(0)">
                            <div class="item_info_title">
                                未扫描
                            </div>
                            <div class="item_info_number">
                                <span class="number_no_scan">{{}}人</span>
                                <!-- <span class="number_no_icon"><img src="../../assets/icon/no_scan_icon.png"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="list_item no_exam" >
                        <div class="list_item_info " @click="GotoDetail(2)">
                            <div class="item_info_title">
                                缺考
                            </div>
                            <div class="item_info_number">
                                <span class="number_no_exam">{{}}人</span>
                                <!-- <span class="number_no_icon"><img src="../../assets/icon/miss_exam.png"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="list_item annormal_icon" >
                        <div class="list_item_info " @click="GotoDetail(3)">
                            <div class="item_info_title">
                                异常
                            </div>
                            <div class="item_info_number">
                                <span class="number_abnormal">{{}}份</span>
                                <!-- <span class="number_no_icon"><img src="../../assets/icon/abnormal_icon.png"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="list_item sucess_upload" >
                        <div class="list_item_info " @click="GotoDetail(1)">
                            <div class="item_info_title">
                                已上传
                            </div>
                            <div class="item_info_number">
                                <span class="number_uploaded">{{}}人</span>
                                <!-- <span class="number_no_icon"><img src="../../assets/icon/sucess_upload.png"></span> -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_button">
                <el-button type="primary" @click="GoSearch()" style="width:calc(100% - 40px);">扫描完成</el-button>
            </div>
        </div>
    </div>
    <SelectStudent v-model="showSelectStudent"  @success="StudentSuccess"></SelectStudent>
  </div>
</template>
<script lang="ts" setup>
import { useExamStore } from '@/store/exam'
import { useRouter } from 'vue-router'
import { onMounted ,ref,computed} from 'vue';
import ScanButton from './components/scanButton.vue'
import SelectStudent from './components/selectStudent.vue'
import { hasImportStudent, } from '@/api/exam'
// 实例化 Store
const examStore = useExamStore()
const router = useRouter()

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

const params=ref({
    batchNo:'',
    keyWord:''
})

const batchList=[];
const listMode=ref('list');
const scanClientStates=ref(false);//客户端状态
const tableData=ref([]);

const tableHeight=ref(500);


const isImportStudent=ref(false);//是否导入了学生名单
const showSelectStudent=ref(false);//是否显示选择学生名单弹窗

// 打开导入学生名单
const OpenImportStudent = () => {
    showSelectStudent.value=true;
}

// 打开编辑考试名单
const OpenEditExamList = () => {
    router.push({
        path: '/exam/examList',
        query: {
            examSubjectId: examSubjectId.value,
        },
    });
}


//学生名单导入成功
const StudentSuccess = () => {

    HasImportStudent();
}



//查询是否导入了学生名单
const HasImportStudent = async () => { 
    const params = {
      examSubjectId: examSubjectId.value,
      schoolId: 0,//单校 0 
    };
    const res = await hasImportStudent(params);
    console.log("打印是否导入了学生名单",res);
    if(res.code==200)
    {
        isImportStudent.value=res.data;
    }
    else{
        isImportStudent.value=false;
    }
}


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

.page_list
{
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;

}



</style>