feat: 操作日期详情查看

src/components/Table/src/hooks/useRender.ts

@@ -5,6 +5,7 @@ import { isArray, isString } from '@/utils/is'
 import { DictTag } from '@/components/DictTag'
 import { Icon } from '@/components/Icon'
 import TableImg from '../components/TableImg.vue'
+import { JsonPreview } from '@/components/CodeEditor'
 
 export const useRender = {
   /**
@@ -112,5 +113,24 @@ export const useRender = {
     if (text) {
       return h(Icon, { icon: text })
     }
+  },
+  /**
+   * 使用JsonPreview组件  方便预览JSON
+   * @param json json字符串/obj
+   * @returns 能转为json返回JsonPreview 否则返回自身
+   */
+  renderJsonPreview: (json: any) => {
+    if (!json) return ''
+    if (typeof json === 'object') {
+      return h(JsonPreview, { data: json })
+    }
+    if (typeof json === 'string') {
+      try {
+        const data = JSON.parse(json)
+        return h(JsonPreview, { data })
+      } catch (e) {
+        return json
+      }
+    }
   }
 }

src/views/system/operatelog/LogInfoModal.vue

@@ -0,0 +1,27 @@
+<template>
+  <BasicModal v-bind="$attrs" title="操作日志详情" @register="registerModalInner">
+    <Description @register="registerDescription" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { Description, useDescription } from '@/components/Description/index'
+import { ref } from 'vue'
+import { infoSchema } from './operateLog.data'
+
+defineOptions({ name: 'OperLogInfoModal' })
+
+const logData = ref()
+const [registerModalInner] = useModalInner((record: Recordable) => {
+  logData.value = record
+})
+
+const [registerDescription] = useDescription({
+  column: 1,
+  schema: infoSchema,
+  data: logData
+})
+</script>
+
+<style scoped></style>

src/views/system/operatelog/index.vue

@@ -4,16 +4,32 @@
       <template #toolbar>
         <a-button type="warning" :preIcon="IconEnum.EXPORT" @click="handleExport"> {{ t('action.export') }} </a-button>
       </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: IconEnum.VIEW,
+                label: t('action.detail'),
+                onClick: handleShowInfo.bind(null, record)
+              }
+            ]"
+          />
+        </template>
+      </template>
     </BasicTable>
+    <OperLogInfoModal @register="registerModal" />
   </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { IconEnum } from '@/enums/appEnum'
-import { BasicTable, useTable } from '@/components/Table'
+import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { OperateLogPageReqVO, exportOperateLog, getOperateLogPage } from '@/api/system/operatelog'
 import { columns, searchFormSchema } from './operateLog.data'
+import { useModal } from '@/components/Modal'
+import OperLogInfoModal from './LogInfoModal.vue'
 
 defineOptions({ name: 'SystemOperateLog' })
 
@@ -26,7 +42,13 @@ const [registerTable, { getForm }] = useTable({
   formConfig: { labelWidth: 120, schemas: searchFormSchema },
   useSearchForm: true,
   showTableSetting: true,
-  showIndexColumn: false
+  showIndexColumn: false,
+  actionColumn: {
+    width: 140,
+    title: t('common.action'),
+    dataIndex: 'action',
+    fixed: 'right'
+  }
 })
 
 async function handleExport() {
@@ -40,4 +62,9 @@ async function handleExport() {
     }
   })
 }
+
+const [registerModal, { openModal }] = useModal()
+function handleShowInfo(record: Recordable) {
+  openModal(true, record)
+}
 </script>

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

@@ -1,5 +1,6 @@
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DescItem } from '@/components/Description/index'
 
 export const columns: BasicColumn[] = [
   {
@@ -10,7 +11,7 @@ export const columns: BasicColumn[] = [
   {
     title: '操作模块',
     dataIndex: 'module',
-    width: 120
+    width: 200
   },
   {
     title: '操作名',
@@ -20,7 +21,7 @@ export const columns: BasicColumn[] = [
   {
     title: '操作类型',
     dataIndex: 'type',
-    width: 180,
+    width: 120,
     customRender: ({ text }) => {
       return useRender.renderDict(text, DICT_TYPE.SYSTEM_OPERATE_TYPE)
     }
@@ -30,10 +31,14 @@ export const columns: BasicColumn[] = [
     dataIndex: 'userNickname',
     width: 120
   },
+  // {
+  //   title: 'userAgent',
+  //   dataIndex: 'userAgent',
+  //   width: 400
+  // },
   {
-    title: 'userAgent',
-    dataIndex: 'userAgent',
-    width: 400
+    title: '请求路径',
+    dataIndex: 'requestUrl'
   },
   {
     title: '操作结果',
@@ -44,19 +49,19 @@ export const columns: BasicColumn[] = [
     }
   },
   {
-    title: '操作日期',
-    dataIndex: 'startTime',
+    title: '执行时长',
+    dataIndex: 'duration',
     width: 180,
     customRender: ({ text }) => {
-      return useRender.renderDate(text)
+      return useRender.renderText(text, 'ms')
     }
   },
   {
-    title: '执行时长',
-    dataIndex: 'duration',
+    title: '操作日期',
+    dataIndex: 'startTime',
     width: 180,
     customRender: ({ text }) => {
-      return useRender.renderText(text, 'ms')
+      return useRender.renderDate(text)
     }
   }
 ]
@@ -102,3 +107,92 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 }
   }
 ]
+
+const httpMethods = [
+  { value: 'GET', color: '#108ee9' },
+  { value: 'POST', color: '#2db7f5' },
+  { value: 'PUT', color: 'warning' },
+  { value: 'DELETE', color: '#f50' }
+]
+
+export const infoSchema: DescItem[] = [
+  {
+    field: 'module',
+    label: '操作模块'
+  },
+  {
+    field: 'name',
+    label: '操作名'
+  },
+  {
+    field: 'userNickname',
+    label: '操作人',
+    render(_, data) {
+      const { userNickname, userId } = data
+      return useRender.renderText(userNickname, 'uid: ' + userId)
+    }
+  },
+  {
+    field: 'resultCode',
+    label: '请求结果',
+    render(value) {
+      return useRender.renderTag(value === 0 ? '成功' : '失败', value === 0 ? '#87d068' : '#f50')
+    }
+  },
+  {
+    field: 'resultMsg',
+    label: '响应信息',
+    show(data) {
+      return data && data.resultMsg && data.resultMsg !== ''
+    }
+  },
+  {
+    field: 'userIp',
+    label: '请求ip'
+  },
+  {
+    field: 'startTime',
+    label: '请求时间',
+    render(value) {
+      return useRender.renderDate(value)
+    }
+  },
+  {
+    field: 'requestUrl',
+    label: '请求路径'
+  },
+  {
+    field: 'requestMethod',
+    label: '请求方法',
+    render(value) {
+      const current = httpMethods.find((item) => item.value === value.toUpperCase())
+      if (current) {
+        return useRender.renderTag(value, current.color)
+      }
+      return value
+    }
+  },
+  {
+    field: 'javaMethod',
+    label: '操作方法',
+    labelMinWidth: 80
+  },
+  {
+    field: 'javaMethodArgs',
+    label: '请求参数',
+    render(value) {
+      return useRender.renderJsonPreview(value)
+    }
+  },
+  {
+    field: 'userAgent',
+    label: 'userAgent'
+  },
+  {
+    field: 'duration',
+    label: '请求耗时',
+    render(value) {
+      return useRender.renderText(value, 'ms')
+    }
+  }
+]