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">整体匹配</el-button>
          </div>
        </template> <div>
        <el-popover
          placement="bottom"
          trigger="hover"
          v-for="item in optionalMajors"
        >
          <el-button type="primary" @click="toGroupMatch(item)">匹配组合</el-button>
          <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
        </el-popover>
      </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="fx-row fx-bet-cen">
            您的测评推荐专业:
            <el-button>整体匹配</el-button>
          </div>
        </template>
      </el-card>
    </el-col>
    <!-- 整体组合匹配 -->
    <group-match ref="groupMatch"></group-match>
    <!-- 单组合匹配-->
    <single-group-match ref="singleMatch"></single-group-match>
  </el-row>
</template>
<script>
import GroupMatch from './groups-match'
import SingleGroupMatch from './single-group-match'
export default {
  components: {
    GroupMatch,
    SingleGroupMatch
  },
  props: {
    list: {
      type:Array,
      default: _ => {}
    },
    optionalMajors: {
      type:Array,
      default: _ => {}
    }
  },
  data() {
    return {
      dialogVisible:false,
      propDefines: {},
    }
  },
  created() {
  },
  methods: {
    // 整体组合匹配
    toMatch() {
      this.$refs.groupMatch.open(this.list,this.optionalMajors)
    },
    // 单组合匹配
    toGroupMatch(major) {
      this.$refs.singleMatch.open(major,this.list)
    }
  }
}
</script>
<style scoped>

</style>