mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-23 23:35:06 +08:00
Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # src/views/infra/codegen/components/BasicInfoForm.vue # src/views/infra/codegen/components/ImportTable.vue
This commit is contained in:
dlarmor
65
src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
Normal file
65
src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
|
||||
<el-descriptions border :column="1">
|
||||
<el-descriptions-item label="日志主键" min-width="120">
|
||||
{{ detailData.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="链路追踪">
|
||||
{{ detailData.traceId }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="应用名">
|
||||
{{ detailData.applicationName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户信息">
|
||||
{{ detailData.userId }}
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
|
||||
</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 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="请求参数">
|
||||
{{ detailData.requestParams }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="请求时间">
|
||||
{{ formatDate(detailData.beginTime) }} ~ {{ formatDate(detailData.endTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="请求耗时">{{ detailData.duration }} ms</el-descriptions-item>
|
||||
<el-descriptions-item label="操作结果">
|
||||
<div v-if="detailData.resultCode === 0">正常</div>
|
||||
<div v-else-if="detailData.resultCode > 0"
|
||||
>失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}</div
|
||||
>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import * as ApiAccessLog from '@/api/infra/apiAccessLog'
|
||||
|
||||
const modelVisible = ref(false) // 弹窗的是否展示
|
||||
const detailLoading = ref(false) // 表单地加载中
|
||||
const detailData = ref() // 详情数据
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (data: ApiAccessLog.ApiAccessLogVO) => {
|
||||
modelVisible.value = true
|
||||
// 设置数据
|
||||
detailLoading.value = true
|
||||
try {
|
||||
detailData.value = data
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
@ -1,74 +0,0 @@
|
||||
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'id',
|
||||
primaryTitle: '日志编号',
|
||||
action: true,
|
||||
actionWidth: '80px',
|
||||
columns: [
|
||||
{
|
||||
title: '链路追踪',
|
||||
field: 'traceId',
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
title: '用户编号',
|
||||
field: 'userId',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
field: 'userType',
|
||||
dictType: DICT_TYPE.USER_TYPE,
|
||||
dictClass: 'number',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '应用名',
|
||||
field: 'applicationName',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '请求方法名',
|
||||
field: 'requestMethod'
|
||||
},
|
||||
{
|
||||
title: '请求地址',
|
||||
field: 'requestUrl',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '请求时间',
|
||||
field: 'beginTime',
|
||||
formatter: 'formatDate',
|
||||
search: {
|
||||
show: true,
|
||||
itemRender: {
|
||||
name: 'XDataTimePicker'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '执行时长',
|
||||
field: 'duration',
|
||||
table: {
|
||||
slots: {
|
||||
default: 'duration_default'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作结果',
|
||||
field: 'resultCode',
|
||||
isSearch: true,
|
||||
table: {
|
||||
slots: {
|
||||
default: 'resultCode_default'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
@ -1,62 +1,220 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 列表 -->
|
||||
<XTable @register="registerTable">
|
||||
<template #duration_default="{ row }">
|
||||
<span>{{ row.duration + 'ms' }}</span>
|
||||
</template>
|
||||
<template #resultCode_default="{ row }">
|
||||
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<!-- 操作：详情 -->
|
||||
<XTextButton
|
||||
preIcon="ep:view"
|
||||
:title="t('action.detail')"
|
||||
v-hasPermi="['infra:api-access-log:query']"
|
||||
@click="handleDetail(row)"
|
||||
<content-wrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="用户编号" prop="userId">
|
||||
<el-input
|
||||
v-model="queryParams.userId"
|
||||
placeholder="请输入用户编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</template>
|
||||
</XTable>
|
||||
</ContentWrap>
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
|
||||
<template #duration="{ row }">
|
||||
<span>{{ row.duration + 'ms' }}</span>
|
||||
</template>
|
||||
<template #resultCode="{ row }">
|
||||
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" prop="userType">
|
||||
<el-select
|
||||
v-model="queryParams.userType"
|
||||
placeholder="请选择用户类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名" prop="applicationName">
|
||||
<el-input
|
||||
v-model="queryParams.applicationName"
|
||||
placeholder="请输入应用名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间" prop="beginTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行时长" prop="duration">
|
||||
<el-input
|
||||
v-model="queryParams.duration"
|
||||
placeholder="请输入执行时长"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果码" prop="resultCode">
|
||||
<el-input
|
||||
v-model="queryParams.resultCode"
|
||||
placeholder="请输入结果码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['infra:api-error-log:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</content-wrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<content-wrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="日志编号" align="center" prop="id" />
|
||||
<el-table-column label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column label="用户类型" align="center" prop="userType">
|
||||
<template #default="scope">
|
||||
<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" width="80" />
|
||||
<el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
|
||||
<el-table-column label="请求时间" align="center" prop="beginTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDate(scope.row.beginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行时长" align="center" prop="duration" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.duration }} ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作结果" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
scope.row.resultCode === 0 ? '成功' : '失败(' + scope.row.resultMsg + ')'
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row)"
|
||||
v-hasPermi="['infra:api-access-log:query']"
|
||||
>
|
||||
详细
|
||||
</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>
|
||||
|
||||
<!-- 表单弹窗：详情 -->
|
||||
<ApiAccessLogDetail ref="detailRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ApiAccessLog">
|
||||
import { allSchemas } from './apiAccessLog.data'
|
||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
||||
import download from '@/utils/download'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
|
||||
import ApiAccessLogDetail from './ApiAccessLogDetail.vue'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
// 列表相关的变量
|
||||
const [registerTable] = useXTable({
|
||||
allSchemas: allSchemas,
|
||||
topActionSlots: false,
|
||||
getListApi: ApiAccessLogApi.getApiAccessLogPageApi
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userId: null,
|
||||
userType: null,
|
||||
applicationName: null,
|
||||
requestUrl: null,
|
||||
duration: null,
|
||||
resultCode: null,
|
||||
beginTime: []
|
||||
})
|
||||
// ========== 详情相关 ==========
|
||||
const detailData = ref() // 详情 Ref
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('') // 弹出层标题
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = (row: ApiAccessLogApi.ApiAccessLogVO) => {
|
||||
// 设置数据
|
||||
detailData.value = row
|
||||
dialogTitle.value = t('action.detail')
|
||||
dialogVisible.value = true
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ApiAccessLogApi.getApiAccessLogPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 详情操作 */
|
||||
const detailRef = ref()
|
||||
const openDetail = (data: ApiAccessLogApi.ApiAccessLogVO) => {
|
||||
detailRef.value.open(data)
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await ApiAccessLogApi.exportApiAccessLog(queryParams)
|
||||
download.excel(data, 'API 访问日志.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
79
src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
Normal file
79
src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
|
||||
<el-descriptions border :column="1">
|
||||
<el-descriptions-item label="日志主键" min-width="120">
|
||||
{{ detailData.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="链路追踪">
|
||||
{{ detailData.traceId }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="应用名">
|
||||
{{ detailData.applicationName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户编号">
|
||||
{{ detailData.userId }}
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
|
||||
</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 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="请求参数">
|
||||
{{ detailData.requestParams }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="异常时间">
|
||||
{{ formatDate(detailData.exceptionTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="异常名">
|
||||
{{ detailData.exceptionName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="异常堆栈" v-if="detailData.exceptionStackTrace">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:readonly="true"
|
||||
:autosize="{ maxRows: 20 }"
|
||||
v-model="detailData.exceptionStackTrace"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="处理状态">
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
|
||||
:value="detailData.processStatus"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="处理人" v-if="detailData.processUserId">
|
||||
{{ detailData.processUserId }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="处理时间" v-if="detailData.processTime">
|
||||
{{ formatDate(detailData.processTime) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import * as ApiErrorLog from '@/api/infra/apiErrorLog'
|
||||
|
||||
const modelVisible = ref(false) // 弹窗的是否展示
|
||||
const detailLoading = ref(false) // 表单的加载中
|
||||
const detailData = ref() // 详情数据
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (data: ApiErrorLog.ApiErrorLogVO) => {
|
||||
modelVisible.value = true
|
||||
// 设置数据
|
||||
detailLoading.value = true
|
||||
try {
|
||||
detailData.value = data
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
</script>
|
||||
@ -1,76 +0,0 @@
|
||||
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'id',
|
||||
primaryTitle: '日志编号',
|
||||
action: true,
|
||||
actionWidth: '300',
|
||||
columns: [
|
||||
{
|
||||
title: '链路追踪',
|
||||
field: 'traceId',
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
title: '用户编号',
|
||||
field: 'userId',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
field: 'userType',
|
||||
dictType: DICT_TYPE.USER_TYPE,
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '应用名',
|
||||
field: 'applicationName',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '请求方法名',
|
||||
field: 'requestMethod'
|
||||
},
|
||||
{
|
||||
title: '请求地址',
|
||||
field: 'requestUrl',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '异常发生时间',
|
||||
field: 'exceptionTime',
|
||||
formatter: 'formatDate',
|
||||
search: {
|
||||
show: true,
|
||||
itemRender: {
|
||||
name: 'XDataTimePicker'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异常名',
|
||||
field: 'exceptionName'
|
||||
},
|
||||
{
|
||||
title: '处理状态',
|
||||
field: 'processStatus',
|
||||
dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
|
||||
dictClass: 'number',
|
||||
isSearch: true
|
||||
},
|
||||
{
|
||||
title: '处理人',
|
||||
field: 'processUserId',
|
||||
isTable: false
|
||||
},
|
||||
{
|
||||
title: '处理时间',
|
||||
field: 'processTime',
|
||||
formatter: 'formatDate',
|
||||
isTable: false
|
||||
}
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
@ -1,99 +1,248 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 列表 -->
|
||||
<XTable @register="registerTable">
|
||||
<!-- 操作：导出 -->
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="warning"
|
||||
preIcon="ep:download"
|
||||
:title="t('action.export')"
|
||||
@click="exportList('错误数据.xls')"
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="用户编号" prop="userId">
|
||||
<el-input
|
||||
v-model="queryParams.userId"
|
||||
placeholder="请输入用户编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</template>
|
||||
<template #duration_default="{ row }">
|
||||
<span>{{ row.duration + 'ms' }}</span>
|
||||
</template>
|
||||
<template #resultCode_default="{ row }">
|
||||
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<!-- 操作：详情 -->
|
||||
<XTextButton
|
||||
preIcon="ep:view"
|
||||
:title="t('action.detail')"
|
||||
v-hasPermi="['infra:api-access-log:query']"
|
||||
@click="handleDetail(row)"
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" prop="userType">
|
||||
<el-select
|
||||
v-model="queryParams.userType"
|
||||
placeholder="请选择用户类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名" prop="applicationName">
|
||||
<el-input
|
||||
v-model="queryParams.applicationName"
|
||||
placeholder="请输入应用名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:cpu"
|
||||
title="已处理"
|
||||
v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
|
||||
v-hasPermi="['infra:api-error-log:update-status']"
|
||||
@click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
|
||||
</el-form-item>
|
||||
<el-form-item label="异常时间" prop="exceptionTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.exceptionTime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:mute-notification"
|
||||
title="已忽略"
|
||||
v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
|
||||
v-hasPermi="['infra:api-error-log:update-status']"
|
||||
@click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
|
||||
/>
|
||||
</template>
|
||||
</XTable>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理状态" prop="processStatus">
|
||||
<el-select
|
||||
v-model="queryParams.processStatus"
|
||||
placeholder="请选择处理状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['infra:api-error-log:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="日志编号" align="center" prop="id" />
|
||||
<el-table-column label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column label="用户类型" align="center" prop="userType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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
|
||||
:type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
|
||||
:value="scope.row.processStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row)"
|
||||
v-hasPermi="['infra:api-error-log:query']"
|
||||
>
|
||||
详细
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
|
||||
@click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.DONE)"
|
||||
v-hasPermi="['infra:api-error-log:update-status']"
|
||||
>
|
||||
已处理
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
|
||||
@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"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：详情 -->
|
||||
<ApiErrorLogDetail ref="detailRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ApiErrorLog">
|
||||
import { allSchemas } from './apiErrorLog.data'
|
||||
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 './ApiErrorLogDetail.vue'
|
||||
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage()
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
// ========== 列表相关 ==========
|
||||
const [registerTable, { reload, exportList }] = useXTable({
|
||||
allSchemas: allSchemas,
|
||||
getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
|
||||
exportListApi: ApiErrorLogApi.exportApiErrorLogApi
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数据
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userId: null,
|
||||
userType: null,
|
||||
applicationName: null,
|
||||
requestUrl: null,
|
||||
processStatus: null,
|
||||
exceptionTime: []
|
||||
})
|
||||
// ========== 详情相关 ==========
|
||||
const detailData = ref() // 详情 Ref
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('') // 弹出层标题
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
|
||||
// 设置数据
|
||||
detailData.value = row
|
||||
dialogTitle.value = t('action.detail')
|
||||
dialogVisible.value = true
|
||||
/** 查询参数列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ApiErrorLogApi.getApiErrorLogPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 异常处理操作
|
||||
const handleProcessClick = (
|
||||
row: ApiErrorLogApi.ApiErrorLogVO,
|
||||
processSttatus: number,
|
||||
type: string
|
||||
) => {
|
||||
message
|
||||
.confirm('确认标记为' + type + '?', t('common.reminder'))
|
||||
.then(async () => {
|
||||
await ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus)
|
||||
message.success(t('common.updateSuccess'))
|
||||
})
|
||||
.finally(async () => {
|
||||
// 刷新列表
|
||||
await reload()
|
||||
})
|
||||
.catch(() => {})
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 详情操作 */
|
||||
const detailRef = ref()
|
||||
const openDetail = (data: ApiErrorLogApi.ApiErrorLogVO) => {
|
||||
detailRef.value.open(data)
|
||||
}
|
||||
|
||||
/** 处理已处理 / 已忽略的操作 **/
|
||||
const handleProcess = async (id: number, processStatus: number) => {
|
||||
try {
|
||||
// 操作的二次确认
|
||||
const type = processStatus === InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'
|
||||
await message.confirm('确认标记为' + type + '?')
|
||||
// 执行操作
|
||||
await ApiErrorLogApi.updateApiErrorLogPage(id, processStatus)
|
||||
await message.success(type)
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await ApiErrorLogApi.exportApiErrorLog(queryParams)
|
||||
download.excel(data, '异常日志.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -3,77 +3,99 @@
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="mb-2 float-right">
|
||||
<el-button size="small" @click="setJson"> 导入JSON</el-button>
|
||||
<el-button size="small" @click="setOption"> 导入Options</el-button>
|
||||
<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
|
||||
<el-button size="small" type="success" @click="showOption">生成Options</el-button>
|
||||
<el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
|
||||
<el-button size="small" type="success" @click="showOption">生成O ptions</el-button>
|
||||
<el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
|
||||
<!-- <el-button size="small" @click="changeLocale">中英切换</el-button> -->
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 表单设计器 -->
|
||||
<el-col>
|
||||
<fc-designer ref="designer" height="780px" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
|
||||
<div ref="editor" v-if="dialogVisible">
|
||||
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
|
||||
<el-scrollbar height="580">
|
||||
<div v-highlight>
|
||||
<code class="hljs">
|
||||
{{ formValue }}
|
||||
</code>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<span style="color: red" v-if="err">输入内容格式有误!</span>
|
||||
</Dialog>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 弹窗：表单预览 -->
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" max-height="600">
|
||||
<div ref="editor" v-if="dialogVisible">
|
||||
<el-button style="float: right" @click="copy(formData)">
|
||||
{{ t('common.copy') }}
|
||||
</el-button>
|
||||
<el-scrollbar height="580">
|
||||
<div v-highlight>
|
||||
<code class="hljs">
|
||||
{{ formData }}
|
||||
</code>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts" name="Build">
|
||||
import formCreate from '@form-create/element-ui'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const designer = ref()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const err = ref(false)
|
||||
const type = ref(-1)
|
||||
const formValue = ref('')
|
||||
const designer = ref() // 表单设计器
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
|
||||
const formData = ref('') // 表单数据
|
||||
|
||||
/** 打开弹窗 */
|
||||
const openModel = (title: string) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = title
|
||||
}
|
||||
|
||||
const setJson = () => {
|
||||
openModel('导入JSON--未实现')
|
||||
}
|
||||
const setOption = () => {
|
||||
openModel('导入Options--未实现')
|
||||
}
|
||||
/** 生成 JSON */
|
||||
const showJson = () => {
|
||||
openModel('生成JSON')
|
||||
type.value = 0
|
||||
formValue.value = designer.value.getRule()
|
||||
openModel('生成 JSON')
|
||||
formType.value = 0
|
||||
formData.value = designer.value.getRule()
|
||||
}
|
||||
|
||||
/** 生成 Options */
|
||||
const showOption = () => {
|
||||
openModel('生成Options')
|
||||
type.value = 1
|
||||
formValue.value = designer.value.getOption()
|
||||
openModel('生成 Options')
|
||||
formType.value = 1
|
||||
formData.value = designer.value.getOption()
|
||||
}
|
||||
|
||||
/** 生成组件 */
|
||||
const showTemplate = () => {
|
||||
openModel('生成组件')
|
||||
type.value = 2
|
||||
formValue.value = makeTemplate()
|
||||
formType.value = 2
|
||||
formData.value = makeTemplate()
|
||||
}
|
||||
|
||||
const makeTemplate = () => {
|
||||
const rule = designer.value.getRule()
|
||||
const opt = designer.value.getOption()
|
||||
return `<template>
|
||||
<form-create
|
||||
v-model="fapi"
|
||||
:rule="rule"
|
||||
:option="option"
|
||||
@submit="onSubmit"
|
||||
></form-create>
|
||||
</template>
|
||||
<script setup lang=ts>
|
||||
import formCreate from "@form-create/element-ui";
|
||||
const faps = ref(null)
|
||||
const rule = ref('')
|
||||
const option = ref('')
|
||||
const init = () => {
|
||||
rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
|
||||
option.value = formCreate.parseJson('${JSON.stringify(opt)}')
|
||||
}
|
||||
const onSubmit = (formData) => {
|
||||
//todo 提交表单
|
||||
}
|
||||
init()
|
||||
<\/script>`
|
||||
}
|
||||
// const changeLocale = () => {
|
||||
// console.info('changeLocale')
|
||||
// }
|
||||
|
||||
/** 复制 **/
|
||||
const copy = async (text: string) => {
|
||||
@ -87,31 +109,4 @@ const copy = async (text: string) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const makeTemplate = () => {
|
||||
const rule = designer.value.getRule()
|
||||
const opt = designer.value.getOption()
|
||||
return `<template>
|
||||
<form-create
|
||||
v-model="fapi"
|
||||
:rule="rule"
|
||||
:option="option"
|
||||
@submit="onSubmit"
|
||||
></form-create>
|
||||
</template>
|
||||
<script setup lang=ts>
|
||||
import formCreate from "@form-create/element-ui";
|
||||
const faps = ref(null)
|
||||
const rule = ref('')
|
||||
const option = ref('')
|
||||
const init = () => {
|
||||
rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
|
||||
option.value = formCreate.parseJson('${JSON.stringify(opt)}')
|
||||
}
|
||||
const onSubmit = (formData) => {
|
||||
//todo 提交表单
|
||||
}
|
||||
init()
|
||||
<\/script>`
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -35,10 +35,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</div>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@ -21,10 +21,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</div>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@ -23,10 +23,8 @@
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</div>
|
||||
<el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@ -93,10 +93,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</div>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@ -12,11 +12,7 @@
|
||||
/>
|
||||
</template>
|
||||
<template #beginTime_default="{ row }">
|
||||
<span>{{
|
||||
dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') +
|
||||
' ~ ' +
|
||||
dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}</span>
|
||||
<span>{{ parseTime(row.beginTime) + ' ~ ' + parseTime(row.endTime) }}</span>
|
||||
</template>
|
||||
<template #duration_default="{ row }">
|
||||
<span>{{ row.duration + ' 毫秒' }}</span>
|
||||
@ -48,7 +44,7 @@
|
||||
</XModal>
|
||||
</template>
|
||||
<script setup lang="ts" name="JobLog">
|
||||
import dayjs from 'dayjs'
|
||||
import { parseTime } from '@/utils/formatTime'
|
||||
|
||||
import * as JobLogApi from '@/api/infra/jobLog'
|
||||
import { allSchemas } from './jobLog.data'
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
<li v-for="item in getList" class="mt-2" :key="item.time">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2 text-primary font-medium">收到消息:</span>
|
||||
<span>{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
<span>{{ parseTime(item.time) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.res }}
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs'
|
||||
import { parseTime } from '@/utils/formatTime'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useWebSocket } from '@vueuse/core'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user