mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-08 18:36:43 +08:00
378 lines
14 KiB
Vue
378 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<div v-if="showTab==1">
|
||
<div style="padding: 10px; text-align: center;margin-top: 20px;">
|
||
<el-button @click="openCusExam()" type="primary" >自定义考试</el-button>
|
||
<el-button @click="openChoosePaper()" type="primary">选择已有考试</el-button>
|
||
</div>
|
||
</div>
|
||
<div v-if="showTab==2">
|
||
<div style="display: flex;justify-content: flex-start;">
|
||
<div><el-input v-model="usePaper.keyword" maxlength="50" placeholder="名称"></el-input></div>
|
||
<div style="padding-left: 10px;"><el-button @click="findExamPapers()" type="primary" >查询</el-button></div>
|
||
<div style="padding-left: 10px;"><el-button @click="changeExamShow(1)" type="danger" >返回</el-button></div>
|
||
</div>
|
||
<div>
|
||
<div style="text-align: center;padding-top: 10px; overflow-y: auto;">
|
||
<el-table :empty-text="emptyText" style="100%" height="480" :data="usePaper.list" border stripe>
|
||
<el-table-column prop="testName" label="试卷"></el-table-column>
|
||
<el-table-column prop="sysCreateTime" label="创建时间"></el-table-column>
|
||
<el-table-column prop="sysCreateBy" label="创建人" width="80px" ></el-table-column>
|
||
<el-table-column label="选择" width="60px">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="chooseExamPaper(scope.row)" type="primary" >选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页功能-->
|
||
<div v-if="usePaper.total >10" style="text-align: center; margin-top:10px">
|
||
<el-pagination background
|
||
@current-change="changePaperPage"
|
||
:current-page="usePaper.pageIndex"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="usePaper.pageSize"
|
||
layout="total,pager"
|
||
:total="usePaper.total"
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="showTab==3">
|
||
<div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border-bottom: 1px solid #e7e7e7;">
|
||
<div>{{examInfo.paperType==1? '自定义考试':'使用独立考试试卷'}} </div>
|
||
<div>
|
||
<el-checkbox v-model="onlyQuestion">只显示试题</el-checkbox>
|
||
<el-button :loading="loading" style="margin-left: 10px;" @click="saveExam()" type="primary" > 保 存 </el-button>
|
||
<el-button style="margin-left: 10px;" @click="deleteExam()" type="danger" > 删 除 </el-button>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 10px;overflow: auto;">
|
||
<div v-if="!onlyQuestion">
|
||
<el-form size="small" label-width="80px">
|
||
<!-- 课程内考虑不需要名辽
|
||
<el-form-item label="考试名称">
|
||
<el-input v-model="examInfo.testName" placeholder="请输入名称"></el-input>
|
||
</el-form-item>
|
||
-->
|
||
<el-form-item label="考试时长">
|
||
<el-col :span="8">
|
||
<el-input size="mini" v-model="examInfo.testDuration" placeholder="20-120">
|
||
<template slot="append">分钟</template>
|
||
</el-input>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="及格线">
|
||
<el-input size="mini" placeholder="20-100" :maxlength="3" v-model="examInfo.passLine">
|
||
<template slot="append">%</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="评分方式">
|
||
<el-col :span="8">
|
||
<el-radio-group v-model="examInfo.scoringType">
|
||
<el-radio :label="1">最高一次</el-radio>
|
||
<el-radio :label="2">最后一次</el-radio>
|
||
</el-radio-group>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-form-item label="百分制">
|
||
<el-checkbox v-model="examInfo.percentScore">实际成绩*100/实际总分</el-checkbox>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="考试说明">
|
||
<el-input type="textarea" show-word-limit v-model="examInfo.info" placeholder="关于考试的说明(限255字以内)" maxlength="255"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="examInfo.paperType==1">
|
||
<simplePaper :data="examPaper"></simplePaper>
|
||
</div>
|
||
<div v-if="examInfo.paperType==2">
|
||
<div style="font-size: 20px;padding: 10px;" >试卷： {{usePaper.paperName}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="showTab==9">
|
||
<div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border: 1px solid #e7e7e7;">
|
||
<div>考试信息</div><div> </div>
|
||
</div>
|
||
<div style="padding-top: 10px;">
|
||
<el-form size="small" label-width="80px">
|
||
<el-form-item label="试卷类型">
|
||
{{examInfo.paperType==1? '自定义试卷':'使用考试试卷: '+usePaper.paperName}}
|
||
</el-form-item>
|
||
<el-form-item label="考试时长">
|
||
<el-col :span="6">{{examInfo.testDuration}}分钟</el-col>
|
||
<el-col :span="9">
|
||
<el-form-item label="及格线">{{examInfo.passLine}}%</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="评分方式">
|
||
<el-col :span="6">
|
||
<span v-if="examInfo.scoringType==1">最高一次</span>
|
||
<span v-if="examInfo.scoringType==2">最后一次</span>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<el-form-item label="考试成绩">
|
||
<span v-if="examInfo.percentScore">按百分制显示</span>
|
||
<span v-else>按实际得分显示</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="考试说明">{{examInfo.info}}</el-form-item>
|
||
|
||
<el-form-item label="">
|
||
<el-button type="primary" @click="changeExamShow(3)"> 修 改 </el-button>
|
||
<el-button type="danger" @click="deleteExam(3)"> 删 除 </el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<el-dialog title="查看试卷" append-to-body :visible.sync="paperShow" width="800px" custom-class="g-dialog">
|
||
<div>
|
||
<img :src="`${webBaseUrl}/temp/exampaper.png`">
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="paperShow= false">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import simplePaper from "@/components/Course/simpleTestPaper.vue";
|
||
import apiCourse from '../../api/modules/course.js';
|
||
import apiExamPaper from '../../api/modules/paper.js';
|
||
import { deepClone } from "../../utils";
|
||
export default{
|
||
components:{simplePaper},
|
||
props:{
|
||
courseId:{
|
||
type: String,
|
||
default:'',
|
||
},
|
||
contentId:{
|
||
type: String,
|
||
default:'',
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
loading:false,
|
||
emptyText:'加载中...',
|
||
examChange:{}, //用于保存，检查是否改变
|
||
showTab:0, //显示哪个
|
||
onlyQuestion:false, //只显示问题
|
||
paperShow:false, //查看试卷
|
||
examPaper:{items:[]}, //试题列表的对象
|
||
examInfo:{
|
||
id:'',
|
||
name:'',
|
||
testDuration:30,
|
||
testName:'',
|
||
courseId:this.courseId,
|
||
contentId:'',
|
||
paperType:1,//默认是自定义
|
||
paperId:'',
|
||
arrange:0,
|
||
qnum:0,
|
||
times:1,
|
||
passScore:60,
|
||
showAnswer:false,
|
||
showAnalysis:false,
|
||
randomType:1,
|
||
scoringType:1,
|
||
passLine:60,
|
||
randomMode:false,
|
||
percentScore:true,//默认是百分制
|
||
paperContent:'',
|
||
info:''
|
||
},
|
||
usePaper:{ //使用考试试卷
|
||
pageIndex:1,
|
||
pageSize:10,
|
||
total:0,
|
||
list:[],
|
||
keyword:'',
|
||
paperId:'',//选择的试卷的id
|
||
paperName:'',//选择的试卷的名称
|
||
paperJson:{items:[]},
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
if(this.contentId){
|
||
this.reloadExam();
|
||
}else{
|
||
this.showTab=1;
|
||
}
|
||
},
|
||
watch:{
|
||
contentId(newVal,oldVal){
|
||
if(newVal!=oldVal){
|
||
this.reloadExam();
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
reloadExam(){
|
||
//console.log('contentId='+this.contentId);
|
||
this.emptyText='加载中...';
|
||
this.examPaper={items:[]};
|
||
this.examInfo.id='';
|
||
this.examInfo.paperType=1;
|
||
this.examInfo.paperId='';
|
||
this.examInfo.paperContent="{}";
|
||
if(this.contentId){
|
||
apiCourse.getExam(this.contentId).then(res=>{
|
||
if(res.status==200){
|
||
this.examInfo=res.result;
|
||
if(res.result.paperType==1){
|
||
this.examInfo.paperContent=res.result.paperContent;
|
||
this.examPaper=JSON.parse(res.result.paperContent);
|
||
}else{
|
||
apiExamPaper.detail(this.examInfo.paperId).then(rs=>{
|
||
if(rs.status==200){
|
||
this.usePaper.paperId=rs.result.id;
|
||
this.usePaper.paperName=rs.result.testName;
|
||
this.usePaper.counts=rs.result.counts;
|
||
//this.usePaper.paperJson= rs.result.paperContent;
|
||
}
|
||
})
|
||
}
|
||
this.showTab=9;
|
||
//this.examChange = deepClone(this.exam);
|
||
}else if(res.status==404){
|
||
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
})
|
||
}else{
|
||
this.showTab=1;//选择状态
|
||
}
|
||
},
|
||
saveExam(){//保存
|
||
//检查是否完整
|
||
if(this.examInfo.paperType==1){
|
||
if(this.examPaper.items.length==0){
|
||
this.$message.error("您还没有添加考试的试题");
|
||
return;
|
||
}
|
||
let pass=true;
|
||
this.examPaper.items.forEach(qitem=>{
|
||
if(qitem.options.length==0){
|
||
pass=false;
|
||
}else{
|
||
let hasAnswer=qitem.options.some(opt=>{
|
||
return opt.answer;
|
||
});
|
||
if(!hasAnswer){
|
||
pass=false;
|
||
}
|
||
}
|
||
});
|
||
if(!pass){
|
||
this.$message.error("试卷试题请填写完整，每个试题必须要有答案");
|
||
return;
|
||
}
|
||
this.examInfo.paperContent=JSON.stringify(this.examPaper);
|
||
}else{
|
||
if(this.examInfo.paperId==''){
|
||
this.$message.error("您还未选择任何试卷，请先选择试卷");
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.$emit("save",this.examInfo);
|
||
},
|
||
deleteExam(){ //删除
|
||
this.$confirm('您确认要删除此考试内容吗？', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$emit("remove",this.examInfo);
|
||
}).catch(() => {
|
||
|
||
});
|
||
|
||
},
|
||
changeExamShow(idx){
|
||
this.showTab=idx;
|
||
},
|
||
openCusExam(){ //自定义考试
|
||
this.showTab=3;
|
||
this.examInfo.paperType=1;
|
||
this.examInfo.paperId='';
|
||
this.usePaper.pageIndex=1;
|
||
this.usePaper.keyword="";
|
||
},
|
||
openChoosePaper(){
|
||
this.showTab=2;
|
||
this.examInfo.paperType=2; //选择试卷
|
||
this.examInfo.paperId='';
|
||
|
||
this.findExamPapers();
|
||
},
|
||
findExamPapers(){ //查询已有的考试试卷
|
||
this.usePaper.pageIndex=1;
|
||
this.emptyText='加载中...';
|
||
this.loadExamPapers();
|
||
},
|
||
loadExamPapers(){
|
||
let pars={
|
||
pageIndex:this.usePaper.pageIndex,
|
||
pageSize:this.usePaper.pageSize,
|
||
keyWord:this.usePaper.keyword
|
||
}
|
||
|
||
apiExamPaper.querylist(pars).then(rs=>{
|
||
if(rs.status==200){
|
||
this.usePaper.list=rs.result.list;
|
||
this.usePaper.total=rs.result.count;
|
||
}else{
|
||
this.$message.error('查询可用试卷失败');
|
||
}
|
||
this.emptyText='暂无搜索内容';
|
||
})
|
||
},
|
||
changePaperPage(pindex){
|
||
this.usePaper.pageIndex=pindex;
|
||
this.loadExamPapers();
|
||
},
|
||
chooseExamPaper(epaper){ //选择试卷后
|
||
if(epaper.counts==0){
|
||
this.$message.error('此试卷无试题内容，请重新选择');
|
||
return;
|
||
}
|
||
this.examInfo.paperType=2;// 选择已有试卷
|
||
this.examInfo.paperId=epaper.id;// 选择已有试卷
|
||
this.usePaper.paperId=epaper.id;
|
||
this.usePaper.paperName=epaper.testName;
|
||
//this.usePaper.paperJson= epaper.paperContent;
|
||
this.loadExamPaper();
|
||
this.changeExamShow(3);
|
||
},
|
||
loadExamPaper(){
|
||
if(this.examInfo.paperType!=2){
|
||
return;
|
||
}
|
||
apiExamPaper.detail(this.examInfo.paperId).then(rs=>{
|
||
if(rs.status==200){
|
||
this.usePaper.paperId=rs.result.id;
|
||
this.usePaper.paperName=rs.result.testName;
|
||
this.usePaper.counts=rs.result.counts;
|
||
//this.usePaper.paperJson= rs.result.paperContent;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|