feat：新增公共操作日志详情组件
This commit is contained in:
puhui999
parent
26a082788d
commit
59c6670775
@ -23,6 +23,31 @@ export type OperateLogVO = {
|
||||
resultData: string
|
||||
}
|
||||
|
||||
export type OperateLogV2VO = {
|
||||
id: number
|
||||
userNickname: string
|
||||
traceId: string
|
||||
userType: number
|
||||
userId: number
|
||||
module: string
|
||||
name: string
|
||||
bizId: number
|
||||
content: string
|
||||
extra: string
|
||||
requestMethod: string
|
||||
requestUrl: string
|
||||
userIp: string
|
||||
userAgent: string
|
||||
creator: string
|
||||
creatorName: string
|
||||
createTime: Date
|
||||
// 数据扩展-渲染时使用
|
||||
title: string // 操作标题（如果为空则取 name 值）
|
||||
colSize: number // 变更记录行数
|
||||
contentStrList: string[]
|
||||
tagsContentList: string[]
|
||||
}
|
||||
|
||||
// 查询操作日志列表
|
||||
export const getOperateLogPage = (params: PageParam) => {
|
||||
return request.get({ url: '/system/operate-log/page', params })
|
||||
|
||||
3
src/components/OperateLogV2/index.ts
Normal file
3
src/components/OperateLogV2/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import OperateLogV2 from './src/OperateLogV2.vue'
|
||||
|
||||
export { OperateLogV2 }
|
||||
170
src/components/OperateLogV2/src/OperateLogV2.vue
Normal file
170
src/components/OperateLogV2/src/OperateLogV2.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="p-20px">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(log, index) in logDataList"
|
||||
:key="index"
|
||||
:timestamp="formatDate(log.createTime!)"
|
||||
placement="top"
|
||||
>
|
||||
<div class="el-timeline-right-content">
|
||||
<el-row>
|
||||
<el-col :span="24" class="mb-10px">
|
||||
=======================
|
||||
<el-tag class="mr-10px" type="success">{{ log.creatorName }}</el-tag>
|
||||
<span>{{ log.title }}</span>
|
||||
=======================
|
||||
</el-col>
|
||||
<!-- 先处理一下有几行-->
|
||||
<template v-for="colNum in log.colSize" :key="colNum + 'col'">
|
||||
<el-col :span="24" class="mb-10px">
|
||||
<!-- 处理每一行-->
|
||||
<template
|
||||
v-for="(tagVal, index2) in log.tagsContentList.slice(
|
||||
(colNum - 1) * 3,
|
||||
3 * colNum
|
||||
)"
|
||||
:key="index2"
|
||||
>
|
||||
<el-tag class="mx-10px"> {{ tagVal }}</el-tag>
|
||||
<span>{{ log.contentStrList[index2] }}</span>
|
||||
</template>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
<template #dot>
|
||||
<span :style="{ backgroundColor: getUserTypeColor(log.userType) }" class="dot-node-style">
|
||||
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
|
||||
import { ElTag } from 'element-plus'
|
||||
|
||||
const props = defineProps<{
|
||||
logList: OperateLogV2VO[] // 操作日志列表
|
||||
}>()
|
||||
defineOptions({ name: 'OperateLogV2' })
|
||||
|
||||
/** 获得 userType 颜色 */
|
||||
const getUserTypeColor = (type: number) => {
|
||||
const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
|
||||
switch (dict?.colorType) {
|
||||
case 'success':
|
||||
return '#67C23A'
|
||||
case 'info':
|
||||
return '#909399'
|
||||
case 'warning':
|
||||
return '#E6A23C'
|
||||
case 'danger':
|
||||
return '#F56C6C'
|
||||
}
|
||||
return '#409EFF'
|
||||
}
|
||||
const logDataList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||
// 提取 tag 所需内容和位置
|
||||
const renderTags = (content: string) => {
|
||||
let newStr = unref(content).slice() // 去掉引用
|
||||
newStr = newStr.replaceAll('【】', '【空】').replaceAll('；', '') // 处理掉分号 特殊：处理一下空的情况
|
||||
const regex = /【([^【】]+)】/g
|
||||
const fg = '|' // 原始位置替换符号
|
||||
let match: any[] | null
|
||||
let matchStr: string[] = []
|
||||
let oldStr: string[] = []
|
||||
while ((match = regex.exec(newStr)) !== null) {
|
||||
matchStr.push(match[1]) // 提取值
|
||||
oldStr.push(match[0]) // 原值
|
||||
}
|
||||
// 为什么重新循环不放在 while 中一起是因为替换重新赋值过后 match 值就不准确了
|
||||
oldStr.forEach((item) => {
|
||||
newStr = newStr.replace(item, fg)
|
||||
})
|
||||
return [newStr.split(fg), matchStr]
|
||||
}
|
||||
const initLog = () => {
|
||||
logDataList.value = props.logList.map((logItem) => {
|
||||
const keyValue = renderTags(logItem.content)
|
||||
// 挂载数据
|
||||
logItem.contentStrList = keyValue[0]
|
||||
if (keyValue[0][0] === '从') {
|
||||
logItem.title = logItem.name
|
||||
} else {
|
||||
logItem.title = keyValue[0][0]
|
||||
logItem.contentStrList.splice(0, 1)
|
||||
}
|
||||
logItem.colSize = keyValue[0].length / 3 // 变更记录行数
|
||||
logItem.tagsContentList = keyValue[1]
|
||||
return logItem
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => props.logList.length,
|
||||
(newObj) => {
|
||||
if (newObj) {
|
||||
initLog()
|
||||
console.log(logDataList.value)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 时间线样式调整
|
||||
:deep(.el-timeline) {
|
||||
margin: 10px 0 0 160px;
|
||||
|
||||
.el-timeline-item__wrapper {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
|
||||
.el-timeline-item__timestamp {
|
||||
position: absolute !important;
|
||||
top: 10px;
|
||||
left: -150px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-timeline-right-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 13px; /* 将伪元素水平居中 */
|
||||
border-color: transparent #fff transparent transparent; /* 尖角颜色，左侧朝向 */
|
||||
border-style: solid;
|
||||
border-width: 8px; /* 调整尖角大小 */
|
||||
content: ''; /* 必须设置 content 属性 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-node-style {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user