feat(数据库): 数据表展示

src/apis/database.ts

@@ -49,3 +49,12 @@ export function handleUpdateDataBase<T>(payload: object) {
 export function fetchGetDataBaseDetail<T>(id: string) {
   return request.post<T>(`/databaseRest/getDetail.json?id=${id}`)
 }
+
+/**
+ *
+ * @param id 数据库Id
+ * @returns 获取数据库表列表
+ */
+export function fetchGetDBTableList<T>(id: string) {
+  return request.post<T>(`/databaseRest/getTableInfo.json?id=${id}`)
+}

src/router/modules/personal-space.ts

@@ -57,6 +57,16 @@ export default [
           },
         ],
       },
+      {
+        path: '/personal-space/database/table/:id',
+        name: 'PersonalSpaceDBTable',
+        meta: {
+          rank: 1001,
+          title: 'router_title_module.personal',
+          belong: 'PersonalSpace',
+        },
+        component: () => import('@/views/personal-space/personal-db-table/personal-db-table.vue'),
+      },
 
       {
         path: '/knowledge/document/:id',

src/views/personal-space/personal-db-table/columns.tsx

+import { type ComposerTranslation } from 'vue-i18n'
+import { DBTableItemInterface } from './type'
+// import { formatDateTime } from '@/utils/date-formatter'
+
+export function createDatabaseColumn(_config: { t?: ComposerTranslation } = {}) {
+  return [
+    {
+      title: () => <span>数据表名称</span>,
+      key: 'name',
+      align: 'left',
+      ellipsis: {
+        tooltip: true,
+      },
+      width: 210,
+      fixed: 'left',
+      render(row: DBTableItemInterface) {
+        return row.name || '--'
+      },
+    },
+    // {
+    //   title: () => <span>数据表中文名</span>,
+    //   key: 'chineseName',
+    //   align: 'left',
+    //   ellipsis: {
+    //     tooltip: true,
+    //   },
+    //   width: 380,
+    //   render(row: DBTableItemInterface) {
+    //     return row.chineseName || '--'
+    //   },
+    // },
+    {
+      title: () => <span>数据表描述</span>,
+      key: 'docs',
+      align: 'left',
+      ellipsis: {
+        tooltip: true,
+      },
+      width: 170,
+      render(row: DBTableItemInterface) {
+        return row.docs || '--'
+      },
+    },
+    // {
+    //   title: () => <span>创建时间</span>,
+    //   key: 'createdTime',
+    //   align: 'left',
+    //   ellipsis: {
+    //     tooltip: true,
+    //   },
+    //   width: 170,
+    //   render(row: DBTableItemInterface) {
+    //     return row.createdTime ? formatDateTime(row.createdTime) : '--'
+    //   },
+    // },
+    // {
+    //   title: () => <span>更新时间</span>,
+    //   key: 'updatedTime',
+    //   align: 'left',
+    //   ellipsis: {
+    //     tooltip: true,
+    //   },
+    //   width: 170,
+    //   render(row: DBTableItemInterface) {
+    //     return row.updatedTime ? formatDateTime(row.updatedTime) : '--'
+    //   },
+    // },
+    {
+      title: () => <span>数据量</span>,
+      key: 'dataSize',
+      align: 'left',
+      ellipsis: {
+        tooltip: true,
+      },
+      width: 170,
+      render(row: DBTableItemInterface) {
+        return row.dataSize || '--'
+      },
+    },
+    // {
+    //   title: () => <span>{t('common_module.data_table_module.action')}</span>,
+    //   key: 'action',
+    //   align: 'left',
+    //   ellipsis: {
+    //     tooltip: true,
+    //   },
+    //   width: 190,
+    //   fixed: 'right',
+    //   render(row: DatabaseItemInterface) {
+    //     return (
+    //       <div>
+    //         <span
+    //           className='text-theme-color mr-5 cursor-pointer hover:opacity-80'
+    //           onClick={() => handleDatabaseTableAction('view', row.id)}
+    //         >
+    //           {t('common_module.data_table_module.view')}
+    //         </span>
+    //         <span
+    //           className='text-theme-color mr-5 cursor-pointer hover:opacity-80'
+    //           onClick={() => handleDatabaseTableAction('edit', row.id)}
+    //         >
+    //           {t('common_module.data_table_module.edit')}
+    //         </span>
+    //         <span
+    //           className='text-error-font-color mr-5 cursor-pointer hover:opacity-80'
+    //           onClick={() => handleDatabaseTableAction('delete', row.id)}
+    //         >
+    //           {t('common_module.data_table_module.delete')}
+    //         </span>
+    //       </div>
+    //     )
+    //   },
+    // },
+  ]
+}

src/views/personal-space/personal-db-table/personal-db-table.vue

+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+// import { Search } from '@icon-park/vue-next'
+import useTableScrollY from '@/composables/useTableScrollY'
+// import { usePagination } from '@/composables/usePagination.ts'
+// import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
+import { createDatabaseColumn } from './columns.tsx'
+import { DBTableItemInterface } from './type'
+import { fetchGetDBTableList } from '@/apis/database.ts'
+import { useRoute } from 'vue-router'
+
+const { t } = useI18n()
+const route = useRoute()
+
+const { pageContentWrapRef, tableContentY } = useTableScrollY(46 + 48)
+// const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+
+// const searchDBTableInputValue = ref('')
+const isSearchEmptyList = ref(false)
+const dbTableList = ref<DBTableItemInterface[]>([])
+const dbTableListLoading = ref(true)
+
+const dbTableColumns = createDatabaseColumn({ t })
+
+const emptyTableDataText = computed(() => {
+  return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
+})
+
+// const isLoadingPagination = computed(() => {
+//   return tableContentY.value > 0
+// })
+
+/* created */
+;(function () {
+  getDBTableList()
+})()
+
+function getDBTableList() {
+  fetchGetDBTableList<{ tableName: string; tableComment: string; tableRows: number; tableColumn: number }[]>(
+    route.params.id as string,
+  )
+    .then((res) => {
+      if (res.code !== 0) return ''
+
+      const tableData: DBTableItemInterface[] = res.data.map((dataItem) => {
+        return {
+          name: dataItem.tableName,
+          docs: dataItem.tableComment,
+          dataSize: `${dataItem.tableRows || '-'}行, ${dataItem.tableColumn || '-'}列`,
+        }
+      })
+
+      dbTableList.value = tableData
+    })
+    .finally(() => {
+      dbTableListLoading.value = false
+    })
+}
+</script>
+
+<template>
+  <div ref="pageContentWrapRef" class="h-full w-full">
+    <!-- <div class="mb-[18px] flex justify-end">
+      <n-input v-model:value="searchDBTableInputValue" :placeholder="t('common_module.search')" class="w-[256px]!">
+        <template #suffix>
+          <Search theme="outline" size="16" fill="#999" class="cursor-pointer" />
+        </template>
+      </n-input>
+    </div> -->
+
+    <div class="rounded-[10px] bg-white p-[23px]">
+      <n-data-table
+        :loading="dbTableListLoading"
+        :bordered="true"
+        :bottom-bordered="true"
+        :single-line="false"
+        :data="dbTableList"
+        :columns="dbTableColumns"
+        :max-height="tableContentY"
+      >
+        <template #empty>
+          <div :style="{ height: tableContentY + 'px' }" class="flex items-center justify-center">
+            <div class="flex flex-col items-center justify-center">
+              <div
+                class="mb-5 h-[68px] w-[68px]"
+                :class="isSearchEmptyList ? 'bg-px-search_empty_list-png' : 'bg-px-empty_list-png'"
+              />
+              <p class="text-gray-font-color select-none">{{ emptyTableDataText }}</p>
+            </div>
+          </div>
+        </template>
+      </n-data-table>
+    </div>
+
+    <!-- <footer v-show="isLoadingPagination" class="flex justify-end">
+      <CustomPagination
+        :paging-info="paginationData"
+        @update-page-no="handlePageNoChange"
+        @update-page-size="handlePageSizeChange"
+      />
+    </footer> -->
+  </div>
+</template>

src/views/personal-space/personal-db-table/type.d.ts

+export interface DBTableItemInterface {
+  name: string
+  // chineseName: string
+  docs: string
+  // createdTime: Data
+  // updatedTime: Data
+  dataSize: string
+}