提交 a50ef44a authored 作者: matian's avatar matian

Merge remote-tracking branch 'origin/vite' into vite

<template>
<div class="info-box">
<div class="li" v-for="(item, index) in data" :key="index">
<div class="th">{{ item.title }}</div>
<div class="td">{{ item.value }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Array, default: () => [] }
}
}
</script>
<style lang="scss" scoped>
.info-box{
display: flex;
margin-bottom: 20px;
.li{
flex: 1;
.th{
text-align: center;
color: #909399;
font-size: 16px;
font-weight: bold;
}
.td{
text-align: center;
line-height: 30px;
}
}
}
</style>
<template>
<div class="question-list-item">
<div class="question-list-public__title" v-html="data.common_content" v-if="data.common_content"></div>
<div class="question-list-item-hd">
<div class="question-list-item-hd__title" v-html="data.title"></div>
</div>
<div class="question-list-item-bd">
<!-- 单选 -->
<template v-if="[1, 6].includes(questionType)">
<el-radio-group v-model="data.answer[0]" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio :label="item.id">
<div class="question-option-item__text" v-html="item.option"></div>
</el-radio>
</div>
</el-radio-group>
</template>
<!-- 多选 -->
<template v-if="questionType === 2">
<el-checkbox-group v-model="data.answer" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox :label="item.id">
<div class="question-option-item__text" v-html="item.option"></div>
</el-checkbox>
</div>
</el-checkbox-group>
</template>
</div>
<!-- 简答题 -->
<template v-if="questionType === 3">
<el-input
type="textarea"
v-model="data.answer[0]"
placeholder="请输入答案内容"
:autosize="{ minRows: 4, maxRows: 6 }"
:disabled="disabled"
@blur="handleChange"
:maxlength="100"
:show-word-limit="true"
></el-input>
</template>
<!-- <div class="question-list-item-score">得分:{{ data.score }}</div> -->
<div class="question-list-item-ft" v-if="data.analysis">
<h3 class="question-list-item-ft__title">答案解析</h3>
<template v-if="questionType !== 3">
<div class="answer-item">
<div class="answer-item-label">正确答案:</div>
<div class="answer-item-content">{{ data.analysis }}</div>
</div>
</template>
<template v-else>
<div class="answer-item" v-if="data.comment">
<div class="answer-item-label">老师点评:</div>
<div class="answer-item-content">{{ data.comment }}</div>
</div>
</template>
</div>
<div class="answer-item" v-if="hasResult && data.question_analysis">
<div class="answer-item-label">解析:</div>
<div class="answer-item-content" v-html="data.question_analysis"></div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Object, default: () => ({}) }, // 小题
question: { type: Object, default: () => ({}) }, // 大题
disabled: { type: Boolean, default: true },
hasResult: { type: Boolean, default: false }
},
data() {
return {}
},
mounted() {
},
computed: {
questionType() {
// (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
const questionType = parseInt(this.data.type)
return questionType
},
// 26个英文字母
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
// 处理后的options数据
currentOptions() {
if (!this.data.options) {
return []
}
return this.data.options.map((item, index) => {
// 英文字母 + 名称
item.abc = this.A_Z[index]
return item
})
}
},
methods: {
handleChange() {
this.$emit('change', this.data)
}
}
}
</script>
<style lang="scss" scoped>
.question-list-public__title{
font-size: 20px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item {
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background: #fff;
margin-top: 20px;
}
.question-list-item-hd {
display: flex;
}
.question-list-item-hd__num {
font-size: 32px;
font-weight: bold;
color: #222;
line-height: 45px;
margin-top: 5px;
}
.question-list-item-hd__title {
margin-left: 5px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item-hd__score{
margin-left: auto;
padding-top: 10px;
font-size: 16px;
// font-weight: bold;
color: #222;
line-height: 25px;
white-space:nowrap;
padding-left: 30px;
}
.question-option-item {
margin-top: 20px;
::v-deep .el-radio,
::v-deep .el-checkbox {
display: flex;
align-items: center;
}
}
.question-option-item__text {
display: inline-block;
font-size: 18px;
color: #222;
}
::v-deep .el-radio__inner,
::v-deep .el-checkbox__inner {
width: 18px;
height: 18px;
}
::v-deep .el-checkbox__inner::after {
width: 4px;
height: 9px;
left: 6px;
}
.question-list-item-ft {
margin-top: 20px;
}
.question-list-item-ft__title {
font-size: 18px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.answer-item {
margin-top: 10px;
margin-left: 28px;
display: flex;
font-size: 18px;
color: #222;
line-height: 25px;
}
.answer-item-label {
white-space: nowrap;
}
.answer-item-content {
flex: 1;
overflow: hidden;
}
.question-list-item-score{
margin-left: auto;
padding-top: 10px;
font-size: 16px;
color: #222;
line-height: 25px;
white-space: nowrap;
}
</style>
<template>
<div>
<div class="exam-detail" v-for="(data, index) in examData" :key="index">
<div class="title-type">{{ questionTypeText[data.question_type] }}</div>
<template v-for="pItem in data.list">
<question-list-item
v-for="item in pItem"
:data="pItem[0]"
:question="data"
:key="item.id"
></question-list-item>
</template>
</div>
</div>
</template>
<script>
import QuestionListItem from './QuestionListItem.vue'
export default {
components: { QuestionListItem },
props: {
examData: { type: Array, default: () => [] }
},
data() {
return {
questionTypeText: { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
}
},
computed: {
},
mounted() {
console.log(this.examData.length, 'examData')
}
}
</script>
<style lang="scss" scoped>
.exam-detail{
.title-type{
font-size: 16px;
color: #c01540;
}
}
</style>
<template>
<div class="question-list-item">
<div class="question-list-public__title" v-html="data.common_content" v-if="data.common_content"></div>
<div class="question-list-item-hd">
<div class="question-list-item-hd__title" v-html="data.question_content"></div>
<div class="question-list-item-hd__score">本题分数:{{ data.score }}</div>
</div>
<div class="question-list-item-bd">
<!-- 单选 -->
<template v-if="[1, 6].includes(questionType)">
<el-radio-group v-model="data.userAnswerData.answer[0]" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-radio>
</div>
</el-radio-group>
</template>
<!-- 多选 -->
<template v-if="questionType === 2">
<el-checkbox-group v-model="data.userAnswerData.answer" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-checkbox>
</div>
</el-checkbox-group>
</template>
</div>
<!-- 简答题 -->
<template v-if="questionType === 3">
<el-input
type="textarea"
v-model="data.userAnswerData.answer[0]"
placeholder="请输入答案内容"
:autosize="{ minRows: 4, maxRows: 6 }"
:disabled="disabled"
@blur="handleChange"
:maxlength="100"
:show-word-limit="true"
></el-input>
</template>
<div class="question-list-item-score">得分:{{ data.userScoreData.score }}</div>
<!-- <div class="question-list-item-ft" v-if="hasResult">
<h3 class="question-list-item-ft__title">答案解析</h3>
<template v-if="questionType !== 3">
<div class="answer-item">
<div class="answer-item-label">正确答案:</div>
<div class="answer-item-content">{{ correctAnswerText }}</div>
</div>
<div class="answer-item">
<div class="answer-item-label">您的答案:</div>
<div class="answer-item-content">{{ submitAnswerText }}</div>
</div>
</template>
<template v-else>
<div class="answer-item" v-if="data.comment">
<div class="answer-item-label">老师点评:</div>
<div class="answer-item-content">{{ data.comment }}</div>
</div>
</template>
</div> -->
<div class="answer-item" v-if="hasResult && data.question_analysis">
<div class="answer-item-label">解析:</div>
<div class="answer-item-content" v-html="data.question_analysis"></div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Object, default: () => ({}) }, // 小题
question: { type: Object, default: () => ({}) }, // 大题
disabled: { type: Boolean, default: true },
hasResult: { type: Boolean, default: false }
},
data() {
return {}
},
computed: {
questionType() {
// (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
const questionType = parseInt(this.question.question_type)
const { answer_count: answerCount = 0 } = this.data
if ([5, 7, 8].includes(questionType)) {
if (answerCount >= 2) {
return 2
}
return answerCount || 3
} else {
return questionType
}
},
// 26个英文字母
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
// 处理后的options数据
currentOptions() {
if (!this.data.question_options) {
return []
}
return this.data.question_options.map((item, index) => {
// 英文字母 + 名称
item.abc = this.A_Z[index]
item.abc_option = `${this.A_Z[index]}. ${item.option}`
// 提交时的选中状态
item.checked = this.data.userAnswerData.answer.includes(item.id)
// 处理正确的选中状态
const hasChecked = Object.prototype.hasOwnProperty.call(item, 'isRight')
const rightAnswer = this.data.question_answer || []
if (!hasChecked && rightAnswer) {
item.isRight = Array.isArray(rightAnswer) ? rightAnswer.includes(item.id) : rightAnswer === item.id
}
return item
})
},
// 正确答案显示的英文字母
correctAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.isRight && result.push(item.abc)
return result
}, [])
return result.join('、')
},
// // 提交答案显示的英文字母
submitAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.checked && result.push(item.abc)
return result
}, [])
return result.join('、')
}
},
methods: {
handleChange() {
this.$emit('change', this.data)
}
}
}
</script>
<style lang="scss" scoped>
.question-list-public__title {
font-size: 20px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item {
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background: #fff;
margin-top: 20px;
}
.question-list-item-hd {
display: flex;
}
.question-list-item-hd__num {
font-size: 32px;
font-weight: bold;
color: #222;
line-height: 45px;
margin-top: 5px;
}
.question-list-item-hd__title {
margin-left: 5px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item-hd__score {
margin-left: auto;
padding-top: 10px;
font-size: 16px;
// font-weight: bold;
color: #222;
line-height: 25px;
white-space: nowrap;
padding-left: 30px;
}
.question-option-item {
margin-top: 20px;
::v-deep .el-radio,
::v-deep .el-checkbox {
display: flex;
align-items: center;
}
}
.question-option-item__text {
display: inline-block;
font-size: 18px;
color: #222;
}
::v-deep .el-radio__inner,
::v-deep .el-checkbox__inner {
width: 18px;
height: 18px;
}
::v-deep .el-checkbox__inner::after {
width: 4px;
height: 9px;
left: 6px;
}
.question-list-item-ft {
margin-top: 20px;
}
.question-list-item-ft__title {
font-size: 18px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.answer-item {
margin-top: 10px;
margin-left: 28px;
display: flex;
font-size: 18px;
color: #222;
line-height: 25px;
}
.answer-item-label {
white-space: nowrap;
}
.answer-item-content {
flex: 1;
overflow: hidden;
}
.question-list-item-score {
margin-left: auto;
padding-top: 10px;
font-size: 16px;
color: #222;
line-height: 25px;
white-space: nowrap;
}
</style>
...@@ -43,7 +43,7 @@ httpRequest.interceptors.response.use( ...@@ -43,7 +43,7 @@ httpRequest.interceptors.response.use(
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}` window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
} else if (status === 400 && code === 401) { } else if (status === 400 && code === 401) {
router.push('/role') router.push('/role')
} else if (status === 400 || status === 401) { } else if (status === 402) {
router.push('/index') router.push('/index')
} else { } else {
Message.error(message || error.response.data) Message.error(message || error.response.data)
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论