Left.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-20 11:30:14
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-28 09:19:38
 * @FilePath: /danger-manage-web/src/views/myLessons/components/Left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="lession-left-wrapper flex">
    <el-tabs class="top" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待学习" name="first"></el-tab-pane>
      <el-tab-pane label="已学习" name="second"></el-tab-pane>
    </el-tabs>
    <div class="middle flex">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="currentTabComponent" @examination="examination" :state="state" :list="list"></component>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
import LearnAfter from "./LearnAfter";
import LearnBefore from "./LearnBefore";
import {getUserLessons} from "@/api/educationPlanExam/lessonsProgram"
export default {
  name: "lession-left",
  components: {
    // LearnAfter,
    // LearnBefore,
  },
  data() {
    return {
      activeName: "first",
      currentTabComponent: LearnBefore,
      list:[],
      state:{
        "0":'未完成',
        "1":'未通过',
        "2":"已完成",
        "3":"已过期",
        "4":"未开始"
      },
    };
  },
  created(){
    this.getUserLessons();
  },
  methods: {
    getUserLessons(){
      getUserLessons().then(res=>{
        console.log(res.rows);
        this.list = res.rows;
      })
    },
    handleClick(tab) {
      if (tab.paneName == "first") {
        this.currentTabComponent = LearnBefore;
      } else {
        this.currentTabComponent = LearnAfter;
      }
    },
    examination(e){
      this.$emit('examination',e)
    }
  },
};
</script>
<style lang="scss" scoped>
.lession-left-wrapper {
  padding: 5px 26px 0;
  height: 100%;
  width: 100%;
  flex-direction: column;
  .top {
    // margin-bottom: 47px;
  }
  .middle {
    flex: 1;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
  }
  // .bottom{
  //   max-height: 105px;
  //   height: 11%;
  // }
}
</style>