front/src/views/career/PrevBatch/PrevEnrollPlan.vue

<template>
  <div v-loading="loading" class="fx-column">
    <div class="fx-row fx-bet-cen mt15 mb10">
      <div class="fx-row">
        <el-select v-if="pureMode&&!isPrePlanAsYzy" v-model="query.category" class="mr10" @change="initProcess">
          <el-option v-for="item in queryData.categories" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.year" placeholder="请选择年份" @change="handleYearChange">
          <el-option v-for="item in queryData.years" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.type" placeholder="请选择科目" class="ml10" @change="handleTypeChange">
          <el-option v-for="item in queryData.types" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
        <el-cascader
          ref="cascader"
          v-model="query.tagCode"
          placeholder="计划类别不限"
          :options="preTree"
          :props="{emitPath:false,checkStrictly:true}"
          :show-all-levels="false"
          clearable
          filterable
          class="ml10"
          @change="handleTagChange"
        />
      </div>
      <div>
        <el-input
          v-model="query.keyword"
          placeholder="请输入院校/专业名称"
          suffix-icon="el-icon-search"
          style="width: 250px"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
      </div>
    </div>
    <dynamic-table :rows="rows" :columns="columns" border>
      <template #university="{row, display}">
        <div class="pointer hover-primary" @click="toDetail(row)">{{ display }}</div>
      </template>
      <template #groupsName="{row, display}">
        <div v-if="display">{{ display }}</div>
        <div>{{ row.premark }}</div>
      </template>
      <template #marjorBelongs="{row, display}">
        <div>[{{ display }}]{{ row['marjorName'] }}</div>
        <div class="f12 f-999">{{ row.marjorDirection }}</div>
      </template>
      <template #tag="{display}">
        <enroll-plan-tags :value="display" />
      </template>
    </dynamic-table>
    <vip-guide-more v-if="total>1&&!isBind" />
    <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { getPreRecruitPlan, getPreRecruitPlanTypes, getPreRecruitPlanYears } from '@/api/webApi/prev-batch'
import DynamicTable from '@/components/dynamic-table/index.vue'
import transferMixin from '@/components/TransferMixin'
import { mapActions, mapGetters, mapState } from 'vuex'
import EnrollPlanTags from '@/views/career/PrevBatch/components/EnrollPlanTags.vue'
import MxConst from '@/common/MxConst'
import VipGuideMore from '@/components/VipGuideMore/index.vue'

export default {
  name: 'PrevEnrollPlan',
  components: { VipGuideMore, EnrollPlanTags, DynamicTable },
  mixins: [transferMixin],
  props: {
    category: {
      type: String | Number,
      default: ''
    },
    universityCode: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        category: this.category || this.$route.meta.category,
        year: '',
        type: '',
        tagCode: '',
        keyword: '',
        universityCode: this.universityCode
      },
      queryData: {
        years: [],
        types: [],
        categories: []
      },
      total: 0,
      rows: [],
      columns: [{
        label: '院校名称',
        prop: 'universityName',
        slotBody: 'university',
        width: '120px'
      }, {
        label: '专业组',
        prop: 'groupsName',
        width: '120px',
        slotBody: 'groupsName'
      }, {
        label: '招生代码',
        prop: 'collegeCode',
        width: '90px'
      }, {
        label: '年份',
        prop: 'year',
        width: '60px'
      }, {
        label: '招生专业',
        prop: 'marjorBelongs',
        slotBody: 'marjorBelongs'
      }, {
        label: '计划类别',
        prop: 'tag',
        align: 'left',
        slotBody: 'tag'
      }, {
        label: '选考科目',
        prop: 'course',
        width: '90px'
      }, {
        label: '计划数',
        prop: 'planCount',
        width: '60px'
      }, {
        label: '学制',
        prop: 'xuezhi',
        width: '60px'
      }, {
        label: '学费',
        prop: 'xuefei',
        width: '60px'
      }]
    }
  },
  computed: {
    ...mapGetters(['isBind', 'isPrePlanAsYzy']),
    ...mapState({ preTree: state => state.cachedData.preTree }),
    pureMode() {
      return !!this.universityCode // now work in university detail page.
    }
  },
  watch: {
    'query.year': function() {
      // refresh cached data `preTree`
      if (!this.query.category) return
      this.query.tagCode = ''
      this.loadPreTree({ category: this.query.category, year: this.query.year })
    }
  },
  created() {
    const categoryKeys = MxConst.enum.recruitPlanCategory.visibleKeys
    this.queryData.categories = categoryKeys.map(key => {
      const val = MxConst.enum.recruitPlanCategory[key]
      return {
        label: MxConst.enum.recruitPlanCategory.names[val],
        value: val
      }
    })
  },
  async mounted() {
    await this.initProcess()
  },
  methods: {
    ...mapActions({ 'loadPreTree': 'cachedData/ensurePreTree' }),
    _makeOptions(rows, all) {
      const options = rows.map(item => ({
        label: item,
        value: item
      }))
      if (all) options.unshift({ label: all, value: '' })
      return options
    },
    async initProcess() {
      await this.initQueryYear()
      await this.initQueryType()
      await this.getList()
    },
    async initQueryYear() {
      const res = await getPreRecruitPlanYears({ category: this.query.category })
      this.queryData.years = this._makeOptions(res['rows'])
      this.query.year = this.queryData.years.first().value
    },
    async initQueryType() {
      if (!this.query.year) {
        this.queryData.types = [{ label: '科目不限', value: '' }]
        this.query.type = ''
        return
      }
      const res = await getPreRecruitPlanTypes({ category: this.query.category, year: this.query.year })
      this.queryData.types = this._makeOptions(res['rows'], '科目不限')
      this.query.type = this.queryData.types.first().value
    },
    async handleYearChange() {
      await this.initQueryType()
      this.query.pageNum = 1
      await this.getList()
    },
    async handleTypeChange() {
      this.query.pageNum = 1
      await this.getList()
    },
    handleTagChange() {
      this.$refs.cascader.toggleDropDownVisible(false)
      this.query.pageNum = 1
      this.getList()
    },
    handleSearch() {
      this.query.pageNum = 1
      this.getList()
    },
    async getList() {
      this.loading = true
      try {
        const res = await getPreRecruitPlan(this.query)
        this.rows = res.rows
        this.total = res.total
      } finally {
        this.loading = false
      }
    },
    toDetail(row) {
      this.transferTo('/career/plan/UniversityDetail', { code: row.universityCode })
    }
  }
}
</script>