feat: 考试接口对接
This commit is contained in:
parent
5f943d2c40
commit
103ad546cb
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="sub-title">一、单选题</div>
|
||||
<div class="options">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-anchor :affix="false">
|
||||
<a-col v-for="(item, index) in 12" :key="index" :span="4">
|
||||
<div class="option-item flex-center" :class="{ 'option-item-active': index === 0 }">
|
||||
<a-anchor-link :href="`#type1-${index}`" :title="index + 1"></a-anchor-link>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-anchor>
|
||||
</a-row>
|
||||
<div v-for="(item, index) in data.question" :key="index">
|
||||
<div class="sub-title">{{$getCapitalizeNumber(index)}}、{{$getQuestionTypeText(item.questionType)}}</div>
|
||||
<div class="options">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-anchor :affix="false">
|
||||
<a-col v-for="(j, k) in item.questionList" :key="`${index}-${k}`" :span="4">
|
||||
<div class="option-item flex-center" :class="{ 'option-item-active': j.myAnswers }">
|
||||
<a-anchor-link :href="`#type${item.questionType}-${k}`" :title="k + 1"></a-anchor-link>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-anchor>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title">二、多选题</div>
|
||||
|
||||
<!-- <div class="sub-title">二、多选题</div>
|
||||
<div class="options">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-anchor :affix="false">
|
||||
|
@ -37,7 +40,7 @@
|
|||
</a-row>
|
||||
</div>
|
||||
<div class="sub-title">四、填空题</div>
|
||||
<div class="options"></div>
|
||||
<div class="options"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -45,7 +48,10 @@
|
|||
import { Anchor } from 'ant-design-vue'
|
||||
export default {
|
||||
props: {
|
||||
pref: Object
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'a-anchor': Anchor,
|
||||
|
|
|
@ -7,28 +7,29 @@
|
|||
倒计时:
|
||||
<b style="margin-left: 5px;"><a-statistic-countdown :value="deadline" :valueStyle="{ fontSize: '16px' }" @finish="onFinish"/></b>
|
||||
</div>
|
||||
<DbAnswerCard :pref="$refs"></DbAnswerCard>
|
||||
<DbAnswerCard :data="data"></DbAnswerCard>
|
||||
<div class="answer-cart-footer flex-center">
|
||||
<a-button type="primary" size="large">交卷</a-button>
|
||||
<a-button @click="handlerSubmit" type="primary" size="large">交卷</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="exam-line"></div>
|
||||
<div class="exam-box">
|
||||
<a-card :bordered="false" ref="question">
|
||||
<div class="exam-title">建筑施工安全培训第一期课程学习(模拟考试)</div>
|
||||
<div class="exam-title">{{ data.courseName }}</div>
|
||||
<div class="exam-main">
|
||||
<template>
|
||||
<div class="sub-title">一、单选题(共30题,每题1.5分,共45分)</div>
|
||||
<div v-for="(item, index) in data.question" :key="index">
|
||||
<div class="sub-title">{{ $getCapitalizeNumber(index) }}、{{ $getQuestionTypeText(item.questionType) }}(共30题,每题1.5分,共45分)</div>
|
||||
<DbQuestionItem
|
||||
:id="`type1-${index}`"
|
||||
:index="index + 1"
|
||||
:type="1"
|
||||
v-for="(item, index) in 5"
|
||||
:key="`type1-${index}`"
|
||||
:id="`type${item.questionType}-${k}`"
|
||||
:index="j.orderNumber"
|
||||
:type="item.questionType"
|
||||
:data="j"
|
||||
v-for="(j, k) in item.questionList"
|
||||
:key="`type${item.questionType}-${k}`"
|
||||
></DbQuestionItem>
|
||||
</template>
|
||||
<template>
|
||||
</div>
|
||||
<!-- <template>
|
||||
<div class="sub-title">二、多选题(共10题,每题1.5分,共15分)</div>
|
||||
<DbQuestionItem
|
||||
:id="`type2-${index}`"
|
||||
|
@ -55,7 +56,7 @@
|
|||
<template>
|
||||
<div class="sub-title">五、简答题(共10题,每题1.5分,共15分)</div>
|
||||
<DbQuestionItem :index="index + 1" :type="5" v-for="(item, index) in 5" :key="`type5-${index}`"></DbQuestionItem>
|
||||
</template>
|
||||
</template> -->
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
|
@ -66,20 +67,30 @@
|
|||
import DbQuestionItem from '@/components/DbQuestionItem/index'
|
||||
import DbAnswerCard from '@/components/DbAnswerCard/index'
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DbQuestionItem,
|
||||
DbAnswerCard
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
capitalizeNumber: ['一', '二', '三', '四', '五', '六'],
|
||||
deadline: Date.now() + 1000 * 60 * 60 * 1.5
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 考试倒计时结束
|
||||
onFinish() {},
|
||||
handlerBack(){
|
||||
onFinish () {},
|
||||
handlerBack () {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
handlerSubmit () {
|
||||
this.$emit('submit', this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,50 +1,70 @@
|
|||
<template>
|
||||
<div class="question-item">
|
||||
<div class="question-title">
|
||||
<span>{{index || 1}}、</span>
|
||||
<span>({{ type | QuestionTypeFormat }})</span>
|
||||
<span>{{ index || 1 }}、</span>
|
||||
<span>({{ $getQuestionTypeText(type) }})</span>
|
||||
<span v-html="title"></span>
|
||||
</div>
|
||||
<div class="options-box">
|
||||
<!-- 单选题选项 -->
|
||||
<template v-if="type == 1">
|
||||
<a-radio-group v-model="answer">
|
||||
<a-radio v-for="(item, index) in options" :key="index" :style="radioStyle" :value="item.value">
|
||||
<span>{{ optionKeys[index] }}、</span>{{ item.label }}
|
||||
</a-radio>
|
||||
<a-radio-group v-model="data.myAnswers">
|
||||
<a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
|
||||
<a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
|
||||
<a-radio v-if="data.answerC" :style="radioStyle" value="C"><span>C、</span>{{ data.answerC }}</a-radio>
|
||||
<a-radio v-if="data.answerD" :style="radioStyle" value="D"><span>D、</span>{{ data.answerD }}</a-radio>
|
||||
<a-radio v-if="data.answerE" :style="radioStyle" value="E"><span>E、</span>{{ data.answerE }}</a-radio>
|
||||
<a-radio v-if="data.answerF" :style="radioStyle" value="F"><span>F、</span>{{ data.answerF }}</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<!-- 多选题选项 -->
|
||||
<template v-if="type == 2">
|
||||
<a-checkbox-group v-model="answer">
|
||||
<a-col :span="24" v-for="(item, index) in options" :key="index">
|
||||
<a-checkbox :value="item.value" :style="radioStyle">
|
||||
<span>{{ optionKeys[index] }}、</span>{{ item.label }}
|
||||
</a-checkbox>
|
||||
<a-checkbox-group v-model="data.myAnswers">
|
||||
<a-col :span="24">
|
||||
<a-checkbox v-if="data.answerA" value="A" :style="radioStyle"><span>A、</span>{{ data.answerA }}</a-checkbox>
|
||||
<a-checkbox v-if="data.answerB" value="B" :style="radioStyle"><span>B、</span>{{ data.answerB }}</a-checkbox>
|
||||
<a-checkbox v-if="data.answerC" value="C" :style="radioStyle"><span>C、</span>{{ data.answerC }}</a-checkbox>
|
||||
<a-checkbox v-if="data.answerD" value="D" :style="radioStyle"><span>D、</span>{{ data.answerD }}</a-checkbox>
|
||||
<a-checkbox v-if="data.answerE" value="E" :style="radioStyle"><span>E、</span>{{ data.answerE }}</a-checkbox>
|
||||
<a-checkbox v-if="data.answerF" value="F" :style="radioStyle"><span>F、</span>{{ data.answerF }}</a-checkbox>
|
||||
</a-col>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
<!-- 判断题选项 -->
|
||||
<template v-if="type == 3">
|
||||
<a-radio-group v-model="answer">
|
||||
<a-radio :style="radioStyle" :value="1"> <span>A、</span>正确</a-radio>
|
||||
<a-radio :style="radioStyle" :value="2"> <span>B、</span>错误</a-radio>
|
||||
<a-radio-group v-model="data.myAnswers">
|
||||
<a-radio v-if="data.answerA" :style="radioStyle" value="A"><span>A、</span>{{ data.answerA }}</a-radio>
|
||||
<a-radio v-if="data.answerB" :style="radioStyle" value="B"><span>B、</span>{{ data.answerB }}</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<!-- 填空题 -->
|
||||
<template v-if="type == 4">
|
||||
<a-row :gutter="50" style="font-size: 14px;">
|
||||
<a-col :span="12" class="flex-center" style="margin-bottom: 10px;"
|
||||
><span class="flex-center nowrap">填空1: </span> <a-input placeholder="请填写答案"
|
||||
<a-col
|
||||
:span="12"
|
||||
class="flex-center"
|
||||
style="margin-bottom: 10px;"
|
||||
><span class="flex-center nowrap">填空1: </span> <a-input
|
||||
placeholder="请填写答案"
|
||||
/></a-col>
|
||||
<a-col :span="12" class="flex-center" style="margin-bottom: 10px;"
|
||||
><span class="flex-center nowrap">填空2: </span> <a-input placeholder="请填写答案"
|
||||
<a-col
|
||||
:span="12"
|
||||
class="flex-center"
|
||||
style="margin-bottom: 10px;"
|
||||
><span class="flex-center nowrap">填空2: </span> <a-input
|
||||
placeholder="请填写答案"
|
||||
/></a-col>
|
||||
<a-col :span="12" class="flex-center"
|
||||
><span class="flex-center nowrap">填空3: </span> <a-input placeholder="请填写答案"
|
||||
<a-col
|
||||
:span="12"
|
||||
class="flex-center"
|
||||
><span class="flex-center nowrap">填空3: </span> <a-input
|
||||
placeholder="请填写答案"
|
||||
/></a-col>
|
||||
<a-col :span="12" class="flex-center"
|
||||
><span class="flex-center nowrap">填空4: </span> <a-input placeholder="请填写答案"
|
||||
<a-col
|
||||
:span="12"
|
||||
class="flex-center"
|
||||
><span class="flex-center nowrap">填空4: </span> <a-input
|
||||
placeholder="请填写答案"
|
||||
/></a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
@ -62,13 +82,19 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
index: Number, // 题目序号
|
||||
index: {
|
||||
type: Number
|
||||
}, // 题目序号
|
||||
type: {
|
||||
type: [String, Number], // 1: 单选, 2: 多选, 3: 判断题, 4: 填空题, 5: 简答题
|
||||
default: 1
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
optionKeys: ['A', 'B', 'C', 'D', 'E'],
|
||||
radioStyle: {
|
||||
|
@ -101,4 +127,8 @@ export default {
|
|||
.options-box {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
::v-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper{
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,6 +1,30 @@
|
|||
import Vue from 'vue'
|
||||
import store from '@/store/index'
|
||||
|
||||
Vue.prototype.$getDictByCode = function(code) {
|
||||
Vue.prototype.$getDictByCode = function (code) {
|
||||
console.log('dictList', store)
|
||||
}
|
||||
|
||||
Vue.prototype.$getQuestionTypeText = function (value) {
|
||||
switch (Number(value)) {
|
||||
case 1:
|
||||
return '单选题'
|
||||
case 2:
|
||||
return '多选题'
|
||||
case 3:
|
||||
return '判断题'
|
||||
case 4:
|
||||
return '填空题'
|
||||
case 5:
|
||||
return '简答题'
|
||||
default:
|
||||
return '其他'
|
||||
}
|
||||
}
|
||||
|
||||
Vue.prototype.$getCapitalizeNumber = function (value) {
|
||||
const capitalizeNumber = ['一', '二', '三', '四', '五', '六']
|
||||
if (value || value === 0) {
|
||||
return capitalizeNumber[Number(value)]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<DbExam :type="$route.query.type"></DbExam>
|
||||
<DbExam :type="$route.query.type" :data="examData" @submit="handlerSubmit"></DbExam>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -11,6 +11,7 @@ export default {
|
|||
components: { DbExam },
|
||||
data () {
|
||||
return {
|
||||
examData: {},
|
||||
query: {}
|
||||
}
|
||||
},
|
||||
|
@ -33,7 +34,12 @@ export default {
|
|||
const query = this.query
|
||||
practiceStartAnswer({ projectId: Number(query.projectId), courseId: Number(query.courseId), type: Number(query.practiceType || 1) }).then(res => {
|
||||
console.log('res', res)
|
||||
this.examData = res.data
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
handlerSubmit (data) {
|
||||
console.log('this.data', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue