update

src/modules/teacher/data/exam/api.js

@@ -82,3 +82,11 @@ export function getClassDetail(params) {
     params
   })
 }
+/**
+ * 考试数据-看板（题目数据）
+ */
+export function getQuestionsDetails(params) {
+  return httpRequest.get('/api/zy/v3-teacher/statistics/sheet-question-details', {
+    params
+  })
+}

src/modules/teacher/data/exam/components/detail/QuestionDetails.vue

+<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 data.options" :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 data.options" :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"
+        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 {}
+  },
+  computed: {
+    questionType() {
+      // (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
+      const questionType = parseInt(this.data.type)
+      console.log(questionType, '=tyoe')
+      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.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)
+    }
+  },
+  mounted() {
+    console.log(this.data, '===123')
+  }
+}
+</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>

src/modules/teacher/data/exam/views/ClassDetail.vue

@@ -9,7 +9,7 @@
 
 <script>
 import * as api from '../api.js'
-import ExamInfo from '@/components/data/ExamInfo.vue'
+import ExamInfo from '../components/detail/ExamInfo.vue'
 import QuestionList from '@/components/data/QuestionList.vue'
 export default {
   components: { ExamInfo, QuestionList },

src/modules/teacher/data/exam/views/ExamData.vue

@@ -68,7 +68,7 @@
 <script>
 import { getExamDataInfo } from '../api'
 import VueHtml2pdf from 'vue-html2pdf'
-import ExamInfo from '../components/ExamInfo.vue'
+import ExamInfo from '../components/detail/ExamInfo.vue'
 import Submission from '../components/Submission.vue'
 import Score from '../components/Score.vue'
 import ScoreRanking from '../components/ScoreRanking.vue'

src/modules/teacher/data/exam/views/TopicData.vue

 <template>
   <div>
-    <question-list class="exam" :examData="examData" v-if="examData.length"></question-list>
+    <question-details class="exam" :data="examData" v-if="Object.keys(examData).length"></question-details>
     <div class="flex-box">
       <topic-data-info class="flex"></topic-data-info>
       <topic-data-chart class="flex"></topic-data-chart>
@@ -15,15 +15,16 @@
 </template>
 <script>
 import * as api from '../api.js'
-import QuestionList from '@/components/data/QuestionList.vue'
+import QuestionDetails from '../components/detail/QuestionDetails.vue'
 import TopicDataInfo from '../components/TopicDataInfo.vue'
 import TopicDataChart from '../components/TopicDataChart.vue'
 
 export default {
-  components: { QuestionList, TopicDataInfo, TopicDataChart },
+  components: { QuestionDetails, TopicDataInfo, TopicDataChart },
   data() {
     return {
-      examData: []
+      examData: {},
+      topicInfo: {}
     }
   },
   computed: {
@@ -71,13 +72,22 @@ export default {
     }
   },
   mounted() {
-    // this.getTopic()
+    this.getTopic()
   },
   methods: {
     getTopic() {
-      api.getReviewDetails({ sheet_id: this.$route.query.id }).then(response => {
-        this.data = JSON.parse(response.data).sheet
-        this.setExamData()
+      const query = this.$route.query
+      const params = { type: 'examination', course_id: query.course_id, examination_id: query.examination_id, chapter_id: query.chapter_id, question_id: query.question_id }
+      api.getQuestionsDetails(params).then(response => {
+        console.log(response)
+        const data = response.data
+        this.examData = data
+        this.topicInfo = [
+          { title: '本题分数', value: data }
+        ]
+        console.log(this.examData, '=2333')
+        // this.data = JSON.parse(response.data).sheet
+        // this.setExamData()
       })
     },
     setExamData() {