xujiecloud-vue/src/views/modules/sys/log.vue

<template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">{{ buttons.search || '查询' }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :height="tableHeight"
      ref="wt_table"
      @mouseenter.native="mouseEnter"
      @mouseleave.native="mouseLeave"
      border
      v-loading="dataListLoading"
      style="width: 100%">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="80"
        :label="buttons.id || 'ID'">
      </el-table-column>
      <el-table-column
        prop="username"
        header-align="center"
        align="center"
        :label="buttons.username || '用户名'">
      </el-table-column>
      <el-table-column
        prop="operation"
        header-align="center"
        align="center"
        :label="buttons.operation || '用户操作'">
      </el-table-column>
      <el-table-column
        prop="method"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        :label="buttons.method || '请求方法'">
      </el-table-column>
      <el-table-column
        prop="params"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        :label="buttons.params || '请求参数'">
      </el-table-column>
      <el-table-column
        prop="time"
        header-align="center"
        align="center"
        :label="buttons.time || '执行时长(毫秒)'">
      </el-table-column>
      <el-table-column
        prop="ip"
        header-align="center"
        align="center"
        width="150"
        :label="buttons.ip || 'IP地址'">
      </el-table-column>
      <el-table-column
        prop="createDate"
        header-align="center"
        align="center"
        width="180"
        :label="buttons.createDate || '创建时间'">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200,500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import {
  searchFunctionButtonList,
} from "@/api/sysLanguage.js"

let rolltimer = '' // 自动滚动的定时任务
export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 19,
      totalPage: 0,
      dataListLoading: false,
      selectionDataList: [],
      tableHeight: 0,
      // 默认的刷新，滚动时间，滚动间距
      refreshTime: 5,
      rollTime: 5,
      rollPx: 1,
      buttons: {
        search: '查询',
        id: 'ID',
        username: '用户名',
        operation: '用户操作',
        method: '请求方法',
        params: '请求参数',
        time: '执行时长(毫秒)',
        ip: 'IP地址',
        createDate: '创建时间',
      },
    }
  },
  created() {
    this.getDataList()
    this.getFunctionButtonList()
   // this.autoRoll()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 170;
      //后面的50：根据需求空出的高度，自行调整
    })
  },
  methods: {
    // 获取button的词典
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.$route.meta.menuId,
        tableId: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.code == 0 && data.data) {
          this.buttons = data.data
        }
      })
    },
    // 鼠标进入
    mouseEnter(time) {
      // 鼠标进入停止滚动和切换的定时任务
      // this.autoRoll(true)
    },
    // 鼠标离开
    mouseLeave() {
      // 开启
      //this.autoRoll()
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(rolltimer)
        return
      }
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.wt_table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      rolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, this.rollTime * 10)
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/log/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.dataForm.key
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount

        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>