newcpms/ui/src/views/process/moc/index.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="永久MOC" name="first">
        <PermanentMoc item="1" typename="" v-if="isFirst"></PermanentMoc>
      </el-tab-pane>
      <el-tab-pane label="临时MOC" name="second">
        <TemporaryMoc item="2" typename="" v-if="isSecond"></TemporaryMoc>
      </el-tab-pane>
      <el-tab-pane label="带压消漏清单" name="third">
        <Aquifier item="3" typename="" v-if="isThird"></Aquifier>
      </el-tab-pane>
      <el-tab-pane label="临时设施、其它" name="fourth">
        <Facility item="4" typename="" v-if="isFourth"></Facility>
      </el-tab-pane>
      <el-tab-pane label="仪表参数修改" name="fifth">
        <Interlock item="5" typename="" v-if="isFifth"></Interlock>
      </el-tab-pane>
      <el-tab-pane label="汇总" name="sixth">
        <Summary item="6" typename="" v-if="isSixth"></Summary>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import PermanentMoc from '@/views/process/moc/permanentMoc/index.vue'
  import TemporaryMoc from '@/views/process/moc/temporaryMoc/index.vue'
  import Aquifier from '@/views/process/moc/aquifier/index.vue'
  import Facility from '@/views/process/moc/facility/index.vue'
  import Interlock from '@/views/process/moc/interlock/index.vue'
  import Summary from '@/views/process/moc/summary/index.vue'

  export default {
    name: "Moc",
    components: {
      PermanentMoc, TemporaryMoc, Aquifier, Facility, Interlock, Summary
    },
    data() {
      return {
        // 默认第一个Tab
        activeName: 'first',
        isFirst: true,
        isSecond: false,
        isThird: false,
        isFourth: false,
        isFifth: false,
        isSixth: false
      }
    },
    methods: {
      handleClick(tab) {
        if (tab.name === 'first') {
          this.isFirst = true
          this.isSecond = false
          this.isThird = false
          this.isFourth = false
          this.isFifth = false
          this.isSixth = 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') {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isFourth = false
          this.isFifth = true
          this.isSixth = false
        }else if (tab.name === 'sixth') {
          this.isFirst = false
          this.isSecond = false
          this.isThird = false
          this.isFourth = false
          this.isFifth = false
          this.isSixth = true
        }
      }
    }
  };
</script>

<style scoped>

</style>