Vue3 重构：REVIEW 错误日志

Author: YunaiV

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

src/views/infra/apiErrorLog/detail.vue renamed to src/views/infra/apiErrorLog/ApiErrorLogDetail.vue

@@ -10,13 +10,18 @@
       <el-descriptions-item label="应用名">
         {{ detailData.applicationName }}
       </el-descriptions-item>
-      <el-descriptions-item label="用户信息">
-        {{ detailData.userId }} |
+      <el-descriptions-item label="用户编号">
+        {{ 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({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>

src/views/infra/apiErrorLog/index.vue

@@ -1,5 +1,5 @@
 <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)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :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)"
-            :key="parseInt(dict.value)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
+            :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="requestMethod" />
-      <el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
-      <el-table-column label="异常发生时间" align="center" prop="exceptionTime" width="180">
-        <template #default="scope">
-          <span>{{ scope.row.exceptionTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
+      <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
+      <el-table-column label="请求方法" align="center" prop="requestMethod" width="80" />
+      <el-table-column label="请求地址" align="center" prop="requestUrl" width="180" />
+      <el-table-column
+        label="异常发生时间"
+        align="center"
+        prop="exceptionTime"
+        width="180"
+        :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,48 +126,44 @@
             link
             type="primary"
             v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-            @click="
-              handleProcessClick(InfraApiErrorLogProcessStatusEnum.DONE, '已处理', scope.row.id)
-            "
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.DONE)"
             v-hasPermi="['infra:api-error-log:update-status']"
           >
             已处理
           </el-button>
           <el-button
             link
             type="primary"
-            icon="el-icon-check"
             v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-            @click="
-              handleProcessClick(InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略', scope.row.id)
-            "
+            @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.IGNORE)"
             v-hasPermi="['infra:api-error-log:update-status']"
           >
             已忽略
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-
     <!-- 分页组件 -->
     <Pagination
       :total="total"
       v-model:page="queryParams.pageNo"
       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 openModal = (data: ApiErrorLogApi.ApiErrorLogVO) => {
-  modalRef.value.openModal(data)
+const detailRef = ref()
+const openDetail = (data: ApiErrorLogApi.ApiErrorLogVO) => {
+  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)
-    download.excel(data, '操作日志.xls')
+    const data = await ApiErrorLogApi.exportApiErrorLog(queryParams)
+    download.excel(data, '异常日志.xls')
   } catch {
   } finally {
     exportLoading.value = false