Browse Source

feat(warehouse): 添加系统错误日志管理功能

- 新增系统错误日志查询API接口
- 创建系统错误日志管理页面,支持模块名称、功能名称、业务主键等多维度查询
- 实现错误日志表格展示,包含接口类型标签显示和状态标识
- 添加错误日志详情弹窗,支持查看基本信息、错误信息、接口入参和错误详情
- 集成JSON格式化显示和复制功能,便于错误排查
- 实现数据导出功能,支持Excel格式导出错误日志信息
- 优化表格高度自适应和分页功能,提升用户体验
master
常熟吴彦祖 1 month ago
parent
commit
95b616d924
  1. 9
      src/api/warehouse/sysErrorLog.js
  2. 617
      src/views/modules/warehouse/sysErrorLog.vue

9
src/api/warehouse/sysErrorLog.js

@ -0,0 +1,9 @@
import { createAPI } from "@/utils/httpRequest.js";
// ========== 查询相关 ========== - rqrq
// 获取系统错误日志列表 - rqrq
export const getSysErrorLogList = data => createAPI('api/syserrorlog/list', 'POST', data)
// 获取错误日志详情 - rqrq
export const getSysErrorLogInfo = data => createAPI('api/syserrorlog/info', 'POST', data)

617
src/views/modules/warehouse/sysErrorLog.vue

@ -0,0 +1,617 @@
<template>
<div class="mod-config">
<!-- 查询表单 - rqrq -->
<el-form :inline="true" label-position="top" style="margin-top: 1px; margin-left: 0px;">
<el-form-item label="模块名称">
<el-input v-model="queryData.moduleName" style="width: 120px" placeholder="模块名称" clearable></el-input>
</el-form-item>
<el-form-item label="功能名称">
<el-input v-model="queryData.functionName" style="width: 120px" placeholder="功能名称" clearable></el-input>
</el-form-item>
<el-form-item label="业务主键">
<el-input v-model="queryData.businessKey" style="width: 120px" placeholder="业务主键" clearable></el-input>
</el-form-item>
<el-form-item label="是否接口">
<el-select v-model="queryData.isInterface" placeholder="请选择" style="width: 120px" clearable>
<el-option label="全部" value=""></el-option>
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label="接口类型">
<el-select v-model="queryData.interfaceType" placeholder="请选择" style="width: 120px" clearable>
<el-option label="全部" value=""></el-option>
<el-option label="WCS" value="WCS"></el-option>
<el-option label="IFS" value="IFS"></el-option>
<el-option label="TUSK" value="TUSK"></el-option>
</el-select>
</el-form-item>
<el-form-item label="接口名称">
<el-input v-model="queryData.interfaceName" style="width: 120px" placeholder="接口名称" clearable></el-input>
</el-form-item>
<el-form-item label="操作人">
<el-input v-model="queryData.username" style="width: 120px" placeholder="操作人" clearable></el-input>
</el-form-item>
<el-form-item label="创建时间从">
<el-date-picker
v-model="queryData.startDate"
type="date"
style="width: 120px"
placeholder="开始日期"
value-format="yyyy-MM-dd"
clearable>
</el-date-picker>
</el-form-item>
<el-form-item label="创建时间至">
<el-date-picker
v-model="queryData.endDate"
type="date"
style="width: 120px"
placeholder="结束日期"
value-format="yyyy-MM-dd"
clearable>
</el-date-picker>
</el-form-item>
<el-form-item label=" ">
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button @click="resetQuery()">重置</el-button>
<!-- 导出按钮 - rqrq -->
<download-excel
:fields="fields()"
:data="exportData"
type="xls"
:name="exportName"
:header="exportHeader"
:footer="exportFooter"
:fetch="createExportData"
:before-generate="startDownload"
:before-finish="finishDownload"
worksheet="导出信息"
class="el-button el-button--primary el-button--medium">
{{ '导出' }}
</download-excel>
</el-form-item>
</el-form>
<!-- 数据表格 - rqrq -->
<el-table
:data="dataList"
:height="height"
border
highlight-current-row
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
v-for="(item,index) in columnList" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed==''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="item.columnProp === 'isInterface'">
<el-tag
:type="scope.row.isInterface === 'Y' ? 'success' : 'info'"
size="small">
{{ scope.row.isInterface === 'Y' ? '是' : '否' }}
</el-tag>
</span>
<span v-else-if="item.columnProp === 'interfaceType'">
<el-tag
v-if="scope.row.interfaceType"
:type="getInterfaceTypeTagType(scope.row.interfaceType)"
size="small">
{{ scope.row.interfaceType }}
</el-tag>
<span v-else>-</span>
</span>
<span v-else>{{ scope.row[item.columnProp] }}</span>
</template>
</el-table-column>
<!-- 操作列 - rqrq -->
<el-table-column
header-align="center"
align="center"
fixed="right"
width="100"
label="操作">
<template slot-scope="scope">
<a type="text" @click="viewDetail(scope.row)">查看详情</a>
</template>
</el-table-column>
</el-table>
<!-- 分页 - rqrq -->
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 1000]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 详情弹窗 - rqrq -->
<el-dialog
title="错误日志详情"
:visible.sync="detailVisible"
:close-on-click-modal="false"
v-drag
width="80%">
<el-row :gutter="20">
<el-col :span="12">
<el-card class="box-card fixed-height-card">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<el-form label-width="120px" class="detail-form">
<el-form-item label="模块名称:">
<span>{{ detailData.moduleName || '-' }}</span>
</el-form-item>
<el-form-item label="功能名称:">
<span>{{ detailData.functionName || '-' }}</span>
</el-form-item>
<el-form-item label="业务主键:">
<span>{{ detailData.businessKey || '-' }}</span>
</el-form-item>
<el-form-item label="是否接口:">
<el-tag
:type="detailData.isInterface === 'Y' ? 'success' : 'info'"
size="small">
{{ detailData.isInterface === 'Y' ? '是' : '否' }}
</el-tag>
</el-form-item>
<el-form-item label="接口类型:">
<el-tag
v-if="detailData.interfaceType"
:type="getInterfaceTypeTagType(detailData.interfaceType)"
size="small">
{{ detailData.interfaceType }}
</el-tag>
<span v-else>-</span>
</el-form-item>
<el-form-item label="接口名称:">
<span>{{ detailData.interfaceName || '-' }}</span>
</el-form-item>
<el-form-item label="后台方法:">
<span>{{ detailData.methodName || '-' }}</span>
</el-form-item>
<el-form-item label="操作人:">
<span>{{ detailData.username || '-' }}</span>
</el-form-item>
<el-form-item label="创建时间:">
<span>{{ detailData.createdTime }}</span>
</el-form-item>
<el-form-item label="工厂编码:">
<span>{{ detailData.site }}</span>
</el-form-item>
</el-form>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card fixed-height-card">
<div slot="header" class="clearfix">
<span>错误信息</span>
</div>
<div class="detail-content-area">
<el-input
type="textarea"
:rows="13"
:value="detailData.errorMessage || '无错误信息'"
:readonly="true">
</el-input>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="12">
<el-card class="box-card fixed-height-card">
<div slot="header" class="clearfix">
<span>接口入参</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="copyToClipboard(detailData.requestData)">复制</el-button>
</div>
<div class="detail-content-area">
<pre class="json-pre">{{ formatJson(detailData.requestData) }}</pre>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card fixed-height-card">
<div slot="header" class="clearfix">
<span>错误详情</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="copyToClipboard(detailData.errorDetail)">复制</el-button>
</div>
<div class="detail-content-area">
<pre class="json-pre">{{ detailData.errorDetail || '无详情' }}</pre>
</div>
</el-card>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getSysErrorLogList
} from '@/api/warehouse/sysErrorLog.js'
export default {
data() {
return {
// - rqrq
queryData: {
site: '',
moduleName: '',
functionName: '',
businessKey: '',
isInterface: '',
interfaceType: '',
interfaceName: '',
errorMessage: '',
username: '',
startDate: '',
endDate: '',
page: 1,
limit: 20
},
// - rqrq
height: 450,
// - rqrq
columnList: [
{
columnProp: "moduleName",
headerAlign: "center",
align: "center",
columnLabel: "模块名称",
columnWidth: 120,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "functionName",
headerAlign: "center",
align: "center",
columnLabel: "功能名称",
columnWidth: 120,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "businessKey",
headerAlign: "center",
align: "center",
columnLabel: "业务主键",
columnWidth: 150,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "isInterface",
headerAlign: "center",
align: "center",
columnLabel: "是否接口",
columnWidth: 80,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "interfaceType",
headerAlign: "center",
align: "center",
columnLabel: "接口类型",
columnWidth: 80,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "interfaceName",
headerAlign: "center",
align: "center",
columnLabel: "接口名称",
columnWidth: 150,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "methodName",
headerAlign: "center",
align: "left",
columnLabel: "后台方法",
columnWidth: 200,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "errorMessage",
headerAlign: "center",
align: "left",
columnLabel: "错误信息",
columnWidth: 250,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "username",
headerAlign: "center",
align: "center",
columnLabel: "操作人",
columnWidth: 100,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "site",
headerAlign: "center",
align: "center",
columnLabel: "工厂编码",
columnWidth: 80,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
},
{
columnProp: "createdTime",
headerAlign: "center",
align: "center",
columnLabel: "创建时间",
columnWidth: 150,
columnSortable: false,
showOverflowTooltip: true,
fixed: ""
}
],
// - rqrq
dataList: [],
// - rqrq
pageIndex: 1,
pageSize: 20,
totalPage: 0,
dataListLoading: false,
// - rqrq
detailVisible: false,
detailData: {},
// - rqrq
exportData: [],
exportName: '系统错误日志' + this.dayjs().format('YYYYMMDDHHmmss'),
exportHeader: ["系统错误日志"],
exportFooter: [],
}
},
mounted() {
this.$nextTick(() => {
// - rqrq
this.height = window.innerHeight - 220;
})
},
activated() {
this.getDataList()
},
methods: {
// - rqrq
getDataList() {
this.dataListLoading = true
this.queryData.page = this.pageIndex
this.queryData.limit = this.pageSize
getSysErrorLogList(this.queryData).then(({data}) => {
this.dataListLoading = false
if (data && data.code === 0) {
this.dataList = data.page.list || []
this.totalPage = data.page.totalCount || 0
} else {
this.dataList = []
this.totalPage = 0
this.$alert(data.msg || '查询失败', '错误', { confirmButtonText: '确定' })
}
}).catch(error => {
this.dataListLoading = false
console.error('查询系统错误日志失败:', error)
this.$alert('查询失败', '错误', { confirmButtonText: '确定' })
})
},
// - rqrq
resetQuery() {
this.queryData = {
site: '',
moduleName: '',
functionName: '',
businessKey: '',
isInterface: '',
interfaceType: '',
interfaceName: '',
errorMessage: '',
username: '',
startDate: '',
endDate: '',
page: 1,
limit: 20
}
this.pageIndex = 1
this.getDataList()
},
// - rqrq
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// - rqrq
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// - rqrq
getInterfaceTypeTagType(type) {
const typeMap = {
'WCS': 'primary',
'IFS': 'success',
'TUSK': 'warning'
}
return typeMap[type] || 'info'
},
// - rqrq
viewDetail(row) {
this.detailData = row
this.detailVisible = true
},
// JSON - rqrq
formatJson(jsonStr) {
if (!jsonStr) {
return '无数据'
}
try {
const obj = JSON.parse(jsonStr)
return JSON.stringify(obj, null, 2)
} catch (e) {
return jsonStr
}
},
// - rqrq
copyToClipboard(text) {
if (!text) {
this.$message.warning('无内容可复制')
return
}
const textarea = document.createElement('textarea')
textarea.value = text
document.body.appendChild(textarea)
textarea.select()
try {
document.execCommand('copy')
this.$message.success('复制成功')
} catch (e) {
this.$alert('复制失败', '错误', { confirmButtonText: '确定' })
}
document.body.removeChild(textarea)
},
// - rqrq
async createExportData() {
const queryParams = {
...this.queryData,
page: 1,
limit: 999999 // - rqrq
}
const {data} = await getSysErrorLogList(queryParams)
if (data && data.code === 0) {
return (data.page.list || []).map(item => {
return {
...item,
isInterface: item.isInterface === 'Y' ? '是' : '否'
}
})
}
return []
},
startDownload() {
// - rqrq
},
finishDownload() {
// - rqrq
},
fields() {
let json = "{"
this.columnList.forEach((item, index) => {
if (index == this.columnList.length - 1) {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
} else {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
}
})
json += "}"
let s = eval("(" + json + ")")
return s
}
}
}
</script>
<style scoped>
/* 表格样式优化 - rqrq */
.mod-config {
padding: 10px;
}
/* 卡片样式 - rqrq */
.box-card {
margin-bottom: 20px;
}
/* 固定高度卡片 - rqrq */
.fixed-height-card {
height: 380px;
}
/* 详情表单样式 - rqrq */
.detail-form {
height: 320px;
overflow-y: auto;
}
/* 详情内容区域 - rqrq */
.detail-content-area {
height: 320px;
overflow-y: auto;
}
/* JSON展示样式 - rqrq */
.json-pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 12px;
line-height: 1.5;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
</style>
Loading…
Cancel
Save