front/src/views/career/plan/ProfessLib.vue

<template>
  <div>
    <el-row >
      <el-col>
        <el-card style="height:158px;margin: 10px auto;">
          <div style=" display: flex;justify-content: space-between;">
          <div style="width:400px;margin-left:52px;display: inline-block;">
            <p style="font-size:24px;font-weight: 600;color:#A6A6A6;text-transform: uppercase;margin-top:32px">Professional library</p>
            <p style="font-weight: 600;color: #414141;font-size:24px;margin: 10px 0;">专业库</p>
            <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 21px;"></div>
          </div>
           <el-image :src="require('@/assets/images/icon_pro.png')"></el-image>
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card style="margin: 0 auto;" :style="height">
          <el-input style="width:300px;float: right;bottom:15px;right:24px;"
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
          v-model="input1">
          </el-input>
          <div style="margin-top:40px">
            <el-tabs v-model="activeName" type="card" @tab-click="ZBigCategClick">
            <el-tab-pane label="本科" name="first">
            <div class="eltabs">
            <div style="width:291px;height:56px;background: #47C6A2;color: #FFFFFF;line-height: 56px;font-weight: 400;font-size:14px;text-align: center">专业大类</div>
            <el-tabs tab-position="left" v-model="BigCategName" @tab-click="BigCategClick">
            <el-tab-pane  v-for="i in BigCategData" :key="i.id" :name="i.code">
              <div slot="label"  >{{i.name}}</div>
              <el-row :gutter="10">
                <el-col :span="7">
                  <el-menu
                    @close="handleClose"
                    :default-openeds="opens"
                    :default-active="active"
                    @select="Prodetailclck"
                  >
                    <el-card>
                      <el-submenu index="1" style="background:#fff">
                        <template slot="title">
                          <el-image style="filter: drop-shadow(#47C6A2 85px 0);position: relative;left: -57px;" :src="require('@/assets/images/icon_zhuanye.png')"></el-image>
                          <span slot="title" style="height:33px ;font-size: 24px;color:#47C6A2;font-weight: 600;display: inline-block;margin-top: 20px;">专业类</span>
                          <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 25px;margin-left: 30px;"></div>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item :index="i.code" v-for="i in ProCategoryData" :key="i.id">{{i.name}}</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                    </el-card>
                  </el-menu>
                </el-col>
                <el-col :span="17" style="padding-right:10px;">
                  <el-table :data="ProDetailData"  border>
                    <el-table-column prop="name" label="专业名称" >
                    </el-table-column>
                    <el-table-column prop="code" label="专业代码" >
                    </el-table-column>
                    <el-table-column prop="id" label="专业详情" >
                      <template slot-scope="scope">
                        <div style="color:#FFA401;font-size: 14px;cursor:pointer;" @click="goDetail(scope.row.id)">查看>>></div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>

              </el-row>
            </el-tab-pane>
            </el-tabs>
            </div>
            </el-tab-pane>
              <el-tab-pane label="高职专科" name="second">
              <div class="eltabs">
            <div style="width:291px;height:56px;background: #47C6A2;color: #FFFFFF;line-height: 56px;font-weight: 400;font-size:14px;text-align: center">专业大类</div>
           <el-tabs tab-position="left" v-model="ZBigCategName" @tab-click="getBigCategClick">
            <el-tab-pane  v-for="i in ZBigCategData" :key="i.id" :name="i.code">
              <div slot="label">{{i.name}}</div>
              <el-row :gutter="10">
                <el-col :span="7">
                  <el-menu
                    class="elmenu"
                    @close="handleClose"
                    :default-openeds="opens"
                    :default-active="Zactive"
                    @select="ZProdetailclck"
                  >
                    <el-card>
                      <el-submenu index="1" style="background:#fff">
                        <template slot="title" >
                          <el-image style="filter: drop-shadow(#47C6A2 85px 0);position: relative;left: -57px;" :src="require('@/assets/images/icon_zhuanye.png')"></el-image>
                          <span slot="title" style="height:33px ;font-size: 24px;color:#47C6A2;font-weight: 600;display: inline-block;margin-top: 20px;">专业类</span>
                          <div style="width: 41px;height: 4px;background: #47C6A2;margin-top: 25px;margin-left: 30px;"></div>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item :index="i.code" v-for="i in ZProCategoryData" :key="i.id">{{i.name}}</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                    </el-card>
                  </el-menu>
                </el-col>
                <el-col :span="17" style="padding-right:10px;">
                  <el-table :data="ProDetailData"  border>
                    <el-table-column prop="name" label="专业名称" >
                    </el-table-column>
                    <el-table-column prop="code" label="专业代码" >
                    </el-table-column>
                    <el-table-column prop="id" label="专业详情" >
                      <template slot-scope="scope">
                        <div style="color:#FFA401;font-size: 14px;cursor:pointer;" @click="goDetail(scope.row.id)">查看>>></div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          </div>
            </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--<BottomP></BottomP>-->
  </div>
</template>
<script>
 import {
    getProfesslibData
  } from "@/api/webApi/professlib"
export default {
  name:'OldProfessLib',
  data() {
    return {
      input1:'',
      opens:[],
      height:'height:890px',
      iscollapse:false,
      activeName:'first',
      active:'51',
      BigCategName:'01',
      type:'本科',
      level:1,
      code: "0101",
      BigCategData:[],
      ProCategoryData:[],
      ProDetailData:[],
      types:'高职专科',
      levels:1,
      codes:'',
      Zactive:'5101',
      ZBigCategName:'51',
      ZBigCategData:[],
      ZProCategoryData:[],
      ZProDetailData:[]
    }
  },
  mounted() {
   this.getBigCategData()

  },
  methods: {
     handleClose(keyPath) {
       // this.$refs.menus.open(keyPath);
          this.opens = keyPath
		    },
        //点击大类
    BigCategClick(tab) {
      this.level = 2
      this.getBigCategData(tab.name)
    },
    // 点击专业类
    Prodetailclck(data) {
      this.level = 3
      this.getBigCategData(data)
    },
    //专业大类
      getBigCategData(data) {
        getProfesslibData({
          type:this.type,
          level:this.level,
          code:data
        }).then(res => {
          if(res.rows.length != 0){
            if(res.rows[0].level == 1){
            this.BigCategData = res.rows
          }else if(res.rows[0].level == 2){
            this.ProCategoryData = res.rows
          }else if(res.rows[0].level == 3){
             this.ProDetailData = res.rows
          }
          }else {
            this.BigCategData = ''
            this.ProCategoryData = ''
            this.ProDetailData = ''
          }

        })
      },
      goDetail(id) {
        this.$router.push(
          {
            path: '/career/plan/ProfessLibDetail',
            query:
            {
              majorId: id
              }
          });
      },
      // 高职专科
      getzkdata() {
        getProfesslibData({
            type:this.types,
            level:this.levels,
            code:this.codes
        }).then(res => {
          if(res.rows.length != 0){
            if(res.rows[0].level == 1){
            this.ZBigCategData = res.rows
          }else if(res.rows[0].level == 2){
            this.ZProCategoryData = res.rows
          }else if(res.rows[0].level == 3){
             this.ProDetailData = res.rows
          }
          }else {
            this.ZBigCategData = []
            this.ZProCategoryData = []
            this.ProDetailData = []
          }
        })
        },

      ZBigCategClick(e) {
        if(e.label == "高职专科") {
          this.height = 'height:1300px;'
          this.getzkdata()
        }else {
        this.height = 'height:890px;'
        this.level = 3
        let code = this.ProCategoryData[0].code
        this.getBigCategData(code)
        }
      },
      //点击高职大类
      getBigCategClick(top) {
        console.log(top);
        this.levels = 2
        this.codes = top.name
        this.getzkdata()

      },
      //点击高职专业类
      ZProdetailclck(data) {
        this.levels = 3
        this.codes = data
        this.getzkdata()

      }
  },
  watch: {
    BigCategData(val) {
      if(val){
        this.level = 2
        let code = this.BigCategData[0].code
        this.getBigCategData(code)
      }
    },
    ProCategoryData(val) {
      if(val) {
        this.active = val[0].code
        this.level = 3
        let code = this.ProCategoryData[0].code
        this.getBigCategData(code)
      }
    },
    ZBigCategData(val) {
      if(val){
        this.levels = 2
         this.codes = this.ZBigCategData[0].code
        this.getzkdata()

      }
    },
    ZProCategoryData(val) {
      if(val) {
        this.Zactive = val[0].code
        this.levels = 3
        this.codes = this.ZProCategoryData[0].code
        this.getzkdata()

      }
    }
  }

}
</script>
<style scoped>
.el-card /deep/.el-card__body{
padding: 0;

}
.el-card /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav  {
  border: none;

}
.el-card /deep/.el-tabs__item.el-tabs__item.is-active {
  color: #fff;
  background: #47C6A2;
  border: none;

}
.el-card /deep/.el-tabs__item {
 background: #EEEEEE;
}
.el-card /deep/.el-tabs__item:hover {
  color: #fff;
  background: #47C6A2;
}
.el-card /deep/ .el-tabs--card > .el-tabs__header{
  border-bottom: 5px solid #47C6A2;
}
.el-input /deep/ .el-input__inner{
  border-radius: 30px;
}


/* 专业大类 */
.eltabs /deep/ .el-tabs__header {
  width: 290px;
}
.eltabs /deep/.el-tabs__item {
  width: 240px;
  height: 56px;
  margin:5px 0 0 50px;
  color: #414141;;
  text-align: center;
  line-height: 56px;
  background: #FEFFF4;
}
.eltabs /deep/.el-menu-item {
  padding-left:50px !important;
}
.eltabs /deep/.el-tabs__active-bar {
  display: none;
}
.eltabs /deep/.el-tabs__item.el-tabs__item.is-active {
  width: 240px;
  margin-left: 50px;
  color: #fff;
  background: #47C6A2;
  border: none;
}
.eltabs /deep/.el-tabs__item:hover {
  width: 240px;
  margin-left: 50px;
  color: #fff;
  background: #47C6A2;

}
.eltabs /deep/ .el-tabs__nav{
  width: 290px;
  background: #FEFFF4;

}
.el-menu /deep/ .el-submenu .el-submenu__title .el-submenu__icon-arrow {
        visibility: hidden
    }
.el-menu /deep/ .el-submenu .el-submenu__title{
  height: 120px;

}
.el-menu /deep/ .el-submenu .el-submenu__title:hover{
 background-color:#fff;
 cursor:default
}
.eltabs /deep/.el-image {
  left: 30px;
}
.eltabs /deep/ .is-active{
  background: #edf9f6;
}
.el-table /deep/.cell{
  text-align: center;
}

/* 高职 */
.eltabs /deep/ .el-card {
  height: 1144px;
}
.elmenu /deep/ .is-active{
  background: #edf9f6;
}
</style>