Vue3 重构：REVIEW 错误日志

2d4e7e7d · YunaiV · 944b70c0 · 2d4e7e7d · 2d4e7e7d · 2d4e7e7d
Commit 2d4e7e7d authored Mar 22, 2023 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 62 additions and 71 deletions

src/api/infra/apiErrorLog/index.ts
+3 -21

src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
+12 -9

src/views/infra/apiErrorLog/index.vue
+47 -41

No files found.
--- a/src/api/infra/apiErrorLog/index.ts
+++ b/src/api/infra/apiErrorLog/index.ts
@@ -27,38 +27,20 @@ export interface ApiErrorLogVO {
  createTime: Date
 }
-export interface ApiErrorLogPageReqVO extends PageParam {
-  userId?: number
-  userType?: number
-  applicationName?: string
-  requestUrl?: string
-  exceptionTime?: Date[]
-  processStatus: number
-}
-export interface ApiErrorLogExportReqVO {
-  userId?: number
-  userType?: number
-  applicationName?: string
-  requestUrl?: string
-  exceptionTime?: Date[]
-  processStatus: number
-}
 // 查询列表API 访问日志
-export const getApiErrorLogPageApi = (params: PageParam) => {
+export const getApiErrorLogPage = (params: PageParam) => {
  return request.get({ url: '/infra/api-error-log/page', params })
 }
 // 更新 API 错误日志的处理状态
-export const updateApiErrorLogPageApi = (id: number, processStatus: number) => {
+export const updateApiErrorLogPage = (id: number, processStatus: number) => {
  return request.put({
    url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus
  })
 }
 // 导出API 访问日志
-export const exportApiErrorLogApi = (params) => {
+export const exportApiErrorLog = (params) => {
  return request.download({
    url: '/infra/api-error-log/export-excel',
    params

--- a/src/views/infra/apiErrorLog/detail.vue
+++ b/src/views/infra/apiErrorLog/detail.vue
@@ -10,13 +10,18 @@
      <el-descriptions-item label="应用名">
        {{ detailData.applicationName }}
      </el-descriptions-item>
-      <el-descriptions-item label="用户信息">
+      <el-descriptions-item label="用户编号">
-        {{ detailData.userId }} |
+        {{ detailData.userId }}
        <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
-        | {{ detailData.userIp }} | {{ detailData.userAgent }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 IP">
+        {{ detailData.userIp }}
+      </el-descriptions-item>
+      <el-descriptions-item label="用户 UA">
+        {{ detailData.userAgent }}
      </el-descriptions-item>
      <el-descriptions-item label="请求信息">
-        {{ detailData.requestMethod }} | {{ detailData.requestUrl }}
+        {{ detailData.requestMethod }} {{ detailData.requestUrl }}
      </el-descriptions-item>
      <el-descriptions-item label="请求参数">
        {{ detailData.requestParams }}
@@ -27,7 +32,7 @@
      <el-descriptions-item label="异常名">
        {{ detailData.exceptionName }}
      </el-descriptions-item>
-      <el-descriptions-item label="异常名" v-if="detailData.exceptionStackTrace">
+      <el-descriptions-item label="异常堆栈" v-if="detailData.exceptionStackTrace">
        <el-input
          type="textarea"
          :readonly="true"
@@ -50,7 +55,6 @@
    </el-descriptions>
  </Dialog>
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
@@ -61,7 +65,7 @@ const detailLoading = ref(false) // 表单的加载中
 const detailData = ref() // 详情数据
 /** 打开弹窗 */
-const openModal = async (data: ApiErrorLog.ApiErrorLogVO) => {
+const open = async (data: ApiErrorLog.ApiErrorLogVO) => {
  modelVisible.value = true
  // 设置数据
  detailLoading.value = true
@@ -71,6 +75,5 @@ const openModal = async (data: ApiErrorLog.ApiErrorLogVO) => {
    detailLoading.value = false
  }
 }
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 </script>
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
 <template>
-  <content-wrap>
+  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
@@ -25,10 +25,10 @@
          class="!w-240px"
        >
          <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
-            :key="parseInt(dict.value)"
+            :key="dict.value"
            :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
          />
        </el-select>
      </el-form-item>
@@ -53,12 +53,17 @@
        />
      </el-form-item>
      <el-form-item label="处理状态" prop="processStatus">
-        <el-select v-model="queryParams.processStatus" placeholder="请选择处理状态" clearable>
+        <el-select
+          v-model="queryParams.processStatus"
+          placeholder="请选择处理状态"
+          clearable
+          class="!w-240px"
+        >
          <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
-            :key="parseInt(dict.value)"
+            :key="dict.value"
            :label="dict.label"
-            :value="parseInt(dict.value)"
+            :value="dict.value"
          />
        </el-select>
      </el-form-item>
@@ -76,9 +81,10 @@
        </el-button>
      </el-form-item>
    </el-form>
-  </content-wrap>
+  </ContentWrap>
  <!-- 列表 -->
-  <content-wrap>
+  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="日志编号" align="center" prop="id" />
      <el-table-column label="用户编号" align="center" prop="userId" />
@@ -87,15 +93,17 @@
          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
        </template>
      </el-table-column>
-      <el-table-column label="应用名" align="center" prop="applicationName" />
+      <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
-      <el-table-column label="请求方法名" align="center" prop="requestMethod" />
+      <el-table-column label="请求方法" align="center" prop="requestMethod" width="80" />
-      <el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
+      <el-table-column label="请求地址" align="center" prop="requestUrl" width="180" />
-      <el-table-column label="异常发生时间" align="center" prop="exceptionTime" width="180">
+      <el-table-column
-        <template #default="scope">
+        label="异常发生时间"
-          <span>{{ scope.row.exceptionTime }}</span>
+        align="center"
-        </template>
+        prop="exceptionTime"
-      </el-table-column>
+        width="180"
-      <el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="异常名" align="center" prop="exceptionName" width="180" />
      <el-table-column label="处理状态" align="center" prop="processStatus">
        <template #default="scope">
          <dict-tag
@@ -104,12 +112,12 @@
          />
        </template>
      </el-table-column>
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
-            @click="openModal(scope.row)"
+            @click="openDetail(scope.row)"
            v-hasPermi="['infra:api-access-log:query']"
          >
            详细
@@ -118,9 +126,7 @@
            link
            type="primary"
            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-            @click="
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.DONE)"
-              handleProcessClick(InfraApiErrorLogProcessStatusEnum.DONE, '已处理', scope.row.id)
-            "
            v-hasPermi="['infra:api-error-log:update-status']"
          >
            已处理
@@ -128,11 +134,8 @@
          <el-button
            link
            type="primary"
-            icon="el-icon-check"
            v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-            @click="
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.IGNORE)"
-              handleProcessClick(InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略', scope.row.id)
-            "
            v-hasPermi="['infra:api-error-log:update-status']"
          >
            已忽略
@@ -140,7 +143,6 @@
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      :total="total"
@@ -148,18 +150,20 @@
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
-  </content-wrap>
+  </ContentWrap>
  <!-- 表单弹窗：详情 -->
-  <api-error-log-detail ref="modalRef" />
+  <ApiErrorLogDetail ref="detailRef" />
 </template>
 <script setup lang="ts" name="ApiErrorLog">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
-import ApiErrorLogDetail from './detail.vue'
+import ApiErrorLogDetail from './ApiErrorLogDetail.vue'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
 const message = useMessage() // 消息弹窗
 const loading = ref(true) // 列表的加载中
@@ -182,13 +186,14 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
  loading.value = true
  try {
-    const data = await ApiErrorLogApi.getApiErrorLogPageApi(queryParams)
+    const data = await ApiErrorLogApi.getApiErrorLogPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
 }
 /** 搜索按钮操作 */
 const handleQuery = () => {
  queryParams.pageNo = 1
@@ -202,18 +207,19 @@ const resetQuery = () => {
 }
 /** 详情操作 */
-const modalRef = ref()
+const detailRef = ref()
-const openModal = (data: ApiErrorLogApi.ApiErrorLogVO) => {
+const openDetail = (data: ApiErrorLogApi.ApiErrorLogVO) => {
-  modalRef.value.openModal(data)
+  detailRef.value.open(data)
 }
 /** 处理已处理 / 已忽略的操作 **/
-const handleProcessClick = async (processStatus: number, type: string, id: number) => {
+const handleProcess = async (id: number, processStatus: number) => {
  try {
    // 操作的二次确认
+    const type = processStatus === InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'
    await message.confirm('确认标记为' + type + '?')
    // 执行操作
-    await ApiErrorLogApi.updateApiErrorLogPageApi(id, processStatus)
+    await ApiErrorLogApi.updateApiErrorLogPage(id, processStatus)
    await message.success(type)
    // 刷新列表
    await getList()
@@ -227,8 +233,8 @@ const handleExport = async () => {
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
-    const data = await ApiErrorLogApi.exportApiErrorLogApi(queryParams)
+    const data = await ApiErrorLogApi.exportApiErrorLog(queryParams)
-    download.excel(data, '操作日志.xls')
+    download.excel(data, '异常日志.xls')
  } catch {
  } finally {
    exportLoading.value = false