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

2022年5月29日从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:56:34 +08:00
commit b050613020
488 changed files with 68444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/components/Course/simpleTestPaper.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<div>
<!--简单的试卷内容,传入参数字符串，传出参数字符串-->
<div style="display: flex;justify-content: space-between; padding: 5px;">
<div>
<el-button-group>
<el-button type="primary" size="mini" @click="addQuestion(101)" icon="el-icon-plus">单选</el-button>
<el-button type="primary" size="mini" @click="addQuestion(102)" icon="el-icon-plus">多选</el-button>
<el-button type="primary" size="mini" @click="addQuestion(103)" icon="el-icon-plus">判断</el-button>
</el-button-group>
</div>
<div style="padding-top: 10px;color: #919191; ">点题干编辑</div>
<div style="line-height:40px; text-align: center;font-size: 16px;">
<el-checkbox v-model="optShow">显示选项</el-checkbox>
<span style="margin-left: 8px;">共<span class="bigred"> {{data.items.length}} </span>题，<span class="bigred">{{total}}</span> 分</span>
</div>
</div>
<div class="paper">
<div v-for="(item, idx) in data.items" :key="idx" class="paper-item">
<div style="display: flex;justify-content: space-between;padding: 5px;">
<div style="flex:1;padding-right: 5px;">
<div v-if="editIndex!=idx" @mouseenter="showOptions(item)" @mouseleave="hideOptions(item)">
<div style="cursor: pointer;" @click="handleEditItem(item,idx)">
{{idx+1}}.【
<span v-if="item.type == 101">单选题</span>
<span v-if="item.type == 102">多选题</span>
<span v-if="item.type == 103">判断题</span>
】{{ item.content }}
</div>
<div v-if="optShow || item.optShow" style="padding: 5px;">
<div class="paper-opt" v-for="(opt, optIdx) in item.options" :key="optIdx" @click="setOptAnswer(item,opt)" :class="{'paper-opt-yes':opt.answer}">
{{ optIdx + 1 }}, {{ opt.content }} <i v-if="opt.answer" class="el-icon-check"></i>
</div>
</div>
</div>
<div v-if="editIndex==idx">
<div><el-input v-model="item.content" placeholder="试题的内容"></el-input> </div>
<div style="color: red;">注：一行就一个选项</div>
<div><el-input :rows="5" type="textarea" v-model="curTextOptions" placeholder="试题的内容"></el-input> </div>
<div><el-button @click="handleSaveItem(item)" type="warning" size="small"> 编辑完成 </el-button> </div>
</div>
</div>
<div style="width: 110px;">
<el-input style="width: 50px;" size="mini" v-model="item.score" placeholder="分数"></el-input>
<el-button @click="removeQuestion(idx)" style="margin-left: 6px;" type="danger" icon="el-icon-delete" size="mini"></el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {snowflakeGenerator} from 'snowflake-id-js';
export default {
name: 'articleItems',
props:{
data:{
type:Object,
default(){
return {
generator:null,
items:[]
}
}
}
},
data() {
return {
editIndex:-1,//当前编辑的项
curTextOptions:'',
optShow:true,
qdata: [
{
id: '1',
type: 101,
score: 5,
checked: false,
optShow:false,
content: '点击编辑试题内容',
options: [
{ id: '11', content: '选项',answer:false },
{ id: '12', content: '选项',answer:true},
{ id: '13', content: '选项',answer:false},
{ id: '14', content: '选项',answer:false},
]
}
]
}
},
mounted() {
var seed=Math.floor(Math.random() * (50 - 1 + 1) + 1);
this.generator= snowflakeGenerator(seed);
this.initItem();
},
computed:{
total(){
var t=0;
this.data.items.forEach(item=>{
t+=parseFloat(item.score);
});
return t;
}
},
methods:{
initItem(){
let $this=this;
//添加测试数据
if(this.data.items.length==0){
this.qdata.forEach(item=>{
$this.data.items.push(item);
})
}
},
showOptions(item){
item.optShow=true;
},
hideOptions(item){
item.optShow=false;
},
setOptAnswer(item,opt){
if(item.type!=102){//单选的情况，先清空
item.options.forEach(op=>{
op.answer=false;
})
}
if(opt.answer){
opt.answer=false;
}else{
opt.answer=true;
}
},
handleEditItem(item,idx){
this.editIndex=idx;
var txt='';
item.options.forEach(function(q){
if(txt.length>1){
txt+='\n';
}
txt+=q.content;
});
this.curTextOptions=txt;
},
handleSaveItem(item){
var txt = this.curTextOptions;
if(txt==''){
return;
}
var txtArray=txt.split("\n");
//保存选中的
var answerRows=[];
item.options.forEach((op,opidx)=>{
if(op.answer){
answerRows.push(opidx);
}
})
//重新指定
let $this=this;
var newOptions=[];
txtArray.forEach(function(t,i){
var newOpt={ id:$this.generator.next().value, content: t,answer:false };
answerRows.some(an=>{
if(an==i){
newOpt.answer=true;
return true;
}else{
return false;
}
})
newOptions.push(newOpt);
});
item.options=newOptions;
this.editIndex=-1;
},
addQuestion(t){
//let gen= snowflakeGenerator(512).next().value;
//let qid=snowflakeGenerator(512).next().value;
let qid=this.generator.next().value;
console.log(qid);
let q={
id: qid,
type: t,
score: 5,
checked: false,
optShow:false,
content: '点击编辑试题内容',
options: []
}
if(t==101 || t==102){
q.options.push({id:this.generator.next().value,content:'选项',answer:false});
q.options.push({id:this.generator.next().value,content:'选项',answer:false});
q.options.push({id:this.generator.next().value,content:'选项',answer:false});
}else{
q.options.push({id:this.generator.next().value,content:'正确',answer:false});
q.options.push({id:this.generator.next().value,content:'错误',answer:false});
}
this.data.items.push(q)
},
removeQuestion(idx){
this.data.items.splice(idx,1);
}
}
}
</script>
<style lang="scss" scoped>
.paper{
border: 1px solid #dfdfdf;
padding: 5px 0px;
height: 500px;
overflow: auto;
.paper-item{
padding: 5px 10px;
border-bottom: 1px solid #CCCCCC;
.paper-opt{
line-height: 25px;
cursor: pointer;
}
.paper-opt-yes{
color: green;
}
}
}
.bigred {
color: red;
font-size: 20px;
}
</style>