!463 优化日志显示

Merge pull request !463 from yaohua shao/N/A

vue-next-admin/src/views/system/log/oplog/index.vue

@@ -3,25 +3,19 @@
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item label="开始时间" prop="name">
-					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item label="结束时间" prop="code">
-					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 5px;">
+		<el-card shadow="hover" style="margin-top: 5px">
 			<el-table :data="logData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="logName" label="记录器类别名称" show-overflow-tooltip></el-table-column>
@@ -31,15 +25,34 @@
 				<el-table-column prop="exception" label="异常对象" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="state" label="当前状态值" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="threadId" label="线程Id" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="110" align="center" fixed="right" show-overflow-tooltip>
+					<template #default="scope">
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="viewdetail(scope.row)">查看详情 </el-button>
+					</template>
+				</el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
+		<el-dialog v-model="dialogVisible" title="Tips" width="700px">
+			<pre>{{content}}</pre>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button type="primary" @click="dialogVisible = false">确认</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
@@ -66,19 +79,23 @@ export default defineComponent({
 				total: 0 as any,
 			},
 			logData: [] as any,
+			dialogVisible: false,
+			content:"",
 		});
 		onMounted(async () => {
 			handleQuery();
 		});
 		// 查询操作
 		const handleQuery = async () => {
-			if (state.queryParams.startTime == null)
-				state.queryParams.startTime = undefined;
-			if (state.queryParams.endTime == null)
-				state.queryParams.endTime = undefined;
+			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.logData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -108,6 +125,12 @@ export default defineComponent({
 			state.tableParams.page = val;
 			handleQuery();
 		};
+		const viewdetail = (row: any) => {
+			debugger
+			state.content=row.state;
+			state.dialogVisible = true;
+		};
+
 		const shortcuts = [
 			{
 				text: '今天',
@@ -116,20 +139,20 @@ export default defineComponent({
 			{
 				text: '昨天',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24);
+					return date;
 				},
 			},
 			{
 				text: '上周',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+					return date;
 				},
 			},
-		]
+		];
 		return {
 			handleQuery,
 			resetQuery,
@@ -137,6 +160,7 @@ export default defineComponent({
 			shortcuts,
 			handleSizeChange,
 			handleCurrentChange,
+			viewdetail,
 			...toRefs(state),
 		};
 	},
@@ -148,4 +172,12 @@ export default defineComponent({
 	//font-size: 14px;
 	max-width: 60%;
 }
-</style>
+pre {
+    white-space: break-spaces;
+    line-height: 17px;
+    margin-bottom: 0;
+    overflow: hidden;
+	font-size: 1em;
+    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+}
+</style>