From 95b616d9241b12e95e5e1fea0efdf493caa09e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B8=B8=E7=86=9F=E5=90=B4=E5=BD=A6=E7=A5=96?=
 <qi.ruan@xujiesoft.com>
Date: Mon, 26 Jan 2026 13:17:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(warehouse):=20=E6=B7=BB=E5=8A=A0=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E9=94=99=E8=AF=AF=E6=97=A5=E5=BF=97=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/api/warehouse/sysErrorLog.js b/src/api/warehouse/sysErrorLog.js
new file mode 100644
index 0000000..757f7c7
--- /dev/null
+++ b/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)
diff --git a/src/views/modules/warehouse/sysErrorLog.vue b/src/views/modules/warehouse/sysErrorLog.vue
new file mode 100644
index 0000000..2cde107
--- /dev/null
+++ b/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>