front/src/views/system/user/profile/components/groups-match.vue

<template>
  <el-dialog
    :title="`整体组合匹配（${type == 1 ? '自选专业' : '测评专业'}）`"
    :visible.sync="show"
    width="70%"
  >
    <div>
      <mx-table :propDefines="propDefines" :rows="formatList">
      </mx-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="show = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

export default {
  data() {
    return {
      show: false,
      majors: [],
      type: 1,
      reports: [],
    }
  },
  computed: {
    formatList() {
      if (!this.reports.length) return []
      return this.reports.map(item => {
        let tempProp = {}
        this.majors.map((major) => {
          if(major.matchedGroupIds.findIndex(gi => item.groupId == gi) != -1) {
            tempProp[`a${major.majorCategoryCode}`] = `符合${major.collegeName ? `(${major.collegeName})` : '' }`
          }
        })
        return {
          groupName: item.groupName,
          rankInGrade: item.rankInGrade,
          ...tempProp
        }
      })
    },
    propDefines() {
        if(!this.majors.length) return {}
        console.log(this.majors)
        const props = {}
        this.majors.map((item) => {
          props[`a${item.majorCategoryCode}`] = {label:item.majorCategoryName }
        })
        return {
          groupName: {
            label: '专业/组合'
          },
          rankInGrade: {
            label: '当前组合全校排名'
          },
          ...props,
        }
    },
  },
  methods: {
    open(reports,majors,type) {
      this.show = true
      this.type = type
      this.reports = reports
      this.majors = majors
    },
  }
}
</script>
<style scoped>
.cell .el-tag{
  margin-right: 5px;
}
</style>