hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-15 22:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加试卷的编辑

Browse Source
This commit is contained in:
daihh
2022-12-24 13:59:18 +08:00
parent 4f7438aa83
commit 1d64b54653
4 changed files with 561 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/components/Exam/EditPaper.vue Normal file
View File

@@ -0,0 +1,333 @@
<template>
<!--编辑试卷-->
<div >
<el-dialog title="修改试卷" :visible.sync="editShow" width="800px" >
<!--试卷的标题，可以编辑-->
<div class="paper-title">
<div>{{title}}</div>
</div>
<!--查询项-->
<!-- <div>
<el-form :inline="true" size="mini">
<el-form-item>
<el-select clearable v-model="qpaper.qtype" placeholder="请选择题型" class="search-width-120">
<el-option label="单选题" :value="1"></el-option>
<el-option label="多选题" :value="2"></el-option>
<el-option label="判断题" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item><el-input class="search-width-120" v-model="qpaper.keyword" clearable placeholder="题干"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" @click="selectQuery()">搜索</el-button>
<el-button type="primary" @click="resetQuery()">重置</el-button>
</el-form-item>
<el-form-item></el-form-item>
</el-form>
</div> -->
<div style="display: flex;justify-content: space-between;line-height:30px;">
<div>
<el-checkbox v-model="optionShow">显示选项</el-checkbox>
</div>
<div>
双击题干或选项编辑
</div>
<div style="text-align: right;font-size: 14px;">
本卷共
<span class="bigred">{{paperLength}}</span>
题, 总分
<span class="bigred">{{totalScore}}</span>
分
</div>
</div>
<!--试卷内容-->
<div class="paper-box">
<div v-if="qitems.length>0" v-for="(item,idx) in qitems" :key="idx">
<div v-if="item.type < 900">
<div style="display: flex;justify-content: space-between;background-color: #dcf1ff;padding: 5px;">
<div>
<!-- <span style="padding-right: 5px;" v-if="paperQEdit"><el-checkbox v-model="item.checked" @change="checkedChange"></el-checkbox></span> -->
<span v-if="item.type == 1">单选题</span>
<span v-if="item.type == 2">多选题</span>
<span v-if="item.type == 3">判断题</span>
<span style="padding-left: 5px;">难度[{{item.difficulty == 1? '简单' : item.difficulty == 2? '中等': '困难'}}]</span>
<!-- <span style="padding-left: 5px;">知识点[{{item.analysis}}]</span> -->
</div>
<div>
<el-input @input="changeInput($event)" v-model="item.defaultScore" style="width: 120px;" size="mini" placeholder="分数" @blur="paperCalculation()">
<template slot="append">分</template>
</el-input>
<el-button v-if="paperQEdit" icon="el-icon-delete" @click="checkDelete(idx)" size="mini"></el-button>
</div>
</div>
<div style="padding: 15px;">
<div style="font-weight: 700px;padding-bottom: 10px;cursor: pointer;" @dblclick="showCellEdit(idx,-1)">
<div> {{ item.title }}</div>
<div v-if="item.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl + item.images" alt=""> </div>
</div>
<div v-if="optionShow">
<div v-if="item.type == 3">
<div class="opt" @click="setJudgeAnswer(item,'true')" :class="{optanswer:item.answer=='true'}"><span class="optanswer-span">{{item.answer=='true'? '√':''}} </span> 1. 正确 </div>
<div class="opt" @click="setJudgeAnswer(item,'false')" :class="{optanswer:item.answer=='false'}"><span class="optanswer-span">{{item.answer=='false'? '√':''}} </span> 2. 错误 </div>
</div>
<div v-else v-for="(opt, optIdx) in item.optionList" :key="optIdx" class="opt" @click="setOptAnswer(item,opt)" @dblclick="showCellEdit(idx,optIdx)">
<div :class="{optanswer:opt.isAnswer}"><span class="optanswer-span">{{opt.isAnswer? '√':''}} </span> {{ optIdx + 1 }}, {{ opt.content }}</div>
<div v-if="opt.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl + opt.images" alt=""> </div>
</div>
</div>
</div>
</div>
<div v-if="item.type > 900">
<div style="height: 25px;">
<span style="float: right;margin-top: -5px;cursor: pointer;" class="el-icon-delete" @click="checkDelete(idx)"></span>
<div style="border-bottom: 2px dotted #000000;margin-right: 50px;"></div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button :loading="loading" type="primary" @click="save()"> 保 存 </el-button>
<el-button @click="cancel()"> 取消 </el-button>
</span>
</el-dialog>
<el-dialog :title="cellData.title" :visible.sync="cellData.show" width="500px">
<div>
<div><el-input type="textarea" rows="2" v-model="cellData.text"></el-input> </div>
<div style="height: 160px;padding-top: 10px;">
<imgupload :value="cellData.img" @success="cellImageSuccss" @remove="cellImageRemove"></imgupload>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button :loading="loading" type="primary" @click="cellConfirm()"> 确定 </el-button>
<el-button @click="cellCancel()"> 取消 </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import apiPaper from '@/api/modules/paper.js';
import imgupload from '@/components/ImageUpload/single.vue';
import apiExamTask from '@/api/modules/examTask.js';
import examQuestionApi from "@/api/modules/question";
import {numberToLetter, deepCopy} from '../../utils/tools.js';
export default {
name: 'comEditPaper',
components:{imgupload},
props:{
id:{
type:String,
default:''
}
},
data() {
return {
editShow:false,
loading:false,
paperId:'',
imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
title:'',
optionShow:false,
qpaper:{qtype:'',keyword:''},
paperLength:0,
totalScore:0,
qitems:[],
tempItems:[],
paper: {
id:'',
testName: '',
remark: '',
difficulty: ''
},
paperQEdit:false,
cellData:{
show:false,
title:'修改题干',
item:null,
optIndex:-1,
text:'',
img:''
}
}
},
mounted() {
if(this.id){
this.paperId=this.id;
}
},
methods:{
loadTestPaper(){
if(this.paperId){
this.editShow=true;
this.loading=true;
apiPaper.detail(this.paperId).then(res=>{
if(res.status === 200) {
this.paper=res.result;
//转化试题
this.qitems=JSON.parse(res.result.paperContent);
//console.log(this.qitems,this.qitems)
this.tempItems=this.qitems;
this.paperCalculation();
} else {
this.$message.error(res.message);
}
this.loading=false;
})
}
},
show(paperId){
this.paperId=paperId;
this.editShow=true;
this.loadTestPaper();
},
selectQuery(){
this.qitems=this.tempItems;
if(this.qpaper.qtype == '' && this.qpaper.keyword == '') {
this.$forceUpdate();
return
}
// let data = deepCopy(this.paperData);
if(this.qpaper.qtype) {
this.qitems=this.qitems.filter(item=>{
if(item.type === this.qpaper.qtype){
return true;
}else{
return false;
}
})
}
if(this.qpaper.keyword) {
this.qitems = this.qitems.filter(item => {
return item.title.toLowerCase().indexOf(this.qpaper.keyword.toLowerCase()) > -1;
});
}
//this.paper.data = data;
this.$forceUpdate();
},
resetQuery(){
this.qpaper.qtype='';
this.qpaper.keyword='';
this.qitems=this.tempItems;
},
checkedChange(){
this.$forceUpdate();
},
changeInput(e){
this.$forceUpdate();
},
setJudgeAnswer(item,flag){
item.answer=flag;
},
setOptAnswer(item,opt){
if(item.type!=2){//单选的情况，先清空
item.optionList.forEach(op=>{
op.isAnswer=false;
})
}
if(opt.isAnswer){
opt.isAnswer=false;
}else{
opt.isAnswer=true;
}
},
paperCalculation() {
this.totalScore=0;
this.paperLength=0;
this.qitems.forEach(item=>{
if(item.type < 900) {
this.paperLength++;
this.totalScore += Number(item.defaultScore);
}
})
},
save(){
this.loading=true;
this.paper.paperContent=JSON.stringify(this.qitems);
apiPaper.update(this.paper).then((res)=>{
if(res.status === 200) {
this.$message.success('保存成功！')
this.editShow=false;
} else {
this.$message.error(res.message);
}
this.loading=false;
})
},
cancel(){
this.editShow=false;
},
showCellEdit(itemIdx,optIdx){
this.cellData.item=this.qitems[itemIdx];
this.cellData.optIndex=optIdx;
this.cellData.img='';
if(optIdx==-1){
this.cellData.text=this.cellData.item.title;
this.cellData.img=this.cellData.item.images;
this.cellData.title="修改题干";
}else{
this.cellData.text=this.cellData.item.optionList[this.cellData.optIndex].content;
this.cellData.img=this.cellData.item.optionList[this.cellData.optIndex].images;
this.cellData.title="修改选项";
}
//console.log(this.cellData,'this.cellData');
this.cellData.show=true;
},
cellConfirm(){
if(this.cellData.optIndex==-1){
this.cellData.item.title=this.cellData.text;
this.cellData.item.images=this.cellData.img;
}else{
this.cellData.item.optionList[this.cellData.optIndex].content=this.cellData.text;
this.cellData.item.optionList[this.cellData.optIndex].images=this.cellData.img;
}
this.cellData.show=false;
},
cellCancel(){
this.cellData.show=false;
},
cellImageSuccss(res){
//console.log(res,'res');
this.cellData.img=res.result.filePath;
},
cellImageRemove(){
this.cellData.img='';
}
}
}
</script>
<style scoped lang="scss">
.paper-title{
text-align: center;
font-size: 18px;
}
.paper-box{
max-height: 500px;
overflow-y: auto;
}
.bigred {
color: red;
font-size: 20px;
}
.opt{
padding-top:10px;cursor: pointer;
}
.optanswer{
color: green;
background-color: #fffaf7;
}
.optanswer-span{
color: green;
display: inline-block;
width: 20px;
}
.qimg{
padding-left: 30px;
max-width: 200px;
.qimg-fit{
width:100%;
object-fit:scale-down
}
}
</style>