root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【重构】V2 操作日志转正，基于注解的可使用变量、可以自定义函数的通用操作日志组件

Browse Source
This commit is contained in:
YunaiV 2024-04-04 01:21:27 +08:00
parent 757281ce34
commit c01571d11d
12 changed files with 93 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/system/operatelog/index.ts
View File

@ -2,30 +2,6 @@ import request from '@/config/axios'
export type OperateLogVO = {
id: number
userNickname: string
traceId: string
userId: number
module: string
name: string
type: number
content: string
exts: Map<String, Object>
requestMethod: string
requestUrl: string
userIp: string
userAgent: string
javaMethod: string
javaMethodArgs: string
startTime: Date
duration: number
resultCode: number
resultMsg: string
resultData: string
}
export type OperateLogV2VO = {
id: number
userNickname: string
traceId: string
userType: number
userId: number
@ -42,11 +18,6 @@ export type OperateLogV2VO = {
creator: string
creatorName: string
createTime: Date
// 数据扩展，渲染时使用
title: string // 操作标题（如果为空则取 name 值）
colSize: number // 变更记录行数
contentStrList: string[]
tagsContentList: string[]
}
// 查询操作日志列表
@ -54,6 +25,6 @@ export const getOperateLogPage = (params: PageParam) => {
return request.get({ url: '/system/operate-log/page', params })
}
// 导出操作日志
export const exportOperateLog = (params) => {
export const exportOperateLog = (params: any) => {
return request.download({ url: '/system/operate-log/export', params })
}

4
src/components/OperateLogV2/src/OperateLogV2.vue
View File

@ -23,7 +23,7 @@
</template>
<script lang="ts" setup>
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
import { ElTag } from 'element-plus'
@ -31,7 +31,7 @@ import { ElTag } from 'element-plus'
defineOptions({ name: 'OperateLogV2' })
interface Props {
logList: OperateLogV2VO[] // 操作日志列表
logList: OperateLogVO[] // 操作日志列表
}
withDefaults(defineProps<Props>(), {

4
src/views/crm/business/detail/index.vue
View File

@ -64,7 +64,7 @@ import BusinessDetailsHeader from './BusinessDetailsHeader.vue'
import BusinessDetailsInfo from './BusinessDetailsInfo.vue'
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
import { BizTypeEnum } from '@/api/crm/permission'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import BusinessForm from '@/views/crm/business/BusinessForm.vue'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
@ -113,7 +113,7 @@ const transfer = () => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (contactId: number) => {
if (!contactId) {
return

4
src/views/crm/clue/detail/index.vue
View File

@ -57,7 +57,7 @@ import PermissionList from '@/views/crm/permission/components/PermissionList.vue
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import FollowUpList from '@/views/crm/followup/index.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogV2VO } from '@/api/system/operatelog'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
defineOptions({ name: 'CrmClueDetail' })
@ -103,7 +103,7 @@ const handleTransform = async () => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
const data = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CLUE,

4
src/views/crm/contact/detail/index.vue
View File

@ -49,7 +49,7 @@ import ContactDetailsInfo from '@/views/crm/contact/detail/ContactDetailsInfo.vu
import BusinessList from '@/views/crm/business/components/BusinessList.vue' // 商机列表
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
import { BizTypeEnum } from '@/api/crm/permission'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import ContactForm from '@/views/crm/contact/ContactForm.vue'
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
@ -88,7 +88,7 @@ const transfer = () => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (contactId: number) => {
if (!contactId) {
return

4
src/views/crm/contract/detail/index.vue
View File

@ -52,7 +52,7 @@
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import * as ContractApi from '@/api/crm/contract'
import ContractDetailsInfo from './ContractDetailsInfo.vue'
import ContractDetailsHeader from './ContractDetailsHeader.vue'
@ -94,7 +94,7 @@ const getContractData = async () => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (contractId: number) => {
if (!contractId) {
return

4
src/views/crm/customer/detail/index.vue
View File

@ -93,7 +93,7 @@ import PermissionList from '@/views/crm/permission/components/PermissionList.vue
import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
import FollowUpList from '@/views/crm/followup/index.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogV2VO } from '@/api/system/operatelog'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import CustomerDistributeForm from '@/views/crm/customer/pool/CustomerDistributeForm.vue'
@ -185,7 +185,7 @@ const handlePutPool = async () => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
if (!customerId.value) {
return

4
src/views/crm/product/detail/index.vue
View File

@ -13,7 +13,7 @@
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import * as ProductApi from '@/api/crm/product'
import ProductDetailsHeader from '@/views/crm/product/detail/ProductDetailsHeader.vue'
import ProductDetailsInfo from '@/views/crm/product/detail/ProductDetailsInfo.vue'
@ -40,7 +40,7 @@ const getProductData = async (id: number) => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (productId: number) => {
if (!productId) {
return

4
src/views/crm/receivable/detail/index.vue
View File

@ -34,7 +34,7 @@ import ReceivableDetailsHeader from './ReceivableDetailsHeader.vue'
import ReceivableDetailsInfo from './ReceivableDetailsInfo.vue'
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
import { BizTypeEnum } from '@/api/crm/permission'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import ReceivableForm from '@/views/crm/receivable/ReceivableForm.vue'
@ -66,7 +66,7 @@ const openForm = (type: string, id?: number) => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (receivableId: number) => {
if (!receivableId) {
return

4
src/views/crm/receivable/plan/detail/index.vue
View File

@ -37,7 +37,7 @@ import ReceivablePlanDetailsHeader from './ReceivablePlanDetailsHeader.vue'
import ReceivablePlanDetailsInfo from './ReceivablePlanDetailsInfo.vue'
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
import { BizTypeEnum } from '@/api/crm/permission'
import { OperateLogV2VO } from '@/api/system/operatelog'
import { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import ReceivablePlanForm from '@/views/crm/receivable/plan/ReceivablePlanForm.vue'
@ -70,7 +70,7 @@ const openForm = (type: string, id?: number) => {
}
/** 获取操作日志 */
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async (receivablePlanId: number) => {
if (!receivablePlanId) {
return

36
src/views/system/operatelog/OperateLogDetail.vue
View File

@ -4,14 +4,14 @@
<el-descriptions-item label="日志主键" min-width="120">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="链路追踪">
<el-descriptions-item label="链路追踪" v-if="detailData.traceId">
{{ detailData.traceId }}
</el-descriptions-item>
<el-descriptions-item label="操作人编号">
{{ detailData.userId }}
</el-descriptions-item>
<el-descriptions-item label="操作人名字">
{{ detailData.userNickname }}
{{ detailData.userName }}
</el-descriptions-item>
<el-descriptions-item label="操作人 IP">
{{ detailData.userIp }}
@ -20,39 +20,25 @@
{{ detailData.userAgent }}
</el-descriptions-item>
<el-descriptions-item label="操作模块">
{{ detailData.module }}
{{ detailData.type }}
</el-descriptions-item>
<el-descriptions-item label="操作名">
{{ detailData.name }}
{{ detailData.subType }}
</el-descriptions-item>
<el-descriptions-item v-if="detailData.content" label="操作内容">
{{ detailData.content }}
<el-descriptions-item label="操作内容">
{{ detailData.action }}
</el-descriptions-item>
<el-descriptions-item v-if="detailData.exts" label="操作拓展参数">
{{ detailData.exts }}
<el-descriptions-item v-if="detailData.extra" label="操作拓展参数">
{{ detailData.extra }}
</el-descriptions-item>
<el-descriptions-item label="请求 URL">
{{ detailData.requestMethod }} {{ detailData.requestUrl }}
</el-descriptions-item>
<el-descriptions-item label="Java 方法名">
{{ detailData.javaMethod }}
</el-descriptions-item>
<el-descriptions-item label="Java 方法参数">
{{ detailData.javaMethodArgs }}
</el-descriptions-item>
<el-descriptions-item label="操作时间">
{{ formatDate(detailData.startTime) }}
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="执行时长">{{ detailData.duration }} ms</el-descriptions-item>
<el-descriptions-item label="操作结果">
<div v-if="detailData.resultCode === 0">正常</div>
<div v-else>失败({{ detailData.resultCode }})</div>
</el-descriptions-item>
<el-descriptions-item v-if="detailData.resultCode === 0" label="操作结果">
{{ detailData.resultData }}
</el-descriptions-item>
<el-descriptions-item v-if="detailData.resultCode > 0" label="失败提示">
{{ detailData.resultMsg }}
<el-descriptions-item label="业务编号">
{{ detailData.bizId }}
</el-descriptions-item>
</el-descriptions>
</Dialog>

127
src/views/system/operatelog/index.vue
View File

@ -10,58 +10,65 @@
:inline="true"
label-width="68px"
>
<el-form-item label="系统模块" prop="module">
<el-input
v-model="queryParams.module"
placeholder="请输入系统模块"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="操作人员" prop="userNickname">
<el-input
v-model="queryParams.userNickname"
placeholder="请输入操作人员"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="操作类型" prop="type">
<el-form-item label="操作人" prop="userId">
<el-select
v-model="queryParams.type"
placeholder="请选择操作类型"
clearable
v-model="queryParams.userId"
multiple
placeholder="请输入操作人员"
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
v-for="user in userList"
:key="user.id"
:label="user.nickname"
:value="user.id"
/>
</el-select>
</el-form-item>
<el-form-item label="操作状态" prop="success">
<el-select
v-model="queryParams.success"
placeholder="请选择操作状态"
<el-form-item label="操作模块" prop="type">
<el-input
v-model="queryParams.type"
placeholder="请输入操作模块"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
>
<el-option key="true" label="成功" :value="true" />
<el-option key="false" label="失败" :value="false" />
</el-select>
/>
</el-form-item>
<el-form-item label="操作时间" prop="startTime">
<el-form-item label="操作模块" prop="subType">
<el-input
v-model="queryParams.subType"
placeholder="请输入操作模块"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="操作内容" prop="action">
<el-input
v-model="queryParams.action"
placeholder="请输入操作名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="操作时间" prop="createTime">
<el-date-picker
v-model="queryParams.startTime"
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="业务编号" prop="bizId">
<el-input
v-model="queryParams.bizId"
placeholder="请输入业务编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
@ -84,33 +91,21 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="日志编号" align="center" prop="id" />
<el-table-column label="操作模块" align="center" prop="module" width="180" />
<el-table-column label="操作名" align="center" prop="name" width="180" />
<el-table-column label="操作类型" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="操作人" align="center" prop="userNickname" />
<el-table-column label="操作结果" align="center" prop="status">
<template #default="scope">
<span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
</template>
</el-table-column>
<el-table-column label="日志编号" align="center" prop="id" width="100" />
<el-table-column label="操作人" align="center" prop="userName" width="120" />
<el-table-column label="操作模块" align="center" prop="type" width="120" />
<el-table-column label="操作名" align="center" prop="subType" width="160" />
<el-table-column label="操作内容" align="center" prop="action" />
<el-table-column
label="操作时间"
align="center"
prop="startTime"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="执行时长" align="center" prop="startTime">
<template #default="scope">
<span>{{ scope.row.duration }} ms</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column label="业务编号" align="center" prop="bizId" width="120" />
<el-table-column label="IP" align="center" prop="userIp" width="120" />
<el-table-column label="操作" align="center" fixed="right" width="60">
<template #default="scope">
<el-button
link
@ -136,11 +131,12 @@
<OperateLogDetail ref="detailRef" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as OperateLogApi from '@/api/system/operatelog'
import OperateLogDetail from './OperateLogDetail.vue'
import * as UserApi from '@/api/system/user'
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
defineOptions({ name: 'SystemOperateLog' })
@ -152,11 +148,12 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
module: undefined,
userNickname: undefined,
userId: undefined,
type: undefined,
success: undefined,
startTime: []
subType: undefined,
action: undefined,
createTime: [],
bizId: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
@ -207,7 +204,9 @@ const handleExport = async () => {
}
/** 初始化 **/
onMounted(() => {
getList()
onMounted(async () => {
await getList()
// 获得用户列表
userList.value = await UserApi.getSimpleUserList()
})
</script>