院校库、专业库修复细节

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

@@ -16,8 +16,8 @@
             @node-click="handleNodeClick"
             :isLeaf="isLeaf"
           >
-            <p  class="custom-tree-node" slot-scope="{node, data}">
-              <span>{{node.label }}</span>
+            <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>
@@ -448,6 +448,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    overflow: hidden;
   }
 
   .tabs-wrap {

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

@@ -13,12 +13,12 @@
         <span class="tabs-item" @click="type = '专科'" :class="{'bg-primary':type == '专科'}">专科</span>
         <p class="line"></p>
         <div class="tags-wrap">
-          <a :href="`#${item.code}`" class="tag" v-for="item in levelOne">{{ item.name }}</a>
+          <a  @click="returnTop(item.code)"  class="tag" v-for="item in levelOne">{{ item.name }}</a>
         </div>
       </div>
       <div class="list-wrap">
         <!--  一级 -->
-        <div class="levelOne" v-for="item in majorList" :id="item.code">
+        <div class="levelOne" v-for="item in majorList" :id="`#${item.code}`">
           <!--   一级专业title-->
           <p class="voca-title mt10 mb10" > <span class="primaryColor bold">{{`${item.name} (${item.code}) `}} </span><span class="f14 f-666">{{ `${item.childCount}4个专业类，${item.grandchildCount}个专科专业` }}</span></p>
           <div class="last-level" v-for="subLevel in item.children">
@@ -37,15 +37,15 @@
 
 <script>
 import {mapState} from 'vuex';
-import { allMajor } from '@/api/webApi/professlib';
+import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
+
 export default {
   name: "index",
+  mixins:[MxMajorTreeTranslateMixin],
   data(){
     return {
       backimg:'url('+require('@/assets/images/icon_pro.png')+')',
       type: '本科',
-      masterMajorList: [],  // 本科
-      specialtyMajorList: [], // 专科
     }
   },
   computed:{
@@ -72,31 +72,13 @@ export default {
         })
       }
     },
-    type: {
-      immediate:true,
-      handler(val){
-        console.log(val)
-        if((val  == '本科' && this.masterMajorList.length == 0) || (val  == '专科' && this.specialtyMajorList.length == 0)){
-          this.getAllMajor()
-        }
-      }
-    }
   },
   methods:{
     goDetail(code){
       this.$router.push({path:'/career/plan/ProfessLibDetail',query:{type:this.type,code:code}})
     },
-    getAllMajor() {
-      allMajor({
-        type: this.type
-      }).then(res => {
-        if(this.type == '本科'){
-          this.masterMajorList = res.data
-        }
-        if(this.type == '专科'){
-          this.specialtyMajorList = res.data
-        }
-      })
+    returnTop(id){
+      document.getElementById(`#${id}`).scrollIntoView(true);
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div id="jobDetail" style="padding:24px 5%" >
     <el-row :gutter="20">
-     <el-col :span="6">
+      <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">
@@ -16,8 +16,8 @@
            @node-click="handleNodeClick"
            :isLeaf="isLeaf"
          >
-           <p  class="custom-tree-node" slot-scope="{node, data}">
-             <span>{{node.label }}</span>
+           <p  class="custom-tree-node" :title="node.label" slot-scope="{node, data}">
+             <span class="text-ellipsis">{{node.label }}</span>
              <span>{{data.children ? data.children.length : ''}}</span>
            </p>
          </el-tree>
@@ -413,6 +413,13 @@ export default {
     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;

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

@@ -12,12 +12,12 @@
         <div class="title">职业列表</div>
         <p class="line"></p>
         <div class="tags-wrap">
-          <a :href="`#${item.code}`" class="tag" v-for="item in levelOne">{{ item.name }}</a>
+          <a @click="returnTop(item.code)" class="tag" v-for="item in levelOne">{{ item.name }}</a>
         </div>
       </div>
       <div class="list-wrap">
         <!--  一级 -->
-        <div class="levelOne" v-for="item in vocationList" :id="item.code">
+        <div class="levelOne" v-for="item in vocationList" :id="`#${item.code}`">
           <!--   一级职业title-->
           <p class="voca-title mt10 mb10 bold" >{{item.name}}</p>
           <div class="last-level" v-for="subLevel in item.children">
@@ -43,12 +43,21 @@ export default {
   data(){
     return {
       backimg:'url('+require('@/assets/images/career/icon_colleges.png')+')',
-      levelOne: [],
+      // levelOne: [],
     }
   },
   mixins:[MxVocationTranslateMixin],
   computed:{
-    ...mapState({theme: state => state.settings.theme})
+    ...mapState({theme: state => state.settings.theme}),
+    levelOne() {
+      if(!this.vocationList.length) return []
+      return this.vocationList.map(item => {
+        return {
+          code: item.code,
+          name: item.name,
+        }
+      })
+    }
   },
   watch:{
     theme:{
@@ -64,6 +73,9 @@ export default {
     goDetail(code){
       this.$router.push({name:'jobDetail',query:{code:code}})
     },
+    returnTop(id){
+      document.getElementById(`#${id}`).scrollIntoView(true);
+    }
   }
 }
 </script>