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

<template>
  <el-container v-loading="loading" class="layout-prev-container">
    <el-aside width="400" class="tree-container">
      <div class="bg-white pd20">
        <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-input v-model="tagKeyword" placeholder="输入类别名称进行筛选" class="mt20" />
        <el-tree ref="tree" class="mt10" :data="preTree" node-key="value" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" @node-click="handleTagChange" />
      </div>
    </el-aside>
    <el-main class="content-container">
      <div class="bg-white pb40 pl20 pr20">
        <div class="text-right pt20">
          <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>
        <sub-major-table
          v-for="row in rows"
          :key="row.id"
          :row="row"
          :is-new-gaokao="isNewGaokao"
          :show-shift-line-entry="!isEnrollMode"
          :custom-cols-length="isEnrollMode?getShiftCols(row).length:undefined"
          @university="toDetail(row)"
          @shift-line="toShiftLine(row)"
        >
          <template v-if="isEnrollMode" #default="scope">
            <el-descriptions-item v-for="c in getShiftCols(row)" :key="c.prop" :label="c.label">{{ scope[c.prop] || '-' }}</el-descriptions-item>
          </template>
        </sub-major-table>
        <evaluation-empty v-if="!rows.length" title="暂无数据" class="mt20" />
        <vip-guide-more v-if="total>1&&!isBind" />
        <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
import PlanShiftColumns from '@/views/career/PrevBatch/components/PlanShiftColumns'

export default {
  name: 'PreEnrollPlanTree',
  extends: PrevEnrollPlanV2,
  mixins: [PlanShiftColumns],
  data() {
    return {
      tagKeyword: '',
      isEnrollMode: false // 计划与投档混用
    }
  },
  watch: {
    'query.year': function() {
      this.query.tagCode = ''
      this.tagKeyword = ''
      this.loadPreTree({ year: this.query.year })
    },
    'tagKeyword': function(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      console.log('filterNode', value, data)
      if (!value) return true
      if (data.value == this.query.tagCode) return true // keep the current selected node
      return data.label.indexOf(value) !== -1
    },
    async initProcess() {
      await this.initQueryYear()
      // await this.initQueryType() // ignore query.type
      await this.getList()
    },
    handleTagChange(node) {
      if (this.query.tagCode != node.value) {
        this.query.tagCode = node.value
        this.getList()
      } else {
        // set el-tree highlighted node
        this.$refs.tree.setCurrentKey(null)
        this.query.tagCode = ''
        this.getList()
      }
    },
    toShiftLine(row) {
      const next = { code: row.universityCode, tab: 7 }
      this.transferTo('/career/plan/UniversityDetail', next, null, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>