refactor: 优化差异日志保存数据和前端渲染方式

Admin.NET/Admin.NET.Core/Entity/SysLogDiff.cs

@@ -15,16 +15,10 @@ namespace Admin.NET.Core;
 public partial class SysLogDiff : EntityBase
 {
     /// <summary>
-    /// 操作前记录
+    /// 差异数据
     /// </summary>
-    [SugarColumn(ColumnDescription = "操作前记录", ColumnDataType = StaticConfig.CodeFirst_BigString)]
-    public string? BeforeData { get; set; }
-
-    /// <summary>
-    /// 操作后记录
-    /// </summary>
-    [SugarColumn(ColumnDescription = "操作后记录", ColumnDataType = StaticConfig.CodeFirst_BigString)]
-    public string? AfterData { get; set; }
+    [SugarColumn(ColumnDescription = "差异数据", ColumnDataType = StaticConfig.CodeFirst_BigString)]
+    public string? DiffData { get; set; }
 
     /// <summary>
     /// Sql

Admin.NET/Admin.NET.Core/SqlSugar/SqlSugarSetup.cs

@@ -277,33 +277,43 @@ public static class SqlSugarSetup
 
         db.Aop.OnDiffLogEvent = async u =>
         {
-            // 移除相同字段
+            // 记录差异数据
+            var diffData = new List<dynamic>();
             for (int i = 0; i < u.AfterData.Count; i++)
             {
+                var diffColumns = new List<dynamic>();
                 var afterColumns = u.AfterData[i].Columns;
                 var beforeColumns = u.BeforeData[i].Columns;
                 for (int j = 0; j < afterColumns.Count; j++)
                 {
-                    if (!afterColumns[j].Value.Equals(beforeColumns[j].Value)) continue;
-
-                    beforeColumns.Remove(beforeColumns[j]);
-                    afterColumns.Remove(afterColumns[j]);
-                    j--;
+                    if (afterColumns[j].Value.Equals(beforeColumns[j].Value)) continue;
+                    diffColumns.Add(new
+                    {
+                        afterColumns[j].IsPrimaryKey,
+                        afterColumns[j].ColumnName,
+                        afterColumns[j].ColumnDescription,
+                        BeforeValue = beforeColumns[j].Value,
+                        AfterValue = afterColumns[j].Value,
+                    });
                 }
+                diffData.Add(new
+                {
+                    u.AfterData[i].TableName,
+                    u.AfterData[i].TableDescription,
+                    Columns = diffColumns
+                });
             }
 
             var logDiff = new SysLogDiff
             {
-                // 操作后记录（字段描述、列名、值、表名、表描述）
-                AfterData = JSON.Serialize(u.AfterData),
-                // 操作前记录（字段描述、列名、值、表名、表描述）
-                BeforeData = JSON.Serialize(u.BeforeData),
+                // 差异数据（字段描述、列名、值、表名、表描述）
+                DiffData = JSON.Serialize(diffData),
                 // 传进来的对象（如果对象为空，则使用首个数据的表名作为业务对象）
                 BusinessData = u.BusinessData == null ? u.AfterData.FirstOrDefault()?.TableName : JSON.Serialize(u.BusinessData),
                 // 枚举（insert、update、delete）
                 DiffType = u.DiffType.ToString(),
-                Sql = UtilMethods.GetNativeSql(u.Sql, u.Parameters),
-                Parameters = JSON.Serialize(u.Parameters),
+                Sql = u.Sql,
+                Parameters = JSON.Serialize(u.Parameters.Select(e => new { e.ParameterName, e.Value, TypeName = e.DbType.ToString() })),
                 Elapsed = u.Time == null ? 0 : (long)u.Time.Value.TotalMilliseconds
             };
             var logDb = ITenant.IsAnyConnection(SqlSugarConst.LogConfigId) ? ITenant.GetConnectionScope(SqlSugarConst.LogConfigId) : ITenant.GetConnectionScope(SqlSugarConst.MainConfigId);

Web/src/views/system/log/difflog/index.vue

@@ -19,14 +19,32 @@
 
 		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
 			<el-table :data="state.logData" style="width: 100%" v-loading="state.loading" border>
+        <el-table-column type="expand">
+          <template #default="scope">
+            <el-card header="差异数据" style="width: 100%; margin: 5px">
+              <el-table :data="item.columns" v-for="item in scope.row.diffData" :key="item.tableName" style="width: 100%">
+                <el-table-column :label="item.tableName + '-' + item.tableDescription" align="center">
+                  <el-table-column prop="columnName" label="字段描述" width="300" :formatter="(row: any) => `${row.columnName} - ${row.columnDescription}`" />
+                  <el-table-column prop="beforeValue" label="修改前" />
+                  <el-table-column prop="afterValue" label="修改后" />
+                </el-table-column>
+              </el-table>
+            </el-card>
+            <el-card header="SQL" style="width: 100%; margin: 5px" class="overflow-text">{{scope.row.sql}}</el-card>
+            <el-card header="SQL参数" style="width: 100%; margin: 5px">
+              <el-table :data="scope.row.parameters" style="width: 100%"  border>
+                <el-table-column prop="parameterName" label="参数名" width="200" />
+                <el-table-column prop="typeName" label="类型" width="100" />
+                <el-table-column prop="value" label="值" />
+              </el-table>
+            </el-card>
+
+          </template>
+        </el-table-column>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="diffType" label="差异操作" header-align="center" show-overflow-tooltip />
-				<el-table-column prop="sql" label="Sql语句" header-align="center" show-overflow-tooltip />
-				<el-table-column prop="parameters" label="参数" header-align="center" show-overflow-tooltip />
 				<el-table-column prop="elapsed" label="耗时(ms)" header-align="center" show-overflow-tooltip />
 				<el-table-column prop="message" label="日志消息" header-align="center" show-overflow-tooltip />
-				<el-table-column prop="beforeData" label="操作前记录" header-align="center" show-overflow-tooltip />
-				<el-table-column prop="afterData" label="操作后记录" header-align="center" show-overflow-tooltip />
 				<el-table-column prop="businessData" label="业务对象" header-align="center" show-overflow-tooltip />
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip />
 			</el-table>
@@ -79,6 +97,10 @@ const handleQuery = async () => {
 	let params = Object.assign(state.queryParams, state.tableParams);
 	var res = await getAPI(SysLogDiffApi).apiSysLogDiffPagePost(params);
 	state.logData = res.data.result?.items ?? [];
+  state.logData.forEach(e => {
+    e.diffData = JSON.parse(e.diffData ?? "[]");
+    e.parameters = JSON.parse(e.parameters ?? "[]");
+  });
 	state.tableParams.total = res.data.result?.total;
 	state.loading = false;
 };
@@ -130,4 +152,11 @@ const shortcuts = [
 .el-popper {
 	max-width: 60%;
 }
+:deep(.el-table__expanded-cell) {
+  margin-left: 10px !important;
+}
+.overflow-text {
+  max-width: 100%; /* 或者你希望的最大宽度 */
+  word-wrap: break-word;
+}
 </style>