lxd/FlowBL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vue3 重构：REVIEW 错误日志

Browse Source
This commit is contained in:
YunaiV 2023-03-22 22:40:56 +08:00
parent 944b70c072
commit 2d4e7e7d08
3 changed files with 62 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/api/infra/apiErrorLog/index.ts
View File

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

21
src/views/infra/apiErrorLog/detail.vue → src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
View File

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

88
src/views/infra/apiErrorLog/index.vue
View File

@ -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,9 +126,7 @@
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']"
>
已处理
@ -128,11 +134,8 @@
<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']"
>
已忽略
@ -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 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