update

src/components/exam/examCard.vue

@@ -10,8 +10,14 @@
       </div>
       <div class="exam-main">
         <div class="left">
-          <question-list :data="currentQuestionGroup" :index="currentPage" :disabled="disabled" :hasResult="hasResult">
-            <template #index>{{ currentPage + 1 }}/{{ questionGroups.length }}</template>
+          <question-list
+            :data="currentQuestionGroup"
+            :page="currentGroupPage"
+            :index="currentQuestionIndex"
+            :disabled="disabled"
+            :hasResult="hasResult"
+          >
+            <template #index>{{ currentGroupPage }}/{{ currentGroupCount }}</template>
             <template v-slot:default="data">
               <slot name="question-item" v-bind="data"></slot>
             </template>
@@ -19,9 +25,9 @@
         </div>
         <div class="right">
           <question-numbers
-            :index="currentPage"
-            :list="questionGroups"
+            :page="currentGroupPage"
             :data="currentQuestionGroup"
+            :list="numberGroups.length ? numberGroups : questionGroups"
             @page-change="handlePageChange"
           >
             <slot name="students" v-bind="{ data: currentQuestionGroup }"></slot>
@@ -31,8 +37,8 @@
       <div class="foot" id="foot-h">
         <div class="exam-btn">
           <div class="confirm" @click="showResult" v-if="hasShowResultBtn">确认答案</div>
-          <div @click="prev">上一题</div>
-          <div @click="next">下一题</div>
+          <div :class="prevClass" @click="prev">上一题</div>
+          <div :class="nextClass" @click="next">下一题</div>
         </div>
         <div class="rigth-btn">
           <div class="sign" v-if="hasCollect" @click="toggleCollect">
@@ -69,7 +75,11 @@ export default {
     hasCountdown: { type: Boolean, default: true }, // 计时
     submitButtonText: { type: String, default: '交卷' }, // 提交按钮显示的文字
     data: { type: Object, default: () => {} }, // 模拟考试返回的数据，内部组装
-    groups: { type: Array, default: () => [] } // 收藏、错题组装好的数据
+    groups: { type: Array, default: () => [] }, // 收藏、错题组装好的数据
+    groupPage: { type: Number, default: 1 }, // 大题当前页
+    groupPageSize: { type: Number, default: 0 }, // 大题一页的数量
+    groupPageCount: { type: Number, default: 0 }, // 大题总页数
+    numberGroups: { type: Array, default: () => [] } // 答题卡
   },
   data() {
     return {
@@ -79,8 +89,9 @@ export default {
       countdownTimer: null, // 倒计时计时器
       countdownText: '', // 倒计时显示时间
       questionGroups: this.groups, // 所有试题分组,一组一页
-      questionIndex: 0, // 题号
-      currentPage: 0 // 页码
+      questionCount: 0, // 小题数量
+      currentGroupPage: this.groupPage, // 大题页码
+      currentGroupCount: this.groupPageCount // 大题总页数
     }
   },
   computed: {
@@ -95,6 +106,27 @@ export default {
     // 当前页面第一个试题
     firstQuestion() {
       return this.currentQuestionList[0] || {}
+    },
+    // 当前题号
+    currentQuestionIndex() {
+      return this.questionGroups.reduce((result, item, index) => {
+        if (index <= this.currentPage) {
+          result += item.question_list.length
+        }
+        return result
+      }, 0)
+    },
+    // 当前页码
+    currentPage() {
+      return (this.currentGroupPage - 1) % (this.groupPageSize || this.questionGroups.length)
+    },
+    // 上一题按钮的class
+    prevClass() {
+      return { active: this.currentGroupPage !== 1 }
+    },
+    // 下一题按钮的class
+    nextClass() {
+      return { active: this.currentGroupPage < this.currentGroupCount }
     }
   },
   watch: {
@@ -107,10 +139,19 @@ export default {
     groups: {
       handler(groups) {
         this.questionGroups = groups
+        this.questionCount = groups.length
       }
     },
+    groupPage(value) {
+      this.currentGroupPage = value
+    },
+    groupPageCount(value) {
+      this.currentGroupCount = value
+    },
     currentPage() {
-      this.hasResult = this.currentQuestionGroup.hasResult
+      if (this.hasShowResultBtn) {
+        this.hasResult = this.currentQuestionGroup.hasResult
+      }
     }
   },
   beforeDestroy() {
@@ -156,23 +197,22 @@ export default {
       this.hasResult = true
       this.questionGroups[this.currentPage].hasResult = true
     },
-    // 上一题
+    // 上一大题
     prev() {
-      if (this.currentPage <= 0) return
-      this.currentPage--
-      this.handlePageChange(this.currentPage)
+      if (this.currentGroupPage <= 1) return
+      this.currentGroupPage--
+      this.handlePageChange(this.currentGroupPage)
     },
-    // 下一题
+    // 下一大题
     next() {
-      const total = this.questionGroups.length
-      if (this.currentPage + 1 >= total) return
-      this.currentPage++
-      this.handlePageChange(this.currentPage)
+      if (this.currentGroupPage >= this.currentGroupCount) return
+      this.currentGroupPage++
+      this.handlePageChange(this.currentGroupPage)
     },
     // 翻页
     handlePageChange(index) {
-      this.currentPage = index
-      this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
+      this.currentGroupPage = index
+      this.$emit('page-change', this.currentGroupPage, this.currentQuestionGroup, this.questionGroups)
     },
     // 收藏
     toggleCollect() {
@@ -199,10 +239,18 @@ export default {
     },
     // 数据初始化
     dataInit(data) {
+      if (!data.questions) {
+        return
+      }
       const isSubmited = ['1', '2'].includes(data.status)
       this.disabled = isSubmited
       this.hasResult = isSubmited
+      this.questionCount = data.questions.total_question_count
       this.genQuestions(data)
+      this.currentGroupCount = this.questionGroups.length
+      if (this.$route.query.id) {
+        this.findGroupPageByQuestionId(this.$route.query.id)
+      }
     },
     // 组装试题数据
     genQuestions(data) {
@@ -230,12 +278,18 @@ export default {
         return result
       }, [])
     },
-    genQuestionItem(data) {
-      return {}
-    },
     // 重置
     reset() {
-      this.currentPage = 0
+      this.currentGroupPage = 1
+    },
+    // 通过小题ID查找大题页码
+    findGroupPageByQuestionId(id) {
+      this.questionGroups.forEach((item, index) => {
+        const findIndex = item.question_list.findIndex(data => data.id === id)
+        if (findIndex !== -1) {
+          this.currentGroupPage = index + 1
+        }
+      })
     }
   }
 }

src/components/exam/questionList.vue

@@ -5,12 +5,15 @@
       <aside class="question-list-hd__aside"><slot name="index"></slot></aside>
     </div>
     <div class="question-list-bd">
-      <h2 class="question-list-title" v-if="conmonTitle">{{ conmonTitle }}</h2>
+      <h2 class="question-list-title" v-if="conmonTitle">
+        <!-- <span class="num">{{ page }}.</span> -->
+        {{ conmonTitle }}
+      </h2>
       <question-list-item
         v-for="(item, i) in data.question_list"
         :data="item"
         :question="data"
-        :index="data.question_list.length > 1 ? i : index"
+        :page="data.question_list.length > 1 ? i + 1 : page"
         :key="item.id"
         v-bind="$attrs"
         v-on="$listeners"
@@ -24,7 +27,10 @@
 <script>
 import QuestionListItem from './questionListItem.vue'
 export default {
-  props: { data: { type: Object, default: () => ({}) }, index: { type: Number, default: 0 } },
+  props: {
+    data: { type: Object, default: () => ({}) },
+    page: { type: Number, default: 0 } // 页码
+  },
   components: { QuestionListItem },
   computed: {
     // 试题类型
@@ -66,5 +72,12 @@ export default {
   margin: 20px 0 30px;
   font-size: 18px;
   color: #222;
+  .num {
+    font-size: 32px;
+    font-weight: bold;
+    color: #222;
+    line-height: 45px;
+    margin-top: 5px;
+  }
 }
 </style>

src/components/exam/questionListItem.vue

 <template>
   <div class="question-list-item">
     <div class="question-list-item-hd">
-      <div class="question-list-item-hd__num">{{ index + 1 }}.</div>
+      <div class="question-list-item-hd__num">{{ page }}.</div>
       <div class="question-list-item-hd__title" v-html="data.question_content"></div>
     </div>
     <div class="question-list-item-bd">
@@ -66,7 +66,7 @@
 <script>
 export default {
   props: {
-    index: { type: Number, default: 0 },
+    page: { type: Number, default: 0 }, // 题号
     data: { type: Object, default: () => ({}) }, // 小题
     question: { type: Object, default: () => ({}) }, // 大题
     disabled: { type: Boolean, default: false },
@@ -79,7 +79,7 @@ export default {
     questionType() {
       // (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
       const questionType = parseInt(this.question.question_type)
-      const { answer_count: answerCount = [] } = this.data
+      const { answer_count: answerCount = 0 } = this.data
       if ([5, 7, 8].includes(questionType)) {
         return answerCount || 3
       } else {

src/components/exam/questionNumbers.vue

@@ -54,9 +54,9 @@
 <script>
 export default {
   props: {
-    index: { type: Number, default: 0 },
-    data: { type: Object, default: () => ({}) },
-    list: { type: Array, default: () => [] }
+    page: { type: Number, default: 0 }, // 当前大题的页码
+    data: { type: Object, default: () => ({}) }, // 当前大题
+    list: { type: Array, default: () => [] } // 所有大题
   },
   computed: {
     dataList() {
@@ -64,7 +64,7 @@ export default {
       this.list.forEach((item, index) => {
         const findIndex = results.findIndex(data => data.question_item_id === item.question_item_id)
         const quesitonlist = item.question_list.map(item => {
-          return { ...item, index }
+          return { ...item, big_num: index + 1 }
         })
         if (findIndex === -1) {
           results.push({
@@ -82,14 +82,17 @@ export default {
   },
   methods: {
     genClass(data) {
+      // answer(0:未做,1:正确,2:错误)
+      // 未做
+      const notDone = data.answer === 0 || (data.user_answer ? !data.user_answer.length : true)
       return {
-        stu1: data.user_answer.length,
-        stu2: data.index === this.index,
+        stu1: !notDone, // 已做
+        stu2: data.big_num === this.page,
         stu3: data.sign
       }
     },
     handleClick(data) {
-      this.$emit('page-change', data.index, data)
+      this.$emit('page-change', data.big_num, data)
     }
   }
 }

src/pages/exam/myExam/questionDetails.vue

@@ -2,32 +2,22 @@
   <exam-card
     :title="title"
     :groups="questionGroups"
+    :numberGroups="numberGroups"
     :hasMark="false"
     :hasDeleteBtn="true"
     :hasCountDown="false"
     :hasShowResultBtn="true"
+    :groupPage="bigNum"
+    :groupPageSize="pageSize"
+    :groupPageCount="total"
     submitButtonText="清空记录，重新答题"
     @back="handleBack"
     @submit="handleSubmit"
     @page-change="handlePageChange"
     @delete="deleteQuestion"
     ref="exam"
-    v-if="Object.keys(data).length"
+    v-loading="loading"
   >
-    <template v-slot:question-item="{ item, data }">
-      <div>
-        单个试题
-      </div>
-      {{ item }}
-      <div>
-        整页数据,也就是一组
-      </div>
-      {{ data }}
-      <div class="div">13123</div>
-    </template>
-    <template v-slot:students="{ data }">
-      {{ data }}
-    </template>
   </exam-card>
 </template>
 <script>
@@ -37,8 +27,13 @@ export default {
   components: { ExamCard },
   data() {
     return {
-      data: {},
-      page: 0
+      loading: false,
+      bigNum: 0,
+      page: 0,
+      pageSize: 10,
+      list: [], // 试题组
+      total: 0,
+      allQuestionList: [] // 所有试题
     }
   },
   computed: {
@@ -46,17 +41,39 @@ export default {
       return this.$route.query.type === '1' ? '错题集合' : '收藏试题'
     },
     questionGroups() {
-      return this.data.list.map(list => {
+      return this.list.map(list => {
         const [first = {}] = list
         return { question_item_id: '', question_type: first.question_type, question_list: list, hasResult: false }
       })
+    },
+    numberGroups() {
+      return this.allQuestionList.map(list => {
+        const [first = {}] = list
+        return { question_item_id: '', question_type: first.question_type, question_list: list }
+      })
     }
   },
   beforeMount() {
-    // 获取考卷
-    this.getTopic()
+    this.init()
   },
   methods: {
+    init() {
+      // 获取所有小题
+      this.getAllQuestion().then(() => {
+        const flatList = this.allQuestionList.reduce((result, list) => {
+          return result.concat(list)
+        }, [])
+        const index = parseInt(this.$route.query.index) || 0
+        // // 通过小题编号查找大题
+        const found = flatList.find(item => item.num === index)
+        if (found) {
+          this.bigNum = found.big_num
+          this.page = parseInt((found.big_num - 1) / this.pageSize)
+        }
+        // 获取考卷
+        this.getTopic()
+      })
+    },
     // 删除题目
     deleteQuestion(data) {
       const param = {
@@ -64,6 +81,8 @@ export default {
         type: this.$route.query.type
       }
       api.deleteQuestion(param).then(response => {
+        this.page = 0
+        this.getAllQuestion()
         this.getTopic().then(() => {
           // 重置
           this.$refs.exam.reset()
@@ -84,11 +103,24 @@ export default {
       const param = {
         type: query.type,
         question_type: query.qType,
-        page: this.page,
-        page_size: 20
+        page: this.page + 1,
+        page_size: this.pageSize
       }
+      this.loading = true
       return api.getMyQuestion(param).then(response => {
-        this.data = response
+        this.list = response.list
+        this.total = response.collection_total || response.error_total
+        this.loading = false
+      })
+    },
+    getAllQuestion() {
+      const query = this.$route.query
+      const param = {
+        type: query.type,
+        question_type: query.qType
+      }
+      return api.getAllQuestion(param).then(response => {
+        this.allQuestionList = response.list
       })
     },
     // 清空
@@ -99,11 +131,21 @@ export default {
         clear: 1
       }
       this.cacheQuestion(param, () => {
-        this.$router.go(0)
+        this.page = 0
+        this.getAllQuestion()
+        this.getTopic().then(() => {
+          // 重置
+          this.$refs.exam.reset()
+        })
       })
     },
-    // 缓存答案
-    handlePageChange(data, groups) {
+    // 翻页
+    handlePageChange(index, data, groups) {
+      const page = parseInt((index - 1) / this.pageSize)
+      if (this.page !== page) {
+        this.page = page
+        this.getTopic()
+      }
       this.cacheQuestion(this.genSubmitData(groups))
     },
     cacheQuestion(param, callback) {

src/pages/exam/testExam/exam/index.vue

@@ -65,7 +65,6 @@ export default {
       const refData = this.$refs.exam
       const id = this.data.id
       const answer = {}
-      console.log(refData.questionGroups)
       refData.questionGroups.forEach(item => {
         if (!answer[item.question_item_id]) answer[item.question_item_id] = {}
         item.question_list.forEach(cItem => {
@@ -83,9 +82,7 @@ export default {
       }
       api.setCache(param).then(response => {
         if (isCache) {
-          this.$router.replace({
-            path: '/testExam/result'
-          })
+          this.$router.replace({ path: '/testExam/result', query: { exam_id: this.examId } })
         }
       })
     }

src/pages/exam/testExam/exam/result.vue

@@ -23,7 +23,9 @@
           </div>
           <div class="icon"></div>
         </div>
-        <div class="text" v-if="accuracText < 100">{{ accuracText < 80 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div>
+        <div class="text" v-if="accuracText < 100">
+          {{ accuracText < 80 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}
+        </div>
         <!-- <div class="btn">全部考试服务</div> -->
       </div>
     </div>
@@ -60,54 +62,50 @@ export default {
     this.getExamPapers()
   },
   computed: {
+    examId() {
+      return this.$route.query.exam_id
+    },
     setStyle() {
       return `width: ${this.accuracText}%`
     }
   },
-  mounted() {
-  },
   methods: {
     goPage(param) {
       this.$router.push({
         path: '/testExam/exam',
-        query: {
-          id: param
-        }
+        query: { exam_id: this.examId, id: param }
       })
     },
     getExamPapers() {
       const param = {
         type: 2,
+        paper_id: this.examId,
         is_create: 0
       }
-      api
-        .getExamQuestion(param)
-        .then(response => {
-          const data = JSON.parse(response.data)
-          let numCount = 0
-          for (const item in data.sheet.score_items) {
-            for (const cItem in data.sheet.score_items[item]) {
-              if (data.sheet.score_items[item][cItem].is_right) {
-                numCount++
-              }
+      api.getExamQuestion(param).then(response => {
+        const data = JSON.parse(response.data)
+        let numCount = 0
+        for (const item in data.sheet.score_items) {
+          for (const cItem in data.sheet.score_items[item]) {
+            if (data.sheet.score_items[item][cItem].is_right) {
+              numCount++
             }
           }
-          this.accuracy = parseInt(data.sheet.score)
-          this.accuracText = parseInt(numCount / data.sheet.questions.total_question_count * 100)
-          this.data = data
-          this.accuracScore = parseInt(data.sheet.questions.total_score)
-        })
-        .finally(() => {
-        })
+        }
+        this.accuracy = parseInt(data.sheet.score)
+        this.accuracText = parseInt((numCount / data.sheet.questions.total_question_count) * 100)
+        this.data = data
+        this.accuracScore = parseInt(data.sheet.questions.total_score)
+      })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.result-box{
+.result-box {
   width: 100%;
   display: flex;
-  .card-left{
+  .card-left {
     box-sizing: border-box;
     padding: 10px 30px 20px;
     flex: 1;
@@ -115,80 +113,80 @@ export default {
     margin-right: 10px;
     height: 560px;
     border-radius: 8px;
-    .title{
+    .title {
       font-size: 18px;
       color: #222222;
       line-height: 45px;
       border-bottom: 1px solid #ccc;
       display: flex;
     }
-    .time{
+    .time {
       font-size: 14px;
       color: #222222;
       line-height: 45px;
       margin-left: auto;
     }
-    .chart-box{
+    .chart-box {
       width: 148px;
       margin: 26px auto 0;
     }
-    .assess{
+    .assess {
       font-size: 18px;
       color: #222222;
       line-height: 45px;
       border-bottom: 1px solid #ccc;
     }
-    .assess-box{
+    .assess-box {
       padding-top: 27px;
-      .prog{
+      .prog {
         width: 350px;
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .line-box{
+        .line-box {
           width: 300px;
           width: 300px;
           height: 10px;
-          background: #F9F9F9;
+          background: #f9f9f9;
           border-radius: 5px;
-          .line{
+          .line {
             width: 80%;
             height: 10px;
-            background: linear-gradient(90deg, #F47C46 0%, #F22F48 100%);
+            background: linear-gradient(90deg, #f47c46 0%, #f22f48 100%);
             border-radius: 5px;
           }
         }
-        .icon{
+        .icon {
           width: 41px;
           height: 38px;
           background: url(@/assets/images/res-icon.png);
           background-size: 100% 100%;
         }
       }
-      .text{
+      .text {
         font-size: 14px;
         color: #222222;
         line-height: 20px;
         text-align: center;
         margin: 50px 0 68px 0;
       }
-      .btn{
+      .btn {
         cursor: pointer;
         text-align: center;
         line-height: 40px;
         width: 144px;
         height: 40px;
-        background: #C01540;
+        background: #c01540;
         border-radius: 4px;
         font-size: 14px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         margin: 0 auto;
       }
     }
   }
-  .card-right{
+  .card-right {
     box-sizing: border-box;
     flex: 1;
     background: #fff;