DataOps-web/src/views/dataBook/dataResource/index.vue

<template>
  <div class="pa-3 white">
    <m-filter @search="handleSearch"></m-filter>
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :show-select="false"
      :is-tools="false"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #status="{ item }">
        <v-chip
          :color="item.status ? 'success' : 'error'"
          small
        >
          {{ item.status ? '已启用' : '已禁用'}}
        </v-chip>
      </template>
      <template #tag="{ item }">
        <m-graph-drill
          :id="item.tag?.id"
          :title="`${item.tag?.name}血缘图谱`"
        >{{ item.tag?.name }}</m-graph-drill>
      </template>
      <template #blood_count="{ item }">
        <m-graph-drill
          :id="item.id"
          :title="`${item.name}血缘图谱`"
          :to-api="api.getResourceGraph"
        >{{ item.blood_count }}</m-graph-drill>
      </template>
      <template #type="{ item }">
        {{ item.type === 'unstructured' ? '非结构化' : '结构化' }}
      </template>
      <template #name="{ item }">
        <div class="defaultLink" @click="handleDetails(item)">{{ item.name }}</div>
      </template>
      <template #alias="item">
        <v-chip v-for="chip in item.alias" :key="chip">{{ chip }}</v-chip>
      </template>
    </m-table>
  </div>
</template>

<script>
import MFilter from '../../dataGovernance/components/Filter'
import MTable from '@/components/List/table.vue'
import MGraphDrill from '../components/mGraphDrill'
import { api } from '@/api/dataGovernance'
import {
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
export default {
  name: 'data-book-resource',
  components: { MFilter, MTable, MGraphDrill },
  data () {
    return {
      api,
      loading: false,
      show: false,
      queryData: {
        name: null
      },
      headers: [
        { text: '中文名', value: 'name' },
        { text: '英文名', value: 'en_name' },
        { text: '分类', value: 'category' },
        { text: '描述', value: 'describe' },
        { text: '标签', value: 'tag' },
        { text: '状态', value: 'status' },
        { text: '血缘关系数量', value: 'blood_count', align: 'center' },
        { text: '更新频率', value: 'frequency' },
        { text: '数据敏感度', value: 'data_sensitivity' },
        { text: '创建时间', value: 'time' }
      ],
      itemData: {},
      items: [],
      // orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  created () {
    this.init()
  },
  methods: {
    handleClose () {
      this.show = false
      this.init()
    },
    async init () {
      this.loading = true
      api.getResourceList({
        ...this.pageInfo,
        ...this.queryData,
        type: 'all'
      })
        .then(({ data }) => {
          this.items = data.records.map(e => {
            e.frequency = frequency.find(_e => _e.value === e.frequency)?.label
            e.data_sensitivity = sensitivity.find(_e => _e.value === e.data_sensitivity)?.label
            return e
          })
          this.total = data.total
        })
        .catch(error => {
          this.$snackbar.error(error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleDetails ({ id, name }) {
      this.$router.push(`${this.$route.path}/details/${id}/${name}`)
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>