|
@@ -1,238 +1,341 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="exersices-content">
|
|
|
- <IconText :text="'题目'" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
|
|
|
- <div>
|
|
|
- <div ref="editor" style="text-align:left"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="exersices-option">
|
|
|
- <IconText :text="'多选选项'" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
|
|
|
- <div v-for="(item,index) in options" :key="index" :class="'editor-wrap-'+item" style="margin-top:10px;display:flex">
|
|
|
- <span class="fl-center option-order">{{String.fromCharCode(64 + parseInt(index+1))}}</span>
|
|
|
- <div :ref="'multipleEditor'+item" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
|
|
|
- <span :class="['fl-center', 'option-setting', trueArr.indexOf(item) > -1 ? 'option-true':'']" @click="settingAnswer(item,index)">{{ trueIndex.indexOf(item) > -1 ? '正确答案' :'设为答案' }}</span>
|
|
|
- <span class="fl-center option-delete" @click="deleteOption(item,index)"><Icon type="ios-close-circle" /></span>
|
|
|
- </div>
|
|
|
- <p class="option-add"><span @click="addOption()">+ 添加选项 </span><span style="color:rgb(60,196,82);margin-left:15px;font-weight:bold">正确答案 :{{showTrueAnswers}}</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <div class="exersices-content">
|
|
|
+ <IconText :text="'题目'" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
|
|
|
+ <div @click="onRichTextClick($event)">
|
|
|
+ <div ref="singleEditor" style="text-align:left"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="exersices-option">
|
|
|
+ <IconText :text="'多选选项'" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
|
|
|
+ <div v-for="(item,index) in options" :key="index" :ref="'optionBox' + index" :class="'editor-wrap-'+item" style="margin-top:10px;display:flex"
|
|
|
+ @click="onRichTextClick($event)">
|
|
|
+ <span class="fl-center option-delete" @click="deleteOption(index,item)"><Icon type="md-remove-circle" /></span>
|
|
|
+ <span class="fl-center option-order" :ref="'optionOrder' + index" :data-index="index">{{ renderIndex(index) }}</span>
|
|
|
+ <div :ref="'singleOption'+index" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
|
|
|
+ <span :class="['fl-center', 'option-setting', trueArr.indexOf(index) > -1 ? 'option-true':'']" @click="settingAnswer(index)">{{ trueArr.indexOf(index) > -1 ? '正确答案' :'设为答案' }}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <p class="option-add"><span @click="addOption()">+ 添加选项 </span><span style="color:rgb(60,196,82);margin-left:15px;font-weight:bold">正确答案:{{ multipleAnswers.join('') }}</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import E from '@/utils/wangEditor.js'
|
|
|
- import IconText from '@/components/evaluation/IconText.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- IconText
|
|
|
- },
|
|
|
- props: ['editInfo'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- options: [...new Array(4).keys()], // 默认四个选项
|
|
|
- existOptions: [...new Array(4).keys()],
|
|
|
- initFlag: true,
|
|
|
- trueArr: [0],
|
|
|
- trueIndex: [0],
|
|
|
- stemContent: '',
|
|
|
- stemEditor: null,
|
|
|
- transferArr: [],
|
|
|
- optionsContent: [],
|
|
|
- defaultConfig: {
|
|
|
- uploadImgShowBase64:true,
|
|
|
- menus: this.$tools.wangEditorMenu
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (Object.keys(this.editInfo).length > 0) {
|
|
|
- this.options = [...new Array(this.editInfo.option.length).keys()]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initEditors() {
|
|
|
- // Editor默认配置
|
|
|
- for (let i of this.options) {
|
|
|
- let that = this
|
|
|
- let editor = new E(that.$refs['multipleEditor' + i][0])
|
|
|
- editor.customConfig = this.defaultConfig
|
|
|
- editor.customConfig.onblur = function () {
|
|
|
- let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
- for (let i = 0; i < allToolbars.length; i++) {
|
|
|
- if (allToolbars[i].children.length) {
|
|
|
- allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- editor.customConfig.onVideoWarning = (text) => {
|
|
|
- this.$Message.warning(text)
|
|
|
- },
|
|
|
- editor.customConfig.onchange = (html) => {
|
|
|
- let key = String.fromCharCode(64 + parseInt(i + 1))
|
|
|
- let codeArr = this.optionsContent.map(item => item.code)
|
|
|
- // 如果已经编辑过则 修改选项内容
|
|
|
- if (codeArr.indexOf(key) !== -1) {
|
|
|
- this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
- } else { // 否则创建新选项
|
|
|
- let option = {
|
|
|
- code: key,
|
|
|
- value: html
|
|
|
- }
|
|
|
- this.optionsContent.push(option)
|
|
|
- }
|
|
|
- }
|
|
|
- editor.create()
|
|
|
+ import E from '@/utils/wangEditor.js'
|
|
|
+ import IconText from '@/components/evaluation/IconText.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ IconText
|
|
|
+ },
|
|
|
+ props: ['editInfo'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [...new Array(4).keys()], // 默认四个选项
|
|
|
+ existOptions: [...new Array(4).keys()],
|
|
|
+ initFlag: true,
|
|
|
+ trueIndex: 0,
|
|
|
+ optionTrueIndex:0,
|
|
|
+ trueArr:[0],
|
|
|
+ optionTrueArr:[0],
|
|
|
+ multipleAnswers:['A'],
|
|
|
+ editSingleInfo: {},
|
|
|
+ stemEditor: null,
|
|
|
+ stemContent: '',
|
|
|
+ transferArr:[],
|
|
|
+ optionsContent: [],
|
|
|
+ optionEditors: [],
|
|
|
+ defaultConfig: {
|
|
|
+ uploadImgShowBase64: true,
|
|
|
+ menus: this.$tools.wangEditorMenu
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ initEditors() {
|
|
|
+ // Editor默认配置
|
|
|
+ if (this.options.length > 0) {
|
|
|
+ this.options.forEach((item, i) => {
|
|
|
+ let that = this
|
|
|
+ let editor = new E(that.$refs['singleOption' + i][0])
|
|
|
+ editor.customConfig = this.defaultConfig
|
|
|
+ editor.customConfig.uploadVideoDisable = true,
|
|
|
+ // editor.customConfig.zIndex = 100
|
|
|
+
|
|
|
+ // 选项编辑器失焦隐藏工具栏
|
|
|
+ editor.customConfig.onblur = function() {
|
|
|
+ let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
+ for (let i = 0; i < allToolbars.length; i++) {
|
|
|
+ if (allToolbars[i].children.length) {
|
|
|
+ allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 如果是编辑状态 则将选项内容回显
|
|
|
- if (Object.keys(this.editInfo).length > 0) {
|
|
|
- editor.txt.html(this.editInfo.option[i].value)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 设置正确答案
|
|
|
- settingAnswer(item, index) {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.trueArr.indexOf(item) > -1) {
|
|
|
- this.trueArr.splice(this.trueArr.indexOf(item), 1)
|
|
|
- this.trueIndex.splice(this.trueIndex.indexOf(index), 1)
|
|
|
- } else {
|
|
|
- this.trueArr.push(item)
|
|
|
- this.trueIndex.push(index)
|
|
|
- this.trueArr = this.trueArr.sort() // 选项排序
|
|
|
- this.trueIndex = this.trueIndex.sort() // 选项排序
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加选项
|
|
|
- addOption() {
|
|
|
- let that = this
|
|
|
- let newIndex = parseInt(this.options[this.options.length - 1]) + 1
|
|
|
- let optionsLength = this.options.length
|
|
|
- if (optionsLength < 10) {
|
|
|
- this.options.push(newIndex)
|
|
|
- this.$nextTick(() => {
|
|
|
- let editor = new E(that.$refs['multipleEditor' + newIndex][0])
|
|
|
- editor.customConfig = this.defaultConfig
|
|
|
+ editor.customConfig.onVideoWarning = (text) => {
|
|
|
+ this.$Message.warning(text)
|
|
|
+ },
|
|
|
|
|
|
- editor.customConfig.onchange = (html) => {
|
|
|
- let key = String.fromCharCode(64 + parseInt(newIndex + 1))
|
|
|
- let codeArr = this.optionsContent.map(item => item.code)
|
|
|
- // 如果已经编辑过则 修改选项内容
|
|
|
- if (codeArr.indexOf(key) !== -1) {
|
|
|
- this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
- console.log(this.optionsContent.map(item => item.code))
|
|
|
- console.log(this.optionsContent.map(item => item.value))
|
|
|
- } else { // 否则创建新选项
|
|
|
- let option = {
|
|
|
- code: key,
|
|
|
- value: html
|
|
|
- }
|
|
|
- this.optionsContent.push(option)
|
|
|
- console.log(this.optionsContent.map(item => item.code))
|
|
|
- console.log(this.optionsContent.map(item => item.value))
|
|
|
- }
|
|
|
- }
|
|
|
- editor.create()
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$Message.warning('最多只有10个选项!')
|
|
|
- }
|
|
|
- },
|
|
|
- // 删除选项
|
|
|
- deleteOption(item, index) {
|
|
|
- let letter = String.fromCharCode(64 + parseInt(index + 1))
|
|
|
- if (this.options.length > 2) {
|
|
|
- this.options.splice(this.options.indexOf(item), 1)
|
|
|
- this.optionsContent.splice(index, 1)
|
|
|
- // 如果删除了已有选项 后面的code要降1
|
|
|
- for (let i in this.optionsContent) {
|
|
|
- if (i >= index) {
|
|
|
- this.optionsContent[i].code = String.fromCharCode(64 + parseInt(parseInt(i) + 1))
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.transferArr.indexOf(letter) > -1) {
|
|
|
- this.trueIndex.splice(this.trueIndex.length - 1, 1)// 从正确索引中删除
|
|
|
- this.trueArr.splice(this.trueArr.indexOf(item), 1)// 从正确选项中删除
|
|
|
- } else {
|
|
|
- this.trueIndex = this.trueIndex.map(item => item > index ? item - 1 : item) // 如果删除错误选项 则后面的正确选项要前移动一位
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$Message.warning('至少保留两个选项!')
|
|
|
- }
|
|
|
- },
|
|
|
- // 选项点击事件聚焦
|
|
|
- optionClick(index) {
|
|
|
- let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
- let that = this
|
|
|
- for (let i = 0; i < allToolbars.length; i++) {
|
|
|
- allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
- }
|
|
|
- setTimeout(function () {
|
|
|
- let currentToolBar = that.$refs['multipleEditor' + index][0].children[0]
|
|
|
- currentToolBar.style.visibility = 'visible'
|
|
|
- }, 100)
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let stemEditor = new E(this.$refs.editor)
|
|
|
- stemEditor.customConfig = this.defaultConfig
|
|
|
- stemEditor.customConfig.onchange = (html) => {
|
|
|
- this.stemContent = html
|
|
|
- }
|
|
|
+ // 选项编辑器内容发生变化时
|
|
|
+ editor.customConfig.onchange = (html) => {
|
|
|
+ let key = String.fromCharCode(64 + parseInt(i + 1))
|
|
|
+ let codeArr = this.optionsContent.map(item => item.code)
|
|
|
+ // 如果已经编辑过则 修改选项内容
|
|
|
+ if (codeArr.indexOf(key) !== -1) {
|
|
|
+ this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
+ } else { // 否则创建新选项
|
|
|
+ let option = {
|
|
|
+ code: key,
|
|
|
+ value: html
|
|
|
+ }
|
|
|
+ this.optionsContent.push(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ editor.create()
|
|
|
+ this.optionEditors.push(editor)
|
|
|
+ that.$refs["singleOption" + i][0].dataset.editorId = editor.id
|
|
|
+
|
|
|
+ // 如果是编辑状态 则将选项内容回显
|
|
|
+ if (Object.keys(this.editSingleInfo).length > 0) {
|
|
|
+ editor.txt.html(this.editSingleInfo.option[i].value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onRichTextClick(e) {
|
|
|
+ this.$parent.onRichTextClick(e)
|
|
|
+ },
|
|
|
+ /* 添加选项 */
|
|
|
+ addOption() {
|
|
|
+ let that = this
|
|
|
+ let wraps = document.getElementsByClassName('option-editor')
|
|
|
+ let optionsLength = wraps.length;
|
|
|
+ let newIndex = parseInt(this.options[this.options.length - 1]) + 1
|
|
|
+ // let optionsLength = this.options.length
|
|
|
+ if (optionsLength < 10) {
|
|
|
+ this.options.push(newIndex)
|
|
|
+ this.existOptions.push(newIndex)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let editor = new E(that.$refs['singleOption' + newIndex][0])
|
|
|
+ editor.customConfig = this.defaultConfig
|
|
|
+
|
|
|
+ editor.customConfig.onchange = (html) => {
|
|
|
+ let key = String.fromCharCode(64 + parseInt(newIndex + 1))
|
|
|
+ let codeArr = this.optionsContent.map(item => item.code)
|
|
|
+ // 如果已经编辑过则 修改选项内容
|
|
|
+ if (codeArr.indexOf(key) !== -1) {
|
|
|
+ this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
+ console.log(this.optionsContent.map(item => item.code))
|
|
|
+ console.log(this.optionsContent.map(item => item.value))
|
|
|
+ } else { // 否则创建新选项
|
|
|
+ let option = {
|
|
|
+ code: key,
|
|
|
+ value: html
|
|
|
+ }
|
|
|
+ this.optionsContent.push(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ editor.create()
|
|
|
+ this.optionEditors.push(editor);
|
|
|
+ this.$refs["singleOption" + newIndex][0].dataset.editorId = editor.id
|
|
|
+ this.refreshOrder()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$Message.warning('最多只有10个选项!')
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- stemEditor.customConfig.onVideoWarning = (text) => {
|
|
|
- this.$Message.warning(text)
|
|
|
+
|
|
|
+ /* 设置正确答案 */
|
|
|
+ settingAnswer(index) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.trueArr.indexOf(index) > -1) {
|
|
|
+ if(this.trueArr.length === 1){
|
|
|
+ this.$Message.warning('至少保留一个正确答案!')
|
|
|
+ }else{
|
|
|
+ this.trueArr.splice(this.trueArr.indexOf(index), 1)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.trueArr.push(index)
|
|
|
+ this.trueArr = this.trueArr.sort() // 选项排序
|
|
|
+ }
|
|
|
+ this.getAnswerOrder(this.trueArr)
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
- // 选择视频文件后的上传Blob操作
|
|
|
- stemEditor.customConfig.onVideoSelected = async (file) => {
|
|
|
- this.$tools.doUploadVideo(this,file,stemEditor)
|
|
|
+ /* 获取最新答案选项 */
|
|
|
+ getAnswerOrder(arr){
|
|
|
+ let arr2 = []
|
|
|
+ arr.forEach(i => {
|
|
|
+ arr2.push(this.getOrderCode(i))
|
|
|
+ })
|
|
|
+ this.multipleAnswers = arr2.sort()
|
|
|
},
|
|
|
|
|
|
- stemEditor.create()
|
|
|
- this.stemEditor = stemEditor
|
|
|
- // 初始化选项编辑器
|
|
|
- this.initEditors()
|
|
|
+ /* 根据index获取对应选项字母的值 */
|
|
|
+ getOrderCode(index){
|
|
|
+ let wraps = document.getElementsByClassName('option-order')
|
|
|
+ for(let i=0;i<wraps.length;i++){
|
|
|
+ let item = wraps[i]
|
|
|
+ if(+index === +item.dataset.index){
|
|
|
+ return item.innerText
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- if(this.editInfo && this.editInfo.question){
|
|
|
- console.log('进入多选题Mounted编辑')
|
|
|
- console.log(this.editInfo)
|
|
|
- this.stemContent = this.editInfo.question
|
|
|
- this.optionsContent = this.editInfo.option
|
|
|
- this.trueIndex = this.editInfo.answer.map(item => item.charCodeAt() - 65)
|
|
|
- this.trueArr = this.editInfo.answer.map(item => item.charCodeAt() - 65)
|
|
|
- this.options = this.editInfo.option.map((item, index) => index)
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initEditors()
|
|
|
- this.stemEditor.txt.html(this.editInfo.question)
|
|
|
+ /* 根据页面上的选项DOM数量,刷新每个选项的Order显示 */
|
|
|
+ refreshOrder() {
|
|
|
+ let wraps = document.getElementsByClassName('option-order')
|
|
|
+ wraps.forEach((item, index) => {
|
|
|
+ item.innerHTML = this.renderIndex(index)
|
|
|
})
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 选项顺序转化成字母
|
|
|
- showTrueAnswers() {
|
|
|
- let arr = this.trueIndex.map(item => String.fromCharCode(64 + parseInt(item + 1)))
|
|
|
- this.transferArr = arr
|
|
|
- return this.transferArr.sort().join('')
|
|
|
- }
|
|
|
- },
|
|
|
- watch:{
|
|
|
- editInfo:{
|
|
|
- handler(n){
|
|
|
- console.log('多选富文本接收到的数据')
|
|
|
- console.log(n)
|
|
|
- if(n){
|
|
|
- this.stemEditor.txt.html(this.editInfo.question)
|
|
|
- this.stemContent = this.editInfo.question
|
|
|
- this.optionsContent = this.editInfo.option
|
|
|
- this.trueIndex = this.editInfo.answer.map(item => item.charCodeAt() - 65)
|
|
|
- this.trueArr = this.editInfo.answer.map(item => item.charCodeAt() - 65)
|
|
|
- this.options = this.editInfo.option.map((item, index) => index)
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initEditors()
|
|
|
- })
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 根据下标渲染对应的字母顺序 */
|
|
|
+ renderIndex(index) {
|
|
|
+ return String.fromCharCode(64 + parseInt(index + 1))
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* 删除选项 */
|
|
|
+ deleteOption(index,item) {
|
|
|
+ // 拿到所有选项
|
|
|
+ if (this.existOptions.length > 2 ) {
|
|
|
+ // 如果删除的是正确答案 则重置正确答案
|
|
|
+ if(this.trueArr.indexOf(index) > -1){
|
|
|
+ if(this.trueArr.length === 1){
|
|
|
+ this.$Message.warning('至少保留一个正确答案!')
|
|
|
+ }else{
|
|
|
+ this.trueArr.splice(this.trueArr.indexOf(index),1)
|
|
|
+ // 确保当前存在的options保持同步
|
|
|
+ this.existOptions.splice(this.existOptions.indexOf(item), 1)
|
|
|
+ this.optionsContent.splice(index, 1)
|
|
|
+ // 删除操作 移除选项DOM
|
|
|
+ let textWrap = this.$refs['optionBox' + index][0]
|
|
|
+ textWrap.remove()
|
|
|
+ // 刷新选项序号显示
|
|
|
+ this.refreshOrder()
|
|
|
+ this.getAnswerOrder(this.trueArr)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // 确保当前存在的options保持同步
|
|
|
+ this.existOptions.splice(this.existOptions.indexOf(item), 1)
|
|
|
+ this.optionsContent.splice(index, 1)
|
|
|
+ // 删除操作 移除选项DOM
|
|
|
+ let textWrap = this.$refs['optionBox' + index][0]
|
|
|
+ textWrap.remove()
|
|
|
+ // 刷新选项序号显示
|
|
|
+ this.refreshOrder()
|
|
|
+ this.getAnswerOrder(this.trueArr)
|
|
|
}
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$Message.warning('至少保留两个选项!')
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 保存试题 获取最新选项数据 */
|
|
|
+ doSave() {
|
|
|
+ // 拿到当前还剩的选项DOM
|
|
|
+ let wraps = document.getElementsByClassName('option-editor')
|
|
|
+ let arr = []
|
|
|
+ wraps.forEach((item, index) => {
|
|
|
+ // 遍历选项 找到对应的 Editor 然后获取编辑器里面的内容
|
|
|
+ let id = item.dataset.editorId
|
|
|
+ let curEditor = this.optionEditors.filter(i => i.id === id)[0]
|
|
|
+ if(curEditor){
|
|
|
+ // 生成新的选项对象
|
|
|
+ let obj = {
|
|
|
+ code: String.fromCharCode(64 + parseInt(index + 1)),
|
|
|
+ value: curEditor.txt.html()
|
|
|
+ }
|
|
|
+ arr.push(obj)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ this.optionsContent = arr
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 模拟选项聚焦事件 */
|
|
|
+ optionClick(index) {
|
|
|
+ let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
+ let that = this
|
|
|
+ for (let i = 0; i < allToolbars.length; i++) {
|
|
|
+ allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ setTimeout(function() {
|
|
|
+ let currentToolBar = that.$refs['singleOption' + index][0].children[0]
|
|
|
+ currentToolBar.style.visibility = 'visible'
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ /* 渲染多选题 */
|
|
|
+ doRender(editInfo){
|
|
|
+ this.editSingleInfo = editInfo
|
|
|
+ this.stemContent = editInfo.question
|
|
|
+ this.optionsContent = editInfo.option
|
|
|
+ this.multipleAnswers = editInfo.answer
|
|
|
+ this.trueArr = editInfo.answer.map(item => item.charCodeAt() - 65)
|
|
|
+ this.options = editInfo.option.map((item, index) => index)
|
|
|
+ this.existOptions = editInfo.option.map((item, index) => index)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEditors()
|
|
|
+ this.stemEditor.txt.html(editInfo.question)
|
|
|
+ })
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let stemEditor = new E(this.$refs.singleEditor)
|
|
|
+ stemEditor.customConfig = this.defaultConfig
|
|
|
+ stemEditor.customConfig.uploadVideoDisable = false
|
|
|
+ stemEditor.customConfig.onchange = (html) => {
|
|
|
+ this.stemContent = html
|
|
|
+ }
|
|
|
+ stemEditor.customConfig.onVideoWarning = (text) => {
|
|
|
+ this.$Message.warning(text)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择视频文件后的上传Blob操作
|
|
|
+ stemEditor.customConfig.onVideoSelected = async (file) => {
|
|
|
+ this.$tools.doUploadVideo(this, file, stemEditor)
|
|
|
+ },
|
|
|
+ stemEditor.create()
|
|
|
+ this.stemEditor = stemEditor
|
|
|
+ this.initEditors()
|
|
|
+
|
|
|
+ if (this.editInfo && this.editInfo.question) {
|
|
|
+ console.log('进入多选题Mounted编辑')
|
|
|
+ this.doRender(this.editInfo)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 选项顺序转化成字母
|
|
|
+ showTrueAnswers() {
|
|
|
+ let arr = this.trueArr.map(item => String.fromCharCode(64 + parseInt(item + 1)))
|
|
|
+ this.transferArr = arr
|
|
|
+ return this.transferArr.sort().join('')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ editInfo: {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ if (newValue) {
|
|
|
+ console.log('多选接收到的数据')
|
|
|
+ console.log(newValue)
|
|
|
+ this.editSingleInfo = newValue
|
|
|
+ if (Object.keys(newValue).length > 0) {
|
|
|
+ this.doRender(newValue)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // immediate:true
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import"../index/CreateExercises.less";
|
|
|
+</style>
|