😎完善库表可视化

Admin.NET/Admin.NET.Application/Configuration/Database.json

@@ -20,16 +20,16 @@
         //	}
         //],
         "DbSettings": {
-          "EnableInitDb": false, // 启用库初始化
+          "EnableInitDb": true, // 启用库初始化
           "EnableDiffLog": false, // 启用库表差异日志
           "EnableUnderLine": false // 启用驼峰转下划线
         },
         "TableSettings": {
-          "EnableInitTable": false, // 启用表初始化
+          "EnableInitTable": true, // 启用表初始化
           "EnableIncreTable": false // 启用表增量更新-特性[IncreTable]
         },
         "SeedSettings": {
-          "EnableInitSeed": false, // 启用种子初始化
+          "EnableInitSeed": true, // 启用种子初始化
           "EnableIncreSeed": false // 启用种子增量更新-特性[IncreSeed]
         }
       }

Admin.NET/Admin.NET.Core/Service/DataBase/Dto/DbTableVisual.cs

@@ -0,0 +1,54 @@
+// 大名科技（天津）有限公司 版权所有
+//
+// 此源代码遵循位于源代码树根目录中的 LICENSE 文件的许可证
+//
+// 不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动
+//
+// 任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关
+
+namespace Admin.NET.Core.Service;
+
+/// <summary>
+/// 库表可视化
+/// </summary>
+public class VisualDbTable
+{
+    public List<VisualTable> VisualTableList { get; set; }
+
+    public List<VisualColumn> VisualColumnList { get; set; }
+
+    public List<ColumnRelation> ColumnRelationList { get; set; }
+}
+
+public class VisualTable
+{
+    public string TableName { get; set; }
+
+    public string TableComents { get; set; }
+
+    public int X { get; set; }
+
+    public int Y { get; set; }
+}
+
+public class VisualColumn
+{
+    public string TableName { get; set; }
+
+    public string ColumnName { get; set; }
+
+    public string DataType { get; set; }
+}
+
+public class ColumnRelation
+{
+    public string SourceTableName { get; set; }
+
+    public string SourceColumnName { get; set; }
+
+    public string Type { get; set; }
+
+    public string TargetTableName { get; set; }
+
+    public string TargetColumnName { get; set; }
+}

Admin.NET/Admin.NET.Core/Service/DataBase/SysDatabaseService.cs

@@ -42,93 +42,55 @@ public class SysDatabaseService : IDynamicApiController, ITransient
     }
 
     /// <summary>
-    /// 可视化获取库列表 🔖
+    /// 获取可视化库列表 🔖
     /// </summary>
     /// <returns></returns>
     [DisplayName("可视化获取库列表")]
-    public YourType GetVisualList()
+    public VisualDbTable GetVisualList()
     {
-        List<tables> tables = new List<tables>();
-        List<tableCols> tableColslist = new List<tableCols>();
-        List<columnRelations> columnRelationslist = new List<columnRelations>();
-        var tableslist = _db.DbMaintenance.GetTableInfoList(false);
-        foreach (DbTableInfo item in tableslist)
+        var visualTableList = new List<VisualTable>();
+        var visualColumnList = new List<VisualColumn>();
+        var columnRelationList = new List<ColumnRelation>();
+
+        var dbTableInfos = _db.DbMaintenance.GetTableInfoList(false);
+        foreach (DbTableInfo tableInfo in dbTableInfos)
         {
-            Random ran = new Random();
-            tables tables1 = new tables();
-            tables1.tableName = item.Name;
-            tables1.tableComents = item.Name + " comments";
-            tables1.x = ran.Next(10000);
-            tables1.y = ran.Next(10000);
-            tables.Add(tables1);
-            List<DbColumnInfo> dbColumnInfos = _db.DbMaintenance.GetColumnInfosByTableName(item.Name, false);
-            foreach (var item2 in dbColumnInfos)
+            var ran = new Random();
+            var visualTable = new VisualTable
+            {
+                TableName = tableInfo.Name,
+                TableComents = tableInfo.Name + tableInfo.Description,
+                X = ran.Next(5000),
+                Y = ran.Next(5000)
+            };
+            visualTableList.Add(visualTable);
+
+            var dbColumnInfos = _db.DbMaintenance.GetColumnInfosByTableName(tableInfo.Name, false);
+            foreach (DbColumnInfo columnInfo in dbColumnInfos)
             {
-                tableCols tableCols1 = new tableCols();
-                tableCols1.tableName = item2.TableName;
-                tableCols1.columnName = item2.DbColumnName;
-                tableCols1.dataType = item2.DataType;
-                tableColslist.Add(tableCols1);
+                var visualColumn = new VisualColumn
+                {
+                    TableName = columnInfo.TableName,
+                    ColumnName = columnInfo.DbColumnName,
+                    DataType = columnInfo.DataType
+                };
+                visualColumnList.Add(visualColumn);
             }
         }
-        columnRelations columnRelations = new columnRelations();
-        columnRelations.sourceTableName = "SysDictType";
-        columnRelations.sourceColumnName = "Id";
-        columnRelations.type = "ONE_TO_ONE";
-        columnRelations.targetTableName = "SysDictData";
-        columnRelations.targetColumnName = "Id";
-        columnRelations columnRelations2 = new columnRelations();
-        columnRelations2.sourceTableName = "";
-        columnRelations2.sourceColumnName = "";
-        columnRelations2.type = "ONE_TO_ONE";
-        columnRelations2.targetTableName = "";
-        columnRelations2.targetColumnName = "";
-        columnRelationslist.Add(columnRelations);
-        //columnRelationslist.Add(columnRelations2);
-
-        return new YourType { tables = tables, tableColslist = tableColslist, columnRelationslist = columnRelationslist };
-    }
-    public class tables
-    {
-        public string tableName { get; set; }
-
-        public string tableComents { get; set; }
-
-        public int x { get; set; }
-
-        public int y { get; set; }
-    }
-
-    public class tableCols
-    {
-        public string tableName { get; set; }
-
-        public string columnName { get; set; }
 
-        public string dataType { get; set; }
-    }
-
-    public class columnRelations
-    {
-        public string sourceTableName { get; set; }
-
-        public string sourceColumnName { get; set; }
-
-        public string type { get; set; }
-
-        public string targetTableName { get; set; }
-
-        public string targetColumnName { get; set; }
-    }
+        var columnRelation = new ColumnRelation
+        {
+            SourceTableName = "SysDictType",
+            SourceColumnName = "Id",
+            Type = "ONE_TO_ONE",
+            TargetTableName = "SysDictData",
+            TargetColumnName = "Id"
+        };
+        columnRelationList.Add(columnRelation);
 
-    public class YourType
-    {
-        public List<tables> tables { get; set; }
-        public List<tableCols> tableColslist { get; set; }
-        public List<columnRelations> columnRelationslist { get; set; }
+        return new VisualDbTable { VisualTableList = visualTableList, VisualColumnList = visualColumnList, ColumnRelationList = columnRelationList };
     }
 
-
     /// <summary>
     /// 获取字段列表 🔖
     /// </summary>

Web/src/api-services/apis/sys-database-api.ts

@@ -20,6 +20,7 @@ import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } fr
 import { AdminResultListDbColumnOutput } from '../models';
 import { AdminResultListDbTableInfo } from '../models';
 import { AdminResultListString } from '../models';
+import { AdminResultVisualDbTable } from '../models';
 import { CreateEntityInput } from '../models';
 import { CreateSeedDataInput } from '../models';
 import { DbColumnInput } from '../models';
@@ -512,8 +513,20 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
                 options: localVarRequestOptions,
             };
         },
-        apiSysDatabaseVisualListGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            const localVarPath = `/api/sysDatabase/visuallist`;
+        /**
+         * 
+         * @summary 获取表列表 🔖
+         * @param {string} configId ConfigId
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        apiSysDatabaseTableListConfigIdGet: async (configId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'configId' is not null or undefined
+            if (configId === null || configId === undefined) {
+                throw new RequiredError('configId','Required parameter configId was null or undefined when calling apiSysDatabaseTableListConfigIdGet.');
+            }
+            const localVarPath = `/api/sysDatabase/tableList/{configId}`
+                .replace(`{${"configId"}}`, encodeURIComponent(String(configId)));
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, 'https://example.com');
             let baseOptions;
@@ -551,25 +564,20 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
         },
         /**
          * 
-         * @summary 获取表列表 🔖
-         * @param {string} configId ConfigId
+         * @summary 编辑列 🔖
+         * @param {UpdateDbColumnInput} [body] 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        apiSysDatabaseTableListConfigIdGet: async (configId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            // verify required parameter 'configId' is not null or undefined
-            if (configId === null || configId === undefined) {
-                throw new RequiredError('configId','Required parameter configId was null or undefined when calling apiSysDatabaseTableListConfigIdGet.');
-            }
-            const localVarPath = `/api/sysDatabase/tableList/{configId}`
-                .replace(`{${"configId"}}`, encodeURIComponent(String(configId)));
+        apiSysDatabaseUpdateColumnPost: async (body?: UpdateDbColumnInput, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/sysDatabase/updateColumn`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, 'https://example.com');
             let baseOptions;
             if (configuration) {
                 baseOptions = configuration.baseOptions;
             }
-            const localVarRequestOptions :AxiosRequestConfig = { method: 'GET', ...baseOptions, ...options};
+            const localVarRequestOptions :AxiosRequestConfig = { method: 'POST', ...baseOptions, ...options};
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
@@ -582,6 +590,8 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
                 localVarHeaderParameter["Authorization"] = "Bearer " + accessToken;
             }
 
+            localVarHeaderParameter['Content-Type'] = 'application/json-patch+json';
+
             const query = new URLSearchParams(localVarUrlObj.search);
             for (const key in localVarQueryParameter) {
                 query.set(key, localVarQueryParameter[key]);
@@ -592,6 +602,8 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
             localVarUrlObj.search = (new URLSearchParams(query)).toString();
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            const needsSerialization = (typeof body !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
+            localVarRequestOptions.data =  needsSerialization ? JSON.stringify(body !== undefined ? body : {}) : (body || "");
 
             return {
                 url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
@@ -600,13 +612,13 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
         },
         /**
          * 
-         * @summary 编辑列 🔖
-         * @param {UpdateDbColumnInput} [body] 
+         * @summary 编辑表 🔖
+         * @param {UpdateDbTableInput} [body] 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        apiSysDatabaseUpdateColumnPost: async (body?: UpdateDbColumnInput, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            const localVarPath = `/api/sysDatabase/updateColumn`;
+        apiSysDatabaseUpdateTablePost: async (body?: UpdateDbTableInput, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/sysDatabase/updateTable`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, 'https://example.com');
             let baseOptions;
@@ -648,20 +660,19 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
         },
         /**
          * 
-         * @summary 编辑表 🔖
-         * @param {UpdateDbTableInput} [body] 
+         * @summary 获取可视化库列表 🔖
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        apiSysDatabaseUpdateTablePost: async (body?: UpdateDbTableInput, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
-            const localVarPath = `/api/sysDatabase/updateTable`;
+        apiSysDatabaseVisualListGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/sysDatabase/visualList`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, 'https://example.com');
             let baseOptions;
             if (configuration) {
                 baseOptions = configuration.baseOptions;
             }
-            const localVarRequestOptions :AxiosRequestConfig = { method: 'POST', ...baseOptions, ...options};
+            const localVarRequestOptions :AxiosRequestConfig = { method: 'GET', ...baseOptions, ...options};
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
@@ -674,8 +685,6 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
                 localVarHeaderParameter["Authorization"] = "Bearer " + accessToken;
             }
 
-            localVarHeaderParameter['Content-Type'] = 'application/json-patch+json';
-
             const query = new URLSearchParams(localVarUrlObj.search);
             for (const key in localVarQueryParameter) {
                 query.set(key, localVarQueryParameter[key]);
@@ -686,8 +695,6 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
             localVarUrlObj.search = (new URLSearchParams(query)).toString();
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
-            const needsSerialization = (typeof body !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
-            localVarRequestOptions.data =  needsSerialization ? JSON.stringify(body !== undefined ? body : {}) : (body || "");
 
             return {
                 url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
@@ -842,14 +849,6 @@ export const SysDatabaseApiFp = function(configuration?: Configuration) {
                 return axios.request(axiosRequestArgs);
             };
         },
-        async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<AdminResultListString>>> {
-            const localVarAxiosArgs = await SysDatabaseApiAxiosParamCreator(configuration).apiSysDatabaseVisualListGet(options);
-            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
-                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
-                return axios.request(axiosRequestArgs);
-            };
-        },
-        
         /**
          * 
          * @summary 获取表列表 🔖
@@ -892,6 +891,19 @@ export const SysDatabaseApiFp = function(configuration?: Configuration) {
                 return axios.request(axiosRequestArgs);
             };
         },
+        /**
+         * 
+         * @summary 获取可视化库列表 🔖
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<AdminResultVisualDbTable>>> {
+            const localVarAxiosArgs = await SysDatabaseApiAxiosParamCreator(configuration).apiSysDatabaseVisualListGet(options);
+            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
+                return axios.request(axiosRequestArgs);
+            };
+        },
     }
 };
 
@@ -1000,10 +1012,6 @@ export const SysDatabaseApiFactory = function (configuration?: Configuration, ba
         async apiSysDatabaseListGet(options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultListString>> {
             return SysDatabaseApiFp(configuration).apiSysDatabaseListGet(options).then((request) => request(axios, basePath));
         },
-        async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultListString>> {
-            return SysDatabaseApiFp(configuration).apiSysDatabaseVisualListGet(options).then((request) => request(axios, basePath));
-        },
-        
         /**
          * 
          * @summary 获取表列表 🔖
@@ -1034,6 +1042,15 @@ export const SysDatabaseApiFactory = function (configuration?: Configuration, ba
         async apiSysDatabaseUpdateTablePost(body?: UpdateDbTableInput, options?: AxiosRequestConfig): Promise<AxiosResponse<void>> {
             return SysDatabaseApiFp(configuration).apiSysDatabaseUpdateTablePost(body, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary 获取可视化库列表 🔖
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig): Promise<AxiosResponse<AdminResultVisualDbTable>> {
+            return SysDatabaseApiFp(configuration).apiSysDatabaseVisualListGet(options).then((request) => request(axios, basePath));
+        },
     };
 };
 
@@ -1153,10 +1170,6 @@ export class SysDatabaseApi extends BaseAPI {
     public async apiSysDatabaseListGet(options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultListString>> {
         return SysDatabaseApiFp(this.configuration).apiSysDatabaseListGet(options).then((request) => request(this.axios, this.basePath));
     }
-    public async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultListString>> {
-        return SysDatabaseApiFp(this.configuration).apiSysDatabaseVisualListGet(options).then((request) => request(this.axios, this.basePath));
-    }
-    
     /**
      * 
      * @summary 获取表列表 🔖
@@ -1190,4 +1203,14 @@ export class SysDatabaseApi extends BaseAPI {
     public async apiSysDatabaseUpdateTablePost(body?: UpdateDbTableInput, options?: AxiosRequestConfig) : Promise<AxiosResponse<void>> {
         return SysDatabaseApiFp(this.configuration).apiSysDatabaseUpdateTablePost(body, options).then((request) => request(this.axios, this.basePath));
     }
+    /**
+     * 
+     * @summary 获取可视化库列表 🔖
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SysDatabaseApi
+     */
+    public async apiSysDatabaseVisualListGet(options?: AxiosRequestConfig) : Promise<AxiosResponse<AdminResultVisualDbTable>> {
+        return SysDatabaseApiFp(this.configuration).apiSysDatabaseVisualListGet(options).then((request) => request(this.axios, this.basePath));
+    }
 }

Web/src/api-services/models/admin-result-visual-db-table.ts

@@ -0,0 +1,69 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+import { VisualDbTable } from './visual-db-table';
+ /**
+ * 全局返回结果
+ *
+ * @export
+ * @interface AdminResultVisualDbTable
+ */
+export interface AdminResultVisualDbTable {
+
+    /**
+     * 状态码
+     *
+     * @type {number}
+     * @memberof AdminResultVisualDbTable
+     */
+    code?: number;
+
+    /**
+     * 类型success、warning、error
+     *
+     * @type {string}
+     * @memberof AdminResultVisualDbTable
+     */
+    type?: string | null;
+
+    /**
+     * 错误信息
+     *
+     * @type {string}
+     * @memberof AdminResultVisualDbTable
+     */
+    message?: string | null;
+
+    /**
+     * @type {VisualDbTable}
+     * @memberof AdminResultVisualDbTable
+     */
+    result?: VisualDbTable;
+
+    /**
+     * 附加数据
+     *
+     * @type {any}
+     * @memberof AdminResultVisualDbTable
+     */
+    extras?: any | null;
+
+    /**
+     * 时间
+     *
+     * @type {Date}
+     * @memberof AdminResultVisualDbTable
+     */
+    time?: Date;
+}

Web/src/api-services/models/column-relation.ts

@@ -0,0 +1,52 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+ /**
+ * 
+ *
+ * @export
+ * @interface ColumnRelation
+ */
+export interface ColumnRelation {
+
+    /**
+     * @type {string}
+     * @memberof ColumnRelation
+     */
+    sourceTableName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof ColumnRelation
+     */
+    sourceColumnName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof ColumnRelation
+     */
+    type?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof ColumnRelation
+     */
+    targetTableName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof ColumnRelation
+     */
+    targetColumnName?: string | null;
+}

Web/src/api-services/models/index.ts

@@ -89,6 +89,7 @@ export * from './admin-result-sys-ldap';
 export * from './admin-result-sys-print';
 export * from './admin-result-sys-user';
 export * from './admin-result-sys-wechat-pay';
+export * from './admin-result-visual-db-table';
 export * from './admin-result-wechat-pay-output';
 export * from './admin-result-wx-open-id-output';
 export * from './admin-result-wx-phone-output';
@@ -99,6 +100,7 @@ export * from './cluster-status';
 export * from './code-gen-config';
 export * from './code-gen-input';
 export * from './column-ouput';
+export * from './column-relation';
 export * from './const-output';
 export * from './create-entity-input';
 export * from './create-seed-data-input';
@@ -283,6 +285,9 @@ export * from './upload-file-from-base64-input';
 export * from './user-input';
 export * from './user-output';
 export * from './user-role-input';
+export * from './visual-column';
+export * from './visual-db-table';
+export * from './visual-table';
 export * from './wechat-pay-output';
 export * from './wechat-pay-para-input';
 export * from './wechat-pay-transaction-input';

Web/src/api-services/models/visual-column.ts

@@ -0,0 +1,40 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+ /**
+ * 
+ *
+ * @export
+ * @interface VisualColumn
+ */
+export interface VisualColumn {
+
+    /**
+     * @type {string}
+     * @memberof VisualColumn
+     */
+    tableName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof VisualColumn
+     */
+    columnName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof VisualColumn
+     */
+    dataType?: string | null;
+}

Web/src/api-services/models/visual-db-table.ts

@@ -0,0 +1,43 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+import { ColumnRelation } from './column-relation';
+import { VisualColumn } from './visual-column';
+import { VisualTable } from './visual-table';
+ /**
+ * 库表可视化
+ *
+ * @export
+ * @interface VisualDbTable
+ */
+export interface VisualDbTable {
+
+    /**
+     * @type {Array<VisualTable>}
+     * @memberof VisualDbTable
+     */
+    visualTableList?: Array<VisualTable> | null;
+
+    /**
+     * @type {Array<VisualColumn>}
+     * @memberof VisualDbTable
+     */
+    visualColumnList?: Array<VisualColumn> | null;
+
+    /**
+     * @type {Array<ColumnRelation>}
+     * @memberof VisualDbTable
+     */
+    columnRelationList?: Array<ColumnRelation> | null;
+}

Web/src/api-services/models/visual-table.ts

@@ -0,0 +1,46 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Admin.NET 通用权限开发平台
+ * 让 .NET 开发更简单、更通用、更流行。整合最新技术，模块插件式开发，前后端分离，开箱即用。<br/><u><b><font color='FF0000'> 👮不得利用本项目从事危害国家安全、扰乱社会秩序、侵犯他人合法权益等法律法规禁止的活动！任何基于本项目二次开发而产生的一切法律纠纷和责任，均与作者无关！</font></b></u>
+ *
+ * OpenAPI spec version: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+ /**
+ * 
+ *
+ * @export
+ * @interface VisualTable
+ */
+export interface VisualTable {
+
+    /**
+     * @type {string}
+     * @memberof VisualTable
+     */
+    tableName?: string | null;
+
+    /**
+     * @type {string}
+     * @memberof VisualTable
+     */
+    tableComents?: string | null;
+
+    /**
+     * @type {number}
+     * @memberof VisualTable
+     */
+    x?: number;
+
+    /**
+     * @type {number}
+     * @memberof VisualTable
+     */
+    y?: number;
+}

Web/src/views/system/database/component/visualTable.vue

@@ -32,22 +32,24 @@
 						</div>
 					</div>
 				</template>
+
 				<template #canvas-plug>
 					<!--- You can put some elements that are not allowed to be dragged here --->
 				</template>
+
 				<template #node="{ node }">
-					<div style="width: 300px; background-color: #f39930">
+					<div style="width: 350px; background-color: #f39930">
 						<!---------------- if node a ---------------->
-						<div>{{ node.text }} - {{ node.data.columns.length }} Cols</div>
+						<div style="height: 30px; display: flex; align-items: center; justify-content: center">{{ node.text }} - 【{{ node.data.columns.length }}列】</div>
 						<table class="c-data-table">
 							<tr>
-								<th>Column Name</th>
-								<th>Data Type</th>
+								<th>列名</th>
+								<th>类型</th>
 							</tr>
 							<template v-for="column of node.data.columns" :key="column.columnName">
 								<tr>
 									<td>
-										<div :id="`${node.id}-${column.columnName}`">{{ column.columnName }}</div>
+										<div :id="`${node.id}-${column.columnName}`" style="background-color: var(--el-color-primary-light-3)">{{ column.columnName }}</div>
 									</td>
 									<td>{{ column.dataType }}</td>
 								</tr>
@@ -111,30 +113,8 @@ onMounted(async () => {
 	console.log(state.configId);
 
 	showGraph();
-
 });
 
-// // 获取可视化表和字段
-// const getVisualTableList = async () => {
-// 	state.columnData = [];
-// 	if (state.tableName == '') return;
-
-// 	state.loading1 = true;
-// 	var res = await getAPI(SysDatabaseApi).apiGetVisualTableList();
-// 	state.columnData = res.data.result ?? [];
-// 	state.loading1 = false;
-// };
-
-// 获取可视化表关系
-const getVisualRTableList = async () => {
-	state.columnData = [];
-	if (state.tableName == '') return;
-
-	state.loading1 = true;
-	var res = await getAPI(SysDatabaseApi).apiSysDatabaseListGet();
-	state.loading1 = false;
-};
-
 const graphRef = ref<RelationGraphComponent | null>(null);
 const graphOptions: RGOptions = {
 	debug: false,
@@ -159,14 +139,14 @@ const graphOptions: RGOptions = {
 	// You can refer to the parameters in "Graph" for setting here
 };
 
+// 获取可视化表和字段
 const showGraph = async () => {
 	var res = await getAPI(SysDatabaseApi).apiSysDatabaseVisualListGet();
-	const tables = res.data.result.tables;
-	const tableCols = res.data.result.tableColslist;
-	const columnRelations = res.data.result.columnRelationslist;
-	//debugger;
+	const visualTableList: any = res.data.result?.visualTableList;
+	const visualColumnList: any = res.data.result?.visualColumnList;
+	const columnRelationList: any = res.data.result?.columnRelationList;
 
-	const graphNodes = tables.map((table) => {
+	const graphNodes = visualTableList.map((table: any) => {
 		const { tableName, tableComents, x, y } = table;
 		return {
 			id: tableName,
@@ -176,17 +156,14 @@ const showGraph = async () => {
 			nodeShape: 1,
 			data: {
 				// Costomer key have to in data
-
-				columns: tableCols.filter((col) => col.tableName === table.tableName),
+				columns: visualColumnList.filter((col: any) => col.tableName === table.tableName),
 			},
 		};
 	});
-	const graphLines = columnRelations.map((relation) => {
+	const graphLines = columnRelationList.map((relation: any) => {
 		return {
 			from: relation.sourceTableName + '-' + relation.sourceColumnName, // HtmlElement id
-
 			to: relation.targetTableName + '-' + relation.targetColumnName, // HtmlElement id
-
 			color: relation.type === 'ONE_TO_ONE' ? 'rgba(29,169,245,0.76)' : 'rgba(159,23,227,0.65)',
 			text: '',
 			fromJunctionPoint: 'left',

Web/src/views/system/database/index.vue

@@ -309,13 +309,13 @@ const delColumn = (row: any) => {
 
 // 可视化表
 const visualTable = () => {
-	//if (state.configId == '') {
-	//	ElMessage({
-	//		type: 'error',
-	//		message: `请选择库名!`,
-	//	});
-	//	return;
-	//}
+	if (state.configId == '') {
+		ElMessage({
+			type: 'error',
+			message: `请选择库名!`,
+		});
+		return;
+	}
 	router.push(`/develop/database/visual?configId=${state.configId}`);
 };
 </script>