专业库详情树缓存、显示问题修复

src/components/Cache/modules/mx-major-tree-translate-mixin.js

@@ -0,0 +1,29 @@
+import cacheMixin from '@/components/Cache/mx-cache-mixin.js'
+
+export default {
+  mixins: [cacheMixin],
+  data() {
+    return {
+      masterMajorList: [],
+      specialtyMajorList: [],
+      masterTreeReady: false,
+      specialtyTreeReady: false
+    }
+  },
+  beforeMount() {
+    this.loadMasterMajorTree()
+    this.loadSpecialtyMajorTree()
+  },
+  methods: {
+    async loadMasterMajorTree() {
+      this.masterMajorList = await this.getMasterMajorTree()
+      this.masterTreeReady = true
+      console.log('master-major-ready')
+    },
+    async loadSpecialtyMajorTree() {
+      this.specialtyMajorList = await this.getSpecialtyMajorTree()
+      this.specialtyTreeReady = true
+      console.log('specialty-major-ready')
+    },
+  }
+}

src/components/Cache/mx-cache-mixin.js

@@ -8,6 +8,7 @@ import {
 } from '@/api/webApi/selection.js'
 import consts from '@/common/mx-const.js'
 import { loadAllMajorSubjectTree } from '@/api/webApi/test-major'
+import { allMajor } from '@/api/webApi/professlib'
 
 export default {
   // 类似全局缓存
@@ -112,6 +113,24 @@ export default {
         system.getPharseGradeList,
         res => res.rows,
         useCache)
+    },
+    // 本科专业树
+    getMasterMajorTree(useCache = true,type) {
+      return this._getDataByCache('master_major_tree',
+        _ => allMajor({
+          type:'本科'
+        }),
+        res => res.data,
+        useCache)
+    },
+    // 专科专业树
+    getSpecialtyMajorTree(useCache = true,type) {
+      return this._getDataByCache('specialty_major_tree',
+        _ => allMajor({
+          type:'专科'
+        }),
+        res => res.data,
+        useCache)
     }
   }
 }

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

@@ -68,7 +68,7 @@
                     <p class="f14 f-999">修业年限</p>
                   </div>
                 </div>
-                <div class="info-item">
+                <div class="info-item" v-if="majorDetail.degree">
                   <el-image :src="require('@/assets/images/career/pre_icon.png')" />
                   <div>
                     <p class="f18">{{ majorDetail.degree }}</p>
@@ -120,7 +120,7 @@
                   <div class="desc-item" >
                     <p class="format-tit">主要职业分布</p>
                     <div class="f-666 f14" >
-                      <mx-chart :options="industry" height="200px"></mx-chart>
+                      <mx-chart :options="occupation" height="200px"></mx-chart>
                       <el-collapse accordion>
                         <el-collapse-item v-for="desc in prospects.vocationalDistribution">
                           <template slot="title">
@@ -193,12 +193,13 @@
 <script>
 import MxChart from '@/components/MxChart/index'
 import { allMajor, careerProspects, majorOverview } from '@/api/webApi/professlib'
-
+import MxMajorTreeTranslateMixin from '@/components/Cache/modules/mx-major-tree-translate-mixin'
 export default {
   name: 'ProfessLibDetails',
   components: {
     MxChart
   },
+  mixins:[MxMajorTreeTranslateMixin],
   data() {
     return {
       desc: '',
@@ -210,8 +211,6 @@ export default {
         label: 'name'
       },
       type: '本科',
-      masterMajorList: [],
-      specialtyMajorList: [],
       majorDetail: {}, // 概况
       prospects: {}, // 前景
       contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
@@ -233,7 +232,30 @@ export default {
       return averageSalary.reverse().splice(0 ,10)
     },
     // 主要职业分布
-
+    occupation() {
+      if (!this.prospects.vocationalDistribution) return null
+      const pieData = this.prospects.vocationalDistribution
+      const options  = {
+        toolbox: {
+          show: true,
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: [40, 60],
+            label:{
+              formatter: '{b}'
+            },
+            labelLine: {
+              length2: 6,
+              length: 5
+            },
+            data: pieData
+          }
+        ]
+      }
+      return options
+    },
     // 主要行业分布
     industry() {
       if (!this.prospects.industryDistribution) return null
@@ -360,27 +382,21 @@ export default {
         if (newVal == 1) this.getCareerProspects()
       }
     },
-    type: {
-      immediate:true,
-      handler(val){
-        console.log(val)
-        if((val  == '本科' && this.masterMajorList.length == 0) || (val  == '专科' && this.specialtyMajorList.length == 0)){
-          this.getAllMajor()
-        }
-      }
-    },
     '$route': {
       immediate: true,
       handler(val) {
+        console.log(val)
         this.code = val.query.code
         this.type =  val.query.type || '本科'
         if (val.query.code) {
           this.getOverView()
         }
-        this.$refs.tree.setCurrentKey(this.code)
       }
     }
   },
+  mounted() {
+    this.$refs.tree.setCurrentKey(this.code)
+  },
   methods: {
     handleNodeClick(data,node) {
       if(!node.isLeaf || this.code == node.data.code) return
@@ -394,18 +410,6 @@ export default {
     tabClick(type) {
       this.type =type.name
     },
-    getAllMajor() {
-      allMajor({
-        type: this.type
-      }).then(res => {
-        if(this.type == '本科'){
-          this.masterMajorList = res.data
-        }
-        if(this.type == '专科'){
-          this.specialtyMajorList = res.data
-        }
-      })
-    },
     getCareerProspects() {
       this.loading = true
       careerProspects({