qimall/backend/modules/mall/views/backend-log/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>操作日志</span>
        </div>
        <div class="table-body">
            <el-form ref="form" style="margin-bottom: 10px;" :model="search" label-width="96px" size="mini">
                <el-row :gutter="24">
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="操作员ID">
                            <el-input v-model="search.operate_id" placeholder="操作员ID" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" class="top_form">
                        <el-form-item label="操作员名称">
                            <el-input v-model="search.operate_name" placeholder="操作员名称" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4"  class="top_form">
                        <el-form-item label="模块">
                            <el-select v-model="search.modules" placeholder="请选择模块">
                                <el-option v-for="(name,title) in modules_arr" :label="name" :value="title" :key="name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="模型ID">
                            <el-input v-model="search.model_id" placeholder="模型ID" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-button type="primary" size="mini" @click="toSearch" >搜索</el-button>
                        <el-button type="danger" size="mini" @click="resetSearch" >清除</el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="模型">
                            <el-input v-model="search.model" placeholder="模型" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"  class="top_form">
                        <el-form-item label="时间">
                            <el-date-picker
                                    style="margin-right: 20px;"
                                    size="small"
                                    v-model="search.selectDate"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column prop="id" label="日志ID" align="center"></el-table-column>
                <el-table-column prop="operate_name" label="操作人名称" align="center"></el-table-column>
                <el-table-column label="模块" prop="modules" align="center">
                    <template slot-scope="scope">
                        <el-tag size="small">{{ modules_arr[scope.row.modules] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="模型" prop="model" align="center"></el-table-column>
                <el-table-column label="模型ID" prop="model_id" align="center"></el-table-column>
                <el-table-column label="操作行为" prop="remark">
                    <template slot-scope="scope">
                        {{ model_arr[scope.row.model] ?? '' }} {{ scope.row.remark }}
                    </template>
                </el-table-column>
                <el-table-column label="更新前" prop="before_content" width="350">
                    <template slot-scope="scope">
                        <div style="width: 100%; max-height: 48px; overflow: hidden;">
                            {{ scope.row.before_content }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="更新后" prop="after_content" width="350">
                    <template slot-scope="scope">
                        <div style="width: 100%; max-height: 48px; overflow: hidden;">
                            {{ scope.row.after_content }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="IP" prop="operate_ip" align="center" width="120"></el-table-column>

                <el-table-column label="操作时间"  align="center" width="160">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getJsonStr(scope.row.before_content, scope.row.after_content)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>

    <el-dialog title="变更信息" :visible.sync="dialogVisible" center width="60%" :before-close="handleClose" :close-on-click-modal="false">
        <el-row>
            <el-col :span="11">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>变更前</span>
                    </div>
                    <el-input type="textarea" :rows="25" v-model="before_content"></el-input>
                </el-card>
            </el-col>

            <el-col :span="2"><div style="width: 100%; color: #fff; text-align: center;">|</div></el-col>

            <el-col :span="11">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>变更后</span>
                    </div>
                    <el-input type="textarea" :rows="25" v-model="after_content"></el-input>
                </el-card>
            </el-col>
        </el-row>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            dialogVisible: false,
            page: 1,
            pageCount: 0,
            list: [],
            search: {
                operate_id: null,
                operate_name: null,
                modules: null,
                selectDate:'',
                model_id:'',
                model:'',
            },
            model_arr: [],// 模型
            modules_arr: [],// 模块
            before_content: "",
            after_content: "",
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'mall/backend-log/index',
                    page:this.page,
                };
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list.list;
                        this.model_arr = e.data.data.model_arr;
                        this.modules_arr = e.data.data.modules_arr;
                        this.pageCount = e.data.data.list.page_count;
                        this.page = e.data.data.list.page;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            //搜索
            toSearch() {
                this.page = 1;
                this.loadData();
            },
            //清空搜索
            resetSearch() {
                this.search = {};
                this.loadData();
            },
            handleClose() {
                this.dialogVisible = false
            },
            getJsonStr(before_content, after_content) {
                this.dialogVisible = true;
                this.before_content = JSON.stringify(JSON.parse(before_content), null, '\t');
                this.after_content = JSON.stringify(JSON.parse(after_content), null, '\t');
            }
        }
    });
</script>