erp/resources/frontend/src/views/shuju/shuju.vue

<template>
  <div>
    <!-- 筛选框 -->
    <el-card class="box-card">
      <div class="goods" style="margin: 20px">
        <el-form ref="form" :inline="true" :model="form">
          <el-form-item label="查询类别：">
            <el-select v-model="form.name1" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作用户">
            <el-select v-model="form.name2" placeholder="输入操作用户">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间：">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="起"
              end-placeholder="止"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 30px" class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="created_at" label="时间"> </el-table-column>
        <el-table-column prop="target_field" label="类别"> </el-table-column>
        <el-table-column prop="before_update" label="操作前"> </el-table-column>
        <el-table-column prop="after_update" label="操作后"> </el-table-column>
        <el-table-column prop="user.name" label="操作人"> </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 50, 100]"
        :page-size="per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Paginationdata.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      form: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
      },
      input: "",
      value1: "",

      tableData: [], //列表数据
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
    };
  },
  methods: {
    //请求列表数据
    getList() {
      axios
        .get("/api/logs", {
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
          params: {
            page: this.current_page,
            per_page: this.per_page,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
    },

    //分页功能
    handleSizeChange(val) {
      //当前条数
      this.per_page = val;
      // console.log(1111, val);
      this.getList();
    },
    handleCurrentChange(val) {
      //当前页
      this.current_page = val;
      // console.log(2222, val);
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style>
.block {
  margin-top: 30px;
}
</style>