ojk_dtb_manage_ui/src/components/systemManage/SystemLogs.vue

<template>
  <div id="SystemLogs">
    <h3 style="display: inline-block">系统日志</h3>
    <div style="display: inline-block; cursor: pointer; margin-left: 20px" @click="refresh">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="刷新日志"
          placement="right"
      >
        <el-icon ><IconPark-refresh/></el-icon>
      </el-tooltip>
    </div>
    <el-form :model="filterForm" :inline="true" style="display: inline-block;float: right">
      <el-form-item label="日期范围：" style="width: 350px">
        <el-date-picker v-model="filterForm.dateRange" type="daterange"
                        range-separator="至"
                        start-placeholder="起始日期"
                        end-placeholder="终止日期"
                        value-format="x"
                        @change="handleDateRangeChange"
        />
      </el-form-item>
      <el-form-item label="用户名：" style="width: 200px">
        <el-input v-model="filterForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider/>
    <el-table :data="tableData" v-loading="loading" element-loading-text="正在加载，请稍后..."
              :border="true" :stripe="true" :height="$store.state.windowsHeight*0.67" style="width: 100%;margin-bottom: 15px;">
      <el-table-column prop="userName" label="用户名" width="140"/>
      <el-table-column prop="loginIp" label="访问ip" width="120"/>
      <el-table-column prop="createTime" label="访问时间" width="170">
        <template #default="scope">
          {{ $util.datetime.format(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="requestUrl" label="访问接口" width="270" />
      <el-table-column prop="content" label="内容"/>
      <el-table-column prop="state" label="状态">
        <template #default="scope">
          <span v-if="scope.row.state==1">成功</span>
          <span v-else-if="scope.row.state==2">失败</span>
          <span v-else></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float:right" background layout="sizes, prev, pager, next, jumper, total"
                   v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
                   v-model:total="pageInfo.total"/>
  </div>
</template>

<script>
import api from "@/api/data/SystemInfo"

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      filterForm: {},
    }
  },
  created() {
  },
  mounted() {
    this.getData();
  },
  watch: {
    "pageInfo.page": function (val) {
      if (val > 0) {
        this.getData();
      }
    },
    "pageInfo.pageSize": function () {
      let app = this;
      this.pageInfo.page = -1;
      setTimeout(function () {
        app.pageInfo.page = 1;
      }, 50)
    },
  },
  methods: {
    handleLoading(flag) {
      let app = this;
      if (flag) {
        app.loading = true;
      } else {
        setTimeout(() => {
          app.loading = false;
        }, 500);
      }
    },
    getData() {
      let app = this;
      let end = app.$util.datetime.nowTimestamp();
      let start = app.$util.datetime.now().subtract(30, 'day').valueOf();
      let params = {
        page: app.pageInfo.page-1,
        pageSize: app.pageInfo.pageSize,
        username: app.filterForm.username,
        startDate: start,
        endDate: end,
        serviceId: '8,9'
      };
      app.handleLoading(true)
      api.getLogData(params).then(res=>{
        if (res.code===200) {
          app.tableData=res.content;
          app.pageInfo.total = res.total;
        }
        app.handleLoading(false)
      }).catch(()=>{
        app.handleLoading(false)
      })
    },
    refresh() {
      let app = this;
      app.pageInfo.pageSize=-1;
      app.filterForm = {};
      setTimeout(function () {
        app.pageInfo.pageSize=10;
      })
    },
    handleDateRangeChange(val) {
      this.filterForm.startDate = val[0]
      this.filterForm.endDate = val[1]
    },
  }
}
</script>

<style>
#SystemLogs {
  padding-left: 2%;
}
</style>