TEAMModelOS/TEAMModelOS/ClientApp/src/components/questionnaire/BaseSingle.vue

<template>
	<div class="question-single">
		<div class="exersices-content">
			<IconText :text="'题目'" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
			<div ref="singleEditor" style="text-align:left"></div>
		</div>
		<div class="question-option" style="margin-top:20px">
			<IconText :text="'单选选项'" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
			<div v-if="options.length">
				<div v-for="(item,index) in options" :key="index" :ref="'optionBox' + index" class="option-editor-wrap" style="margin-top:10px;display:flex">
					<span class="fl-center option-order">{{String.fromCharCode(64 + parseInt(index+1))}}</span>
					<div :ref="'singleOption'+index" :data-index="index" style="text-align:left" class="qn-option-editor" @click="optionClick(item)"></div>
					<span class="fl-center option-delete" @click="deleteOption(index)">
						<Icon type="md-close" /></span>
				</div>
			</div>
			<p class="option-add"><span @click="addOption()"> + 添加选项 </span></p>
		</div>
	</div>
</template>
<script>
	import E from 'wangeditor'
	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,
				editSingleInfo: {},
				stemEditor: null,
				stemContent: '',
				optionsContent: [],
				optionEditors: [],
			}
		},
		created() {},
		methods: {
			resetContent() {
				console.log('重置')
				this.options = [...new Array(4).keys()],
				this.optionsContent = []
				this.optionEditors.forEach(i => {
					i.txt.clear()
				})
				this.stemEditor.txt.clear()
			},
			initEditors() {
				// Editor默认配置
				if (this.options.length > 0) {
					this.options.forEach((item, i) => {
						let that = this
						let editor = new E(that.$refs['singleOption' + i][0])
						
							this.$editorTools.initSimpleEditor(editor)

							// 选项编辑器失焦隐藏工具栏
							editor.config.onblur = function() {
								let allToolbars = document.getElementsByClassName('qn-option-editor')
								for (let i = 0; i < allToolbars.length; i++) {
									if (allToolbars[i].children.length) {
										allToolbars[i].children[0].style.visibility = 'hidden'
									}
								}
							}


							// 选项编辑器内容发生变化时
							editor.config.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 = Array.from(document.getElementsByClassName('qn-option-editor'))
				let optionsLength = wraps.length;
				let newIndex = parseInt(this.options[this.options.length - 1]) + 1
				if (optionsLength < 9) {
					this.options.push(newIndex)
					this.optionsContent.push({
						code: String.fromCharCode(64 + parseInt(newIndex + 1)),
						value: ''
					})
					this.$nextTick(() => {
						let editor = new E(that.$refs['singleOption' + newIndex][0])
						this.$editorTools.initSimpleEditor(editor)
						editor.config.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
							} 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('最多只有9个选项！')
				}
			},
			
			/* 根据页面上的选项DOM数量，刷新每个选项的Order显示 */
			refreshOrder() {
				let wraps = Array.from(document.getElementsByClassName('option-order'))
				wraps.forEach((item, index) => {
					item.innerHTML = this.renderIndex(index)
				})
			},
			
			/* 根据下标渲染对应的字母顺序 */
			renderIndex(index) {
				return String.fromCharCode(64 + parseInt(index + 1))
			},
			
			// 删除选项
			deleteOption(index) {
				let wraps = Array.from(document.getElementsByClassName('qn-option-editor'))
				if (wraps.length > 2) {
					this.optionsContent.splice(index, 1)
					let textWrap = this.$refs['optionBox' + index][0]
					textWrap.remove()
					
					this.refreshOrder()
				} else {
					this.$Message.warning('至少保留两个选项！')
				}
				
			},
			
			// 保存试题 获取最新选项数据
			doSave(){
				// 拿到当前还剩的选项DOM
				let wraps = Array.from(document.getElementsByClassName('qn-option-editor'))
				let arr = []
				console.log(wraps)
				wraps.forEach((item,index) => {
				  // 遍历选项 找到对应的 Editor 然后获取编辑器里面的内容
				  let id = item.dataset.editorId
				  let curEditor = this.optionEditors.filter(i => i.id === id)[0]
				  // 生成新的选项对象
				  let obj = {
					code:String.fromCharCode(64 + parseInt(index + 1)),
					value:curEditor.txt.html()
				  }
				  arr.push(obj)
				})
				this.$emit('onSave',{
					stemContent:this.stemContent,
					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]
					if(currentToolBar.clientHeight > 50){
						currentToolBar.style.top = '-90px'
					}
					currentToolBar.style.visibility = 'visible'
				}, 100)
			},
		},
		mounted() {
			let stemEditor = new E(this.$refs.singleEditor)
			stemEditor.config.onchange = (html) => {
				this.stemContent = html
			}
			this.$editorTools.addVideoUpload(this, stemEditor)
			this.$editorTools.addAudio(this, stemEditor)
			this.$editorTools.initMyEditor(stemEditor)
			this.$editorTools.initSimpleEditor(stemEditor)
			stemEditor.create()
			this.stemEditor = stemEditor
			this.initEditors()

			if (this.editInfo && this.editInfo.question) {
				console.log('进入单选题Mounted编辑')
				this.editSingleInfo = JSON.parse(JSON.stringify(this.editInfo)) 
				this.stemContent = this.editSingleInfo.question
				this.optionsContent = this.editSingleInfo.option
				this.options = this.editSingleInfo.option.map((item, index) => index)
				this.$nextTick(() => {
					this.initEditors()
					this.stemEditor.txt.html(this.editSingleInfo.question)
				})
			}
		},
		watch: {
			editInfo: {
				handler(newValue, oldValue) {
					if (newValue) {
						console.log('单选接收到的数据')
						console.log(newValue)
						this.editSingleInfo = JSON.parse(JSON.stringify(newValue)) 
						if (Object.keys(newValue).length > 0) {
							this.stemContent = this.editSingleInfo.question
							this.optionsContent = this.editSingleInfo.option
							this.options = this.editSingleInfo.option.map((item, index) => index)
							this.$nextTick(() => {
								this.initEditors()
								this.stemEditor.txt.html(this.editSingleInfo.question)
							})
						}
					}
				},
				// immediate:true
			},

		}
	}
</script>
<style lang="less">
	@import(reference) "./BaseSingle.less";
</style>