|
|
<!-- 问题编辑模态框组件 -->
|
|
|
<template>
|
|
|
<!-- 模态框主体 -->
|
|
|
<a-modal title="编辑题目" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
|
|
|
<a-spin :spinning="confirmLoading">
|
|
|
<!-- 问题编辑表单 -->
|
|
|
<a-form :form="form">
|
|
|
<h3><b>题干：</b></h3>
|
|
|
<div id="summernote-question-name-edit" />
|
|
|
<ul v-show="question.type==='多选题'">
|
|
|
<li v-for="option in question.options" :key="option.id">
|
|
|
<a-input v-model="option.content" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul v-show="question.type!=='多选题'">
|
|
|
<li v-for="option in question.options" :key="option.id">
|
|
|
<a-input v-model="option.content" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<h3><b>答案：</b></h3>
|
|
|
<ul v-show="question.type!=='多选题'">
|
|
|
<li>
|
|
|
<a-select :size="size" :value="answerOptionId" style="width: 100%" @change="handleSingleChange">
|
|
|
<a-select-option v-for="option in question.options" :key="option.id">
|
|
|
{{ option.content }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul v-show="question.type==='多选题'">
|
|
|
<li>
|
|
|
<a-select
|
|
|
mode="multiple"
|
|
|
:size="size"
|
|
|
placeholder="Please select"
|
|
|
:value="answerOptionIds"
|
|
|
style="width: 100%"
|
|
|
@change="handleMultiChange"
|
|
|
@popupScroll="popupScroll"
|
|
|
>
|
|
|
<a-select-option v-for="option in question.options" :key="option.id">
|
|
|
{{ option.content }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<h3><b>解析：</b></h3>
|
|
|
<div id="summernote-question-desc-edit" />
|
|
|
</a-form>
|
|
|
</a-spin>
|
|
|
<!-- 模态框底部按钮区域 -->
|
|
|
<template slot="footer">
|
|
|
<a-button key="cancel" @click="handleCancel">关闭</a-button>
|
|
|
<a-button key="update" type="primary" @click="handleUpdate">更新</a-button>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 导入富文本编辑器插件和API
|
|
|
import '../../../plugins/summernote'
|
|
|
import $ from 'jquery'
|
|
|
import { questionUpdate } from '../../../api/exam'
|
|
|
|
|
|
export default {
|
|
|
// 问题查看的弹出框，用于查看问题/修改问题
|
|
|
name: 'QuestionEditModal',
|
|
|
data () {
|
|
|
return {
|
|
|
// 模态框是否可见
|
|
|
visible: false,
|
|
|
// 模态框尺寸
|
|
|
size: 'default',
|
|
|
// 确认按钮加载状态
|
|
|
confirmLoading: false,
|
|
|
// 表单实例
|
|
|
form: this.$form.createForm(this),
|
|
|
// 每个问题
|
|
|
question: {},
|
|
|
// 单选和判断题的答案
|
|
|
answerOptionId: '',
|
|
|
// 多选题的答案
|
|
|
answerOptionIds: [],
|
|
|
radioStyle: {
|
|
|
display: 'block',
|
|
|
height: '30px',
|
|
|
lineHeight: '30px'
|
|
|
},
|
|
|
name: '',
|
|
|
desc: ''
|
|
|
}
|
|
|
},
|
|
|
// 组件更新时初始化富文本编辑器并设置内容
|
|
|
updated () {
|
|
|
this.initSummernote('summernote-question-name-edit')
|
|
|
this.initSummernote('summernote-question-desc-edit')
|
|
|
this.setSummernoteContent('summernote-question-name-edit', this.name)
|
|
|
this.setSummernoteContent('summernote-question-desc-edit', this.desc)
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化富文本编辑器
|
|
|
initSummernote (divId) {
|
|
|
console.log('初始化富文本插件：' + divId)
|
|
|
$('#' + divId).summernote({
|
|
|
lang: 'zh-CN',
|
|
|
placeholder: '请输入内容',
|
|
|
height: 200,
|
|
|
width: '100%',
|
|
|
htmlMode: true,
|
|
|
toolbar: [
|
|
|
['style', ['bold', 'italic', 'underline', 'clear']],
|
|
|
['fontsize', ['fontsize']],
|
|
|
['fontname', ['fontname']],
|
|
|
['para', ['ul', 'ol', 'paragraph']]
|
|
|
],
|
|
|
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
|
|
|
fontNames: [
|
|
|
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
|
|
|
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
|
|
|
'Tahoma', 'Times New Roman', 'Verdana'
|
|
|
],
|
|
|
callbacks: {
|
|
|
onSubmit: function () {
|
|
|
this.richContent = $('#summernote').summernote('code')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 获取富文本编辑器内容
|
|
|
getSummernoteContent (divId) {
|
|
|
return $('#' + divId).summernote('code')
|
|
|
},
|
|
|
// 设置富文本编辑器内容
|
|
|
setSummernoteContent (divId, content) {
|
|
|
return $('#' + divId).summernote('code', content)
|
|
|
},
|
|
|
edit (record) {
|
|
|
this.name = record.name // 题干
|
|
|
this.desc = record.description // 解析
|
|
|
// 把当前的记录赋值到data中的变量
|
|
|
this.question = record
|
|
|
// 上来先把之前的清理干净
|
|
|
this.answerOptionId = ''
|
|
|
this.answerOptionIds = []
|
|
|
this.visible = true
|
|
|
// 单选题的处理情况,设置默认值
|
|
|
for (let i = 0; i < this.question.options.length; i++) {
|
|
|
if (this.question.options[i].answer === true) {
|
|
|
// 设置单选题或者判断题答案
|
|
|
this.answerOptionId = this.question.options[i].id
|
|
|
// 设置多选题的答案
|
|
|
this.answerOptionIds.push(this.question.options[i].id)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
handleCancel () {
|
|
|
// clear form & currentStep
|
|
|
this.visible = false
|
|
|
},
|
|
|
|
|
|
handleSingleChange (value) {
|
|
|
// 单选题的处理情况
|
|
|
for (let i = 0; i < this.question.options.length; i++) {
|
|
|
if (this.question.options[i].id === value) {
|
|
|
// 更新唯一的正确答案
|
|
|
this.question.options[i].answer = true
|
|
|
// 设置答案的内容
|
|
|
this.answerOptionId = this.question.options[i].id
|
|
|
} else {
|
|
|
// id不和答案相同地就设置为false，这样可以保证只有一个正确答案
|
|
|
this.question.options[i].answer = false
|
|
|
}
|
|
|
}
|
|
|
console.log(`Selected: ${value}`)
|
|
|
},
|
|
|
// 多选题答案变更处理
|
|
|
handleMultiChange (values) {
|
|
|
console.log(values)
|
|
|
// 直接更新选项id的数组
|
|
|
this.answerOptionIds = values
|
|
|
// 更新question中options的answer位置
|
|
|
for (let i = 0; i < this.question.options.length; i++) { // 遍历所有的题目的选项
|
|
|
// 取出一个选项的id
|
|
|
const id = this.question.options[i].id
|
|
|
let isAnswer = false
|
|
|
for (let j = 0; j < values.length; j++) { // 拿着
|
|
|
const value = values[j]
|
|
|
if (id === value) {
|
|
|
// 说明这个选项是答案，设置为是答案，直接退出
|
|
|
isAnswer = true
|
|
|
this.question.options[i].answer = true
|
|
|
break // 跳出内部的for循环
|
|
|
}
|
|
|
}
|
|
|
// 这个选项遍历到最后，发现还不是答案(不在答案数组中)，那么就把这个选项的answer属性设置为false
|
|
|
if (isAnswer === false) {
|
|
|
this.question.options[i].answer = false
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 弹出框滚动事件处理
|
|
|
popupScroll () {
|
|
|
console.log('popupScroll')
|
|
|
},
|
|
|
// 更新问题
|
|
|
handleUpdate () {
|
|
|
const that = this
|
|
|
that.question.name = that.getSummernoteContent('summernote-question-name-edit')
|
|
|
that.question.description = that.getSummernoteContent('summernote-question-desc-edit')
|
|
|
console.log(that.question)
|
|
|
// 把data中的question属性提交到后端，待写完后端接口
|
|
|
questionUpdate(that.question).then(res => {
|
|
|
// 成功就跳转到结果页面
|
|
|
console.log(res)
|
|
|
if (res.code === 0) {
|
|
|
that.$notification.success({
|
|
|
message: '更新成功',
|
|
|
description: '问题更新成功'
|
|
|
})
|
|
|
// 关闭弹出框
|
|
|
that.visible = false
|
|
|
that.$emit('ok')
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
// 失败就弹出警告消息
|
|
|
that.$notification.error({
|
|
|
message: '更新',
|
|
|
description: err.message
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
