数据目录

src/views/dataBook/dataProcess/details.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataProcessDetails'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dataBook/dataProcess/index.vue

@@ -1,12 +1,104 @@
 <template>
-  <div>
-
+  <div class="white pa-3">
+    <m-filter :option="filter" @search="handleSearch" />
+    <m-table
+      class="mt-3"
+      :loading="loading"
+      :headers="headers"
+      :items="items"
+      :total="total"
+      :page-info="pageInfo"
+      :show-select="false"
+      :can-delete="false"
+      @add="handleAdd"
+      @pageHandleChange="pageHandleChange"
+      @sort="handleSort"
+    >
+      <template #name_zh="{ item }">
+        <span class="defaultLink">{{ item.name_zh }}</span>
+      </template>
+      <template #status="{ item }">
+        <v-chip small :color="item.status === 'active' ? 'success' : 'error'">
+          {{ item.status === 'active' ? '启用' : '禁用' }}
+        </v-chip>
+      </template>
+    </m-table>
   </div>
 </template>
 
 <script>
+import MFilter from '@/components/Filter'
+import MTable from '@/components/List/table.vue'
+import { api } from '@/api/dataGovernance'
 export default {
-  name: 'dataProcess'
+  name: 'dataBookDataProcess',
+  components: { MFilter, MTable },
+  data () {
+    return {
+      loading: false,
+      show: false,
+      filter: {
+        list: [
+          { type: 'textField', value: '', label: '关键词', key: 'title' }
+        ]
+      },
+      queryData: {
+        title: null
+      },
+      headers: [
+        { text: '中文名称', align: 'start', value: 'name_zh' },
+        { text: '英文名称', align: 'start', value: 'name_en' },
+        { text: '状态', align: 'center', value: 'status' },
+        { text: '分类', align: 'center', value: 'category' },
+        { text: '作者', align: 'center', value: 'leader' },
+        { text: '机构', align: 'center', value: 'organization' },
+        { text: '描述', align: 'start', value: 'describe' },
+        { text: '创建时间', align: 'start', value: 'created_at' },
+        { text: '更新时间', align: 'start', value: 'updated_at' }
+      ],
+      items: [],
+      orders: [],
+      pageInfo: {
+        size: 10,
+        current: 1
+      },
+      total: 0
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    async init () {
+      this.loading = true
+      try {
+        const { data } = await api.getDataFlowList({
+          page: this.pageInfo.current,
+          page_size: this.pageInfo.size,
+          search: this.queryData.title || undefined
+        })
+        this.items = data.list
+        this.total = data.pagination.total
+      } catch (error) {
+        this.$snackbar.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch (val) {
+      Object.assign(this.queryData, val)
+      this.pageInfo.current = 1
+      this.init()
+    },
+    pageHandleChange (page) {
+      this.pageInfo.current = page
+      this.init()
+    },
+    handleSort (val) {
+      this.orders = val
+      this.init()
+    }
+  }
 }
 </script>
 

src/views/dataGovernance/dataProcess/index.vue

@@ -38,7 +38,7 @@ import MDialog from '@/components/Dialog'
 import EditPage from './components/edit'
 import { api } from '@/api/dataGovernance'
 export default {
-  name: 'template-name',
+  name: 'dataProcess',
   components: { MFilter, MTable, MDialog, EditPage },
   data () {
     return {