Skip to content

Commit e669dff

Browse files
YunaiVYunaiV
committed
Vue3 重构：操作日志的详情
1 parent c9a30e6 commit e669dff

File tree

5 files changed

+95
-168
lines changed

5 files changed

+95
-168
lines changed

‎src/utils/formatTime.ts

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,7 @@ import dayjs from 'dayjs'
1212
* @returns 返回拼接后的时间字符串
1313
*/
1414
export function formatDate(date: Date, format: string): string {
15-
const we = date.getDay() // 星期
16-
const z = getWeek(date) // 周
17-
const qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度
18-
const opt: { [key: string]: string } = {
19-
'Y+': date.getFullYear().toString(), // 年
20-
'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
21-
'd+': date.getDate().toString(), // 日
22-
'H+': date.getHours().toString(), // 时
23-
'M+': date.getMinutes().toString(), // 分
24-
'S+': date.getSeconds().toString(), // 秒
25-
'q+': qut // 季度
26-
}
27-
// 中文数字 (星期)
28-
const week: { [key: string]: string } = {
29-
'0': '日',
30-
'1': '一',
31-
'2': '二',
32-
'3': '三',
33-
'4': '四',
34-
'5': '五',
35-
'6': '六'
36-
}
37-
// 中文数字（季度）
38-
const quarter: { [key: string]: string } = {
39-
'1': '一',
40-
'2': '二',
41-
'3': '三',
42-
'4': '四'
43-
}
44-
if (/(W+)/.test(format))
45-
format = format.replace(
46-
RegExp.$1,
47-
RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]
48-
)
49-
if (/(Q+)/.test(format))
50-
format = format.replace(
51-
RegExp.$1,
52-
RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]
53-
)
54-
if (/(Z+)/.test(format))
55-
format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '')
56-
for (const k in opt) {
57-
const r = new RegExp('(' + k + ')').exec(format)
58-
// 若输入的长度不为1，则前面补零
59-
if (r)
60-
format = format.replace(
61-
r[1],
62-
RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0')
63-
)
64-
}
65-
return format
15+
return dayjs(date).format(format)
6616
}
6717

6818
/**

‎src/views/system/mail/log/index.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
</Table>
3030
</content-wrap>
3131

32-
<!-- 表单弹窗：添加/修改 -->
33-
<mail-log-detail ref="modalRef" @success="getList" />
32+
<!-- 表单弹窗：详情 -->
33+
<mail-log-detail ref="modalRef" />
3434
</template>
3535
<script setup lang="ts" name="MailLog">
3636
import { allSchemas } from './log.data'
@@ -46,7 +46,7 @@ const { tableObject, tableMethods } = useTable({
4646
// 获得表格的各种操作
4747
const { getList, setSearchParams } = tableMethods
4848
49-
/** 添加/修改操作 */
49+
/** 详情操作 */
5050
const modalRef = ref()
5151
const openModal = (id: number) => {
5252
modalRef.value.openModal(id)

‎src/views/system/operatelog/detail.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
3+
<el-descriptions border :column="1">
4+
<el-descriptions-item label="日志主键" min-width="120">
5+
{{ detailData.id }}
6+
</el-descriptions-item>
7+
<el-descriptions-item label="链路追踪">
8+
{{ detailData.traceId }}
9+
</el-descriptions-item>
10+
<el-descriptions-item label="操作人编号">
11+
{{ detailData.userId }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="操作人名字">
14+
{{ detailData.userNickname }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="操作人 IP">
17+
{{ detailData.userIp }}
18+
</el-descriptions-item>
19+
<el-descriptions-item label="操作人 UA">
20+
{{ detailData.userAgent }}
21+
</el-descriptions-item>
22+
<el-descriptions-item label="操作模块">
23+
{{ detailData.module }}
24+
</el-descriptions-item>
25+
<el-descriptions-item label="操作名">
26+
{{ detailData.name }}
27+
</el-descriptions-item>
28+
<el-descriptions-item label="操作内容" v-if="detailData.content">
29+
{{ detailData.content }}
30+
</el-descriptions-item>
31+
<el-descriptions-item label="操作拓展参数" v-if="detailData.exts">
32+
{{ detailData.exts }}
33+
</el-descriptions-item>
34+
<el-descriptions-item label="请求 URL">
35+
{{ detailData.requestMethod }} {{ detailData.requestUrl }}
36+
</el-descriptions-item>
37+
<el-descriptions-item label="Java 方法名">
38+
{{ detailData.javaMethod }}
39+
</el-descriptions-item>
40+
<el-descriptions-item label="Java 方法参数">
41+
{{ detailData.javaMethodArgs }}
42+
</el-descriptions-item>
43+
<el-descriptions-item label="操作时间">
44+
{{ formatDate(detailData.startTime, 'YYYY-MM-DD HH:mm:ss') }}
45+
</el-descriptions-item>
46+
<el-descriptions-item label="执行时长">{{ detailData.duration }} ms</el-descriptions-item>
47+
<el-descriptions-item label="操作结果">
48+
<div v-if="detailData.resultCode === 0">正常</div>
49+
<div v-else>失败({{ detailData.resultCode }})</div>
50+
</el-descriptions-item>
51+
<el-descriptions-item label="操作结果" v-if="detailData.resultCode === 0">
52+
{{ detailData.resultData }}
53+
</el-descriptions-item>
54+
<el-descriptions-item label="失败提示" v-if="detailData.resultCode > 0">
55+
{{ detailData.resultMsg }}
56+
</el-descriptions-item>
57+
</el-descriptions>
58+
</Dialog>
59+
</template>
60+
<script setup lang="ts">
61+
import { formatDate } from '@/utils/formatTime'
62+
import * as OperateLogApi from '@/api/system/operatelog'
63+
64+
const modelVisible = ref(false) // 弹窗的是否展示
65+
const detailLoading = ref(false) // 表单的加载中
66+
const detailData = ref() // 详情数据
67+
68+
/** 打开弹窗 */
69+
const openModal = async (data: OperateLogApi.OperateLogVO) => {
70+
modelVisible.value = true
71+
// 设置数据
72+
detailLoading.value = true
73+
try {
74+
detailData.value = data
75+
} finally {
76+
detailLoading.value = false
77+
}
78+
}
79+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
80+
</script>

‎src/views/system/operatelog/index.vue

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<el-form-item label="类型" prop="type">
2222
<el-select v-model="queryParams.type" placeholder="操作类型" clearable>
2323
<el-option
24-
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
24+
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
2525
:key="parseInt(dict.value)"
2626
:label="dict.label"
2727
:value="parseInt(dict.value)"
@@ -94,7 +94,7 @@
9494
<el-button
9595
link
9696
type="primary"
97-
@click="openModal('update', scope.row.id)"
97+
@click="openModal(scope.row)"
9898
v-hasPermi="['infra:config:query']"
9999
>
100100
详情
@@ -110,13 +110,16 @@
110110
@pagination="getList"
111111
/>
112112
</content-wrap>
113+
114+
<!-- 表单弹窗：详情 -->
115+
<operate-log-detail ref="modalRef" />
113116
</template>
114117
<script setup lang="ts" name="OperateLog">
115118
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
116119
import { dateFormatter } from '@/utils/formatTime'
117120
import download from '@/utils/download'
118121
import * as OperateLogApi from '@/api/system/operatelog'
119-
// import ConfigForm from './form.vue'
122+
import OperateLogDetail from './detail.vue'
120123
const message = useMessage() // 消息弹窗
121124
122125
const loading = ref(true) // 列表的加载中
@@ -158,11 +161,11 @@ const resetQuery = () => {
158161
handleQuery()
159162
}
160163
161-
/** 添加/修改操作 */
162-
// const modalRef = ref()
163-
// const openModal = (type: string, id?: number) => {
164-
// modalRef.value.openModal(type, id)
165-
// }
164+
/** 详情操作 */
165+
const modalRef = ref()
166+
const openModal = (data: OperateLogApi.OperateLogVO) => {
167+
modalRef.value.openModal(data)
168+
}
166169
167170
/** 导出按钮操作 */
168171
const handleExport = async () => {

‎src/views/system/operatelog/operatelog.data.ts

Lines changed: 0 additions & 106 deletions
This file was deleted.

0 commit comments

Comments
 (0)