✨ Introducing new features. 【日志管理】 增加抽屉模板 展示全部信息信息

src/i18n/pages/form/en.ts

@@ -5,6 +5,7 @@ export default {
 		addBtn: 'add',
 		editBtn: 'edit',
 		delBtn: 'delete',
+		detailBtn: 'detail',
 		exportBtn: 'export',
 		refreshCacheBtn: 'refreshCache',
 		importBtn: 'import',

src/i18n/pages/form/zh-cn.ts

@@ -5,6 +5,7 @@ export default {
 		addBtn: '新 增',
 		editBtn: '修 改',
 		delBtn: '删除',
+		detailBtn: '详情',
 		refreshCacheBtn: '刷新缓存',
 		exportBtn: '导出',
 		importBtn: '导入',

src/views/admin/log/detail.vue

@@ -0,0 +1,33 @@
+<template>
+	<el-drawer v-model="visible" title="日志详情" size="50%">
+		<el-descriptions :column="1">
+			<el-descriptions-item :label="$t('syslog.title')">{{ data.title }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.remoteAddr')">{{ data.remoteAddr }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.method')">{{ data.method }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.serviceId')">{{ data.serviceId }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.time')">{{ data.time }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.createTime')">{{ data.createTime }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.requestUri')">{{ data.requestUri }}</el-descriptions-item>
+			<el-descriptions-item :label="$t('syslog.exception')">{{ data.exception }}</el-descriptions-item>
+		</el-descriptions>
+	</el-drawer>
+</template>
+
+<script setup lang="ts" name="log-detail">
+const visible = ref(false);
+
+const data = reactive({} as any);
+
+const openDialog = (row: any) => {
+	visible.value = true;
+	Object.assign(data, row);
+	console.log(data, 'dadadadada');
+};
+
+// 暴露变量
+defineExpose({
+	openDialog,
+});
+</script>
+
+<style scoped></style>

src/views/admin/log/i18n/en.ts

@@ -8,6 +8,8 @@ export default {
 		serviceId: 'serviceId',
 		time: 'time',
 		createTime: 'createTime',
+		requestUri: 'requestUri',
+		exception: 'exception',
 		action: 'action',
 		inputLogTypeTip: 'select logType',
 		inputStartPlaceholderTip: 'Start Time',

src/views/admin/log/i18n/zh-cn.ts

@@ -8,6 +8,8 @@ export default {
 		serviceId: '客户端',
 		time: '请求时间',
 		createTime: '创建时间',
+		requestUri: '请求地址',
+		exception: '异常信息',
 		action: '操作',
 		inputLogTypeTip: '请选择类型',
 		inputStartPlaceholderTip: '开始时间',

src/views/admin/log/index.vue

@@ -62,6 +62,9 @@
 				<el-table-column :label="$t('syslog.createTime')" prop="createTime" show-overflow-tooltip sortable="custom" width="200"></el-table-column>
 				<el-table-column :label="$t('common.action')" width="100">
 					<template #default="scope">
+						<el-button @click="LogDetailRef.openDialog(scope.row)" size="small" text type="primary">
+							{{ $t('common.detailBtn') }}
+						</el-button>
 						<el-button @click="handleDelete([scope.row.id])" size="small" text type="primary" v-auth="'sys_user_del'">
 							{{ $t('common.delBtn') }}
 						</el-button>
@@ -70,6 +73,7 @@
 			</el-table>
 
 			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"> </pagination>
+			<log-detail ref="LogDetailRef"></log-detail>
 		</div>
 	</div>
 </template>
@@ -80,6 +84,9 @@ import { delObj, pageList } from '/@/api/admin/log';
 import { useI18n } from 'vue-i18n';
 import { useMessage, useMessageBox } from '/@/hooks/message';
 import { useDict } from '/@/hooks/dict';
+const LogDetail = defineAsyncComponent(() => import('./detail.vue'));
+
+const LogDetailRef = ref();
 
 const { log_type } = useDict('log_type');