在el-table的列表中增加后端排序样例

Signed-off-by: pddeng <517849241@qq.com>

Admin.NET/Admin.NET.Core/Entity/SysLogOp.cs

@@ -6,6 +6,12 @@
 [SugarTable("sys_log_op", "系统操作日志表")]
 public class SysLogOp : EntityTenant
 {
+    /// <summary>
+    /// 行号
+    /// </summary>
+    [SugarColumn(IsIgnore = true)]
+    public virtual int RowIndex { get; set; }
+
     /// <summary>
     /// 记录器类别名称
     /// </summary>

Admin.NET/Admin.NET.Core/Service/Logging/SysLogOpService.cs

@@ -26,7 +26,8 @@ public class SysLogOpService : IDynamicApiController, ITransient
         return await _sysLogOpRep.AsQueryable()
             .WhereIF(!string.IsNullOrWhiteSpace(input.StartTime.ToString()) && !string.IsNullOrWhiteSpace(input.EndTime.ToString()),
                 u => u.CreateTime >= input.StartTime && u.CreateTime <= input.EndTime)
-            .OrderBy(u => u.CreateTime, OrderByType.Desc)
+            //.OrderBy(u => u.CreateTime, OrderByType.Desc)
+            .OrderBuilder<SysLogOp>(input)
             .ToPagedListAsync(input.Page, input.PageSize);
     }
 

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

@@ -18,16 +18,17 @@
 		</el-card>
 
 		<el-card shadow="hover" style="margin-top: 8px">
-			<el-table :data="logData" style="width: 100%" border>
-				<el-table-column type="index" label="序号" width="55" align="center" />
-				<el-table-column prop="logName" label="类别名称" show-overflow-tooltip />
-				<el-table-column prop="logLevel" label="日志级别" width="100" align="center" show-overflow-tooltip />
+			<el-table :data="logData" @sort-change="sortChange" style="width: 100%" border>
+				<!-- <el-table-column type="index" label="序号" width="55" align="center" /> -->
+        <el-table-column prop="rowIndex" label="序号" width="55" align="center" />
+				<el-table-column prop="logName" label="类别名称" sortable='custom' show-overflow-tooltip />
+				<el-table-column prop="logLevel" label="日志级别" sortable='custom' width="110" align="center" show-overflow-tooltip />
 				<el-table-column prop="eventId" label="事件Id" width="70" align="center" show-overflow-tooltip />
 				<el-table-column prop="message" label="日志消息" show-overflow-tooltip />
 				<el-table-column prop="state" label="当前状态值" show-overflow-tooltip />
-				<el-table-column prop="threadId" label="线程Id" width="70" align="center" show-overflow-tooltip />
+				<el-table-column prop="threadId" label="线程Id" sortable='custom' width="90" align="center" show-overflow-tooltip />
 				<el-table-column prop="traceId" label="请求跟踪Id" show-overflow-tooltip />
-				<el-table-column prop="logDateTime" label="记录时间" align="center" show-overflow-tooltip />
+				<el-table-column prop="logDateTime" label="记录时间" sortable='custom' align="center" show-overflow-tooltip />
 				<!-- <el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip /> -->
 				<el-table-column prop="exception" label="异常对象" show-overflow-tooltip />
 				<el-table-column label="操作" width="80" align="center" fixed="right" show-overflow-tooltip>
@@ -82,6 +83,9 @@ export default defineComponent({
 			tableParams: {
 				page: 1,
 				pageSize: 10,
+        field: 'createTime', //默认的排序字段
+        order: 'descending', //排序方向
+        descStr: 'descending',//降序排序的关键字符，element-plus是descending； ant-design是descend
 				total: 0 as any,
 			},
 			logData: [] as Array<SysLogOp>,
@@ -96,7 +100,7 @@ export default defineComponent({
 			if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
 			if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
 			state.loading = true;
-			var res = await getAPI(SysLogOpApi).sysLogOpPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize);
+			var res = await getAPI(SysLogOpApi).sysLogOpPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize, state.tableParams.field, state.tableParams.order, state.tableParams.descStr);
 			state.logData = res.data.result?.items ?? [];
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -162,6 +166,11 @@ export default defineComponent({
 				},
 			},
 		];
+    const sortChange = (column: any) => {
+      state.tableParams.field = column.prop;
+      state.tableParams.order = column.order;
+      handleQuery();
+    };
 		return {
 			handleQuery,
 			resetQuery,
@@ -171,6 +180,7 @@ export default defineComponent({
 			handleSizeChange,
 			handleCurrentChange,
 			viewDetail,
+      sortChange,
 			...toRefs(state),
 		};
 	},