qimall/addons/Printer/backend/views/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.id" placeholder="日志ID" clearable></el-input>
                        </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.order_id" placeholder="订单ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="类型">
                            <el-select v-model="search.type" placeholder="请选择">
                                <el-option v-for="(val, key) in print_type" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="结果">
                            <el-select v-model="search.status" placeholder="请选择">
                                <el-option v-for="(val, key) in status" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </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" 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="type" label="来源" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.store_id > 0">
                            o2o门店
                        </div>
                        <div v-else-if="scope.row.mch_id > 0">
                            多商户
                        </div>
                        <div v-else>
                            主商城
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="order_id" label="订单ID" align="center"></el-table-column>
                <el-table-column prop="type" label="类型" align="center">
                    <template slot-scope="scope">
                        {{print_type[scope.row.type]}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="结果" align="center">
                    <template slot-scope="scope">
                        {{status[scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column prop="msg" label="信息" align="center"></el-table-column>
                <el-table-column label="操作时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </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>
</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: "",
            print_type: {
                '1': '下单',
                '2': '支付',
                '3': '确认收货',
                '4': '后台',
            },
            status: {
                '0': '失败',
                '1': '成功',
            },
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'printer/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;
                        console.log(this.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>