vue后台管理系统之日志管理模块

前端的后台的日志管理模块功能的实现

（使用的是elementUI框架）
这是日志管理模块实现的效果图

      <!-- 搜索 -->
      <div class="log-header">
        <div>
          <el-input
            v-model="LogContent"
            placeholder="请输入日志内容"
            style="width: 220px; margin-right: 20px"
          ></el-input>

          <el-button type="primary" @click="onSubmit">查询</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        height="calc(100vh - 270px )"
        border
        stripe
        style="width: 100%"
        :data="list"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="SuName" label="账号" width="120">
        </el-table-column>
        <el-table-column prop="SuNickname" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="LogAction" label="动作" width="120">
        </el-table-column>
        <el-table-column prop="LogContent" label="内容" width="120">
        </el-table-column>
        <el-table-column prop="LogUrl" label="链接" width="120">
        </el-table-column>
        <el-table-column prop="LogIp" label="IP" width="120"> </el-table-column>
        <el-table-column prop="LogCity" label="IP城市" width="120">
        </el-table-column>
        <el-table-column prop="LogCreateTime" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="LogBrowserName" label="浏览器名称" width="120">
        </el-table-column>
        <el-table-column prop="LogSystemName" label="操作系统">
        </el-table-column>
        <!-- <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button @click="OnLook(scope.row.LogId)" icon="el-icon-view"
              >查看</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 100]"
        :page-size.sync="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>

<script>
export default {
  name: "Role",
  props: {
    tabIndex: {
      type: [String, Number],
      default: "3",
    },
  },
  data() {
    return {
      list: [], //数据列表
      page: 1, //当前页
      rows: 10, //每页的条数
      total: 0, //总数
      LogContent: "", //根据内容搜索
    };
  },
  mounted() {
    // 获取日志列表数据
    this.QuerySysLogTable();
  },
  methods: {
    // 根据内容搜索
    onSubmit(){
      this.QuerySysLogTable()
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.rows = val;
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.page = val;
    },
    // 获取日志列表数据
    QuerySysLogTable() {
      var newFormData = new FormData();
      newFormData.append("page", this.page);
      newFormData.append("rows", this.rows);
      newFormData.append("tableName", "syslog");
      newFormData.append("pagination", "1");
      newFormData.append("columnsExists", "0");
      // 内容过滤
      if (this.LogContent != "") {
        newFormData.append(
          "wheres",
          "[{ 'field': 'LogContent', 'relation': 'Contains','value':'" +
            this.LogContent +
            "'}]"
        );
      }
      this.$api.QuerySysLogTable(newFormData).then((res) => {
        // console.log(res);
        this.list = res.data;
        this.total = res.total;
      });
    },
  },
};
</script>

<style lang="less">
.log-header {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}
</style>

接口

// 获取日志数据列表
  QuerySysLogTable: function(data) {
    return Axios.post('/Setting/QuerySysLog',data)
  },