DigitalHuman-web/src/views/monitor/operlog/index.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="operId" :request-api="listOperlogApi" :init-param="initParam"> </ProTable>
  </div>
</template>

<script setup lang="tsx" name="Operog">
import ProTable from '@/components/ProTable/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { listOperlogApi } from '@/api/modules/monitor/operlog'

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { prop: 'operId', label: '日志主键' },
  {
    prop: 'title',
    label: '模块标题',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'businessType',
    label: '业务类型',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'method',
    label: '方法名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'requestMethod',
    label: '请求方式',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operatorType',
    label: '操作类别',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operName',
    label: '操作人员',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'deptName',
    label: '部门名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operUrl',
    label: '请求URL',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operIp',
    label: '主机地址',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operLocation',
    label: '操作地点',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operParam',
    label: '请求参数',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'jsonResult',
    label: '返回参数',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'status',
    label: '操作状态',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'errorMsg',
    label: '错误消息',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'operTime',
    label: '操作时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    }
  },
  {
    prop: 'costTime',
    label: '消耗时间',
    search: {
      el: 'input'
    }
  }
])
</script>