专业库详情页tree，列表页缓存

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

@@ -1,136 +1,165 @@
 <template>
-  <div id="professDetail" style="padding:24px 12%">
-    <el-card style="color: #5E5E5E;" ref="navBar">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/career/plan/ProfessLib'}">专业库</el-breadcrumb-item>
-        <el-breadcrumb-item>专业详情</el-breadcrumb-item>
-      </el-breadcrumb>
-    </el-card>
-    <div class="mt20 header-content pd20">
-      <p class="f28 f-333 mb20">{{ majorDetail.name || '' }}</p>
-      <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" @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">
-      <!-- 专业概况  -->
-      <div v-if="tabActive == 0">
-        <div class="info-wrap">
-          <div class="info-item"></div>
-        </div>
-        <div class="desc-item" v-for="(item,index) in contentProps">
-          <p class="format-tit">{{getDetailContent(index,'title')}}</p>
-          <div class="f-666 f14" v-html="getDetailContent(index,item)"></div>
-        </div>
-      </div>
-      <!--  就业岗位-->
-      <div v-if="tabActive == 1">
-        <div class="desc-item" >
-          <p class="format-tit">就业方向</p>
-          <div class="f-666 f14" v-html="prospects.jobDirection"></div>
-        </div>
-        <div class="desc-item" >
-          <p class="format-tit">平均薪酬(毕业年限) <span class="f-333 f14 ml20">{{`平均薪资:${reverseSalary[0].value}`}}</span></p>
-          <div class="f-666 f14" >
-            <el-row :gutter="10">
-              <el-col :span="12">
-                <mx-chart :options="chartSalary" height="240px"></mx-chart>
-              </el-col>
-              <el-col style="height: 100%" :span="12">
-                <el-row :gutter="40" type="flex" style="flex-wrap: wrap">
-                  <el-col :span="12" class="f16" v-for="(item,index) in  reverseSalary">
-                    <el-row class="format-job-wrap">
-                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                      <el-col :span="15" class="f-333">{{item.name}}</el-col>
-                      <el-col :span="6" class="f-666  text-right f14">{{item.value}}</el-col>
-                    </el-row>
-                  </el-col>
-                </el-row>
-              </el-col>
-            </el-row>
+  <div id="professDetail" style="padding:24px 5%">
+    <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-tree
+              :data="majorList"
+              :props="defaultProps"
+            ></el-tree>
+          </el-tab-pane>
+          <el-tab-pane label="专科"  name="专科">
+            <el-tree
+              :data="majorList"
+              :props="defaultProps"
+            ></el-tree>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+      <el-col :span="18">
+        <div >
+          <el-card style="color: #5E5E5E;" ref="navBar">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+              <el-breadcrumb-item :to="{ path: '/career/plan/ProfessLib'}">专业库</el-breadcrumb-item>
+              <el-breadcrumb-item>专业详情</el-breadcrumb-item>
+            </el-breadcrumb>
+          </el-card>
+          <div class="mt20 header-content pd20">
+            <p class="f28 f-333 mb20">{{ majorDetail.name || '' }}</p>
+            <p class="f14 f-666">{{ `国标代码${majorDetail.code}(不可用于填报)` }}</p>
           </div>
-        </div>
-        <el-row :gutter="10" type="flex">
-          <el-col :span="8">
-            <div class="desc-item" >
-              <p class="format-tit">主要职业分布</p>
-              <div class="f-666 f14" >
-                <mx-chart :options="industry" height="200px"></mx-chart>
-                <el-collapse accordion>
-                  <el-collapse-item v-for="desc in prospects.vocationalDistribution">
-                    <template slot="title">
-                      <div  style="display: flex;justify-content: space-between;width: 100%;">
-                        <span style="color: #42b983">{{ desc.name }}</span>
-                        <span class="f-red">{{ desc.value }}%</span>
-                      </div>
-                    </template>
-                    <div>{{ desc.expands }}</div>
-                  </el-collapse-item>
-                </el-collapse>
+          <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" @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">
+            <!-- 专业概况  -->
+            <div v-if="tabActive == 0">
+              <div class="info-wrap">
+                <div class="info-item"></div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="desc-item" >
-              <p class="format-tit">主要行业分布</p>
-              <div class="f-666 f14">
-                <mx-chart :options="industry" height="200px"></mx-chart>
-                <el-row >
-                  <el-col :span="24" class="f16" v-for="(item,index) in  prospects.industryDistribution">
-                    <el-row class="format-job-wrap">
-                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                      <el-col :span="18" class="f-333">{{item.name}}</el-col>
-                      <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
-                    </el-row>
-                  </el-col>
-                </el-row>
+              <div class="desc-item" v-for="(item,index) in contentProps">
+                <p class="format-tit">{{getDetailContent(index,'title')}}</p>
+                <div class="f-666 f14" v-html="getDetailContent(index,item)"></div>
               </div>
             </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="desc-item" >
-              <p class="format-tit">主要就业地区分布</p>
-              <div class="f-666 f14">
-                <mx-chart :options="jobAddress" height="200px"></mx-chart>
-                <el-row >
-                  <el-col :span="24" class="f16" v-for="(item,index) in  prospects.jobRegionDistribution">
-                    <el-row class="format-job-wrap">
-                      <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                      <el-col :span="18" class="f-333">{{item.name}}</el-col>
-                      <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
-                    </el-row>
-                  </el-col>
-                </el-row>
+            <!--  就业岗位-->
+            <div v-if="tabActive == 1 && !!prospects">
+              <div class="desc-item" >
+                <p class="format-tit">就业方向</p>
+                <div class="f-666 f14" v-html="prospects.jobDirection"></div>
               </div>
+              <div class="desc-item" >
+                <p class="format-tit">平均薪酬(毕业年限) <span class="f-333 f14 ml20">{{`平均薪资:${reverseSalary[0].value}`}}</span></p>
+                <div class="f-666 f14" >
+                  <el-row :gutter="10">
+                    <el-col :span="12">
+                      <mx-chart :options="chartSalary" height="240px"></mx-chart>
+                    </el-col>
+                    <el-col style="height: 100%" :span="12">
+                      <el-row :gutter="40" type="flex" style="flex-wrap: wrap">
+                        <el-col :span="12" class="f16" v-for="(item,index) in  reverseSalary">
+                          <el-row class="format-job-wrap">
+                            <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                            <el-col :span="15" class="f-333">{{item.name}}</el-col>
+                            <el-col :span="6" class="f-666  text-right f14">{{item.value}}</el-col>
+                          </el-row>
+                        </el-col>
+                      </el-row>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <el-row :gutter="10" type="flex">
+                <el-col :span="8">
+                  <div class="desc-item" >
+                    <p class="format-tit">主要职业分布</p>
+                    <div class="f-666 f14" >
+                      <mx-chart :options="industry" height="200px"></mx-chart>
+                      <el-collapse accordion>
+                        <el-collapse-item v-for="desc in prospects.vocationalDistribution">
+                          <template slot="title">
+                            <div  style="display: flex;justify-content: space-between;width: 100%;">
+                              <span style="color: #42b983">{{ desc.name }}</span>
+                              <span class="f-red">{{ desc.value }}%</span>
+                            </div>
+                          </template>
+                          <div>{{ desc.expands }}</div>
+                        </el-collapse-item>
+                      </el-collapse>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="desc-item" >
+                    <p class="format-tit">主要行业分布</p>
+                    <div class="f-666 f14">
+                      <mx-chart :options="industry" height="200px"></mx-chart>
+                      <el-row >
+                        <el-col :span="24" class="f16" v-for="(item,index) in  prospects.industryDistribution">
+                          <el-row class="format-job-wrap">
+                            <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                            <el-col :span="18" class="f-333">{{item.name}}</el-col>
+                            <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
+                          </el-row>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="desc-item" >
+                    <p class="format-tit">主要就业地区分布</p>
+                    <div class="f-666 f14">
+                      <mx-chart :options="jobAddress" height="200px"></mx-chart>
+                      <el-row >
+                        <el-col :span="24" class="f16" v-for="(item,index) in  prospects.jobRegionDistribution">
+                          <el-row class="format-job-wrap">
+                            <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                            <el-col :span="18" class="f-333">{{item.name}}</el-col>
+                            <el-col  :span="3" class="f-red  text-right f14">{{item.value}}%</el-col>
+                          </el-row>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row :gutter="10" class="f-12 f-666">
+                <p><i class="el-icon mr5 f-16 el-icon-warning" style="color: #42b983"> </i>数据说明</p>
+                <p v-for="(desc,index) in prospects.description">
+                  {{index+  1}}、 {{desc}}
+                </p>
+              </el-row>
+            </div>
+            <div v-if="tabActive == 2 ">
+              暂无
+            </div>
+            <div v-if="tabActive == 1 && !prospects">
+              {{ desc }}
             </div>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10" class="f-12 f-666">
-          <p><i class="el-icon mr5 f-16 el-icon-warning" style="color: #42b983"> </i>数据说明</p>
-          <p v-for="(desc,index) in prospects.description">
-            {{index+  1}}、 {{desc}}
-          </p>
-        </el-row>
-      </div>
-    </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
   </div>
 </template>
 <script>
 import MxChart from '@/components/MxChart/index'
-import { careerProspects, majorOverview } from '@/api/webApi/professlib'
+import { allMajor, careerProspects, majorOverview } from '@/api/webApi/professlib'
 
 export default {
   name: 'ProfessLibDetails',
@@ -139,9 +168,16 @@ export default {
   },
   data() {
     return {
+      desc: '',
       loading: false,
       code: '',
       tabActive: 0,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      type: '本科',
+      majorList: [],
       majorDetail: {}, // 概况
       prospects: {}, // 前景
       contentPropsByBen: ['introduction', 'eduObjective', 'eduRequirement', 'subjectRequirement', 'loreAndAbility', 'studyDirection', 'mainCourse', 'famousScholar'], // 本科概况列
@@ -286,6 +322,13 @@ export default {
         if (newVal == 1) this.getCareerProspects()
       }
     },
+    type: {
+      immediate: true,
+      handler(newVal) {
+        // 2 院校 1 前景 0 概览
+        this.getAllMajor()
+      }
+    },
     '$route': {
       immediate: true,
       handler(val) {
@@ -297,12 +340,23 @@ export default {
     }
   },
   methods: {
+    tabClick(type) {
+      this.type =type.name
+    },
+    getAllMajor() {
+      allMajor({
+        type: this.type
+      }).then(res => {
+        this.majorList = res.data
+      })
+    },
     getCareerProspects() {
       this.loading = true
       careerProspects({
         code: this.code
       }).then(res => {
         this.prospects = res.data
+        this.desc = res.msg
         console.log(res)
       }).finally(_ => {
         this.loading = false

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

@@ -43,13 +43,25 @@ export default {
   data(){
     return {
       backimg:'url('+require('@/assets/images/icon_pro.png')+')',
-      levelOne: [], // 专业大类
       type: '本科',
-      majorList: []
+      masterMajorList: [],  // 本科
+      specialtyMajorList: [], // 专科
     }
   },
   computed:{
-    ...mapState({theme: state => state.settings.theme})
+    ...mapState({theme: state => state.settings.theme}),
+    levelOne() {
+        return this.majorList.map(item=>{
+          return {
+            code: item.code,
+            name: item.name,
+          }
+        })
+    },
+    majorList() {
+      if(this.type == '本科') return this.masterMajorList
+      if(this.type == '专科') return this.specialtyMajorList
+    }
   },
   watch:{
     theme:{
@@ -64,7 +76,10 @@ export default {
       immediate:true,
       handler(val){
         console.log(val)
-        this.getAllMajor()
+        if((val  == '本科' && this.masterMajorList.length == 0) || (val  == '专科' && this.specialtyMajorList.length == 0)){
+          this.getAllMajor()
+        }
+
       }
     }
   },
@@ -76,14 +91,12 @@ export default {
       allMajor({
         type: this.type
       }).then(res => {
-        console.log(res)
-        this.majorList = res.data
-        this.levelOne = res.data.map(item => {
-          return {
-            code: item.code,
-            name: item.name,
-          }
-        })
+        if(this.type == '本科'){
+          this.masterMajorList = res.data
+        }
+        if(this.type == '专科'){
+          this.specialtyMajorList = res.data
+        }
       })
     }
   }