peisweb/src/views/user-list/AuditLog.vue

<template>
  <div>
    <el-card class="elcard" style="border-radius: 15px">
      <div class="publiccss">安全日志</div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        height="700"
      >
        <el-table-column prop="userName" label="用户名" width="80">
        </el-table-column>
        <el-table-column prop="httpStatusCode" label="状态" width="80">
        </el-table-column>
        <el-table-column prop="url" label="地址" width="180"> </el-table-column>
        <el-table-column prop="clientIpAddress" label="ip地址" width="200">
        </el-table-column>
        <el-table-column
          prop="clientId"
          label="客户端id"
          width=""
        ></el-table-column>
        <el-table-column
          prop="httpMethod"
          label="请求方法"
          width="180"
        ></el-table-column>
        <el-table-column prop="executionTime" label="时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.executionTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="browserInfo" label="浏览器信息" width="500">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type=""
              @click="inquireabout(scope.row)"
              style="width: 100px"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 详情弹框 -->
      <el-dialog
        title="日志详情"
        :visible.sync="dialogVisible"
        width="80%"
        :close-on-click-modal="false"
      >
        <el-table :data="detailedinformationdata" style="width: 100%">
          <el-table-column prop="userName" label="用户名" width="80">
          </el-table-column>
          <el-table-column prop="httpStatusCode" label="状态" width="80">
          </el-table-column>
          <el-table-column prop="url" label="地址" width="180">
          </el-table-column>
          <el-table-column prop="clientIpAddress" label="ip地址" width="120">
          </el-table-column>
          <el-table-column
            prop="clientId"
            label="客户端id"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="httpMethod"
            label="请求方法"
            width="180"
          ></el-table-column>
          <el-table-column prop="executionTime" label="时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.executionTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="browserInfo" label="浏览器信息" width="">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="queddialogVisible"
            class="bulletcommit"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pages.maxResultCount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000 - 1"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { dailyrecord, querylog } from "@/request/ruquset";
export default {
  data() {
    return {
      tableData: [],
      pages: {
        skipCount: 0,
        maxResultCount: 20,
        // sorting
      },
      dialogVisible: false,
      detailedinformationdata: [],
    };
  },
  created() {
    this.cratlist();
  },
  methods: {
    cratlist() {
      dailyrecord(this.pages).then((res) => {
        this.tableData = res.data;
        console.log(res);
      });
    },
    //分页
    handleSizeChange(v) {
      this.pages.maxResultCount = v;
      this.cratlist();
    },
    handleCurrentChange(v) {
      this.pages.skipCount = v;
      (this.pages.currentPage - 1) * this.pages.MaxResultCount;
      this.cratlist();
    },

    //查询信息
    inquireabout(row) {
      this.dialogVisible = true;
      this.detailedinformationdata = [];
      console.log(row);
      querylog(row.id).then((res) => {
        if (row.id == res.data.id) {
          this.detailedinformationdata.push(res.data);
        }
      });
    },
    queddialogVisible() {
      // this.detailedinformationdata = [];
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
::v-deep .el-table__header th {
  /* font-size: px; */
  background-color: rgb(245, 245, 245); /* 设置表头背景颜色 */
  color: rgb(113, 113, 113); /* 设置表头文字颜色 */
}
</style>