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

<template>
  <div class="app-container">
    <slot name="select">
      <el-card shadow="hover">
        <template #header v-if="majorTree.length">
          <div class="fx-row fx-bet-cen">
            <span class="f-999 f12">
              请从推荐专业门类中选择{{ reportConfig.selectMajorLimit }}个你喜欢的专业类
            </span>
            <el-button v-if="!readonly" type="primary" size="small" plain @click="majorPickerDisabled=false">
              {{ selectMajorText }}
            </el-button>
          </div>
        </template>
        <test-major-picker :major-tree="majorTree" :selected-codes="selectedCodes"
                           :select-limit="reportConfig.selectMajorLimit" :disabled="disabled"
                           @submit="handleMajorSubmit" @cancel="majorPickerDisabled=true"></test-major-picker>
      </el-card>
    </slot>
    <slot name="table">
      <el-card shadow="hover" class="mt20">
        <template #header>{{ reportConfig.category }}类型计分表</template>
        <el-row>
          <el-col :span="8">
            <mx-table-dynamic :local-data="dynamicTableData"></mx-table-dynamic>
          </el-col>
          <el-col :span="16">
            <mx-chart v-if="dynamicTableData.rows.length" :options="chartOptions" class="fx-1"
                      :height="chartHeight"></mx-chart>
          </el-col>
        </el-row>
      </el-card>
    </slot>
    <slot>
      <el-card shadow="hover" class="mt20" v-if="reportConfig.resolveConfig">
        <template #header>
          {{ reportConfig.category }}解读
          <div class="f-999 f12">
            {{ reportConfig.categoryDescription }}
          </div>
        </template>
        <el-collapse v-model="defaultActives">
          <el-collapse-item v-for="(item,idx) in sortedMergedData" :key="idx" :name="item.key">
            <template #title>
              <span class="f16 bold">{{ reportConfig.resolveConfig[item.key].title }}</span>
              <span class="f16 bold" :class="{'f-red': topOfMergedData.includes(item)}">{{
                  reportConfig.resolveConfig[item.key].code
                }}</span>
            </template>
            <div class="fx-column">
              <div>
                <span class="f14 bold i">类型解读：</span>
                <span>{{ reportConfig.resolveConfig[item.key].description }}</span></div>
              <div v-if="reportConfig.resolveConfig[item.key].matchedMajor.length">
                <span class="f14 bold i">推荐专业门类：</span>
                <span class="light" :class="{'f-red': topOfMergedData.includes(item)}">
                {{ reportConfig.resolveConfig[item.key].matchedMajor.join('、') }}
              </span>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </slot>
  </div>
</template>

<script>
import MxTableDynamic from '@/components/MxTableDynamic/index'
import MxChart from '@/components/MxChart/index'
import ReportMixin from './test-report-mixin'
import consts from '@/common/mx-const'
import { getMatchCategoryTree, saveUserSelectedCategory } from '@/api/webApi/test-major'
import TestMajorPicker from '@/views/elective/test/components/test-major-picker'

export default {
  mixins: [ReportMixin],
  name: 'test-report',
  components: { TestMajorPicker, MxTableDynamic, MxChart },
  props: {
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      majorTree: [],
      majorPickerDisabled: false
    }
  },
  computed: {
    selectMajorText() {
      return this.selectedCodes.length ? '更换专业类' : '选择专业类'
    },
    testType() {
      return consts.enum.selectTestType[this.category] || ''
    },
    selectedCodes() {
      return this.source?.selectedList?.map(s => s.majorCategoryCode) || []
    },
    disabled() {
      return this.majorPickerDisabled || this.readonly
    }
  },
  watch: {
    source: {
      immediate: true,
      handler: function(val) {
        this.majorPickerDisabled = !!val?.selectedList?.length
      }
    }
  },
  mounted() {
    this.loadMajorCategoryTree()
  },
  methods: {
    loadMajorCategoryTree() {
      if (!this.source.matchedCode) {
        console.log('Prevent `getMatchCategoryTree` request caused by no-matchedCode', this.source)
        return
      }
      getMatchCategoryTree({
        matchCode: this.source.matchedCode,
        testType: this.testType
      }).then(res => {
        this.majorTree = res.data
      })
    },
    handleMajorSubmit(commit) {
      saveUserSelectedCategory({
        majorCategoryCode: commit.toString(),
        examineeId: this.source.examineeId || '',
        testType: this.testType
      }).then(() => {
        this.msgSuccess('保存成功')
        this.majorPickerDisabled = true
      }).finally(() => {
        // 无论成功与否都外抛事件进行刷新
        this.$emit('changed')
      })
    }
  }
}
</script>

<style scoped>

</style>