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

src/api/system/operatelog/index.ts

@@ -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 })
 }

src/components/OperateLogV2/src/OperateLogV2.vue

@@ -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>(), {

src/views/crm/business/detail/index.vue

@@ -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

src/views/crm/clue/detail/index.vue

@@ -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,

src/views/crm/contact/detail/index.vue

@@ -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

src/views/crm/contract/detail/index.vue

@@ -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

src/views/crm/customer/detail/index.vue

@@ -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

src/views/crm/product/detail/index.vue

@@ -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

src/views/crm/receivable/detail/index.vue

@@ -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

src/views/crm/receivable/plan/detail/index.vue

@@ -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

src/views/system/operatelog/OperateLogDetail.vue

@@ -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) }}
-      </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 }}
+        {{ formatDate(detailData.createTime) }}
       </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>

src/views/system/operatelog/index.vue

@@ -10,58 +10,65 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="系统模块" prop="module">
+      <el-form-item label="操作人" prop="userId">
+        <el-select
+          v-model="queryParams.userId"
+          multiple
+          placeholder="请输入操作人员"
+          class="!w-240px"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作模块" prop="type">
         <el-input
-          v-model="queryParams.module"
-          placeholder="请输入系统模块"
+          v-model="queryParams.type"
+          placeholder="请输入操作模块"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="操作人员" prop="userNickname">
+      <el-form-item label="操作模块" prop="subType">
         <el-input
-          v-model="queryParams.userNickname"
-          placeholder="请输入操作人员"
+          v-model="queryParams.subType"
+          placeholder="请输入操作模块"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="操作类型" prop="type">
-        <el-select
-          v-model="queryParams.type"
-          placeholder="请选择操作类型"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="操作状态" prop="success">
-        <el-select
-          v-model="queryParams.success"
-          placeholder="请选择操作状态"
+      <el-form-item label="操作内容" prop="action">
+        <el-input
+          v-model="queryParams.action"
+          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="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>