newcpms/ui/src/views/training/bccnew/tsnew/trainingPlan.vue

<template>
  <div class="app-container" style="padding: 0 0 0 0">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="装置级培训" name="first">
        <firstplan-bccnew :newId="newId"  item="1" typename="firstplan" v-if="isFirst"></firstplan-bccnew>
      </el-tab-pane>
      <el-tab-pane label="导师带徒（裂解）" name="second" v-if="planType == 1">
        <score :newId="newId" :planType="1" v-if="isSecond"/>
      </el-tab-pane>
      <el-tab-pane label="导师带徒（压缩）" name="third" v-if="planType == 2">
        <score :newId="newId" :planType="2" v-if="isThird"/>
      </el-tab-pane>
      <el-tab-pane label="导师带徒（分离）" name="fourth" v-if="planType == 3">
        <score :newId="newId" :planType="3" v-if="isFourth"/>
      </el-tab-pane>
      <el-tab-pane label="导师带徒（芳烃）" name="fifth" v-if="planType == 4">
        <score :newId="newId" :planType="4" v-if="isFifth"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import List from "@/views/training/newstaff/firstplan/index.vue";
import Score from "@/views/training/bccnew/tsnew/score.vue";
import {listLjplandsdt} from "@/api/training/bccnew/ljplandsdt";
import {listYsplandsdt} from "@/api/training/bccnew/ysplandsdt";
import {listFlplandsdt} from "@/api/training/bccnew/flplandsdt";
import {listFtplandsdt} from "@/api/training/bccnew/ftplandsdt";
import {getTsnew} from "@/api/training/bccnew/tsnew";
import Firstplan from "@/views/training/newstaff/firstplan/index.vue";
import FirstplanBccnew from "@/views/training/bccnew/firstplan/index.vue";

export default {
  name: "trainingPlan",
  components: {FirstplanBccnew, Firstplan, Score, List},
  data() {
    return {
      dsdtList: [],
      clientHeight: 300,
      // 默认第一个Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFifth: false,
      isSixth: false,
      planType: 1,
      newId: ''
    }
  },
  created() {
    //设置表格高度对应屏幕高度
    this.newId = this.$route.params && this.$route.params.newId;
    getTsnew(this.newId).then(response => {
      this.planType = response.data.planType;
    });
  },
  methods: {
    handleClick(tab) {
      console.log(tab.name)
      this.dsdtList = [];
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSix1th = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
      } else if (tab.name === 'third') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = true
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
      } else if (tab.name === 'fourth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = true
        this.isFifth = false
        this.isSixth = false
      } else if (tab.name === 'fifth') {
        listLjplandsdt({newId: this.newId}).then(res => {
          this.dsdtList = res.data;
        })
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = true
        this.isSixth = false
      } else if (tab.name === 'sixth') {
        listLjplandsdt({newId: this.newId}).then(res => {
          this.dsdtList = res.data;
        })
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = true
      }
    }
  }
};
</script>
<style scoped>

</style>