DataOps-web/src/views/dataBook/dataModel/details.vue

<template>
  <div class="content">
    <div>
      <v-tabs v-model="activeIndex">
        <v-tab v-for="item in items" :key="item.path" @click="handleClick(item)">{{ item.title }}</v-tab>
      </v-tabs>
    </div>
    <div style="flex: 1">
      <v-tabs-items v-model="activeIndex">
        <v-tab-item
          v-for="item in items"
          :key="item.path"
        >
          <component :is="item.path" :key="$route.fullPath" />
        </v-tab-item>
      </v-tabs-items>
    </div>
  </div>
</template>

<script>
import { loadDynamicComponents } from '@/utils'
const vueComponent = require.context('./dynamic', true, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)
export default {
  name: 'data-model-details',
  components: {
    ...autoComponent
  },
  data () {
    return {
      activeIndex: 0,
      items: [
        {
          title: '基本信息',
          path: 'info'
        },
        {
          title: '关系图谱',
          path: 'graph'
        },
        {
          title: '元数据成员',
          path: 'metaData'
        },
        {
          title: '数据生产线',
          path: 'lineGraph'
        },
        // {
        //   title: '数据',
        //   path: ''
        // },
        {
          title: '接入数据',
          path: ''
        }
        // {
        //   title: '映射关系',
        //   path: ''
        // },
        // {
        //   title: '数据依赖',
        //   path: ''
        // }
        // {
        //   title: '主数据信息',
        //   path: ''
        // }
      ]
    }
  },
  created () {
    this.$route.meta.title = this.$route.params.name
    const savedTab = new URLSearchParams(window.location.search).get('tab')
    if (!savedTab) {
      this.activeIndex = 0
      return
    }
    this.activeIndex = this.items.findIndex(e => e.path === savedTab)
  },
  methods: {
    handleClick (item) {
      this.$router.push(`${this.$route.path}?tab=${item.path}`)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-window,.v-window-item {
  height: 100%;
}
</style>