qimall/backend/modules/mall/views/logs/order.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-user-info');
ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
            ref="table"
            :api-params="apiParams"
            :search-list="searchList"
            :list-params-verify-fun="listParamsVerifyFun"
            @select-change="selectChange"
    >
        <el-table-column prop="id" label="日志ID" align="center"></el-table-column>
        <el-table-column prop="id" label="操作人" align="center">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.operator_user" :is-to-user-detail="scope.row.operator_user_type == 2" v-if="scope.row.operator_user_type != 6"></com-user-info>
                <template v-else>系统</template>
            </template>
        </el-table-column>
        <el-table-column prop="operator_user_type_text" label="操作人类型" align="center"></el-table-column>
        <el-table-column prop="order_id" label="订单ID" align="center"></el-table-column>
        <el-table-column label="订单号" align="center" width="180">
            <template slot-scope="scope">
                {{ scope.row.order.order_no }}
            </template>
        </el-table-column>
        <el-table-column label="行为" align="center" width="500">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
                    <div>{{ scope.row.desc }}</div>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column prop="created_at_text" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="ip_text" label="IP" align="center"></el-table-column>
    </com-list-table>
</com-list-page>
<script>
    const application = new Vue({
        el: '#application',
        data() {
            return {
                uid: 0,
                name: '',
                levelList: [],
                btnLoad: false,
                operatorUserTypeOptions: <?= $operatorUserTypeOptions ?>,
                behaviorOptions: <?= $behaviorOptions ?>,
                operatorUserIdPlaceholder: '操作人'
            }
        },
        computed: {
            apiParams() {
                return {
                    r: 'mall/logs/order'
                }
            },
            crumbs() {
                return [
                    {
                        title: '订单',
                    },
                    {
                        title: '订单日志',
                    }
                ]
            },
            searchList() {
                return [
                    {
                        key: 'operator_user_type',
                        title: '操作人类型',
                        type: 'select',
                        placeholder: '请选择操作人类型',
                        options: this.operatorUserTypeOptions,
                        valueKey: {
                            label: 'label',
                            value: 'value',
                        },
                    },
                    {
                        key: 'operator_user_keyword',
                        title: this.operatorUserIdPlaceholder,
                        type: 'text',
                    },
                    {
                        key: 'order_id',
                        title: '订单ID',
                        type: 'text',
                    },
                    {
                        key: 'order_no',
                        title: '订单号',
                        type: 'text',
                    },
                    {
                        key: 'behavior',
                        title: '行为',
                        type: 'select',
                        placeholder: '请选择',
                        options: this.behaviorOptions,
                        valueKey: {
                            label: 'label',
                            value: 'value',
                        },
                    },
                    {
                        key: 'created_at',
                        title: '操作日期',
                        type: 'date-time-range'
                    },
                ]
            }
        },
        created() {
        },
        methods: {
            selectChange(key, value) {
                if (key === 'operator_user_type') {
                    if (value == 2) {
                        this.operatorUserIdPlaceholder = '操作人ID或手机号'
                    } else if(value == 1) {
                        this.operatorUserIdPlaceholder = '操作人账号'
                    } else {
                        this.operatorUserIdPlaceholder = '操作人'
                    }
                }
            },
            listParamsVerifyFun(params) {
                if (!isEmpty(params.operator_user_keyword) && isEmpty(params.operator_user_type)) {
                    this.$message.error('请选择操作人类型')
                    return false
                }
                
                return true
            }
        }
    })
</script>

<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
</style>