Skip to content

C
center-exam-show
提交 d8e9ec98 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update: 优化缓存请求

上级 db4b2303
隐藏空白字符变更
内嵌 并排
正在显示 包含 126 行增加 和 164 行删除
src/components/exam/question.vue
浏览文件 @ d8e9ec98
<template> <template>
<div> <div>
<!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) --> <!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) -->
<template <template v-if="questionData.question_item_type == 1 || questionData.question_item_type == 2 || questionData.question_item_type == 6">
v-if="
questionData.question_item_type == 1 ||
questionData.question_item_type == 2 ||
questionData.question_item_type == 6
"
>
<div class="title-type"> <div class="title-type">
<div class="type">{{ questionData.question_item_title }}</div> <div class="type">{{ questionData.question_item_title }}</div>
<div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div> <div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div>
</div> </div>
<div class="title"> <div class="title">
<div class="num">{{ questionData.q_order }}.</div> <div class="num">{{ questionData.q_order }}.</div><div class="des" v-html="questionData.content"></div>
<div class="des" v-html="questionData.content"></div>
</div> </div>
<!-- <div class="describe" ></div> --> <!-- <div class="describe" ></div> -->
<ul :class="questionData.question_item_type == 2 ? 'check-option' : 'radio-option'"> <ul :class="questionData.question_item_type == 2 ? 'check-option' : 'radio-option'">
<template v-for="(item, index) in questionData.options"> <template v-for="(item, index) in questionData.options">
<li <li
:key="index" :key="index"
:class=" :class="questionParams.answerRecord[questionData.question_item_id]
questionParams.answerRecord[questionData.question_item_id] ? questionParams.answerRecord[questionData.question_item_id][questionData.id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id] ? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === item.id })
? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { ? 'active'
return id === item.id
})
? 'active'
: ''
: '' : ''
: '' : ''
" : ''"
>
<div
@click="
changeOptions(questionData.question_item_type, questionData.question_item_id, questionData.id, item.id)
"
> >
<div @click="changeOptions(questionData.question_item_type, questionData.question_item_id, questionData.id, item.id)">
<div class="icon"></div> <div class="icon"></div>
<div class="txt" v-html="item.option"></div> <div class="txt" v-html="item.option"></div>
</div> </div>
...@@ -52,15 +37,9 @@ ...@@ -52,15 +37,9 @@
<div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div> <div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div>
</div> </div>
<div class="title"> <div class="title">
<div class="num">{{ questionData.q_order }}.</div> <div class="num">{{ questionData.q_order }}.</div><div class="des" v-html="questionData.content"></div>
<div class="des" v-html="questionData.content"></div>
</div> </div>
<el-input <el-input @input="QAChange(questionData.question_item_id, questionData.id)" type="textarea" placeholder="请输入内容" v-model="questionData.textContent"></el-input>
@input="QAChange(questionData.question_item_id, questionData.id)"
type="textarea"
placeholder="请输入内容"
v-model="questionData.textContent"
></el-input>
</template> </template>
<!-- 复合题 --> <!-- 复合题 -->
<template v-if="questionData.question_item_type == 5"> <template v-if="questionData.question_item_type == 5">
...@@ -75,33 +54,25 @@ ...@@ -75,33 +54,25 @@
<template v-for="(item, index) in questionData.list"> <template v-for="(item, index) in questionData.list">
<li :key="'type5' + index"> <li :key="'type5' + index">
<div class="title"> <div class="title">
<div class="num">{{ item.q_order }}.</div> <div class="num">{{ item.q_order }}.</div><div class="des" v-html="item.content"></div>
<div class="des" v-html="item.content"></div>
</div> </div>
<ul :class="item.type == 2 ? 'check-option' : 'radio-option'"> <ul :class="item.type == 2 ? 'check-option' : 'radio-option'"><!-- radio-option check-option -->
<!-- radio-option check-option -->
<template v-if="item.options"> <template v-if="item.options">
<template v-for="(items, cIndex) in item.options"> <template v-for="(items, cIndex) in item.options">
<li <li
:id="items.id" :id="items.id"
:key="'c' + cIndex" :key="'c' + cIndex"
:class=" :class="questionParams.answerRecord[questionData.question_item_id]
questionParams.answerRecord[questionData.question_item_id] ? questionParams.answerRecord[questionData.question_item_id][questionData.id]
? questionParams.answerRecord[questionData.question_item_id][questionData.id] ? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === items.id })
? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find( ? 'active'
id => {
return id === items.id
}
)
? 'active'
: ''
: '' : ''
: '' : ''
" : ''"
> >
<div @click="changeOptions(item.type, questionData.question_item_id, questionData.id, items.id)"> <div @click="changeOptions(item.type, questionData.question_item_id, questionData.id, items.id)">
<div class="icon"></div> <div class="icon"></div>
<div class="txt">{{ items.option }}</div> <div class="txt">{{items.option}}</div>
</div> </div>
</li> </li>
</template> </template>
...@@ -119,7 +90,8 @@ import action from '@action' ...@@ -119,7 +90,8 @@ import action from '@action'
import Bus from '@/components/common/bus.js' import Bus from '@/components/common/bus.js'
import _ from 'lodash' import _ from 'lodash'
export default { export default {
components: {}, components: {
},
props: { props: {
contentHeight: { type: Number, default: () => {} }, contentHeight: { type: Number, default: () => {} },
questionParams: { type: Object, default: () => {} } questionParams: { type: Object, default: () => {} }
...@@ -135,7 +107,8 @@ export default { ...@@ -135,7 +107,8 @@ export default {
beforeDestroy() { beforeDestroy() {
clearInterval(this.setCacheTime) clearInterval(this.setCacheTime)
}, },
created() {}, created() {
},
mounted() { mounted() {
clearInterval(this.setCacheTime) clearInterval(this.setCacheTime)
this.setCacheTime = setInterval(() => { this.setCacheTime = setInterval(() => {
...@@ -149,9 +122,7 @@ export default { ...@@ -149,9 +122,7 @@ export default {
this.questionParams.question.question_items.map((item, index) => { this.questionParams.question.question_items.map((item, index) => {
if (parseInt(item.question_item_type) === 5) { if (parseInt(item.question_item_type) === 5) {
item.question_list.map(cItem => { item.question_list.map(cItem => {
const currentItem = cItem.list.find(items => { const currentItem = cItem.list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
return items.q_order === this.questionParams.questionIndex + 1
})
if (currentItem) { if (currentItem) {
this.questionData = {} this.questionData = {}
this.questionData.common_content = cItem.common_content this.questionData.common_content = cItem.common_content
...@@ -175,17 +146,14 @@ export default { ...@@ -175,17 +146,14 @@ export default {
} }
}) })
} else { } else {
const currentItem = item.question_list.find(items => { const currentItem = item.question_list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
return items.q_order === this.questionParams.questionIndex + 1
})
if (currentItem) { if (currentItem) {
this.questionData = currentItem this.questionData = currentItem
const key = ['question_item_id', 'question_item_title', 'question_item_type'] const key = ['question_item_id', 'question_item_title', 'question_item_type']
key.map(k => { key.map(k => {
this.questionData[k] = item[k] this.questionData[k] = item[k]
}) })
typeof this.questionData.options === 'string' && typeof this.questionData.options === 'string' && (this.questionData.options = JSON.parse(currentItem.options))
(this.questionData.options = JSON.parse(currentItem.options))
const pId = this.questionData.question_item_id const pId = this.questionData.question_item_id
const cId = this.questionData.id const cId = this.questionData.id
console.log(this.questionData.question_item_id, this.questionData.id, '321++') console.log(this.questionData.question_item_id, this.questionData.id, '321++')
...@@ -206,58 +174,56 @@ export default { ...@@ -206,58 +174,56 @@ export default {
QAChange(pId, cId) { QAChange(pId, cId) {
this.questionParams.answerRecord[pId] this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId] ? this.questionParams.answerRecord[pId][cId]
? (this.questionParams.answerRecord[pId][cId].answer = [this.questionData.textContent]) ? this.questionParams.answerRecord[pId][cId].answer = [this.questionData.textContent]
: (this.questionParams.answerRecord[pId][cId] = { : this.questionParams.answerRecord[pId][cId] = {
answer: [this.questionData.textContent], answer: [this.questionData.textContent],
sign: false sign: false
}) }
: (this.questionParams.answerRecord[pId] = { : this.questionParams.answerRecord[pId] = {
[cId]: { [cId]: {
answer: [this.questionData.textContent], answer: [this.questionData.textContent],
sign: false sign: false
} }
}) }
this.$forceUpdate() this.$forceUpdate()
}, },
// 选项选择 // 选项选择
changeOptions: _.debounce(function (type, pId, cId, optId) { changeOptions: _.debounce(function(type, pId, cId, optId) {
if (parseInt(type) !== 2) { if (parseInt(type) !== 2) {
this.questionParams.answerRecord[pId] this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId] ? this.questionParams.answerRecord[pId][cId]
? (this.questionParams.answerRecord[pId][cId].answer = [optId]) ? this.questionParams.answerRecord[pId][cId].answer = [optId]
: (this.questionParams.answerRecord[pId][cId] = { : this.questionParams.answerRecord[pId][cId] = {
answer: [optId], answer: [optId],
sign: false sign: false
}) }
: (this.questionParams.answerRecord[pId] = { : this.questionParams.answerRecord[pId] = {
[cId]: { [cId]: {
answer: [optId], answer: [optId],
sign: false sign: false
} }
}) }
} else { } else {
this.questionParams.answerRecord[pId] this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId] ? this.questionParams.answerRecord[pId][cId]
? (() => { ? (() => {
const optChack = this.questionParams.answerRecord[pId][cId].answer.findIndex(item => { const optChack = this.questionParams.answerRecord[pId][cId].answer.findIndex(item => { return item === optId })
return item === optId if (optChack === -1) {
}) this.questionParams.answerRecord[pId][cId].answer.push(optId)
if (optChack === -1) { } else {
this.questionParams.answerRecord[pId][cId].answer.push(optId) this.questionParams.answerRecord[pId][cId].answer.splice(optChack, 1)
} else {
this.questionParams.answerRecord[pId][cId].answer.splice(optChack, 1)
}
})()
: (this.questionParams.answerRecord[pId][cId] = {
answer: [optId],
sign: false
})
: (this.questionParams.answerRecord[pId] = {
[cId]: {
answer: [optId],
sign: false
} }
}) })()
: this.questionParams.answerRecord[pId][cId] = {
answer: [optId],
sign: false
}
: this.questionParams.answerRecord[pId] = {
[cId]: {
answer: [optId],
sign: false
}
}
} }
Bus.$emit('monitoringChanges') Bus.$emit('monitoringChanges')
this.$forceUpdate() this.$forceUpdate()
...@@ -266,29 +232,26 @@ export default { ...@@ -266,29 +232,26 @@ export default {
const param = { const param = {
answer: JSON.stringify(this.questionParams.answerRecord) answer: JSON.stringify(this.questionParams.answerRecord)
} }
action.Exam.setCache(this.$route.params.examId, param) action.Exam.setCache(this.$route.params.examId, param).then(res => {
.then(res => {}) }).catch(err => {
.catch(err => { if (err.message.indexOf('error') !== -1) {
if (err.message.indexOf('error') !== -1) { this.$confirm('网络异常，请保持网络通畅', '提示', {
this.$confirm('网络异常，请保持网络通畅', '提示', { confirmButtonText: '退出考试',
confirmButtonText: '退出考试', cancelButtonText: '重新提交',
cancelButtonText: '重新提交', type: 'warning'
type: 'warning' }).then(() => {
}) this.$router.replace({
.then(() => { path: `/login/${JSON.parse(window.localStorage.getItem('examInfo')).exam_id}`
this.$router.replace({
path: `/login/${JSON.parse(window.localStorage.getItem('examInfo')).exam_id}`
})
})
.catch(() => {
this.endExamRequest()
})
} else {
this.$alert(err.message, {
callback: action => {}
}) })
} }).catch(() => {
}) this.endExamRequest()
})
} else {
this.$alert(err.message, {
callback: action => {}
})
}
})
}, },
// 标记 // 标记
onSignHandle() { onSignHandle() {
...@@ -297,18 +260,18 @@ export default { ...@@ -297,18 +260,18 @@ export default {
this.questionParams.answerRecord[pId] this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId] ? this.questionParams.answerRecord[pId][cId]
? this.questionParams.answerRecord[pId][cId].sign ? this.questionParams.answerRecord[pId][cId].sign
? (this.questionParams.answerRecord[pId][cId].sign = false) ? this.questionParams.answerRecord[pId][cId].sign = false
: (this.questionParams.answerRecord[pId][cId].sign = true) : this.questionParams.answerRecord[pId][cId].sign = true
: (this.questionParams.answerRecord[pId][cId] = { : this.questionParams.answerRecord[pId][cId] = {
sign: true, sign: true,
answer: [] answer: []
}) }
: (this.questionParams.answerRecord[pId] = { : this.questionParams.answerRecord[pId] = {
[cId]: { [cId]: {
sign: true, sign: true,
answer: [] answer: []
} }
}) }
this.signCallback() this.signCallback()
}, },
signCallback() { signCallback() {
...@@ -317,9 +280,9 @@ export default { ...@@ -317,9 +280,9 @@ export default {
let isSign = false let isSign = false
this.questionParams.answerRecord[pId] this.questionParams.answerRecord[pId]
? this.questionParams.answerRecord[pId][cId] ? this.questionParams.answerRecord[pId][cId]
? (isSign = this.questionParams.answerRecord[pId][cId].sign) ? isSign = this.questionParams.answerRecord[pId][cId].sign
: (isSign = false) : isSign = false
: (isSign = false) : isSign = false
this.$emit('isSign', isSign) this.$emit('isSign', isSign)
Bus.$emit('monitoringChanges') Bus.$emit('monitoringChanges')
}, },
...@@ -364,61 +327,60 @@ export default { ...@@ -364,61 +327,60 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep{
.el-textarea__inner { .el-textarea__inner{
height: 150px; height: 150px;
} }
} }
.title-type { .title-type{
width: 100%; width: 100%;
height: 45px; height: 45px;
border-bottom: 1px solid #ccc; border-bottom:1px solid #ccc;
display: flex; display: flex;
align-items: center; align-items: center;
.type { .type{
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
} }
.num { .num{
margin-left: auto; margin-left: auto;
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
} }
} }
.title { .title{
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #222222; color: #222222;
line-height: 25px; line-height: 25px;
display: flex; display: flex;
.num { .num{
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: #222222; color: #222222;
line-height: 45px; line-height: 45px;
margin-top: 5px; margin-top: 5px;
} }
.des { .des{
margin-left: 5px; margin-left: 5px;
padding-top: 18px; padding-top: 18px;
&::v-deep p { &::v-deep p{
margin: 0; margin: 0;
} }
} }
} }
.describe { .describe{
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
line-height: 25px; line-height: 25px;
margin-top: 20px; margin-top: 20px;
} }
.radio-option, .radio-option,.check-option{
.check-option {
padding: 24px 0 0 0; padding: 24px 0 0 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
li { li{
// cursor: pointer; // cursor: pointer;
margin-bottom: 20px; margin-bottom: 20px;
// display: flex; // display: flex;
...@@ -427,7 +389,7 @@ export default { ...@@ -427,7 +389,7 @@ export default {
div { div {
float: left; float: left;
cursor: pointer; cursor: pointer;
.icon { .icon{
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 1px solid #999999; border: 1px solid #999999;
...@@ -435,14 +397,14 @@ export default { ...@@ -435,14 +397,14 @@ export default {
margin-top: 3px; margin-top: 3px;
float: left; float: left;
} }
.txt { .txt{
max-width: 95%; max-width: 95%;
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
line-height: 28px; line-height: 28px;
margin-left: 10px; margin-left: 10px;
float: left; float: left;
&::v-deep p { &::v-deep p{
margin: 0; margin: 0;
} }
} }
...@@ -461,30 +423,30 @@ export default { ...@@ -461,30 +423,30 @@ export default {
// line-height: 28px; // line-height: 28px;
// margin-left: 10px; // margin-left: 10px;
// } // }
&.active { &.active{
.icon { .icon{
width: 8px; width: 8px;
height: 8px; height: 8px;
border: 6px solid #c01540; border: 6px solid #C01540;
} }
} }
} }
} }
.check-option { .check-option{
.icon { .icon{
border-radius: 3px !important; border-radius: 3px !important;
} }
} }
.case-que { .case-que{
display: flex; display: flex;
.stem { .stem{
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #222222; color: #222222;
line-height: 28px; line-height: 28px;
} }
.topics { .topics{
flex: 1; flex: 1;
margin: 0; margin: 0;
padding: 0 0 0 20px; padding: 0 0 0 20px;
...@@ -494,13 +456,13 @@ export default { ...@@ -494,13 +456,13 @@ export default {
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
li { li{
.title { .title{
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #222222; color: #222222;
line-height: 25px; line-height: 25px;
span { span{
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: #222222; color: #222222;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论