fengyuan_yang
2 months ago
2 changed files with 713 additions and 0 deletions
@ -0,0 +1,15 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// ===================================== 接口日志管理 =====================================
|
|||
// 查询接口日志列表
|
|||
export const searchApiLogs = data => createAPI(`/sys/interfaceLog/list`,'post',data) |
|||
|
|||
// 查询接口参数（主表+明细）
|
|||
export const getApiLogParams = data => createAPI(`/sys/interfaceLog/getParams`,'post',data) |
|||
|
|||
// 删除接口日志
|
|||
export const deleteApiLogs = data => createAPI(`/sys/interfaceLog/delete`,'post',data) |
|||
|
|||
// 重试接口
|
|||
export const retryApiLogs = data => createAPI(`/sys/interfaceLog/retry`,'post',data) |
|||
|
|||
@ -0,0 +1,698 @@ |
|||
<template> |
|||
<div class="mod-config"> |
|||
<!-- 条件查询 --> |
|||
<el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover"> |
|||
<div slot="header" class="search-header"> |
|||
<div class="header-left"> |
|||
<i class="el-icon-search"></i> |
|||
<span class="header-title">接口日志查询</span> |
|||
</div> |
|||
<div class="header-right"> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="toggleSearchExpand" |
|||
class="collapse-btn"> |
|||
<i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> |
|||
{{ searchExpanded ? '收起' : '展开' }} |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-form |
|||
:model="searchForm" |
|||
label-width="110px" |
|||
class="search-form" |
|||
@keyup.enter.native="getDataList"> |
|||
|
|||
<!-- 所有查询条件 - 可展开/收起 --> |
|||
<template v-if="searchExpanded"> |
|||
<!-- 第一行 --> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="接口名称"> |
|||
<el-input |
|||
v-model="searchForm.interfaceName" |
|||
placeholder="请输入接口名称" |
|||
clearable |
|||
prefix-icon="el-icon-document"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="请求ID"> |
|||
<el-input |
|||
v-model="searchForm.requestId" |
|||
placeholder="请输入请求ID" |
|||
clearable |
|||
prefix-icon="el-icon-key"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="关联单据号"> |
|||
<el-input |
|||
v-model="searchForm.reDocumentNo" |
|||
placeholder="请输入关联单据号" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="关联单据类型"> |
|||
<el-input |
|||
v-model="searchForm.reDocumentType" |
|||
placeholder="请输入关联单据类型" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 第二行 --> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="状态码"> |
|||
<el-input |
|||
v-model="searchForm.statusCode" |
|||
placeholder="请输入状态码" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="来源系统"> |
|||
<el-input |
|||
v-model="searchForm.sourceSystem" |
|||
placeholder="请输入来源系统" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="目标系统"> |
|||
<el-input |
|||
v-model="searchForm.targetSystem" |
|||
placeholder="请输入目标系统" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="是否需要重试"> |
|||
<el-select v-model="searchForm.needRetryFlag" placeholder="请选择" clearable> |
|||
<el-option label="是" :value="1"></el-option> |
|||
<el-option label="否" :value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 第三行 --> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="创建时间"> |
|||
<el-date-picker |
|||
v-model="searchForm.dateRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
style="width: 100%"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<!-- 操作按钮区域 --> |
|||
<div class="search-actions"> |
|||
<div class="action-left"> |
|||
<el-button type="primary" @click="getDataList" icon="el-icon-search">查询</el-button> |
|||
<el-button @click="resetSearch" icon="el-icon-refresh-left">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<!-- 表格操作按钮 --> |
|||
<div class="table-actions"> |
|||
<el-button |
|||
v-if="dataListSelections.length > 0" |
|||
type="danger" |
|||
@click="deleteHandle()" |
|||
icon="el-icon-delete" |
|||
size="small"> |
|||
批量删除 |
|||
</el-button> |
|||
<el-button |
|||
v-if="dataListSelections.length > 0" |
|||
type="success" |
|||
@click="retryHandle()" |
|||
icon="el-icon-refresh" |
|||
size="small"> |
|||
批量重试 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<el-table |
|||
:height="tableHeight" |
|||
:data="dataList" |
|||
border |
|||
v-loading="dataListLoading" |
|||
@selection-change="selectionChangeHandle" |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
type="selection" |
|||
header-align="center" |
|||
align="center" |
|||
width="50"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="id" |
|||
header-align="center" |
|||
align="center" |
|||
label="ID" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="requestId" |
|||
header-align="center" |
|||
align="center" |
|||
label="请求ID" |
|||
width="200"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="interfaceName" |
|||
header-align="center" |
|||
align="center" |
|||
label="接口名称" |
|||
min-width="150"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reDocumentNo" |
|||
header-align="center" |
|||
align="center" |
|||
label="关联单据号" |
|||
min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reDocumentType" |
|||
header-align="center" |
|||
align="center" |
|||
label="关联单据类型" |
|||
min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="statusCode" |
|||
header-align="center" |
|||
align="center" |
|||
label="状态码" |
|||
width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-tag :type="scope.row.statusCode === '200' ? 'success' : 'danger'"> |
|||
{{ scope.row.statusCode }} |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="message" |
|||
header-align="center" |
|||
align="center" |
|||
label="消息" |
|||
min-width="150" |
|||
show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="sourceSystem" |
|||
header-align="center" |
|||
align="center" |
|||
label="来源系统" |
|||
width="100"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="targetSystem" |
|||
header-align="center" |
|||
align="center" |
|||
label="目标系统" |
|||
width="100"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="retryCount" |
|||
header-align="center" |
|||
align="center" |
|||
label="重试次数" |
|||
width="90"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createdDate" |
|||
header-align="center" |
|||
align="center" |
|||
label="创建时间" |
|||
width="155"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="100" |
|||
label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="viewParamsHandle(scope.row)"> |
|||
接口参数 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页 --> |
|||
<el-pagination |
|||
@size-change="sizeChangeHandle" |
|||
@current-change="currentChangeHandle" |
|||
:current-page="pageIndex" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
:total="totalPage" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
style="margin-top: 0px;"> |
|||
</el-pagination> |
|||
|
|||
<!-- 接口参数对话框 --> |
|||
<el-dialog |
|||
title="接口参数详情" |
|||
:visible.sync="paramsDialogVisible" |
|||
width="60%" |
|||
:close-on-click-modal="false"> |
|||
<div class="json-viewer"> |
|||
<pre>{{ formattedParams }}</pre> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="paramsDialogVisible = false">关 闭</el-button> |
|||
<el-button type="primary" @click="copyParams">复制参数</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { searchApiLogs, getApiLogParams, deleteApiLogs, retryApiLogs } from '@/api/sys/interface-log' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchExpanded: false, |
|||
searchForm: { |
|||
interfaceName: '', |
|||
requestId: '', |
|||
reDocumentNo: '', |
|||
reDocumentType: '', |
|||
statusCode: '', |
|||
sourceSystem: '', |
|||
targetSystem: '', |
|||
needRetryFlag: null, |
|||
dateRange: [] |
|||
}, |
|||
dataList: [], |
|||
pageIndex: 1, |
|||
pageSize: 20, |
|||
totalPage: 0, |
|||
dataListLoading: false, |
|||
dataListSelections: [], |
|||
paramsDialogVisible: false, |
|||
currentParams: null, |
|||
tableHeight: 200 |
|||
} |
|||
}, |
|||
computed: { |
|||
formattedParams() { |
|||
if (!this.currentParams) return '' |
|||
return JSON.stringify(this.currentParams, null, 2) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.tableHeight = window.innerHeight - 280 |
|||
}) |
|||
this.getDataList() |
|||
}, |
|||
methods: { |
|||
// 切换搜索框展开/收起 |
|||
toggleSearchExpand() { |
|||
this.searchExpanded = !this.searchExpanded |
|||
}, |
|||
|
|||
// 获取数据列表 |
|||
getDataList() { |
|||
this.dataListLoading = true |
|||
const params = { |
|||
page: this.pageIndex, |
|||
limit: this.pageSize, |
|||
...this.searchForm |
|||
} |
|||
|
|||
// 处理日期范围 |
|||
if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) { |
|||
params.startDate = this.searchForm.dateRange[0] |
|||
params.endDate = this.searchForm.dateRange[1] |
|||
} |
|||
delete params.dateRange |
|||
|
|||
searchApiLogs(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.dataList = data.page.list |
|||
this.totalPage = data.page.totalCount |
|||
} else { |
|||
this.dataList = [] |
|||
this.totalPage = 0 |
|||
} |
|||
this.dataListLoading = false |
|||
}).catch(() => { |
|||
this.dataListLoading = false |
|||
}) |
|||
}, |
|||
|
|||
// 重置查询 |
|||
resetSearch() { |
|||
this.searchForm = { |
|||
interfaceName: '', |
|||
requestId: '', |
|||
reDocumentNo: '', |
|||
reDocumentType: '', |
|||
statusCode: '', |
|||
sourceSystem: '', |
|||
targetSystem: '', |
|||
needRetryFlag: null, |
|||
dateRange: [] |
|||
} |
|||
this.pageIndex = 1 |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 每页数 |
|||
sizeChangeHandle(val) { |
|||
this.pageSize = val |
|||
this.pageIndex = 1 |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 当前页 |
|||
currentChangeHandle(val) { |
|||
this.pageIndex = val |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 多选 |
|||
selectionChangeHandle(val) { |
|||
this.dataListSelections = val |
|||
}, |
|||
|
|||
// 查看接口参数 |
|||
viewParamsHandle(row) { |
|||
const params = { |
|||
site: row.site, |
|||
buNo: row.buNo, |
|||
requestId: row.requestId, |
|||
requestGroupId: row.requestGroupId |
|||
} |
|||
|
|||
getApiLogParams(params).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.currentParams = data.params |
|||
this.paramsDialogVisible = true |
|||
} else { |
|||
this.$message.error(data.msg || '获取接口参数失败') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 复制参数 |
|||
copyParams() { |
|||
const textarea = document.createElement('textarea') |
|||
textarea.value = this.formattedParams |
|||
document.body.appendChild(textarea) |
|||
textarea.select() |
|||
document.execCommand('copy') |
|||
document.body.removeChild(textarea) |
|||
this.$message.success('复制成功') |
|||
}, |
|||
|
|||
// 删除 |
|||
deleteHandle() { |
|||
const ids = this.dataListSelections.map(item => item.id) |
|||
this.$confirm('确定要删除选中的记录吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
deleteApiLogs({ ids }).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('删除成功') |
|||
this.getDataList() |
|||
} else { |
|||
this.$message.error(data.msg || '删除失败') |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 重试 |
|||
retryHandle() { |
|||
const ids = this.dataListSelections.map(item => item.id) |
|||
this.$confirm('确定要重试选中的接口吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
retryApiLogs({ ids }).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('重试成功') |
|||
this.getDataList() |
|||
} else { |
|||
this.$message.error(data.msg || '重试失败') |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 搜索卡片样式 */ |
|||
.search-card { |
|||
margin-bottom: 16px; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.search-card:hover { |
|||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
.search-card /deep/ .el-card__header { |
|||
padding: 5px 20px; |
|||
background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%); |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.search-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.header-left { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #fff; |
|||
} |
|||
|
|||
.header-left i { |
|||
font-size: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
letter-spacing: 0.5px; |
|||
} |
|||
|
|||
.header-right { |
|||
color: #fff; |
|||
} |
|||
|
|||
.collapse-btn { |
|||
color: #fff; |
|||
font-weight: 500; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.collapse-btn:hover { |
|||
color: #f0f0f0; |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.collapse-btn i { |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
/* 搜索表单样式 */ |
|||
.search-form { |
|||
padding: 10px 0; |
|||
min-height: 0; |
|||
} |
|||
|
|||
/* 卡片主体样式 */ |
|||
.search-card /deep/ .el-card__body { |
|||
padding: 10px; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
/* 收起时的样式 */ |
|||
.search-card.collapsed /deep/ .el-card__body { |
|||
padding: 10px 20px; |
|||
} |
|||
|
|||
.search-form /deep/ .el-form-item { |
|||
margin-bottom: 18px; |
|||
} |
|||
|
|||
.search-form /deep/ .el-form-item__label { |
|||
font-weight: 500; |
|||
color: #606266; |
|||
padding-bottom: 6px; |
|||
} |
|||
|
|||
.search-form /deep/ .el-input__inner, |
|||
.search-form /deep/ .el-textarea__inner { |
|||
border-radius: 6px; |
|||
border: 1px solid #DCDFE6; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.search-form /deep/ .el-input__inner:focus, |
|||
.search-form /deep/ .el-textarea__inner:focus { |
|||
border-color: #667eea; |
|||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); |
|||
} |
|||
|
|||
.search-form /deep/ .el-select { |
|||
width: 100%; |
|||
} |
|||
|
|||
.search-form /deep/ .el-date-editor.el-input { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* 操作按钮区域 */ |
|||
.search-actions { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 8px 0 2px 0; |
|||
} |
|||
|
|||
/* 展开时显示上边框 */ |
|||
.search-card:not(.collapsed) .search-actions { |
|||
border-top: 1px solid #f0f0f0; |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
/* 收起时不显示上边框和上边距 */ |
|||
.search-card.collapsed .search-actions { |
|||
border-top: none; |
|||
margin-top: 0; |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.action-left, |
|||
.action-right { |
|||
display: flex; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.search-actions .el-button { |
|||
border-radius: 4px; |
|||
padding: 5px 10px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.search-actions .el-button:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
.search-actions .el-button--primary { |
|||
background: #60aeff; |
|||
border-color: #60aeff; |
|||
} |
|||
|
|||
.search-actions .el-button--primary:hover { |
|||
background: #7dbdff; |
|||
border-color: #7dbdff; |
|||
} |
|||
|
|||
/* 表格操作按钮区域 */ |
|||
.table-actions { |
|||
margin-bottom: 8px; |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
.table-actions .el-button { |
|||
border-radius: 4px; |
|||
font-weight: 500; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.table-actions .el-button:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 1200px) { |
|||
.search-actions { |
|||
flex-direction: column; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.action-left, |
|||
.action-right { |
|||
width: 100%; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
/* 表格样式 */ |
|||
.el-table /deep/ .cell { |
|||
height: auto; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* JSON查看器样式 */ |
|||
.json-viewer { |
|||
max-height: 500px; |
|||
overflow: auto; |
|||
background-color: #f5f5f5; |
|||
border: 1px solid #e0e0e0; |
|||
border-radius: 4px; |
|||
padding: 15px; |
|||
} |
|||
|
|||
.json-viewer pre { |
|||
margin: 0; |
|||
font-family: 'Courier New', Courier, monospace; |
|||
font-size: 13px; |
|||
line-height: 1.6; |
|||
color: #333; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue