[Core] [Source] [Metadata] Refactor metadata er diagram

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

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')
                     }
                 ]
             },

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">
+          <TabsTrigger value="erDiagram" class="cursor-pointer" @click="handlerChange">
-            <Wind :size="18" class="mr-2"/>
+            <div class="flex space-x-2">
-            {{ $t('source.common.erDiagram') }}
+              <Wind :size="18"/>
+              <span>{{ $t('source.common.erDiagram') }}</span>
+            </div>
           </TabsTrigger>
         </TabsList>
       </template>

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 ColumnService from '@/services/column.ts'
-import { StructureModel } from '@/model/structure.ts'
-import { toNumber } from 'lodash'
 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
+      const code = this.$route?.params.table as string
-      if (this.info) {
+      if (code) {
-        ColumnService.getAllByTable(toNumber(this.info.applyId))
+        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.$route?.params.table,
-          () => {
+          () => this.handlerInitialize()
-            this.handlerInitialize()
-          }
       )
     }
   }

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))