新职业库

src/api/webApi/vocation.js

@@ -7,6 +7,17 @@ export function selectJobsList(params){
   })
 }
 
+/**
+ * 职业库 level：1 1级
+ *       level：2 2级
+ */
+export function getAllVocation(params){
+  return request({
+    url:`front/vocational/getAllVocation`,
+    method:'get',
+    params
+  })
+}
 /**
  * 获取职业详情
  * @param params

src/router/index.js

@@ -718,7 +718,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/vocation/index',
-        component: (resolve) => require(['@/views/career/vocation/index'], resolve),
+        component: (resolve) => require(['@/views/career/vocation/new-index'], resolve),
         name: 'Vocation',
         meta: {
           title: '职业库'
@@ -726,7 +726,7 @@ export const constantRoutes = [{
       },
       {
         path: '/career/vocation/Detail',
-        component: (resolve) => require(['@/views/career/vocation/Detail'], resolve),
+        component: (resolve) => require(['@/views/career/vocation/old-detail'], resolve),
         name: 'jobDetail',
         meta: {
           title: '职业-详情'

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

@@ -0,0 +1,130 @@
+<template>
+  <div id="jobDetail" ref="jobDetail" style="padding:24px 8%;background-color:#f7f7f7;" v-loading="loading">
+    <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/vocation/index'}">职业库</el-breadcrumb-item>
+        <el-breadcrumb-item>职业详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-card>
+    <div  style="background-color: #F0F3FC;margin-top:10px;" class="header">
+      <div class="left" :style="{'backgroundColor':theme,'text-align':'center'}">
+        <div>
+          <h1 style="margin: 0;font-size: 40px;color:#525252;">{{jobDetails.name}}</h1>
+        </div>
+      </div>
+      <div class="right" style="padding:30px;">
+        <div v-html="jobDetails.zysm" class="headerText"></div>
+      </div>
+    </div>
+    <div style="margin-top: 20px;background-color: #ffffff" v-for="(item,index) in contentArr">
+      <div style="display: flex;justify-content: space-between;padding:30px 10px 0 10px;">
+        <span :style="{'color':theme}" style="background-color:#F0F3FC;font-size:16px;font-weight:bold;padding:12px 100px 10px 50px;display:inline-block;clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);">{{getDeatailCon(index,'title')}}</span>
+        <span :style="{'color':theme}" style="font-size:36px;color:#FCE1B0;">{{getDeatailCon(index,'title02')}}</span>
+      </div>
+      <div style="padding:30px" v-html="getDeatailCon(index,item)"></div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex';
+import {getJobDetail} from '@/api/webApi/vocation'
+export default {
+  name: "Detail",
+  data(){
+    return {
+      loading:false,
+      jobId:'',
+      jobDetails:{},
+      contentArr:['zydy','rwzz','zsbj','zyjn','cyzg','cygj','fzqj'],
+      title1:['职业定义','任务职责','知识背景','职业技能','从业资格','常用工具','发展前景'],
+      title2:['PROFESSIONAL DETAILS','COLLEGES AND UNIVERSITIES','CHARACTERISTICS','CHARACTERISTICS','CHARACTERISTICS','CHARACTERISTICS']
+    }
+  },
+  computed:{
+    ...mapState({theme: state => state.settings.theme}),
+    getDeatailCon(){
+      return function (id,type){
+        if(type==='title'){
+          return this.title1[id]
+        }
+        if(type==='title02'){
+          return this.title2[id]
+        }
+        const flag=this.contentArr.some(item=>{
+          return item===type
+        })
+        if(flag){
+          return this.jobDetails[type]
+        }
+      }
+    }
+  },
+  watch:{
+    theme:{
+      immediate:true,
+      handler(val){
+        this.$nextTick(()=>{
+          this.$refs.jobDetail.style.setProperty('--themeColor', val)
+        })
+      }
+    },
+    '$route':{
+      immediate:true,
+      handler(val){
+        this.jobId=val.query.id;
+        if(val.query.id){
+          this.getJobDetail();
+        }
+      }
+    }
+  },
+  methods:{
+    getJobDetail(){
+      this.loading=true
+      const params={
+        jobId:this.jobId
+      };
+      getJobDetail(params).then(res=>{
+        this.jobDetails=res.data
+        this.loading=false;
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+#jobDetail{
+  font-family: PingFangSC-Semibold, PingFang SC;
+  .header{
+    .headerText{
+      p{
+        background-color: #1ab394 !important;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+#jobDetail {
+  .header {
+    .left{
+      display: table-cell;
+      width:25%;
+      vertical-align: middle;
+    }
+    .right{
+      display: table-cell;
+    }
+    .headerText {
+      p {
+        span{
+          background-color: transparent !important;
+        }
+        background-color: transparent !important;
+      }
+    }
+
+  }
+}
+</style>

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

@@ -0,0 +1,172 @@
+<template>
+  <div id="vocation" ref="vocation" style="background-color:#f7f7f7;">
+    <div :style="{'background-image':backimg}" class="back">
+      <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">CAREER POOL</p>
+      <p style="color:#414141;font-size:24px;font-weight:bold;">职业库</p>
+      <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
+    </div>
+    <el-card class="box-card">
+      <div slot="header" >
+        <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>
+        </div>
+      </div>
+      <div class="list-wrap">
+        <!--  一级 -->
+        <div class="levelOne" v-for="item in vocationList">
+          <!--   一级职业title-->
+          <p class="voca-title mt10 mb10 bold" :id="item.code">{{item.name}}</p>
+          <div class="last-level" v-for="subLevel in item.children">
+            <!--  二级职业 -->
+            <p class="sub-title">{{subLevel.name}}</p>
+            <!--  三级职业 -->
+            <div class="last-children-wrap" v-if="subLevel.children.length > 0">
+              <span @click="goDetail(vocation.code)" class="last-children" v-for="vocation in subLevel.children">{{vocation.name}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+import {selectJobsList,getAllVocation} from '@/api/webApi/vocation';
+export default {
+  name: "index",
+  data(){
+    return {
+      backimg:'url('+require('@/assets/images/career/icon_colleges.png')+')',
+      levelOne: [],
+      vocationList: []
+    }
+  },
+  computed:{
+    ...mapState({theme: state => state.settings.theme})
+  },
+  watch:{
+    theme:{
+      immediate:true,
+      handler(val){
+        this.$nextTick(()=>{
+          this.$refs.vocation.style.setProperty('--themeColor', val)
+        })
+      }
+    },
+  },
+  created(){
+    this.getAllVocation()
+  },
+  methods:{
+    goDetail(id){
+      this.$router.push({name:'jobDetail',query:{id:id}})
+    },
+    getAllVocation() {
+      getAllVocation({
+        level: 1
+      }).then(res => {
+        console.log(res)
+        this.vocationList = res.data
+        this.levelOne = res.data.map(item => {
+            return {
+              code: item.code,
+              name: item.name,
+            }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#vocation{
+  .layui-bg-orange{
+    background-color: var(--themeColor);
+    margin-left:0;
+  }
+  .back{
+    padding:30px;
+    margin-top: 10px;background-color:white;background-repeat: no-repeat;background-position: bottom right;
+  }
+  .title{
+    background-color: var(--themeColor);
+    width: 162px;
+    height: 37px;
+    color: #fff;
+    font-size: 16px;
+    line-height: 37px;
+    text-align: center;
+  }
+  .line {
+    background-color: var(--themeColor);
+    height: 4px;
+  }
+  .last-children-wrap{
+    flex-wrap: wrap;
+    display: flex;
+    .last-children{
+      flex: 25%;
+      flex-grow: 0;
+      margin-bottom: 10px;
+      color: var(--themeColor);
+      &:hover{
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+  .tags-wrap {
+    overflow: hidden;
+    box-sizing: border-box;
+    border-top: 1px solid #e1e1e1;
+    border-left: 1px solid #e1e1e1;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: start;
+    .tag{
+      border-bottom: 1px solid #e1e1e1;
+      border-right: 1px solid #e1e1e1;
+      font-size: 12px;
+      text-align: center;
+      flex: 10%;
+      text-align: center;
+      flex-grow: 0;
+      color: #555;
+      height: 40px;
+      line-height: 40px;
+      cursor: pointer;
+      &:hover{
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+  .sub-title{
+    color: #333;
+    line-height: 26px;
+    padding: 5px 10px;
+    background: #f3f3f3;
+    margin-bottom: 2px;
+  }
+  .voca-title{
+    border-left:4px solid var(--themeColor);
+    padding:0px 5px;
+    color: var(--themeColor);
+  }
+  .row{
+    .rowHead{
+      background-color:#a7e6d4;
+      &:hover{
+        background-color: var(--themeColor);
+        hr{
+          background-color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/views/career/vocation/index.vue → src/views/career/vocation/old-index.vue

@@ -14,7 +14,7 @@
       </div>
       <el-divider></el-divider>
       <el-row class="row" :gutter="20">
-        <el-col style="margin-top: 20px;" :span="6" v-for="(item,index) in layout" :key="index" class="item">
+        <el-col style="margin-top: 20px;" :span="6" v-for="(item,index) in layout" :key="old" class="item">
           <div class="rowHead" style="padding:24px 24px 10px;">
             <p style="font-size: 16px;line-height: 22px;color: #589886;">{{item.enName}}</p>
             <h4 style="margin:0;font-size: 24px;color:#525252;">{{item.type}}</h4>