erp/resources/frontend/src/views/logs/record.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.targetField" 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.userId" placeholder="输入操作用户">
              <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
              </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="止" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query()">查询</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%" border>
        <el-table-column prop="id" label="序号" width="70"> </el-table-column>
        <el-table-column prop="created_at" label="时间" width="200">
        </el-table-column>
        <el-table-column prop="target_field" label="类别" width="100">
        </el-table-column>
        <el-table-column prop="before_update" label="操作前" :resizable="ture">
        </el-table-column>
        <el-table-column prop="after_update" label="操作后" :resizable="ture">
        </el-table-column>
        <el-table-column prop="user.name" label="操作人" width="100">
        </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 { userList } from "../../api/user";
  import { recordList } from "../../api/record";
  export default {
    data() {
      return {
        options: [
          {
            value: "cost",
            label: "成本",
          },
          {
            value: "stock",
            label: "库存",
          },
          {
            value: "inventory",
            label: "库存盘点",
          },
          {
            value: "status",
            label: "状态",
          },
          {
            value: "set",
            label: "设置",
          },
        ], //查询类别
        options1: [], //查询用户列表
        form: {
          targetField: "",
          userId: "",
        },
        value1: "", //筛选时间变量
        tableData: [], //列表数据
        Paginationdata: {}, //分页相关数据
        current_page: 1, //当前页
        per_page: 15, //每页显示数量
        moudule: "goods",
      };
    },
    methods: {
      //请求列表数据
      getList() {
        let queryData = {
          userId: this.form.userId,
          target_field: this.form.targetField,
          moudule: this.moudule,
          target_id: this.$route.query.id,
          startTime: this.value1[0],
          endTime: this.value1[1],
          page: this.current_page,
          per_page: this.per_page,
        };
        recordList(queryData).then((res) => {
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
      },

      //分页功能
      handleSizeChange(val) {
        //当前条数
        this.per_page = val;
        this.query();
      },
      handleCurrentChange(val) {
        //当前页
        this.current_page = val;
        this.query();
      },

      // 获取用户列表
      getUser() {
        userList().then((res) => {
          this.options1 = res.data.data;
        });
      },

      // 查询
      query() {
        let queryData = {
          userId: this.form.userId,
          target_field: this.form.targetField,
          page: this.current_page,
          per_page: this.per_page,
          moudule: this.moudule,
          target_id: this.$route.query.id,
          startTime: this.value1[0],
          endTime: this.value1[1],
        };

        // 对象值为空清除
        const newObj = filterParams(queryData);
        function filterParams(obj) {
          const _newPar = {};
          for (const key in obj) {
            // 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
            if (
              (obj[key] === 0 || obj[key]) &&
              obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
            ) {
              // 记录属性
              _newPar[key] = obj[key];
            }
          }
          // 返回对象
          return _newPar;
        }

        recordList(newObj).then((res) => {
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
      },
    },
    mounted() {
      this.getList();
      this.getUser();
    },
  };
</script>

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