feat: 考试接口对接

2022-01-13 22:35:16 +08:00 · 2022-01-13 22:35:16 +08:00 · 103ad546cb
parent 5f943d2c40
commit 103ad546cb
5 changed files with 133 additions and 56 deletions
--- a/src/components/DbAnswerCard/index.vue
+++ b/src/components/DbAnswerCard/index.vue
@ -1,18 +1,21 @@
 <template>
  <div>
-    <div class="sub-title">一、单选题</div>
+    <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="(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>
+            <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 class="sub-title">二、多选题</div>
+    </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,
--- a/src/components/DbExam/index.vue
+++ b/src/components/DbExam/index.vue
@ -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)
    }
  }
 }
--- a/src/components/DbQuestionItem/index.vue
+++ b/src/components/DbQuestionItem/index.vue
@ -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:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+          <a-col
+            :span="12"
+            class="flex-center"
+            style="margin-bottom: 10px;"
+          ><span class="flex-center nowrap">填空1:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
          /></a-col>
-          <a-col :span="12" class="flex-center" style="margin-bottom: 10px;"
-            ><span class="flex-center nowrap">填空2:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+          <a-col
+            :span="12"
+            class="flex-center"
+            style="margin-bottom: 10px;"
+          ><span class="flex-center nowrap">填空2:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
          /></a-col>
-          <a-col :span="12" class="flex-center"
-            ><span class="flex-center nowrap">填空3:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+          <a-col
+            :span="12"
+            class="flex-center"
+          ><span class="flex-center nowrap">填空3:&nbsp;&nbsp;</span> <a-input
+            placeholder="请填写答案"
          /></a-col>
-          <a-col :span="12" class="flex-center"
-            ><span class="flex-center nowrap">填空4:&nbsp;&nbsp;</span> <a-input placeholder="请填写答案"
+          <a-col
+            :span="12"
+            class="flex-center"
+          ><span class="flex-center nowrap">填空4:&nbsp;&nbsp;</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>
--- a/src/utils/prototype.js
+++ b/src/utils/prototype.js
@ -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)]
+  }
+}
--- a/src/views/myexamDetail/index.vue
+++ b/src/views/myexamDetail/index.vue
@ -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)
      }
    }
 }