klp-oa/klp-ui/src/views/lines/index.vue

<template>
  <div>
    <!-- <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="计划执行" name="Plan" v-if="tabs.includes('Plan')"></el-tab-pane>
      <el-tab-pane label="过程跟踪" name="Track" v-if="tabs.includes('Track')"></el-tab-pane>
      <el-tab-pane label="产出实绩" name="Quality" v-if="tabs.includes('Quality')"></el-tab-pane>
      <el-tab-pane label="停机明细" name="Stop" v-if="tabs.includes('Stop')"></el-tab-pane>
      <el-tab-pane label="实绩报表" name="PdoAnalysis" v-if="tabs.includes('PdoAnalysis')"></el-tab-pane>
      <el-tab-pane label="停机报表" name="StopAnalysis" v-if="tabs.includes('StopAnalysis')"></el-tab-pane>
    </el-tabs>  -->

    <keep-alive> 
      <div v-if="ready" class="app-container">
        <component :is="activeName" :baseURL="baseURL" />
      </div> 
    </keep-alive>  
  </div>
</template> 
 
<script>
import { getConfigKey } from '@/api/system/config'
import Plan from './panels/plan/index.vue'
import Track from './panels/track/index.vue'
import Quality from './panels/quality/index.vue'
import Stop from './panels/stop/index.vue'
import PdoAnalysis from './panels/analysis/pdo.vue'
import StopAnalysis from './panels/analysis/stop.vue'
import RollerAnalysis from './panels/analysis/roller.vue'

  export default {
    name: 'Lines',
    components: {
      Plan,
      Track,
      Quality,
      Stop,
      PdoAnalysis,
      StopAnalysis,
      RollerAnalysis
    },
    data() {
      return {
        activeName: 'Track',
        baseURL: '',
        ready: false,
        tabs: []
      }
    },
    created() {
      // 获取路由地址的最后一项
      const route = this.$route.path.split('/').pop()
      getConfigKey(`line.${route}.baseURL`).then(res => {
        this.baseURL = res.msg
        this.ready = true
      }) 
      getConfigKey(`line.${route}.config`).then(res => {
        const tabs = res.msg.split(',')
        // 是否包含Track, 如果不包含则添加
        if (!tabs.includes('Track')) {
          tabs.push('Track')
        }
        this.tabs = tabs
      })
    }
  }
</script>

<style>

</style>