当前位置：网站首页>富文本 考试 填空题
富文本 考试 填空题
2022-06-27 19:15:00 【小四是个处女座】
<template>
<basic-container>
<avue-form ref="form" v-model="form" :option="option" @reset-change="emptytChange" @submit="submit"
style="width: 50%;margin: 0 0;">
<template slot="items" slot-scope="scope">
<div>
<div v-for="(item,index) in form.items" :key="index+'答案列表'"
:style="{display: 'flex',alignItems: 'center',marginTop:index!=0?'10px':''}">
<div style="width: 30px;">
{
{
item.prefix}}66666
</div>
<el-input v-model="item.content" clearable :disabled="disabledSubmit"
@focus="openUeditorAnswer(index,'items',item.content)"></el-input>
<span style="display: inline-block;width: 80px;text-align: center;">分数：</span>
<el-input-number v-model="item.score" :min="1" label="" style="width:40%"></el-input-number>
</div>
</div>
</template>
<template slot="correct" slot-scope="scope">
<el-select v-model="form.correct">
<el-option v-for="(item,index) in form.items" :key="index+'下拉选'" :label="answerList[index]"
:value="answerList[index]"></el-option>
</el-select>
</template>
</avue-form>
<el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false"
style="width: 100%;height: 100%" :before-close="handleClose" :show-close="false" center>
<Ueditor @ready="editorReady" />
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="submitUeditor()" size="small">确 定</el-button>
</span>
</el-dialog>
</basic-container>
</template>
<script>
import Ueditor from '@/components/Ueditor'
import {
getList as getCourseList
} from "@/api/onlinelearn/course";
import {
getList as getListmlLazy
} from "@/api/onlinelearn/components/kcml.js";
import {
add
} from "@/api/examination/titleList.js";
import {
mapGetters,
mapMutations
} from 'vuex';
export default {
components: {
Ueditor
},
data() {
var _this = this
return {
fwbMain: {
},
tagList: [],
disabledSubmit: false,
answerList: {
0: 'A',
1: 'B',
2: 'C',
3: 'D',
4: 'E',
5: 'F',
6: 'G',
7: 'H',
8: 'I',
9: 'J',
10: 'K',
11: 'L',
12: 'M',
13: 'N',
14: 'O',
15: 'P',
16: 'Q',
17: 'R',
18: 'S',
19: 'T',
20: 'U',
21: 'V',
22: 'W',
23: 'X',
24: 'Y',
25: 'Z'
},
dialogVisible: false,
courseId: '',
text: '',
questionType: '4',
form: {
items: []
},
sizeValue: 'small',
options: {
action: "/api/blade-resource/oss/endpoint/put-file",
props: {
res: "data",
url: 'link'
},
},
textSaveProp: '',
option: {
size: this.sizeValue,
column: [{
label: '课程名称',
prop: 'courseName',
display: true,
span: 13,
disabled: true
},
{
label: '目录名称',
prop: 'catalogueName',
display: true,
span: 13,
disabled: true
}, {
label: "课程名称",
prop: "courseId",
display: true,
type: 'tree',
span: 13,
dicData: [],
props: {
label: 'courseName',
value: 'id'
},
rules: [{
required: true,
message: "请选择课程",
trigger: "blur"
}],
},
{
label: "目录名称",
type: 'tree',
lazy: true,
display: true,
props: {
label: 'catalogueName',
value: 'id'
},
dicData: [],
treeLoad: (node, resolve) => {
if (_this.courseId) {
let stop_level = 1000000;
let level = node.level;
let data = node.data || {
}
let code = data.id;
let list = [];
let callback = () => {
resolve((list || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level
})
}));
}
if (level == 0) {
getListmlLazy(0, {
courseId: _this.courseId
}).then(res => {
list = res.data.data;
callback()
})
} else {
getListmlLazy(code, {
courseId: _this.courseId
}).then(res => {
list = res.data.data;
callback()
})
}
}
},
prop: "catalogueId",
span: 13,
rules: [{
required: true,
message: "请选择课程目录",
trigger: "blur"
}],
},
{
label: '标题',
span: 24,
prop: 'title',
rules: [{
required: true,
message: "请输入标题",
trigger: "blur"
}],
click: function() {
_this.dialogVisible = true
_this.fwbMain = {
textSaveProp: 'title',
text: _this.form.title
}
},
},
// {
// label:'选项序号',
// prop:'itemOrder',
// type:'number',
// span: 24,
// },
{
label: '答案列表',
span: 24,
prop: 'items',
formslot: true,
rules: [{
required: true,
message: "请输入答案列表",
trigger: "change"
}],
},
{
label: '正确答案',
span: 24,
display: false,
prop: 'correct',
formslot: true,
},
{
span: 24,
label: '解析',
rules: [{
required: true,
message: "请输入解析",
trigger: "blur"
}],
click: function() {
_this.dialogVisible = true
_this.fwbMain = {
textSaveProp: 'analyze',
text: _this.form.analyze
}
},
prop: 'analyze'
},
// {
// span: 24,
// label: '分数',
// type: 'number',
// controlsPosition: '',
// prop: 'score',
// disabled:true
// },
{
span: 24,
label: '题目难度',
type: 'rate',
prop: 'difficult'
}
]
}
}
},
watch: {
dialogVisible(val) {
if (val) {
this.$nextTick(() => {
var ipt = document.getElementsByClassName('w-e-text')[0]
ipt.focus()
})
}
},
'form.courseId': {
handler(val) {
const catalogueId = this.findObject(this.option.column, "catalogueId");
if (val) {
this.courseId = val
getListmlLazy(0, {
courseId: val
}).then(res => {
catalogueId.dicData = res.data.data;
})
} else {
this.courseId = ''
catalogueId.dicData = []
}
}
},
'form.catalogueId': {
handler(val) {
const catalogueId = this.findObject(this.option.column, "catalogueId");
if (this.form.courseId) {
if (val) {
getListmlLazy(0, {
courseId: val
}).then(res => {
catalogueId.dicData = res.data.data;
})
} else {
getListmlLazy(0, {
courseId: val
}).then(res => {
catalogueId.dicData = res.data.data;
})
}
}
}
},
// 'form.title': {
// handler(val) {
// if (val) {
// if (val.indexOf('gapfilling-span') == -1) {
// // this.$message.warning('请输入填空')
// // return
// } else {
// this.form.items = []
// var divs = document.createElement("div")
// divs.innerHTML = val
// var doms = divs.getElementsByClassName('gapfilling-span')
// for (var i = 0; i < doms.length; i++) {
// this.form.items.push({
// content: '',
// prefix: doms[i].innerText,
// score: ''
// })
// }
// }
// }
// }
// },
'$route.query': {
handler() {
var courseName = this.findObject(this.option.column, 'courseName'),
catalogueName = this.findObject(this.option.column, 'catalogueName'),
courseId = this.findObject(this.option.column, 'courseId'),
catalogueId = this.findObject(this.option.column, 'catalogueId')
courseName.display = catalogueName.display = false
courseId.display = catalogueId.display = true
this.tagList = this.$store.state.tags.tagList
if (this.$route.query.data) {
courseName.display = catalogueName.display = true
courseId.display = catalogueId.display = false
var data = JSON.parse(this.$route.query.data)
this.$set(this.form, 'id', data.id)
this.$set(this.form, 'difficult', data.difficult)
this.$set(this.form, 'score', data.score)
this.$set(this.form, 'correct', data.jtMsg.correct)
this.$set(this.form, 'analyze', data.jtMsg.analyze)
this.$set(this.form, 'courseId', data.courseId)
this.$set(this.form, 'catalogueId', data.catalogueId)
this.$set(this.form, 'title', data.jtMsg.titleContent)
this.$set(this.form, 'courseName', data.courseName)
this.$set(this.form, 'catalogueName', data.catalogueName)
this.$set(this.form, 'items', data.jtMsg.questionItemObjects)
} else {
for (var key in this.form) {
this.form[key] = ''
}
this.form.items = []
}
}
}
},
mounted() {
var courseName = this.findObject(this.option.column, 'courseName'),
catalogueName = this.findObject(this.option.column, 'catalogueName'),
courseId = this.findObject(this.option.column, 'courseId'),
catalogueId = this.findObject(this.option.column, 'catalogueId')
courseName.display = catalogueName.display = false
courseId.display = catalogueId.display = true
this.tagList = this.$store.state.tags.tagList
if (this.$route.query.data) {
courseName.display = catalogueName.display = true
courseId.display = catalogueId.display = false
var data = JSON.parse(this.$route.query.data)
console.log(data, 'data')
this.$set(this.form, 'id', data.id)
this.$set(this.form, 'difficult', data.difficult)
this.$set(this.form, 'score', data.score)
this.$set(this.form, 'correct', data.jtMsg.correct)
this.$set(this.form, 'analyze', data.jtMsg.analyze)
this.$set(this.form, 'courseId', data.courseId)
this.$set(this.form, 'catalogueId', data.catalogueId)
this.$set(this.form, 'title', data.jtMsg.titleContent)
this.$set(this.form, 'courseName', data.courseName)
this.$set(this.form, 'catalogueName', data.catalogueName)
this.$set(this.form, 'items', data.jtMsg.questionItemObjects)
// this.form.items = []
// var divs = document.createElement("div")
// divs.innerHTML = val
// var doms = divs.getElementsByClassName('gapfilling-span')
// for (var i = 0; i < doms.length; i++) {
// this.form.items.push({
// content: '',
// prefix: doms[i].innerText,
// score: ''
// })
// }
}
this.getCourseList()
},
methods: {
handleback(url) {
let {
tag,
key
} = this.findTag(url);
console.log(this.tagList)
this.$store.commit('DEL_TAG', tag);
},
findTag(value) {
let tag, key;
this.tagList.map((item, index) => {
if (item.value.indexOf(value) != -1) {
tag = item;
key = index;
}
});
return {
tag: tag,
key: key
};
},
...mapMutations(['DEL_TAG']),
editorReady(instance) {
this.fwbMain.instance = instance
this.fwbMain.instance.setContent(this.fwbMain.text)
this.$nextTick(() => {
this.fwbMain.instance.focus(true)
})
},
emptytChange() {
for (var key in this.form) {
if (key == 'items') {
this.form[key] = []
} else {
this.form[key] = ''
}
}
},
submit(form, done) {
this.form.items.forEach((item, index) => {
item.prefix = this.answerList[index]
})
var noEmpty = true
this.form.items.forEach((item) => {
if (item.content == '' || item.score == '') {
noEmpty = false
}
})
if (!noEmpty) {
this.$message.warning('答案列表内容与分数不能为空')
done();
return
}
// score
this.form.score = 0
this.form.items.forEach((item) => {
this.form.score += (item.score - 0)
})
this.disabledSubmit = true
this.form.questionType = this.questionType
// _this.form.items = newFormItem
add(this.form).then(res => {
this.emptytChange()
this.disabledSubmit = false
this.$message.success('操作成功')
done();
if (this.$route.query.data) {
this.handleback(this.$route.fullPath)
this.$router.go(-1)
}
}, () => {
this.disabledSubmit = false
// this.$message.error('提交失败')
done()
})
},
openUeditorAnswer(index, prop, content) {
this.dialogVisible = true
this.fwbMain = {
textSaveProp: prop,
text: content,
itemsIndex: index
}
},
delAnswer(index) {
this.form.items.splice(index, 1)
this.form.correct = ''
},
addAnswer() {
this.form.correct = ''
this.form.items.push({
content: '',
prefix: '',
score: ''
})
},
submitUeditor() {
let text = this.fwbMain.instance.getContent()
if (this.fwbMain.textSaveProp == 'items') {
this.form[this.fwbMain.textSaveProp][this.fwbMain.itemsIndex].content = text
} else if (this.fwbMain.textSaveProp == 'title') {
if (text.indexOf('gapfilling-span') == -1) {
this.$message.warning('请输入填空')
return
} else {
this.form.items = []
var divs = document.createElement("div")
divs.innerHTML = text
var doms = divs.getElementsByClassName('gapfilling-span')
for (var i = 0; i < doms.length; i++) {
this.form.items.push({
content: '',
prefix: doms[i].innerText,
score: ''
})
}
this.form[this.fwbMain.textSaveProp] = text
}
} else {
this.form[this.fwbMain.textSaveProp] = text
}
this.handleClose()
},
handleClose() {
this.dialogVisible = false
this.text = ''
},
getCourseList() {
getCourseList(1, 100000).then(res => {
const courseId = this.findObject(this.option.column, "courseId");
courseId.dicData = res.data.data.records
})
}
},
}
</script>
<style>
</style>
边栏推荐
- Use the storcli tool to configure raid. Just collect this article
- 100 important knowledge points that SQL must master: sorting and retrieving data
- Unity3D Button根据文本内容自适应大小
- 分享下我是如何做笔记的
- 事件相关电位ERP的皮层溯源分析
- 308. 2D area and retrieval - variable segment tree / hash
- Love math experiment | Issue 8 - building of Singapore house price prediction model
- ICML2022 | 可扩展深度高斯马尔可夫随机场
- SQL必需掌握的100个重要知识点：过滤数据
- GoLand永久激活
猜你喜欢
白嫖红队goby＆POC,叫你如何白嫖？
GFS分布式文件系统
Use the storcli tool to configure raid. Just collect this article
Here are 12 commonly used function formulas for you. All used ones are good
众昂矿业：新能源或成萤石最大应用领域
![Unleash the innovative power of open source database | [Gansu] opengauss meetup has come to a successful conclusion](/img/21/9c5f5122270adea9444ff5f2d199ed.jpg)
Unleash the innovative power of open source database | [Gansu] opengauss meetup has come to a successful conclusion
大促场景下，如何做好网关高可用防护
At 19:00 on Tuesday evening, the 8th live broadcast of battle code Pioneer - how to participate in openharmony's open source contribution in multiple directions
SQL server for circular usage
MYSQL 性能优化 index 函数，隐藏，前缀，hash 索引 使用方法（2）
随机推荐
爱数课实验 | 第八期-新加坡房价预测模型构建
2021全球独角兽榜发布：中国301家独角兽企业全名单来了！
"Good voice" has been singing for 10 years. How can the Chinese language in the starry sky sing well in HKEx?
oss上传调用的是哪个方法
体验Navicat Premium 16，无限重置试用14天方法(附源码)
Flood fighting and disaster relief, overcoming difficulties, and City United premium products rushed to the aid of Yingde to donate loving materials
MySQL usage notes 1
squid代理服務器
JPA踩坑系列之save方法
Very comprehensive dolphin scheduler installation and use documents
今晚战码先锋润和赛道第2期直播丨如何参与OpenHarmony代码贡献
覆盖接入2w+交通监测设备，EMQ 为深圳市打造交通全要素数字化新引擎
互联网 35~40 岁的一线研发人员，对于此岗位的核心竞争力是什么？
Shell script controls the startup and shutdown of services - with detailed cases
大促场景下，如何做好网关高可用防护
Unity3d button adapts the size according to the text content
Cerebral cortex: predicting children's mathematical skills from task state and resting state brain function connections
CEPH distributed storage
MySQL client tools are recommended. I can't imagine that it is best to use Juran
VMware vSphere ESXi 7.0安装教程