spfm-market-front/src/pages/main/logQuery/logQueryList.vue

<template>
  <!-- <div style="height: 95%"> -->

  <div class="container" style="padding: 20px 15px 15px 15px">
    <h2 style="margin: 15px">操作日志查询</h2>
    <div class="search" style="margin: 15px">
      <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
    </div>
    <el-table
      height="calc(80% - 40px)"
      v-loading="loading"
      class="com-table"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      size="small"
      border
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="slaveNumber"
        label="操作账号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sourceIp"
        show-overflow-tooltip
        label="访问IP"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="moduleName"
        show-overflow-tooltip
        label="操作模块"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="operationContent"
        show-overflow-tooltip
        label="操作明细"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="operationTime"
        show-overflow-tooltip
        label="访问时间"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      class="pageBox"
      @current-change="currchange"
      layout="prev, pager, next"
      background
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import mySearch from "../../../components/search";
export default {
  components: {
    mySearch,
  },
  data() {
    return {
      total: 0,
      loading: false,
      pageSize: 1,
      params: {
        slaveNumber: "",
      },
      searchList: [
        {
          type: "input",
          tit: "日志操作账号",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      tableData: [
        {
          slaveNumber: "admin",
          sourceIp: "100.220.100.100",
          moduleName: "全量业务明细报表",
          operationContent: "全量业务明细报表1111",
          operationTime: "2021-03-10",
        },
        {
          slaveNumber: "admin",
          sourceIp: "100.20.100.109",
          moduleName: "全量业务",
          operationContent: "全量业务明细报表22222",
          operationTime: "2021-04-15",
        },
      ],
    };
  },
  methods: {
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.slaveNumber = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      // this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/market/selectLogs/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
        // console.log(this.tableData);
      });
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    // this.getOpations();
    this.getList(this.params, this.pageSize);
    // 获取权限
  },
  watch: {
    $route() {
      this.getList(this.params, this.pageSize);
    },
  },
};
</script>
<style scoped>
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.container .el-upload {
  width: auto !important;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  float: right;
  margin-top: 10px;
}
.info-line {
  width: 100%;
  display: block;

  span {
    width: 80px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}
.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
</style>