refactor: 系统管理/系统日志 => 系统监控/系统日志

2025-11-11 12:57:10 +08:00 · 2024-04-14 22:51:33 +08:00
parent d2af75fbf9
commit e0378d8a7e
12 changed files with 241 additions and 221 deletions
--- a/src/views/monitor/log/LoginLog.vue
+++ b/src/views/monitor/log/LoginLog.vue
@@ -6,8 +6,8 @@
    :loading="loading"
    :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
    :pagination="pagination"
-    @filterChange="filterChange"
    :disabledTools="['setting']"
+    @filterChange="filterChange"
    @refresh="search"
  >
    <template #custom-left>
@@ -22,7 +22,7 @@
    </template>
    <template #custom-right>
      <a-tooltip content="导出">
-        <a-button @click="onExportFile">
+        <a-button @click="onExport">
          <template #icon>
            <icon-download />
          </template>
@@ -45,22 +45,13 @@
 </template>

 <script setup lang="ts">
-import { listLog,exportLog } from '@/apis'
+import { exportLoginLog, listLog } from '@/apis'
 import type { TableInstance } from '@arco-design/web-vue'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
-import { useTable } from '@/hooks'
-import {useDownload} from '@/hooks'
+import { useTable, useDownload } from '@/hooks'
+
 defineOptions({ name: 'LoginLog' })
-const filterChange = (values,record)=>{
-  try {
-    const slotName = columns[values.split('_').pop()].slotName as string
-    const value = record.join(',')
-    queryForm[slotName] = value
-    search()
-  } catch (error) {
-    search()
-  }
-}
+
 const columns: TableInstance['columns'] = [
  {
    title: '序号',
@@ -95,10 +86,7 @@ const columns: TableInstance['columns'] = [
  { title: '浏览器', dataIndex: 'browser', ellipsis: true, tooltip: true },
  { title: '终端系统', dataIndex: 'os', ellipsis: true, tooltip: true }
 ]
-//导出登录日志
-const onExportFile = ()=>{
-  useDownload(()=>exportLog(queryForm))
-}
+
 const queryForm = reactive({
  module: '登录',
  ip: undefined,
@@ -123,6 +111,22 @@ const reset = () => {
  queryForm.status = undefined
  search()
 }
+
+// 导出
+const onExport = () => {
+  useDownload(() => exportLoginLog(queryForm))
+}
+
+// 过滤查询
+const filterChange = (dataIndex, filteredValues) => {
+  try {
+    const slotName = columns[dataIndex.split('_').pop()].slotName as string
+    queryForm[slotName] = filteredValues.join(',')
+    search()
+  } catch (error) {
+    search()
+  }
+}
 </script>

 <style lang="scss" scoped></style>
--- a/src/views/monitor/log/OperationLog.vue
+++ b/src/views/monitor/log/OperationLog.vue
@@ -7,8 +7,8 @@
    :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
    :pagination="pagination"
    column-resizable
-    @filterChange="filterChange"
    :disabledTools="['setting']"
+    @filterChange="filterChange"
    @refresh="search"
  >
    <template #custom-left>
@@ -22,8 +22,8 @@
      <a-button @click="reset">重置</a-button>
    </template>
    <template #custom-right>
-      <a-tooltip content="导出" @click="onExportFile">
-        <a-button>
+      <a-tooltip content="导出">
+        <a-button @click="onExport">
          <template #icon>
            <icon-download />
          </template>
@@ -56,23 +56,14 @@
 </template>

 <script setup lang="ts">
-import { listLog, type LogResp,exportOperateLog } from '@/apis'
+import { listLog, exportOperationLog, type LogResp } from '@/apis'
 import type { TableInstance } from '@arco-design/web-vue'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
 import OperationLogDetailDrawer from './OperationLogDetailDrawer.vue'
-import { useDownload, useTable } from '@/hooks'
+import { useTable, useDownload } from '@/hooks'

 defineOptions({ name: 'OperationLog' })
-const filterChange = (values,record)=>{
-  try {
-    const slotName = columns[values.split('_').pop()].slotName as string
-    const value = record.join(',')
-    queryForm[slotName] = value
-    search()
-  } catch (error) {
-    search()
-  }
-}
+
 const columns: TableInstance['columns'] = [
  {
    title: '序号',
@@ -109,10 +100,7 @@ const columns: TableInstance['columns'] = [
  { title: '浏览器', dataIndex: 'browser', ellipsis: true, tooltip: true },
  { title: '终端系统', dataIndex: 'os', ellipsis: true, tooltip: true }
 ]
-//导出操作日志
-const onExportFile = ()=>{
-  useDownload(()=>exportOperateLog(queryForm))
-}
+
 const queryForm = reactive({
  description: undefined,
  ip: undefined,
@@ -139,6 +127,22 @@ const reset = () => {
  search()
 }

+// 导出
+const onExport = () => {
+  useDownload(() => exportOperationLog(queryForm))
+}
+
+// 过滤查询
+const filterChange = (dataIndex, filteredValues) => {
+  try {
+    const slotName = columns[dataIndex.split('_').pop()].slotName as string
+    queryForm[slotName] = filteredValues.join(',')
+    search()
+  } catch (error) {
+    search()
+  }
+}
+
 const OperationLogDetailDrawerRef = ref<InstanceType<typeof OperationLogDetailDrawer>>()
 // 查询详情
 const openDetail = (item: LogResp) => {
--- a/src/views/monitor/log/OperationLogDetailDrawer.vue
+++ b/src/views/monitor/log/OperationLogDetailDrawer.vue
@@ -0,0 +1,106 @@
+<template>
+  <a-drawer v-model:visible="visible" title="日志详情" :width="720" :footer="false">
+    <a-descriptions title="基本信息" :column="2" size="large" class="general-description">
+      <a-descriptions-item label="日志 ID">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="Trace ID" >{{ dataDetail?.traceId }}<TextCopy :value="dataDetail?.traceId" /></a-descriptions-item>
+      <a-descriptions-item label="操作人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="操作时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="操作内容">{{ dataDetail?.description }}</a-descriptions-item>
+      <a-descriptions-item label="所属模块">{{ dataDetail?.module }}</a-descriptions-item>
+      <a-descriptions-item label="操作 IP">{{ dataDetail?.ip }}</a-descriptions-item>
+      <a-descriptions-item label="操作地点">{{ dataDetail?.address }}</a-descriptions-item>
+      <a-descriptions-item label="浏览器">{{ dataDetail?.browser }}</a-descriptions-item>
+      <a-descriptions-item label="终端系统">{{ dataDetail?.os }}</a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <a-tag v-if="dataDetail?.status === 1" color="green">成功</a-tag>
+        <a-tag v-else color="red">失败</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="耗时">
+        <a-tag v-if="dataDetail?.timeTaken > 500" color="red">
+          {{ dataDetail?.timeTaken }}ms
+        </a-tag>
+        <a-tag v-else-if="dataDetail?.timeTaken > 200" color="orange">
+          {{ dataDetail?.timeTaken }}ms
+        </a-tag>
+        <a-tag v-else color="green">{{ dataDetail?.timeTaken }} ms</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="请求 URI" :span="2">
+        {{ dataDetail?.requestUrl }}<TextCopy :value="dataDetail?.requestUrl" />
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-descriptions
+      title="响应信息"
+      :column="2"
+      size="large"
+      class="general-description http"
+      style="margin-top: 20px; position: relative"
+    >
+      <a-descriptions-item :span="2">
+        <a-tabs type="card">
+          <a-tab-pane key="1" title="响应头">
+            <JsonPretty v-if="dataDetail?.responseHeaders" :json="dataDetail?.responseHeaders" />
+            <span v-else>无</span>
+          </a-tab-pane>
+          <a-tab-pane key="2" title="响应体">
+            <JsonPretty v-if="dataDetail?.responseBody" :json="dataDetail?.responseBody" />
+            <span v-else>无</span>
+          </a-tab-pane>
+        </a-tabs>
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-descriptions
+      title="请求信息"
+      :column="2"
+      size="large"
+      class="general-description http"
+      style="margin-top: 20px; position: relative"
+    >
+      <a-descriptions-item :span="2">
+        <a-tabs type="card">
+          <a-tab-pane key="1" title="请求头">
+            <JsonPretty v-if="dataDetail?.requestHeaders" :json="dataDetail?.requestHeaders" />
+            <span v-else>无</span>
+          </a-tab-pane>
+          <a-tab-pane key="2" title="请求体">
+            <JsonPretty v-if="dataDetail?.requestBody" :json="dataDetail?.requestBody" />
+            <span v-else>无</span>
+          </a-tab-pane>
+        </a-tabs>
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { getLog, type LogDetailResp } from '@/apis'
+
+const dataId = ref('')
+const dataDetail = ref<LogDetailResp>()
+
+// 查询详情
+const getDataDetail = async () => {
+  const res = await getLog(dataId.value)
+  dataDetail.value = res.data
+}
+
+const visible = ref(false)
+// 打开详情
+const open = async (id: string) => {
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.http :deep(.arco-descriptions-item-label-block) {
+  padding-right: 0;
+}
+
+:deep(.arco-tabs-content) {
+  padding-top: 5px;
+  padding-left: 15px;
+}
+</style>
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -1,12 +1,12 @@
 <template>
  <div class="gi_page">
    <a-card title="系统日志" class="general-card">
-      <a-tabs  type="card-gutter" size="large" :active-key="activeKey" @change="change">
-        <a-tab-pane key="1" title="登录日志"/>
-        <a-tab-pane key="2" title="操作日志"/>
+      <a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
+        <a-tab-pane key="1" title="登录日志" />
+        <a-tab-pane key="2" title="操作日志" />
      </a-tabs>
      <keep-alive>
-          <component :is="PaneMap[activeKey]"></component>
+          <component :is="PaneMap[activeKey]" />
      </keep-alive>
    </a-card>
  </div>
@@ -15,12 +15,15 @@
 <script setup lang="ts">
 import LoginLog from './LoginLog.vue'
 import OperationLog from './OperationLog.vue'
+
 const route = useRoute()
 const router = useRouter()
-const PaneMap:Record<string,Component> = {
+
+const PaneMap: Record<string, Component> = {
  '1': LoginLog,
  '2': OperationLog
 }
+
 const activeKey = ref('1')
 watch(
  () => route.query,
@@ -31,6 +34,7 @@ watch(
  },
  { immediate: true }
 )
+
 const change = (key: string | number) => {
  activeKey.value = key as string
  router.replace({ path: route.path, query: { tabKey: key } })
--- a/src/views/system/log/OperationLogDetailDrawer.vue
+++ b/src/views/system/log/OperationLogDetailDrawer.vue
@@ -1,105 +0,0 @@
-<template>
-  <a-drawer v-model:visible="visible" title="日志详情" :width="720" :footer="false">
-    <a-descriptions title="基本信息" :column="2" size="large" class="general-description">
-      <a-descriptions-item label="日志 ID">{{ operationLog?.id }}</a-descriptions-item>
-      <a-descriptions-item label="Trace ID" >{{ operationLog?.traceId }}<TextCopy :value="operationLog?.traceId"/></a-descriptions-item>
-      <a-descriptions-item label="操作人">{{ operationLog?.createUserString }}</a-descriptions-item>
-      <a-descriptions-item label="操作时间">{{ operationLog?.createTime }}</a-descriptions-item>
-      <a-descriptions-item label="操作内容">{{ operationLog?.description }}</a-descriptions-item>
-      <a-descriptions-item label="所属模块">{{ operationLog?.module }}</a-descriptions-item>
-      <a-descriptions-item label="操作 IP">{{ operationLog?.ip }}</a-descriptions-item>
-      <a-descriptions-item label="操作地点">{{ operationLog?.address }}</a-descriptions-item>
-      <a-descriptions-item label="浏览器">{{ operationLog?.browser }}</a-descriptions-item>
-      <a-descriptions-item label="终端系统">{{ operationLog?.os }}</a-descriptions-item>
-      <a-descriptions-item label="状态">
-        <a-tag v-if="operationLog?.status === 1" color="green">成功</a-tag>
-        <a-tag v-else color="red">失败</a-tag>
-      </a-descriptions-item>
-      <a-descriptions-item label="耗时">
-        <a-tag v-if="operationLog?.timeTaken > 500" color="red">
-          {{ operationLog?.timeTaken }}ms
-        </a-tag>
-        <a-tag v-else-if="operationLog?.timeTaken > 200" color="orange">
-          {{ operationLog?.timeTaken }}ms
-        </a-tag>
-        <a-tag v-else color="green">{{ operationLog?.timeTaken }} ms</a-tag>
-      </a-descriptions-item>
-      <a-descriptions-item label="请求 URI" :span="2">
-        {{ operationLog?.requestUrl }}<TextCopy :value="operationLog?.requestUrl"/>
-      </a-descriptions-item>
-    </a-descriptions>
-    <a-descriptions
-      title="响应信息"
-      :column="2"
-      size="large"
-      class="general-description http"
-      style="margin-top: 20px; position: relative"
-    >
-      <a-descriptions-item :span="2">
-        <a-tabs type="card">
-          <a-tab-pane key="1" title="响应头">
-            <JsonPretty v-if="operationLog?.responseHeaders" :josn="operationLog?.responseHeaders"/>
-            <span v-else>无</span>
-          </a-tab-pane>
-          <a-tab-pane key="2" title="响应体">
-            <JsonPretty v-if="operationLog?.responseBody" :josn="operationLog?.responseBody"/>
-            <span v-else>无</span>
-          </a-tab-pane>
-        </a-tabs>
-      </a-descriptions-item>
-    </a-descriptions>
-    <a-descriptions
-      title="请求信息"
-      :column="2"
-      size="large"
-      class="general-description http"
-      style="margin-top: 20px; position: relative"
-    >
-      <a-descriptions-item :span="2">
-        <a-tabs type="card">
-          <a-tab-pane key="1" title="请求头">
-            <JsonPretty v-if="operationLog?.requestHeaders" :josn="operationLog?.requestHeaders"/>
-            <span v-else>无</span>
-          </a-tab-pane>
-          <a-tab-pane key="2" title="请求体">
-            <JsonPretty v-if="operationLog?.requestBody" :josn="operationLog?.requestBody"/>
-            <span v-else>无</span>
-          </a-tab-pane>
-        </a-tabs>
-      </a-descriptions-item>
-    </a-descriptions>
-  </a-drawer>
-</template>
-
-<script lang="ts" setup>
-import { getLog, type LogDetailResp } from '@/apis'
-import JsonPretty from '@/components/JsonPretty/index.vue'
-const logId = ref('')
-const operationLog = ref<LogDetailResp | null>()
-// 查询详情
-const getOperationLogDetail = async () => {
-  const res = await getLog(logId.value)
-  operationLog.value = res.data
-}
-
-const visible = ref(false)
-// 打开详情
-const open = async (id: string) => {
-  logId.value = id
-  await getOperationLogDetail()
-  visible.value = true
-}
-
-defineExpose({ open })
-</script>
-
-<style lang="scss" scoped>
-.http :deep(.arco-descriptions-item-label-block) {
-  padding-right: 0;
-}
-
-:deep(.arco-tabs-content) {
-  padding-top: 5px;
-  padding-left: 15px;
-}
-</style>