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: 20px">
            <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 lang="scss" scoped>
    .block {
        margin-top: 20px;
    }
</style>