front/src/views/career/plan/new-major-detail.vue

<template>
  <div class="app-container professDetail">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tabs type="border-card" @tab-click="tabClick" :value="type" stretch>
          <el-tab-pane label="本科" name="本科"></el-tab-pane>
          <el-tab-pane label="专科" name="专科"></el-tab-pane>
          <el-tree
            ref="tree"
            :data="majorList"
            node-key="code"
            :default-checked-keys="[code]"
            :default-expanded-keys="[code]"
            :props="defaultProps"
            :current-node-key="code"
            @node-click="handleNodeClick"
            :isLeaf="isLeaf"
          >
            <p class="custom-tree-node text-ellipsis" :title="node.label" slot-scope="{node, data}">
              <span>{{ node.label }}</span>
              <span>{{ data.children ? data.children.length : '' }}</span>
            </p>
          </el-tree>
        </el-tabs>
      </el-col>
      <el-col :span="18">
        <div>
          <el-card style="color: #5E5E5E;" ref="navBar">
            <div class="fx-row jc-between ai-center">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/new-gaokao/three/ProfessLib'}">专业库</el-breadcrumb-item>
                <el-breadcrumb-item>专业详情</el-breadcrumb-item>
              </el-breadcrumb>
              <el-button plain round @click="$router.go(-1)">返回</el-button>
            </div>
          </el-card>
          <div class="mt20 header-content pd20">
            <div class="mb20 fx-row jc-between ai-center">
              <p class="f28 f-333">{{ majorDetail.name || '' }}</p>
              <el-button type="primary" round plain v-if="majorDetail.isCollect" @click="toUnCollect"><i
                class="iconfont icon-yiguanzhu"></i> 已收藏
              </el-button>
              <el-button type="primary" round plain v-else @click="toCollect"><i class="iconfont icon-guanzhu"></i> 收藏
              </el-button>
            </div>
            <p class="f14 f-666">{{ `国标代码${majorDetail.code}(不可用于填报)` }}</p>
          </div>
          <div class="tabs-wrap">
            <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">专业概况</span>
            <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">就业前景</span>
            <span class="tabs-item" v-if="majorDetail.eduLevel == 'ben'" @click="tabActive = 2"
                  :class="{'bg-primary':tabActive == 2}">开设院校</span>
          </div>
          <p class="line"></p>
          <div
            v-show="loading"
            class="loading-div"
            v-loading="loading"
            :style="{height:windowHeight + 'px'}"
          >
          </div>
          <div class="content-wrap mt20">
            <!-- 专业概况  -->
            <major-introduce-info v-if="tabActive==0" :major-detail="majorDetail"/>
            <!--  就业岗位-->
            <major-introduce-job v-if="tabActive==1&&prospects" :prospects="prospects"></major-introduce-job>
            <!--  开设院校-->
            <open-college :code="code" v-if="tabActive == 2 "></open-college>
            <div v-if="tabActive == 1 && !prospects">
              {{ desc }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import MxChart from '@/components/MxChart/index'
import { getMajorCareerProspectsByCode, getMajorOverviewByCode } from '@/api/webApi/professlib'
import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
import OpenCollege from '@/views/career/plan/components/OpenCollege'
import { addConcernMajor, removeConcernedMajor } from '@/api/webApi/career-other'
import MajorIntroduceInfo from '@/views/career/plan/components/major-introduce-info'
import MajorIntroduceJob from '@/views/career/plan/components/major-introduce-job'

export default {
  name: 'ProfessLibDetails',
  components: {
    MajorIntroduceJob,
    MajorIntroduceInfo,
    MxChart,
    OpenCollege
  },
  mixins: [MxMajorTreeTranslateMixin],
  data() {
    return {
      desc: '',
      loading: false,
      code: '',
      tabActive: 0,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      type: '本科',
      majorDetail: {}, // 概况
      prospects: {
        vocationalDistribution: [],
        industryDistribution: [],
        jobRegionDistribution: [],
        description: []
      }, // 前景
      windowHeight: document.documentElement.clientHeight
    }
  },
  computed: {
    majorList() {
      if (this.type == '本科') return this.masterMajorList
      if (this.type == '专科') return this.specialtyMajorList
    }
  },
  watch: {
    tabActive: {
      handler(newVal) {
        // 2 院校 1 前景 0 概览
        if (newVal == 0) this.getOverView()
        if (newVal == 1) this.getCareerProspects()
      }
    }
  },
  created() {
    this.code = this.$route.query.code
    this.type = this.$route.query.type || '本科'
    if (this.$route.query.code) {
      this.getOverView()
    }
  },
  mounted() {
    this.$refs.tree.setCurrentKey(this.code)
  },
  methods: {
    toCollect() {
      addConcernMajor({ code: this.majorDetail.code }).then(res => {
        this.$message.success('收藏成功')
        this.majorDetail.isCollect = true
      })
    },
    toUnCollect() {
      removeConcernedMajor({ code: this.majorDetail.code }).then(res => {
        this.$message.success('移除收藏成功')
        this.majorDetail.isCollect = false
      })
    },
    handleNodeClick(data, node) {
      if (!node.isLeaf || this.code == node.data.code) return
      // 跳转
      this.code = node.data.code
      this.tabActive = 0
      this.getOverView()
    },
    isLeaf(data, node) {
      return node.childCount == 0
    },
    tabClick(type) {
      this.type = type.name
    },
    getCareerProspects() {
      this.loading = true
      getMajorCareerProspectsByCode({
        code: this.code
      }).then(res => {
        this.prospects = res.data
        this.desc = res.msg
      }).finally(_ => {
        this.loading = false
      })
    },
    getOverView() {
      this.loading = true
      getMajorOverviewByCode({
        code: this.code
      }).then(res => {
        this.majorDetail = res.data
      }).finally(_ => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(66, 185, 131, 0.1);
}

.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.tabs-wrap {
  margin-top: 20px;
  height: 40px;

  .tabs-item {
    cursor: pointer;
    padding: 0 33px;
    border-radius: 4px 4px 0 0;
    display: inline-block;
    line-height: 40px;

    &:hover {
      color: #47C6A2;
    }

    &.bg-primary {
      background: #47C6A2;
      color: white;
    }
  }
}

.bg-primary {
  background: #47C6A2 !important;
  color: white;
}



.el-tabs--border-card ::v-deep .el-tabs__content {
  height: calc(100vh - 176px);
  overflow: hidden;
  overflow-y: auto;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(22, 119, 255, 0.1);
  color: #47C6A2;
  ::v-deep .is-leaf {
    color: rgba(0, 0, 0, 0);
  }
}
</style>