feat：成绩管理-试卷内容展示

龚焕茏

2024-06-07 9c211c0a699bd762c7ac85cf1371551244055f51

feat：成绩管理-试卷内容展示

 src/api/examPaperAnswer.js

@@ -3,4 +3,5 @@
export default {
  page: query => post('/api/admin/examPaperAnswer/page', query),
  pageExamPaper: query => post('/api/admin/examPaperAnswer/pageExamPaper', query),
  read: id => post('/api/admin/examPaperAnswer/read/' + id)
}

 src/components/exam/QuestionAnswerShow.vue

New file
@@ -0,0 +1,127 @@
<template>
  <div v-loading="qLoading" style="line-height:1.8">
    <div v-if="qType==1||qType==2||qType==3||qType==4||qType==5">
      <div v-if="qType==1" >
        <div class="q-title" v-html="question.title"/>
        <div class="q-content">
          <el-radio-group v-model="answer.content">
            <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix" >
              <span class="question-prefix">{{item.prefix}}.</span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-else-if="qType==2" >
        <div class="q-title" v-html="question.title"/>
        <div class="q-content">
          <el-checkbox-group v-model="answer.contentArray" >
            <el-checkbox v-for="item in question.items" :label="item.prefix" :key="item.prefix" >
              <span class="question-prefix">{{item.prefix}}.</span>
              <span v-html="item.content"  class="q-item-span-content"></span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div v-else-if="qType==3" >
        <div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/>
        <span style="padding-right: 10px;">(</span>
        <el-radio-group v-model="answer.content">
          <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix">
            <span v-html="item.content" class="q-item-span-content"></span>
          </el-radio>
        </el-radio-group>
        <span style="padding-left: 10px;">)</span>
      </div>
      <div v-else-if="qType==4" >
        <div class="q-title" v-html="question.title"/>
        <div v-if="answer.contentArray!==null">
          <el-form-item :label="item.prefix" :key="item.prefix"  v-for="item in question.items"  label-width="50px" style="margin-top: 10px;margin-bottom: 10px;">
            <el-input v-model="answer.contentArray[item.prefix-1]"  />
          </el-form-item>
        </div>
      </div>
      <div v-else-if="qType==5">
        <div class="q-title" v-html="question.title"/>
        <div>
          <el-input  v-model="answer.content" type="textarea" rows="5" ></el-input>
        </div>
      </div>
      <div class="question-answer-show-item" style="margin-top: 15px">
        <span class="question-show-item">结果：</span>
        <el-tag :type="doRightTagFormatter(answer.doRight)">
          {{ doRightTextFormatter(answer.doRight) }}
        </el-tag>
      </div>
      <div class="question-answer-show-item">
        <span class="question-show-item">分数：</span>
        <span>{{question.score}}</span>
      </div>
      <div class="question-answer-show-item">
        <span class="question-show-item">难度：</span>
        <el-rate disabled v-model="question.difficult" class="question-show-item"></el-rate>
      </div>
      <br/>
      <div class="question-answer-show-item" style="line-height: 1.8">
        <span class="question-show-item">解析：</span>
        <span v-html="question.analyze" class="q-item-span-content" />
      </div>
      <div class="question-answer-show-item">
        <span class="question-show-item">正确答案：</span>
        <span v-if="qType==1||qType==2 ||qType==5" v-html="question.correct" class="q-item-span-content"/>
        <span v-if="qType==3" v-html="trueFalseFormatter(question)" class="q-item-span-content"/>
        <span v-if="qType==4">{{question.correctArray}}</span>
      </div>
    </div>
    <div v-else>
    </div>
  </div>

</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    answer: {
      type: Object,
      default: function () {
        return { id: null, content: '', contentArray: [], doRight: false }
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    trueFalseFormatter (question) {
      return question.items.filter(d => d.prefix === question.correct)[0].content
    },
    doRightTagFormatter (status) {
      return this.enumFormat(this.doRightTag, status)
    },
    doRightTextFormatter (status) {
      return this.enumFormat(this.doRightEnum, status)
    }
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      doRightEnum: state => state.exam.question.answer.doRightEnum,
      doRightTag: state => state.exam.question.answer.doRightTag
    })
  }
}
</script>

 src/components/exam/QuestionEdit.vue

New file
@@ -0,0 +1,83 @@
<template>
  <div style="line-height:1.8">
    <div v-if="qType==1" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-content">
        <el-radio-group v-model="answer.content" @change="answer.completed = true" >
          <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix" >
            <span class="question-prefix">{{item.prefix}}.</span>
            <span v-html="item.content" class="q-item-span-content"></span>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <div v-else-if="qType==2" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-content">
        <el-checkbox-group v-model="answer.contentArray" @change="answer.completed = true" >
          <el-checkbox v-for="item in question.items" :label="item.prefix" :key="item.prefix"  >
            <span class="question-prefix">{{item.prefix}}.</span>
            <span v-html="item.content" class="q-item-span-content"></span>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div v-else-if="qType==3" v-loading="qLoading">
      <div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/>
      <span style="padding-right: 10px;">(</span>
      <el-radio-group v-model="answer.content" @change="answer.completed = true" >
        <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix" >
          <span v-html="item.content" class="q-item-span-content"></span>
        </el-radio>
      </el-radio-group>
      <span style="padding-left: 10px;">)</span>
    </div>
    <div v-else-if="qType==4" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div>
        <el-form-item :label="item.prefix" :key="item.prefix"  v-for="item in question.items"  label-width="50px" style="margin-top: 10px;margin-bottom: 10px;">
          <el-input v-model="answer.contentArray[item.prefix-1]"  @change="answer.completed = true" />
        </el-form-item>
      </div>
    </div>
    <div v-else-if="qType==5" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div>
        <el-input v-model="answer.content" type="textarea" rows="5"  @change="answer.completed = true"/>
      </div>
    </div>
    <div v-else>
    </div>
  </div>

</template>

<script>
export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    answer: {
      type: Object,
      default: function () {
        return { id: null, content: '', contentArray: [] }
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {
  }
}
</script>

 src/utils/index.js

@@ -351,3 +351,24 @@
    ele.className = ele.className.replace(reg, ' ')
  }
}

export function formatSeconds (theTime) {
  let theTime1 = 0
  let theTime2 = 0
  if (theTime > 60) {
    theTime1 = parseInt(theTime / 60)
    theTime = parseInt(theTime % 60)
    if (theTime1 > 60) {
      theTime2 = parseInt(theTime1 / 60)
      theTime1 = parseInt(theTime1 % 60)
    }
  }
  let result = '' + parseInt(theTime) + '秒'
  if (theTime1 > 0) {
    result = '' + parseInt(theTime1) + '分' + result
  }
  if (theTime2 > 0) {
    result = '' + parseInt(theTime2) + '小时' + result
  }
  return result
}

 src/views/Manage/ScoreInquiry/detail.vue

@@ -0,0 +1,114 @@
<template>
    <div style="background-color: #FFFFFF; padding-top: 50px;min-height: 900px;">
        <el-row class="do-exam-title" style="background-color: #F5F5DC">
            <el-col :span="24">
                <span :key="item.itemOrder" v-for="item in answer.answerItems">
                    <el-tag :type="questionDoRightTag(item.doRight)" class="do-exam-title-tag"
                        @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag>
                </span>
            </el-col>
        </el-row>
        <el-row class="do-exam-title-hidden">
            <el-col :span="24">
                <span :key="item.itemOrder" v-for="item in answer.answerItems">
                    <el-tag class="do-exam-title-tag">{{ item.itemOrder }}</el-tag>
                </span>
            </el-col>
        </el-row>
        <el-container class="app-item-contain">
            <el-header class="align-center">
                <h1>{{ form.name }}</h1>
                <div>
                    <span class="question-title-padding">试卷得分：{{ answer.score }}</span>
                    <span class="question-title-padding">试卷耗时：{{ formatSeconds(answer.doTime) }}</span>
                </div>
            </el-header>
            <el-main>
                <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
                    <el-row :key="index" v-for="(titleItem, index) in form.titleItems">
                        <h3>{{ titleItem.name }}</h3>
                        <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0">
                            <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'"
                                v-for="questionItem in titleItem.questionItems" class="exam-question-item"
                                label-width="50px" :id="'question-' + questionItem.itemOrder">
                                <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"
                                    :answer="answer.answerItems[questionItem.itemOrder - 1]" />
                            </el-form-item>
                        </el-card>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { formatSeconds } from '@/utils'
import QuestionAnswerShow from '@/components/exam/QuestionAnswerShow.vue'
import examPaperAnswerApi from '@/api/examPaperAnswer'
export default {
    components: { QuestionAnswerShow },
    data() {
        return {
            form: {},
            formLoading: false,
            answer: {
                id: null,
                score: 0,
                doTime: 0,
                answerItems: [],
                doRight: false
            }
        }
    },
    created() {
        let id = this.$route.query.id
        let _this = this
        if (id && parseInt(id) !== 0) {
            _this.formLoading = true
            examPaperAnswerApi.read(id).then(re => {
                _this.form = re.data.paper
                _this.answer = re.data.answer
                _this.formLoading = false
            })
        }
    },
    methods: {
        formatSeconds(theTime) {
            return formatSeconds(theTime)
        },
        questionDoRightTag(status) {
            return this.enumFormat(this.doRightTag, status)
        },
        goAnchor(selector) {
            this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
        }
    },
    computed: {
        ...mapGetters('enumItem', ['enumFormat']),
        ...mapState('enumItem', {
            doRightTag: state => state.exam.question.answer.doRightTag
        })
    }
}
</script>

<style lang="scss" scoped>
.align-center {
    text-align: center
}

.exam-question-item {
    padding: 10px;

    .el-form-item__label {
        font-size: 15px !important;
    }
}

.question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
}
</style>

 src/views/Manage/ScoreInquiry/list.vue

@@ -19,20 +19,25 @@
          </div>
          <!-- 表格 -->
          <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
            <el-table-column prop="paperName" label="试卷名称" />
            <el-table-column prop="userName" label="用户名称" />
            <el-table-column prop="paperName" label="试卷名称" align="center" />
            <el-table-column prop="userName" label="用户名称" align="center" />
            <el-table-column label="得分" width="100px">
              <template slot-scope="{row}">
                {{ row.userScore }} / {{ row.paperScore }}
              </template>
            </el-table-column>
            <el-table-column label="题目对错" width="80px">
            <el-table-column label="题目对错" width="100px" align="center">
              <template slot-scope="{row}">
                {{ row.questionCorrect }} / {{ row.questionCount }}
              </template>
            </el-table-column>
            <el-table-column prop="doTime" label="耗时" width="100px" />
            <el-table-column prop="createTime" label="提交时间" width="160px" />
            <el-table-column prop="doTime" label="耗时" width="80px" align="center" />
            <el-table-column prop="createTime" label="提交时间" width="160px" align="center" />
            <el-table-column label="操作" width="200px" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" @click="view(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize" @pagination="search" />