front/src/views/system/user/profile/components/select-subject.vue

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="fx-row fx-bet-cen">
            您的自选专业:
            <el-button @click="toMatch(matchTypes.optional)">整体匹配</el-button>
          </div>
        </template>
        <div v-if="!!optionalMajors.length">
          <el-popover
            placement="bottom"
            trigger="hover"
            v-for="item in optionalMajors"
            popper-class="zero-padding-popover"
          >
            <div class="fx-column">
              <el-button plain type="text" @click="toGroupMatch(item)">匹配组合</el-button>
            </div>
            <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
          </el-popover>
        </div>
        <el-tag v-else class="mr10 mb10" type="success">暂无</el-tag>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="fx-row fx-bet-cen">
            您的测评推荐专业:
            <div>
              <el-button type="primary" @click="$router.push('/elective/test/index')">查看报告</el-button>
              <el-button @click="toMatch(matchTypes.electiveTest)">整体匹配</el-button>
            </div>
          </div>
        </template>
        <div v-if="!!evaluationMajors.length">
          <el-popover
            placement="bottom"
            trigger="hover"
            v-for="item in evaluationMajors"
            popper-class="zero-padding-popover"
          >
            <div class="fx-column">
              <el-button plain type="text" @click="toGroupMatch(item)">匹配组合</el-button>
            </div>
            <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
          </el-popover>
        </div>
        <el-tag v-else class="mr10 mb10" type="success">暂无</el-tag>
      </el-card>
    </el-col>
    <!-- 整体组合匹配 -->
    <group-match-dialog ref="groupMatch"></group-match-dialog>
    <!-- 单组合匹配-->
    <single-group-match ref="singleMatch"></single-group-match>
  </el-row>
</template>
<script>
import consts from '@/common/mx-const'
import GroupMatchDialog from '../../../../elective/select/components/groups-match-dialog'
import SingleGroupMatch from './single-group-match'

export default {
  components: {
    GroupMatchDialog,
    SingleGroupMatch
  },
  props: {
    list: {
      type: Array,
      default: _ => []
    },
    optionalMajors: {
      type: Array,
      default: _ => []
    },
    evaluationMajors: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      propDefines: {}
    }
  },
  computed: {
    matchTypes() {
      return consts.enum.electiveMajorMatchType
    },
    majorSource() {
      return {
        1: this.optionalMajors,
        2: this.evaluationMajors
      }
    }
  },
  methods: {
    // 整体组合匹配
    toMatch(type) {
      const majors = this.majorSource[type.value]
      this.$refs.groupMatch.open(this.list, majors, type)
    },
    // 单组合匹配
    toGroupMatch(major) {
      this.$refs.singleMatch.open(major, this.list)
    }
  }
}
</script>
<style scoped>

</style>