|
|
@@ -1,136 +1,84 @@
|
|
|
<template>
|
|
|
- <el-container v-loading="loading">
|
|
|
- <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"
|
|
|
- default-expand-all
|
|
|
- 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
|
|
|
- @university="toDetail(row)"
|
|
|
- @shift-line="toShiftLine(row)"
|
|
|
- />
|
|
|
- <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>
|
|
|
+ <div :style="cssVar">
|
|
|
+ <el-tabs v-if="isPreEnrollTreeSupport" v-model="activeName" stretch class="prev-page-tabs">
|
|
|
+ <el-tab-pane label="提前批招生计划" name="plan">
|
|
|
+ <prev-enroll-plan-tree />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="提前批投档线" name="enroll">
|
|
|
+ <prev-shift-line-tree />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <prev-enroll-plan-tree v-else />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Layout from '@/layout/simple'
|
|
|
-import PrevEnrollPlanV2 from '@/views/career/PrevBatch/PrevEnrollPlanV2.vue'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import PrevEnrollPlanTree from '@/views/career/PrevBatch/PrevEnrollPlanTree.vue'
|
|
|
+import PrevShiftLineTree from '@/views/career/PrevBatch/PrevShiftLineTree.vue'
|
|
|
|
|
|
export default {
|
|
|
name: 'Formatted',
|
|
|
- components: {Layout},
|
|
|
- extends: PrevEnrollPlanV2,
|
|
|
+ components: { PrevShiftLineTree, PrevEnrollPlanTree },
|
|
|
data() {
|
|
|
return {
|
|
|
- tagKeyword: ''
|
|
|
+ activeName: 'plan'
|
|
|
}
|
|
|
},
|
|
|
- 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()
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['isPreEnrollTreeSupport']),
|
|
|
+ cssVar() {
|
|
|
+ // 40 tabs' height; 15 container space;
|
|
|
+ return {
|
|
|
+ '--prev-space': this.isPreEnrollTreeSupport ? `${68 + 40 + 15}px` : '68px'
|
|
|
}
|
|
|
- },
|
|
|
- toShiftLine(row) {
|
|
|
- const next = {code: row.universityCode, tab: 7}
|
|
|
- this.transferTo('/career/plan/UniversityDetail', next, null, '_blank')
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.tree-container {
|
|
|
- width: 400px;
|
|
|
- height: calc(100vh - 68px);
|
|
|
- overflow-y: auto;
|
|
|
- padding: 20px;
|
|
|
-
|
|
|
- ::v-deep .el-tree-node__content {
|
|
|
- height: fit-content;
|
|
|
+<style lang="scss">
|
|
|
+.prev-page-tabs {
|
|
|
+ .el-tabs__header {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
}
|
|
|
|
|
|
- ::v-deep .el-tree-node__label {
|
|
|
- flex: 1;
|
|
|
- white-space: normal;
|
|
|
- line-height: 1.3;
|
|
|
- padding: 4px 0;
|
|
|
+ .el-tabs__nav {
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.content-container {
|
|
|
- height: calc(100vh - 68px);
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
+.layout-prev-container {
|
|
|
+ .tree-container {
|
|
|
+ width: 400px;
|
|
|
+ height: calc(100vh - var(--prev-space));
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: fit-content;
|
|
|
+ }
|
|
|
|
|
|
-.el-tree--highlight-current::v-deep {
|
|
|
- .el-tree-node.is-current > .el-tree-node__content {
|
|
|
- background-color: var(--themeColor);
|
|
|
- color: #FFFFFF;
|
|
|
+ .el-tree-node__label {
|
|
|
+ flex: 1;
|
|
|
+ white-space: normal;
|
|
|
+ line-height: 1.3;
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-container {
|
|
|
+ height: calc(100vh - var(--prev-space));
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree--highlight-current {
|
|
|
+ .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ background-color: var(--themeColor);
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</style>
|
