<template>
  <div class="app-container">
    <!-- 列表区域 -->
    <el-table :data="record" style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column prop="content" label="操作"></el-table-column>
      <el-table-column prop="operator" label="操作人" width="80"></el-table-column>
      <el-table-column prop="uname" label="操作对象" width="80"></el-table-column>
      <el-table-column prop="indate" label="时间" width="100"></el-table-column>
    </el-table>

    <!-- 页码区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      style="float: right"
    ></el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      record: [],
      loading: false,
      //分页相关
      pageIndex: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    //获取记录
    getRecord() {
      this.loading = true;
      request({
        url: "/scoring-operate-record/getScoreRecordByPage",
        method: "post",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
        .then(response => {
          this.record = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //页码规格变更
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRecord();
    },

    //页码页数变更
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getRecord();
    }
  },
  mounted() {
    this.getRecord();
  }
};
</script>

<style scoped>
</style>

