职业库--树--跳转

src/assets/styles/common.scss

@@ -553,7 +553,9 @@
 .fx-5 {
   flex: 5;
 }
-
+.pd10 {
+  padding: 10px;
+}
 .fx-wrap {
   flex-wrap: wrap;
 }
@@ -575,6 +577,9 @@
 .bg-page {
   background-color: #FEFEFE;
 }
+.bd-f2{
+  border: 1px solid #f2f2f2;
+}
 
 .bg-border {
   background-color: #EEEEEE;

src/views/career/plan/new-profess-detail.vue

@@ -3,8 +3,8 @@
     <el-row :gutter="20">
       <el-col :span="6" >
         <el-tabs type="border-card" @tab-click="tabClick" :value="type"  stretch >
-          <el-tab-pane label="本科" name="本科" class="tree"></el-tab-pane>
-          <el-tab-pane label="专科"  name="专科" class="tree"></el-tab-pane>
+          <el-tab-pane label="本科" name="本科" ></el-tab-pane>
+          <el-tab-pane label="专科"  name="专科" ></el-tab-pane>
           <el-tree
             ref="tree"
             :data="majorList"

src/views/career/vocation/new-detail.vue

@@ -1,7 +1,30 @@
 <template>
   <div id="jobDetail" style="padding:24px 5%" >
     <el-row :gutter="20">
-     <el-col :span="6">444</el-col>
+     <el-col :span="6">
+       <div class="bd-f2">
+         <p style="border-bottom: 1px solid #f2f2f2" class="pd10 f-333 f14">全部职业</p>
+         <div class="tree-wrap">
+           <el-tree
+           ref="tree"
+           :data="vocationTree"
+           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" slot-scope="{node, data}">
+             <span>{{node.label }}</span>
+             <span>{{data.children ? data.children.length : ''}}</span>
+           </p>
+         </el-tree>
+         </div>
+
+       </div>
+     </el-col>
       <el-col  :span="18">
         <el-card style="color: #5E5E5E;" ref="navBar">
           <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -46,7 +69,7 @@
               <div class="desc-item">
                 <p class="format-tit">相关专业<span class="text-666 f14">({{vocationDetail.postMajors.length}}个)</span></p>
                 <div class="post-item mb20" v-for="post in vocationDetail.postMajors">
-                  <div class="post-title f16 mb10" style="cursor: pointer">{{post.name}}</div>
+                  <div class="post-title f16 mb10" style="cursor: pointer" @click="toMajorDetail(post)">{{post.name}}</div>
                   <div class="pb10 text-666 post-text">
                     <div>国标代码：{{post.code}}</div>
                     <div>学制：{{post.learnYear}}</div>
@@ -149,7 +172,8 @@
 </template>
 <script>
 import MxChart from '@/components/MxChart/index'
-import { vocationalPostsDetail, vocationalOverview, vocationalPosts } from '@/api/webApi/vocation'
+import { vocationalPostsDetail, vocationalOverview, vocationalPosts,getAllVocation } from '@/api/webApi/vocation'
+
 export default {
   name: "Detail",
   components: {
@@ -159,7 +183,12 @@ export default {
     return {
       loading:false,
       code:'',
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
       tabActive: 0,
+      vocationTree: [], // 职业树
       vocationalPosts: [],  // 就业岗位
       vocationDetail:{},  // 职业概况
       jobActiveName: '',  // 激活状态的岗位
@@ -167,6 +196,9 @@ export default {
       windowHeight:document.documentElement.clientHeight,
     }
   },
+  created() {
+    this.getAllVocation()
+  },
   computed:{
     // 按工资分布
     chartSalary() {
@@ -310,11 +342,26 @@ export default {
     }
   },
   methods:{
+    toMajorDetail(row) {
+      console.log('跳转')
+      console.log(row)
+      // 跳转
+      this.$router.push({path:'/career/plan/ProfessLibDetail',query:{code:row.code}})
+    },
+    handleNodeClick(data,node) {
+      if(!node.isLeaf || this.code == node.data.code) return
+      console.log('跳转')
+      // 跳转
+      this.$router.replace({path:'/career/vocation/Detail',query:{code:node.data.code}})
+    },
     toJob(post) {
       console.log(post)
       this.tabActive = 1
       this.toActiveJob(post.name)
     },
+    isLeaf(data,node) {
+      return node.childCount == 0
+    },
     toActiveJob(name) {
       if(this.jobActiveName == name) return
       this.jobActiveName = name
@@ -361,6 +408,14 @@ export default {
       }).finally(_ => {
         this.loading = false
       })
+    },
+    getAllVocation() {
+      getAllVocation({
+        level: 1
+      }).then(res => {
+        console.log(res)
+        this.vocationTree = res.data
+      })
     }
   }
 }
@@ -467,5 +522,18 @@ export default {
       }
     }
   }
+  .tree-wrap{
+    padding: 10px;
+    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>