front/src/views/elective/report/components/elective-test-reports.vue

<template>
  <div>
    <div v-for="test in testResults" :key="test.key" class="print-page elective-report-card">
      <index-card :title="test.title">
        <test-report :category="test.key" :source="test.result" readonly></test-report>
      </index-card>
    </div>
    <div class="print-page elective-report-card">
      <index-card title="选科测评专业">
        <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
        <major-match-evaluation></major-match-evaluation>
      </index-card>
    </div>
  </div>
</template>

<script>
import TestSummary from '@/views/elective/test/components/test-summary'
import IndexCard from '@/views/index/components/index-card'
import TestReport from '@/views/elective/test/components/test-report'
import MajorMatchEvaluation from '@/views/elective/report/components/major-match-evaluation'

export default {
  name: 'elective-test-reports',
  extends: TestSummary, // NOTE: 这里直接继承了TestSummary页面的关键能力
  components: { MajorMatchEvaluation, TestReport, IndexCard }
}
</script>

<style scoped>
.elective-report-card > /deep/ .el-card__body {
  padding: 0;
}

.elective-report-card + .elective-report-card {
  margin-top: 20px;
}
</style>