<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>
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
