当前位置：网站首页>Fill in the blank of rich text test
Fill in the blank of rich text test
2022-06-27 22:02:00 【Little four is a Virgo】
<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+' Answer list '"
: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;"> fraction ：</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+' Drop down '" :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"> take eliminate </el-button>
<el-button type="primary" @click="submitUeditor()" size="small"> indeed set </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: ' Course name ',
prop: 'courseName',
display: true,
span: 13,
disabled: true
},
{
label: ' Directory name ',
prop: 'catalogueName',
display: true,
span: 13,
disabled: true
}, {
label: " Course name ",
prop: "courseId",
display: true,
type: 'tree',
span: 13,
dicData: [],
props: {
label: 'courseName',
value: 'id'
},
rules: [{
required: true,
message: " Please select a course ",
trigger: "blur"
}],
},
{
label: " Directory name ",
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: " Please select the course directory ",
trigger: "blur"
}],
},
{
label: ' title ',
span: 24,
prop: 'title',
rules: [{
required: true,
message: " Please enter a title ",
trigger: "blur"
}],
click: function() {
_this.dialogVisible = true
_this.fwbMain = {
textSaveProp: 'title',
text: _this.form.title
}
},
},
// {
// label:' Option serial number ',
// prop:'itemOrder',
// type:'number',
// span: 24,
// },
{
label: ' Answer list ',
span: 24,
prop: 'items',
formslot: true,
rules: [{
required: true,
message: " Please enter the answer list ",
trigger: "change"
}],
},
{
label: ' right key ',
span: 24,
display: false,
prop: 'correct',
formslot: true,
},
{
span: 24,
label: ' analysis ',
rules: [{
required: true,
message: " Please enter the resolution ",
trigger: "blur"
}],
click: function() {
_this.dialogVisible = true
_this.fwbMain = {
textSaveProp: 'analyze',
text: _this.form.analyze
}
},
prop: 'analyze'
},
// {
// span: 24,
// label: ' fraction ',
// type: 'number',
// controlsPosition: '',
// prop: 'score',
// disabled:true
// },
{
span: 24,
label: ' questions ',
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(' Please fill in the blank ')
// // 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(' The answer list content and score cannot be empty ')
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(' Successful operation ')
done();
if (this.$route.query.data) {
this.handleback(this.$route.fullPath)
this.$router.go(-1)
}
}, () => {
this.disabledSubmit = false
// this.$message.error(' Submit failed ')
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(' Please fill in the blank ')
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>
边栏推荐
- Stm32f107+lan8720a use stm32subemx to configure network connection +tcp master-slave +udp app
- List of language weaknesses --cwe, a website worth learning
- 管理系统-ITclub（中）
- Go from introduction to practice - polymorphism (note)
- 豆沙绿保护你的双眼
- 正则表达式
- 洛谷P5706 再分肥宅水
- 鲜为人知的mysql导入数据
- GBase 8a V8版本节点替换期间通过并发数控制资源使用减少对系统影响的方法
- 如何做好功能测试？你确定不想知道吗？
猜你喜欢
![[LeetCode]动态规划解分割数组II[Arctic Fox]](/img/a1/4644206db3e14c81f9f64e4da046bf.png)
[LeetCode]动态规划解分割数组II[Arctic Fox]
. Net learning notes (V) -- lambda, LINQ, anonymous class (VaR), extension method
Experience sharing of meituan 20K Software Test Engineers
Go from introduction to practice -- shared memory concurrency mechanism (notes)
Exclusive interview with millions of annual salary. What should developers do if they don't fix bugs?
Set code exercise
![\W and [a-za-z0-9_], \Are D and [0-9] equivalent?](/img/96/2649c9cf95b06887b57fd8af2d41c2.png)
\W and [a-za-z0-9_], \Are D and [0-9] equivalent?
深度学习又有新坑了！悉尼大学提出全新跨模态任务，用文本指导图像进行抠图
vmware虚拟机PE启动
Yarn中RMApp、RMAppAttempt、RMContainer和RMNode状态机及其状态转移
随机推荐
qt 大文件生成md5校验码
Matlab finds the position of a row or column in the matrix
QT large file generation MD5 check code
Go from introduction to practice -- definition and implementation of behavior (notes)
[LeetCode]515. 在每个树行中找最大值
Bean paste green protects your eyes
[LeetCode]186. 翻转字符串里的单词 II
Method of reading file contents by Excel
Common problems encountered by burp Suite
\W and [a-za-z0-9_], \Are D and [0-9] equivalent?
Installing Oracle11g under Linux
Have time to look at ognl expressions
[LeetCode]508. The most frequent subtree elements and
使用Jmeter进行性能测试的这套步骤，涨薪2次，升职一次
[LeetCode]572. A subtree of another tree
Simulink导出FMU模型文件方法
Slow bear market, bit Store provides stable stacking products to help you cross the bull and bear
Quick excel export
MYSQL和MongoDB的分析
Common methods of string class