front/src/views/career/components/CollegesLine.vue

<template>
  <div class="major-line-container">
    <div v-if="!universityCode" class="fx-row ai-cen mb10">
      <span class="mr10 pf f24 bold">院校名称</span>
      <el-button type="primary" round @click="dialongParams.visible=true">
        {{ universityRes.name || '添加院校' }}
      </el-button>
    </div>
    <div class="fx-row ai-cen picker-group">
      <el-select v-model="form.year" placeholder="年份">
        <el-option v-for="item in year" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="form.type" placeholder="科类">
        <el-option v-for="item in types" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="form.level" placeholder="批次">
        <el-option v-for="item in levels" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="form.universityNameText" placeholder="院校/专业组" style="min-width: 350px">
        <el-option v-for="item in universityNameTexts" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-divider v-if="!universityCode" />
    <!--数据列表-->
    <div :class="universityCode?['mt20']:''">
      <el-table v-loading="loading" :data="rows" border>
        <el-table-column prop="code" label="院校" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="disabledNameLink">{{ scope.row.universityName }}</span>
              <el-link v-else :underline="false" @click="goDetails(scope.row)">【{{ scope.row.universityName }}】</el-link>
            </div>
            <div v-if="scope.row.specialProject" class="f-primary">({{ scope.row.specialProject }})</div>
          </template>
        </el-table-column>
        <el-table-column prop="location" width="80" label="所在地" align="center" />
        <el-table-column prop="collegeCode" label="院校代码" align="center" />
        <el-table-column prop="marjorName" label="专业名称" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.marjorBelongs ? `[${scope.row.marjorBelongs}]` : '' }}{{ scope.row.marjorName }}</div>
            <div style="color:#9DA0B4;font-size:12px">{{ scope.row.marjorDirection }}</div>
          </template>
        </el-table-column>
        <!--<el-table-column prop="seatRealTop" label="专业最高分位次" align="center"></el-table-column>-->
        <!--<el-table-column prop="seatRealAverage" label="专业平均分位次" align="center"></el-table-column>-->
        <el-table-column prop="level" label="批次/段" align="center" />
        <el-table-column v-if="isNewGaokao" prop="course" label="选考科目" align="center" />
        <el-table-column v-if="!isNewGaokao" prop="type" label="科类" align="center" />
        <el-table-column prop="score" label="最低分" align="center" :formatter="emptyCellFormatter" />
        <el-table-column prop="seat" label="最低分位次" align="center" :formatter="emptyCellFormatter" />
        <el-table-column prop="scoreRealAverage" width="90" label="平均分" align="center" :formatter="emptyCellFormatter" />
        <el-table-column prop="scoreRealTop" width="90" label="最高分" align="center" :formatter="emptyCellFormatter" />
        <el-table-column width="80" prop="numReal" label="录取人数" align="center" :formatter="emptyCellFormatter" />
      </el-table>
      <vip-guide-more v-if="!isBind&&examRecordTotal>1" />
      <pagination
        class="mt10"
        :total="examRecordTotal"
        :auto-scroll="false"
        :page.sync="pageForm.pageNum"
        :limit.sync="pageForm.pageSize"
        @pagination="getMajorList"
      />
    </div>
    <el-dialog :visible.sync="dialongParams.visible" width="80%">
      <select-university @changeUniversity="changeUniversity" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getMajorUniversityNameText,
  selectMarjorList,
  selectMarjorlLevels,
  selectMarjorTypes,
  selectMarjorYears
} from '@/api/webApi/shiftLine'
import SelectUniversity from '@/views/career/components/SelectUniversity'
import transferMixin from '@/components/mx-transfer-mixin'
import { mapGetters } from 'vuex'
import VipGuideMore from '@/components/VipGuideMore/index'
import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'

export default {
  name: 'CollegesLine',
  components: { VipGuideMore, SelectUniversity },
  mixins: [transferMixin, GlobalVoluntaryDataMixin],
  props: {
    // 外部固定学校，则本页面不用选择学校。如学校详情页
    universityCode: {
      type: String,
      default: ''
    },
    disabledNameLink: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      examRecordTotal: 0,
      year: [],
      types: [],
      levels: [],
      universityNameTexts: [],
      universityRes: {},
      form: {
        year: '',
        level: '',
        type: '',
        universityCode: '',
        universityNameText: ''
      },
      pageForm: {
        pageSize: 20,
        pageNum: 1
      },
      dialongParams: { visible: false },
      rows: []
    }
  },
  computed: {
    ...mapGetters(['isBind'])
  },
  watch: {
    'form.year': function() {
      this.form.type = ''
      this.form.level = ''
      this.ensureVoluntaryData({ year: this.form.year })
      this.getMajorTypes()
      this.getMajorLevels()
    },
    'form.type': function() {
      this.form.universityNameText = ''
      this.getUniversityNameTexts()
    },
    'form.level': function() {
      this.form.universityNameText = ''
      this.getUniversityNameTexts()
    },
    'form.universityCode': function() {
      this.form.universityNameText = ''
      this.getUniversityNameTexts()
    },
    'form.universityNameText': function(val) {
      this.rows = []
      this.total = 0
      this.pageForm.pageNum = 1
      this.getMajorList()
    }
  },
  created() {
    this.getMajorYears()
  },
  methods: {
    checkFormFields(props) {
      return props.every(prop => !!this.form[prop])
    },
    emptyCellFormatter(row, prop) {
      return row[prop.property] || '-'
    },
    goDetails(item) {
      if (this.disabledNameLink) return
      this.transferTo('/career/plan/UniversityDetail', { code: item.universityCode })
    },
    getMajorList() {
      const params = {
        ...this.pageForm,
        year: this.form.year,
        level: this.form.level,
        type: this.form.type,
        code: this.form.universityCode || this.universityCode,
        universityNameText: this.form.universityNameText
      }
      this.loading = true
      selectMarjorList(params).then(res => {
        this.rows = res.rows
        this.examRecordTotal = res.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    changeUniversity(data) {
      this.dialongParams.visible = false
      this.universityRes = data
      this.form.universityCode = data.code
    },
    getMajorYears() {
      selectMarjorYears().then(res => {
        this.form.year = res.rows[0]
        this.year = res.rows
      })
    },
    getMajorTypes() {
      selectMarjorTypes({ year: this.form.year }).then(res => {
        this.form.type = res.rows[0]
        this.types = res.rows
      })
    },
    getMajorLevels() {
      selectMarjorlLevels({ year: this.form.year }).then(res => {
        this.form.level = res.rows[0]
        this.levels = res.rows
      })
    },
    getUniversityNameTexts() {
      if (!this.checkFormFields(['year', 'type', 'level'])) return
      if (!this.checkFormFields(['universityCode']) && !this.universityCode) {
        this.$alert('请先选择院校').then(() => this.dialongParams.visible = true)
        return
      }
      getMajorUniversityNameText({
        universityCode: this.form.universityCode || this.universityCode,
        year: this.form.year,
        type: this.form.type,
        level: this.form.level
      }).then(res => {
        this.universityNameTexts = res.data
        this.form.universityNameText = res.data.first()
      })
    }
  }
}
</script>

<style lang="scss">
.btn {
  .el-button--medium {
    padding: 15px 50px;
  }
}

#universityText {
  .el-badge {
    .el-button {
      padding: 15px 90px;
    }
  }
}

.major-line-container {
  .el-divider--vertical {
    width: 5px;
  }

  .el-select + .el-select {
    margin-left: 20px;
  }
}

</style>