赞
踩
<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>
![在这里插入图片描述](https://img-blog.csdnimg.cn/667cf5044eed4f3785c40e08ee923fbc.png
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。