操作日志详细页面优化

RuoYi

2026-03-21 1f8dd5feb5473ab61f5265dbdb70f4f09b1f5883

操作日志详细页面优化

 ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -228,6 +228,120 @@
  color: #FFFFFF;

}



/** 详细卡片样式 */

.detail-wrap { padding: 0 4px; }



.detail-card {

  border: 1px solid #ebeef5;

  border-radius: 6px;

  margin-bottom: 14px;

  overflow: hidden;

}



.detail-card-title {

  background: #f7f9fb;

  padding: 8px 16px;

  font-size: 13px;

  font-weight: 600;

  color: #333;

  border-bottom: 1px solid #ebeef5;

}

.detail-card-title i { margin-right: 5px; color: #409EFF; }



.detail-row { padding: 0 8px; }



.detail-item {

  display: flex;

  align-items: flex-start;

  padding: 10px 8px;

  font-size: 13px;

  border-bottom: 1px solid #f5f7fa;

}

.detail-item:last-child { border-bottom: none; }



.detail-label {

  flex-shrink: 0;

  width: 72px;

  color: #909399;

  margin-right: 12px;

}

.detail-value { color: #303133; flex: 1; word-break: break-all; }

.detail-location { color: #999; font-size: 12px; }



.method-tag {

  display: inline-block;

  padding: 1px 7px;

  border-radius: 3px;

  font-size: 11px;

  font-weight: 700;

  margin-right: 6px;

  vertical-align: middle;

}

.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }

.code-body { padding: 14px; }

.code-wrap {

  background: #f7f9fb;

  border: 1px solid #e8ecf0;

  border-radius: 4px;

  overflow: hidden;

  max-height: 260px;

  position: relative;

}

.code-action {

  position: absolute;

  top: 8px;

  right: 8px;

  z-index: 10;

  margin: 0;

  padding: 0;

}

.code-action .el-button { 
  height: 24px; 
  font-size: 12px; 
  padding: 4px 8px; 
  background: rgba(255, 255, 255, 0.9);

  border: 1px solid #dcdcdc;

}

.code-action .el-button:hover { 
  background: #ffffff;

  border-color: #409EFF;

}

.code-pre {

  margin: 0;

  padding: 12px 14px;

  font-size: 12px;

  line-height: 1.6;

  font-family: Consolas, 'SFMono-Regular', monospace;

  color: #444;

  white-space: pre-wrap;

  word-break: break-all;

  overflow: auto;

  max-height: 240px;

  display: block;

}



/* error */

.error-title { color: #c0392b !important; }

.error-title i { color: #c0392b !important; }

.error-body { padding: 12px 16px; }

.error-msg {

  background: #fff8f8;

  border-left: 3px solid #e74c3c;

  border-radius: 3px;

  padding: 8px 12px;

  color: #c0392b;

  font-size: 12px;

  line-height: 1.7;

  word-break: break-all;

  white-space: pre-wrap;

}



/* http method */

.method-GET    { background: #e8f5e9; color: #27ae60; }

.method-POST   { background: #e3f2fd; color: #1565c0; }

.method-PUT    { background: #fff3e0; color: #e65100; }

.method-DELETE { background: #ffebee; color: #c62828; }



/* text color */

.text-navy {

  color: #1ab394;


 ruoyi-ui/src/views/system/operlog/detail.vue

New file
@@ -0,0 +1,147 @@
<template>
  <el-dialog title="操作日志详细" :visible.sync="visible" width="780px" append-to-body @close="$emit('update:visible', false)">
    <div class="detail-wrap">
      <!-- 基本信息 -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="el-icon-info"></i> 基本信息</div>
        <el-row class="detail-row">
          <el-col :span="12">
            <div class="detail-item"><span class="detail-label">操作模块</span><span class="detail-value">{{ form.title }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item"><span class="detail-label">业务类型</span><span class="detail-value">{{ typeLabel }}</span></div>
          </el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="12">
            <div class="detail-item"><span class="detail-label">操作时间</span><span class="detail-value">{{ form.operTime }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">执行状态</span>
              <el-tag v-if="form.status === 0" type="success" size="small"><i class="el-icon-check"></i> 正常</el-tag>
              <el-tag v-else type="danger" size="small"><i class="el-icon-close"></i> 异常</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 操作人员 -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="el-icon-user"></i> 操作人员</div>
        <el-row class="detail-row">
          <el-col :span="12">
            <div class="detail-item"><span class="detail-label">操作人员</span><span class="detail-value">{{ form.operName }}</span></div>
          </el-col>
          <el-col :span="12" v-if="form.deptName">
            <div class="detail-item"><span class="detail-label">所属部门</span><span class="detail-value">{{ form.deptName }}</span></div>
          </el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="24">
            <div class="detail-item">
              <span class="detail-label">操作地址</span>
              <span class="detail-value">{{ form.operIp }}&nbsp;&nbsp;<span class="detail-location">{{ form.operLocation }}</span></span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 请求信息 -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="el-icon-sort"></i> 请求信息</div>
        <el-row class="detail-row">
          <el-col :span="24">
            <div class="detail-item">
              <span class="detail-label">请求地址</span>
              <span class="detail-value">
                <span :class="'method-tag method-' + form.requestMethod">{{ form.requestMethod }}</span>
                {{ form.operUrl }}
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="24">
            <div class="detail-item"><span class="detail-label">操作方法</span><span class="detail-value mono">{{ form.method }}</span></div>
          </el-col>
        </el-row>
        <el-row class="detail-row">
          <el-col :span="12">
            <div class="detail-item"><span class="detail-label">消耗时间</span><span class="detail-value">{{ form.costTime }} 毫秒</span></div>
          </el-col>
        </el-row>
      </div>

      <!-- 请求参数 -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="el-icon-upload2"></i> 请求参数</div>
        <div class="code-body">
          <div class="code-wrap">
            <div class="code-action">
              <el-button size="mini" icon="el-icon-copy-document" @click="copyText(form.operParam)">复制</el-button>
            </div>
            <pre class="code-pre">{{ formatJson(form.operParam) }}</pre>
          </div>
        </div>
      </div>

      <!-- 返回参数 -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="el-icon-download"></i> 返回参数</div>
        <div class="code-body">
          <div class="code-wrap">
            <div class="code-action">
              <el-button size="mini" icon="el-icon-copy-document" @click="copyText(form.jsonResult)">复制</el-button>
            </div>
            <pre class="code-pre">{{ formatJson(form.jsonResult) }}</pre>
          </div>
        </div>
      </div>

      <!-- 异常信息 -->
      <div class="detail-card" v-if="form.status !== 0">
        <div class="detail-card-title error-title"><i class="el-icon-warning"></i> 异常信息</div>
        <div class="error-body">
          <div class="error-msg">{{ form.errorMsg }}</div>
        </div>
      </div>

    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'OperlogDetail',
  dicts: ['sys_oper_type'],
  props: {
    visible: { type: Boolean, default: false },
    row: { type: Object, default: () => ({}) }
  },
  computed: {
    form() { return this.row || {} },
    typeLabel() { return this.selectDictLabel(this.dict.type.sys_oper_type, this.form.businessType) || '-' }
  },
  methods: {
    formatJson(str) {
      if (!str) return '（无数据）'
      try { return JSON.stringify(JSON.parse(str), null, 2) } catch { return str }
    },
    copyText(str) {
      const text = this.formatJson(str)
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => this.$message({ message: '已复制', type: 'success', duration: 1500 }))
      } else {
        const ta = document.createElement('textarea')
        ta.value = text
        document.body.appendChild(ta)
        ta.select()
        document.execCommand('copy')
        document.body.removeChild(ta)
        this.$message({ message: '已复制', type: 'success', duration: 1500 })
      }
    }
  }
}
</script>

 ruoyi-ui/src/views/system/operlog/index.vue

@@ -144,7 +144,7 @@
            size="mini"

            type="text"

            icon="el-icon-view"

            @click="handleView(scope.row,scope.index)"

            @click="handleDetail(scope.row,scope.index)"

            v-hasPermi="['system:operlog:query']"

          >详细</el-button>

        </template>

@@ -159,58 +159,17 @@
      @pagination="getList"

    />



    <!-- 操作日志详细 -->

    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>

      <el-form ref="form" :model="form" label-width="100px" size="mini">

        <el-row>

          <el-col :span="12">

            <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>

            <el-form-item

              label="登录信息："

            >{{ form.operName }} / {{ form.operIp }}</el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>

            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="操作状态：">

              <div v-if="form.status === 0">正常</div>

              <div v-else-if="form.status === 1">失败</div>

            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>

          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="open = false">关 闭</el-button>

      </div>

    </el-dialog>

    <operlog-detail :visible.sync="detailVisible" :row="detailRow" />

  </div>

</template>



<script>

import OperlogDetail from './detail'

import { list, delOperlog, cleanOperlog } from "@/api/system/operlog"



export default {

  name: "Operlog",

  components: { OperlogDetail },

  dicts: ['sys_oper_type', 'sys_common_status'],

  data() {

    return {

@@ -227,7 +186,8 @@
      // 表格数据

      list: [],

      // 是否显示弹出层

      open: false,

      detailVisible: false,

      detailRow: {},

      // 日期范围

      dateRange: [],

      // 默认排序

@@ -260,9 +220,10 @@
        }

      )

    },

    // 操作日志类型字典翻译

    typeFormat(row, column) {

      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType)

    // 详细按钮操作

    handleDetail(row) {

      this.detailRow = row

      this.detailVisible = true

    },

    /** 搜索按钮操作 */

    handleQuery() {

@@ -286,11 +247,6 @@
      this.queryParams.orderByColumn = column.prop

      this.queryParams.isAsc = column.order

      this.getList()

    },

    /** 详细按钮操作 */

    handleView(row) {

      this.open = true

      this.form = row

    },

    /** 删除按钮操作 */

    handleDelete(row) {