From bc9c1318a5409393c0691e3d0a8c341fc504f00c Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Thu, 18 Apr 2024 16:52:46 +0800
Subject: [PATCH] [Core] [Source] [Metadata] Refactor metadata er diagram

---
 core/datacap-ui/src/model/table.ts            |  1 +
 core/datacap-ui/src/router/default.ts         |  9 ++++
 .../metadata/components/MetadataContent.vue   |  8 ++--
 ...ErDiagram.vue => SourceTableErDiagram.vue} | 43 ++++++++-----------
 .../pages/admin/source/SourceTableInfo.vue    |  3 +-
 5 files changed, 34 insertions(+), 30 deletions(-)
 rename core/datacap-ui/src/views/pages/admin/source/{components/TableErDiagram.vue => SourceTableErDiagram.vue} (61%)

diff --git a/core/datacap-ui/src/model/table.ts b/core/datacap-ui/src/model/table.ts
index 6a99b9de..8ebb0a0d 100644
--- a/core/datacap-ui/src/model/table.ts
+++ b/core/datacap-ui/src/model/table.ts
@@ -21,6 +21,7 @@ export interface TableModel
     autoIncrement?: string
     database?: DatabaseModel
     columns?: Array<ColumnModel>
+    code?: string
 }
 
 export class TableRequest
diff --git a/core/datacap-ui/src/router/default.ts b/core/datacap-ui/src/router/default.ts
index 3a88ff52..e5a98f69 100644
--- a/core/datacap-ui/src/router/default.ts
+++ b/core/datacap-ui/src/router/default.ts
@@ -266,6 +266,15 @@ const createAdminRouter = (router: any) => {
                             type: 'statement'
                         },
                         component: () => import('@/views/pages/admin/source/SourceTableStatement.vue')
+                    },
+                    {
+                        path: 'd/:database/t/erDiagram/:table',
+                        meta: {
+                            title: 'common.source',
+                            isRoot: false,
+                            type: 'erDiagram'
+                        },
+                        component: () => import('@/views/pages/admin/source/SourceTableErDiagram.vue')
                     }
                 ]
             },
diff --git a/core/datacap-ui/src/views/layouts/metadata/components/MetadataContent.vue b/core/datacap-ui/src/views/layouts/metadata/components/MetadataContent.vue
index 26c2ba63..5f273203 100644
--- a/core/datacap-ui/src/views/layouts/metadata/components/MetadataContent.vue
+++ b/core/datacap-ui/src/views/layouts/metadata/components/MetadataContent.vue
@@ -27,9 +27,11 @@
               <span>{{ $t('source.common.statement') }}</span>
             </div>
           </TabsTrigger>
-          <TabsTrigger value="erDiagram" class="cursor-pointer">
-            <Wind :size="18" class="mr-2"/>
-            {{ $t('source.common.erDiagram') }}
+          <TabsTrigger value="erDiagram" class="cursor-pointer" @click="handlerChange">
+            <div class="flex space-x-2">
+              <Wind :size="18"/>
+              <span>{{ $t('source.common.erDiagram') }}</span>
+            </div>
           </TabsTrigger>
         </TabsList>
       </template>
diff --git a/core/datacap-ui/src/views/pages/admin/source/components/TableErDiagram.vue b/core/datacap-ui/src/views/pages/admin/source/SourceTableErDiagram.vue
similarity index 61%
rename from core/datacap-ui/src/views/pages/admin/source/components/TableErDiagram.vue
rename to core/datacap-ui/src/views/pages/admin/source/SourceTableErDiagram.vue
index 8d22cc48..7a3760d9 100644
--- a/core/datacap-ui/src/views/pages/admin/source/components/TableErDiagram.vue
+++ b/core/datacap-ui/src/views/pages/admin/source/SourceTableErDiagram.vue
@@ -8,26 +8,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, watch } from 'vue'
-import ColumnService from '@/services/column'
-import { StructureModel } from '@/model/structure.ts'
-import { toNumber } from 'lodash'
+import ColumnService from '@/services/column.ts'
 import CircularLoading from '@/views/components/loading/CircularLoading.vue'
 import ErDiagram from '@/views/components/diagram/ErDiagram.vue'
-import { ErDiagramOptions } from '@/views/components/diagram/ErDiagramOptions'
+import { ErDiagramOptions } from '@/views/components/diagram/ErDiagramOptions.ts'
 
 export default defineComponent({
-  name: 'TableErDiagram',
+  name: 'SourceTableErDiagram',
   components: { ErDiagram, CircularLoading },
-  props: {
-    info: {
-      type: Object as () => StructureModel | null
-    }
-  },
-  created()
-  {
-    this.handlerInitialize()
-    this.watchId()
-  },
   data()
   {
     return {
@@ -35,29 +23,34 @@ export default defineComponent({
       options: null as unknown as ErDiagramOptions
     }
   },
+  created()
+  {
+    this.handlerInitialize()
+    this.watchChange()
+  },
   methods: {
     handlerInitialize()
     {
-      this.loading = true
-      if (this.info) {
-        ColumnService.getAllByTable(toNumber(this.info.applyId))
+      const code = this.$route?.params.table as string
+      if (code) {
+        this.loading = true
+        ColumnService.getAllByTable(code)
                      .then(response => {
-                       if (response.status) {
+                       if (response.status && response.data?.length > 0) {
+                         const table = response.data[0]
                          this.options = new ErDiagramOptions()
-                         this.options.table = { id: toNumber(this.info?.applyId), name: this.info?.title as string }
+                         this.options.table = { id: table.id, name: table.name }
                          this.options.columns = response.data
                        }
                      })
                      .finally(() => this.loading = false)
       }
     },
-    watchId()
+    watchChange()
     {
       watch(
-          () => this.info,
-          () => {
-            this.handlerInitialize()
-          }
+          () => this.$route?.params.table,
+          () => this.handlerInitialize()
       )
     }
   }
diff --git a/core/datacap-ui/src/views/pages/admin/source/SourceTableInfo.vue b/core/datacap-ui/src/views/pages/admin/source/SourceTableInfo.vue
index 788afc5c..7a5e62e5 100644
--- a/core/datacap-ui/src/views/pages/admin/source/SourceTableInfo.vue
+++ b/core/datacap-ui/src/views/pages/admin/source/SourceTableInfo.vue
@@ -127,7 +127,6 @@ import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { ToastUtils } from '@/utils/toast'
 import { Textarea } from '@/components/ui/textarea'
-import { toNumber } from 'lodash'
 
 export default defineComponent({
   name: 'SourceTableInfo',
@@ -182,7 +181,7 @@ export default defineComponent({
           type: SqlType.ALTER,
           value: this.dataInfo.autoIncrement
         }
-        TableService.getData(toNumber(this.dataInfo.id), configure)
+        TableService.getData(this.dataInfo.code as string, configure)
                     .then(response => {
                       if (response.status) {
                         ToastUtils.success(this.$t('source.tip.resetAutoIncrementSuccess').replace('$VALUE', this.dataInfo?.autoIncrement as string))