DataOps-web/src/views/dataDeduplication/components/change.vue

<template>
  <div style="height: calc(100% - 48px);">
    <v-tabs v-model="activeIndex" background-color="#f7f8fa">
      <v-tab>元数据新旧差异</v-tab>
      <v-tab>影响关系图谱</v-tab>
    </v-tabs>
    <v-tabs-items v-model="activeIndex" style="flex: 1">
      <v-tab-item>
        <common-component :info="info" class="mt-3" @notesChange="handleNotesChange" />
        <m-table
          :headers="headers"
          :items="items"
          :loading="false"
          :is-tools="false"
          :disable-sort="true"
          :show-select="false"
          :can-delete="false"
          :show-page="false"
          :items-per-page="-1"
          :no-radius="true"
        >
        </m-table>
      </v-tab-item>
      <v-tab-item>
        <m-card style="height: calc(100% - 12px);" no-title class="d-flex flex-column mt-3" bodyStyle="flex: 1">
          <Graph :graphData="info.impact_graph"></Graph>
        </m-card>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import MTable from '@/components/List/table.vue'
import Graph from './graph.vue'
import CommonComponent from './common.vue'

export default {
  name: 'changeComponent',
  components: {
    MCard,
    MTable,
    Graph,
    CommonComponent
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  computed: {
    headers () {
      return [
        { text: '', align: 'start', value: 'title' },
        { text: '元数据（新）', align: 'start', value: 'new' },
        { text: '元数据（旧）', align: 'start', value: 'old' }
      ]
    },
    items () {
      if (!this.info || !this.info.new_meta || !this.info.old_meta) {
        return []
      }
      const newMeta = this.info.new_meta || {}
      const oldMeta = this.info.old_meta.snapshot || {}

      const newTagIds = newMeta.tag_ids && newMeta.tag_ids.length ? newMeta.tag_ids.map(tag => tag.name_zh).join(', ') : '-'
      const oldTagIds = oldMeta.tag_ids && oldMeta.tag_ids.length ? oldMeta.tag_ids.map(tag => tag.name_zh).join(', ') : '-'
      return [
        {
          title: '中文名',
          new: newMeta?.name_zh || '-',
          old: oldMeta?.name_zh || '-'
        },
        {
          title: '英文名',
          new: newMeta?.name_en || '-',
          old: oldMeta?.name_en || '-'
        },
        {
          title: '数据类型',
          new: newMeta?.data_type || '-',
          old: oldMeta?.data_type || '-'
        },
        {
          title: '数据标签',
          new: newTagIds,
          old: oldTagIds
        }
      ]
    }
  },
  methods: {
    handleNotesChange (notes) {
      this.$emit('notesChange', notes)
    }
  }
}
</script>

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