!1037 动态的可视化表

Merge pull request !1037 from Shil/next

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

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

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

@@ -42,6 +42,94 @@ public class SysDatabaseService : IDynamicApiController, ITransient
     }
 
     /// <summary>
+    /// 可视化获取库列表 🔖
+    /// </summary>
+    /// <returns></returns>
+    [DisplayName("可视化获取库列表")]
+    public YourType 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)
+        {
+            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)
+            {
+                tableCols tableCols1 = new tableCols();
+                tableCols1.tableName = item2.TableName;
+                tableCols1.columnName = item2.DbColumnName;
+                tableCols1.dataType = item2.DataType;
+                tableColslist.Add(tableCols1);
+            }
+        }
+        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; }
+    }
+
+    public class YourType
+    {
+        public List<tables> tables { get; set; }
+        public List<tableCols> tableColslist { get; set; }
+        public List<columnRelations> columnRelationslist { get; set; }
+    }
+
+
+    /// <summary>
     /// 获取字段列表 🔖
     /// </summary>
     /// <param name="tableName">表名</param>

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

@@ -512,6 +512,43 @@ export const SysDatabaseApiAxiosParamCreator = function (configuration?: Configu
                 options: localVarRequestOptions,
             };
         },
+        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: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication Bearer required
+            // http bearer authentication required
+            if (configuration && configuration.accessToken) {
+                const accessToken = typeof configuration.accessToken === 'function'
+                    ? await configuration.accessToken()
+                    : await configuration.accessToken;
+                localVarHeaderParameter["Authorization"] = "Bearer " + accessToken;
+            }
+
+            const query = new URLSearchParams(localVarUrlObj.search);
+            for (const key in localVarQueryParameter) {
+                query.set(key, localVarQueryParameter[key]);
+            }
+            for (const key in options.params) {
+                query.set(key, options.params[key]);
+            }
+            localVarUrlObj.search = (new URLSearchParams(query)).toString();
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @summary 获取表列表 🔖
@@ -805,6 +842,14 @@ 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 获取表列表 🔖
@@ -955,6 +1000,10 @@ 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 获取表列表 🔖
@@ -1104,6 +1153,10 @@ 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 获取表列表 🔖

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

@@ -67,8 +67,8 @@ import { useRoute } from 'vue-router';
 import RelationGraph from 'relation-graph/vue3';
 import type { RGOptions, RGNode, RGLine, RGLink, RGUserEvent, RGJsonData, RelationGraphComponent } from 'relation-graph/vue3';
 
-// import { getAPI } from '/@/utils/axios-utils';
-// import { SysDatabaseApi } from '/@/api-services/api';
+import { getAPI } from '/@/utils/axios-utils';
+import { SysDatabaseApi } from '/@/api-services/api';
 import { DbColumnOutput, DbTableInfo } from '/@/api-services/models';
 
 const route = useRoute();
@@ -111,6 +111,7 @@ onMounted(async () => {
 	console.log(state.configId);
 
 	showGraph();
+
 });
 
 // // 获取可视化表和字段
@@ -124,16 +125,15 @@ onMounted(async () => {
 // 	state.loading1 = false;
 // };
 
-// // 获取可视化表关系
-// const getVisualRTableList = async () => {
-// 	state.columnData = [];
-// 	if (state.tableName == '') return;
+// 获取可视化表关系
+const getVisualRTableList = async () => {
+	state.columnData = [];
+	if (state.tableName == '') return;
 
-// 	state.loading1 = true;
-// 	var res = await getAPI(SysDatabaseApi).apiGetVisualRTableList();
-// 	state.columnData = res.data.result ?? [];
-// 	state.loading1 = false;
-// };
+	state.loading1 = true;
+	var res = await getAPI(SysDatabaseApi).apiSysDatabaseListGet();
+	state.loading1 = false;
+};
 
 const graphRef = ref<RelationGraphComponent | null>(null);
 const graphOptions: RGOptions = {
@@ -160,49 +160,12 @@ const graphOptions: RGOptions = {
 };
 
 const showGraph = async () => {
-	const tables = [
-		{ tableName: 'SYS_USER', tableComents: 'SYS_USER comments', x: 500, y: -300 },
-		{ tableName: 'SYS_DEPT', tableComents: 'SYS_DEPT comments', x: 0, y: -300 },
-		{ tableName: 'SYS_ROLE', tableComents: 'SYS_ROLE comments', x: 0, y: 0 },
-		{ tableName: 'SYS_USER_ROLE', tableComents: 'SYS_USER_ROLE comments', x: 500, y: 0 },
-		{ tableName: 'SYS_RESOURCE', tableComents: 'SYS_RESOURCE comments', x: 0, y: 300 },
-		{ tableName: 'SYS_ROLE_RESOURCE', tableComents: 'SYS_ROLE_RESOURCE comments', x: 500, y: 300 },
-	];
-	const tableCols = [
-		{ tableName: 'SYS_USER', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_USER', columnName: 'user_name', dataType: 'varchar(50)' },
-		{ tableName: 'SYS_USER', columnName: 'dept_id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_USER', columnName: 'create_time', dataType: 'TIMESTAMP' },
-		{ tableName: 'SYS_USER', columnName: 'status', dataType: 'varchar(1)' },
-		{ tableName: 'SYS_DEPT', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_DEPT', columnName: 'dept_name', dataType: 'varchar(50)' },
-		{ tableName: 'SYS_DEPT', columnName: 'parent_dept_id', dataType: 'varchar(50)' },
-		{ tableName: 'SYS_DEPT', columnName: 'create_time', dataType: 'TIMESTAMP' },
-		{ tableName: 'SYS_DEPT', columnName: 'status', dataType: 'varchar(50)' },
-		{ tableName: 'SYS_ROLE', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_ROLE', columnName: 'role_name', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_ROLE', columnName: 'create_time', dataType: 'TIMESTAMP' },
-		{ tableName: 'SYS_USER_ROLE', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_USER_ROLE', columnName: 'user_id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_USER_ROLE', columnName: 'role_id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_USER_ROLE', columnName: 'create_time', dataType: 'TIMESTAMP' },
-		{ tableName: 'SYS_USER_ROLE', columnName: 'status', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_RESOURCE', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_RESOURCE', columnName: 'resource_name', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_RESOURCE', columnName: 'create_time', dataType: 'TIMESTAMP' },
-		{ tableName: 'SYS_ROLE_RESOURCE', columnName: 'id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_ROLE_RESOURCE', columnName: 'role_id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_ROLE_RESOURCE', columnName: 'resource_id', dataType: 'varchar(36)' },
-		{ tableName: 'SYS_ROLE_RESOURCE', columnName: 'status', dataType: 'varchar(1)' },
-	];
-	const columnRelations = [
-		{ sourceTableName: 'SYS_USER', sourceColumnName: 'dept_id', type: 'MORE_TO_ONE', targetTableName: 'SYS_DEPT', targetColumnName: 'id' },
-		{ sourceTableName: 'SYS_DEPT', sourceColumnName: 'parent_dept_id', type: 'ONE_TO_ONE', targetTableName: 'SYS_DEPT', targetColumnName: 'id' },
-		{ sourceTableName: 'SYS_USER_ROLE', sourceColumnName: 'user_id', type: 'MORE_TO_ONE', targetTableName: 'SYS_USER', targetColumnName: 'id' },
-		{ sourceTableName: 'SYS_USER_ROLE', sourceColumnName: 'role_id', type: 'MORE_TO_ONE', targetTableName: 'SYS_ROLE', targetColumnName: 'id' },
-		{ sourceTableName: 'SYS_ROLE_RESOURCE', sourceColumnName: 'role_id', type: 'MORE_TO_ONE', targetTableName: 'SYS_ROLE', targetColumnName: 'id' },
-		{ sourceTableName: 'SYS_ROLE_RESOURCE', sourceColumnName: 'resource_id', type: 'MORE_TO_ONE', targetTableName: 'SYS_RESOURCE', targetColumnName: 'id' },
-	];
+	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 graphNodes = tables.map((table) => {
 		const { tableName, tableComents, x, y } = table;
 		return {

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>