hanst
/
wms-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

- 新增系统错误日志查询API接口
- 创建系统错误日志管理页面，支持模块名称、功能名称、业务主键等多维度查询
- 实现错误日志表格展示，包含接口类型标签显示和状态标识
- 添加错误日志详情弹窗，支持查看基本信息、错误信息、接口入参和错误详情
- 集成JSON格式化显示和复制功能，便于错误排查
- 实现数据导出功能，支持Excel格式导出错误日志信息
- 优化表格高度自适应和分页功能，提升用户体验
master
常熟吴彦祖 1 month ago
parent
8ba1750d90
commit
95b616d924
2 changed files with 626 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/warehouse/sysErrorLog.js
  2. 617
      src/views/modules/warehouse/sysErrorLog.vue

9
src/api/warehouse/sysErrorLog.js
View File

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

@ -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>
Write Preview
Loading…
Cancel
Save