erp/resources/frontend/src/views/logs/record.vue

<template>
  <div>
    <!-- 筛选框 -->
    <el-card :body-style="{ padding: '20px 20px 0 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>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 10px">
      <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>

      <!-- 分页功能 -->
      <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>
    </el-card>
  </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: 1,
        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 lang="scss" scoped>
.block {
  margin-top: 20px;
}
</style>