scd_tools_ui/src/pages/setting/components/SetLog.vue

<template>
    <div>
        <div class="bigBox" v-loading="loading">
            <div class="titleBox">
                <h1 style="font-size: 18px;">操作日志管理</h1>
            </div>
            <!-- 分类查询数据 -->
            <div class="settingBox">
                <div class="manyBox">
                    <span style="font-size: 14px;margin: 0 10px;">操作结果</span>
                    <el-select @change="aboutChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="setAbout"
                        clearable placeholder="操作结果">
                        <el-option v-for="(item, index) in setAboutList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span style="font-size: 14px;margin: 0 10px;">审计分类</span>
                    <el-select @change="audiChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="audiType"
                        clearable placeholder="审计分类">
                        <el-option v-for="(item, index) in audiTypeList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span style="font-size: 14px;margin: 0 10px;">操作分类</span>
                    <el-select @change="stChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="setType"
                        clearable placeholder="操作分类">
                        <el-option v-for="(item, index) in setTypeList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span style="font-size: 14px;margin: 0 10px;">事件类型</span>
                    <el-select @change="thingChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="thing"
                        clearable placeholder="事件类型">
                        <el-option v-for="(item, index) in thingList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <el-button type="primary" @click="allSearch">
                        <el-icon>
                            <Search />
                        </el-icon>查询</el-button>
                    <el-button @click="getList(1)">
                        <el-icon>
                            <RefreshLeft />
                        </el-icon>重置</el-button>
                </div>
            </div>
            <!-- 数据 -->
            <div class="mesBox">
                <el-table :data="logList" stripe style="width: 100%;height: calc(100vh - 260px);">
                    <el-table-column prop="audittypename" :show-overflow-tooltip="true" label="审计分类" width="auto" />
                    <el-table-column prop="eventtypename" label="事件类型" width="auto" />
                    <el-table-column prop="staff" label="操作用户" width="auto" />
                    <el-table-column prop="eventlevelname" label="事件等级" width="auto" />
                    <el-table-column prop="logtypename" label="操作类型" width="auto" />
                    <el-table-column prop="ip" label="操作IP" width="auto" />
                    <el-table-column prop="insdate" label="操作时间" :show-overflow-tooltip="true" width="auto" />
                    <el-table-column prop="optresultname" label="结果" width="auto" />
                    <el-table-column prop="description" :show-overflow-tooltip="true" label="日志描述" width="180" />
                </el-table>
            </div>
            <div style="width: 100%;">
                <Pagination :tLength="logTotal" @getBack="getBack"></Pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import systemRow from '@/api/systemRow'
import setlog from '@/api/setlog'
import Pagination from './Pagination.vue';
export default {
    setup() {
        let setAbout = ref('')//操作结果value
        let setType = ref('')//操作分类value
        let audiType = ref('')//审计分类value
        let thing = ref('')//事件类型value
        let setAboutList = ref([])//操作结果列表
        let setTypeList = ref([])//操作分类列表
        let audiTypeList = ref([])//审计分类列表
        let thingList = ref([])//事件类型列表
        let logList = ref([])//操作日志列表
        let logTotal = ref(0)//列表总数
        let pages = ref(1)
        let sizes = ref(10)
        let loading = ref(false)
        function getSelect() {//获取所有下拉框选项
            systemRow.getAllRow({ pcode: "log_optresult" }).then(res => {
                // 操作结果
                if (res.data != null) {
                    setAboutList.value = res.data
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
            systemRow.getAllRow({ pcode: 'log_opttype' }).then(res => {
                // 操作分类
                if (res.data != null) {
                    setTypeList.value = res.data
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
            systemRow.getAllRow({ pcode: 'log_audittype' }).then(res => {
                // 审计分类
                if (res.data != null) {
                    audiTypeList.value = res.data
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
            systemRow.getAllRow({ pcode: 'log_eventtype' }).then(res => {
                // 事件类型
                if (res.data != null) {
                    thingList.value = res.data
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function getList(num) {//获取操作日志列表
            if (num) {
                setAbout.value = ''
                setType.value = ''
                audiType.value = ''
                thing.value = ''
                loading.value = true
                setlog.getAllLog({ pageindex: 1, pageSize: 20, enddate: getDate(), startdate: getDate() }).then(res => {
                    if (res.data != null) {
                        logList.value = res.data
                        logTotal.value = res.count
                        loading.value = false
                    } else {
                        logList.value = []
                        logTotal.value = 0
                        loading.value = false
                        // ElMessage({
                        //     message: res.msg,
                        //     type: "error"
                        // })
                    }
                })
            } else {
                loading.value = true
                setlog.getAllLog({ pageindex: 1, pageSize: 20, enddate: getDate(), startdate: getDate() }).then(res => {
                    if (res.data != null) {
                        logList.value = res.data
                        logTotal.value = res.count
                        loading.value = false
                    } else {
                        logList.value = []
                        logTotal.value = 0
                        loading.value = false
                    }
                })
            }

        }
        function getDate() {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并补零
            const day = currentDate.getDate().toString().padStart(2, '0'); // 补零
            const formattedDate = `${year}-${month}-${day}`;
            return formattedDate
        }
        function getBack(index, size) {//分页组件返回数据赋值
            loading.value = true
            pages.value = index
            sizes.value = size
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value, enddate: getDate(), startdate: getDate() }).then(res => {
                if (res.code == 0) {
                    logList.value = res.data
                    logTotal.value = res.count
                    loading.value = false
                } else {
                    logList.value = []
                    logTotal.value = 0
                    loading.value = false
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function aboutChange(e) {//操作结果change事件
            // loading.value = true
            setAbout.value = e
            // setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value, success: setAbout.value, enddate: getDate(), startdate: getDate() }).then(res => {
            //     if (res.data != null) {
            //         logList.value = res.data
            //         logTotal.value = res.count
            //         loading.value = false
            //     } else {
            //         logList.value = []
            //             logTotal.value = 0
            //             loading.value = false
            //     }
            // })
        }
        function audiChange(e) {//审计分类change事件
            // loading.value = true
            audiType.value = e
            // setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value, audittype: audiType.value, enddate: getDate(), startdate: getDate() }).then(res => {
            //     if (res.data != null) {
            //         logList.value = res.data
            //         logTotal.value = res.count
            //         loading.value = false
            //     } else {
            //         logList.value = []
            //             logTotal.value = 0
            //             loading.value = false
            //     }
            // })
        }
        function stChange(e) {//操作分类change事件
            // loading.value = true
            setType.value = e
            // setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value, opttype: setType.value, enddate: getDate(), startdate: getDate() }).then(res => {
            //     if (res.data != null) {
            //         logList.value = res.data
            //         logTotal.value = res.count
            //         loading.value = false
            //     } else {
            //         logList.value = []
            //             logTotal.value = 0
            //             loading.value = false
            //     }
            // })
        }
        function thingChange(e) {//事件类型change事件
            // loading.value = true
            thing.value = e
            // setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value, eventtype: thing.value, enddate: getDate(), startdate: getDate() }).then(res => {
            //     if (res.data != null) {
            //         logList.value = res.data
            //         logTotal.value = res.count
            //         loading.value = false
            //     } else {
            //         logList.value = []
            //             logTotal.value = 0
            //             loading.value = false
            //     }
            // })
        }
        function allSearch() {
            setlog.getAllLog({
                pageindex: pages.value,
                pageSize: sizes.value,
                eventtype: thing.value,
                opttype: setType.value,
                audittype: audiType.value,
                success: setAbout.value,
                enddate: getDate(),
                startdate: getDate()
            }).then(res => {
                if (res.data != null) {
                    logList.value = res.data
                    logTotal.value = res.count
                    loading.value = false
                } else {
                    logList.value = []
                    loading.value = false
                }
            })
        }
        onMounted(() => {
            getSelect()
            getList()
        })
        return {
            setAbout,//操作结果value
            setAboutList,
            audiType,//审计分类value
            audiTypeList,
            getSelect,//获取所有下拉框选项方法
            setType,//操作分类value
            setTypeList,
            thing,//事件类型value
            thingList,
            getList,//获取操作日志列表
            logList,//操作日志列表
            logTotal,//列表总数
            getBack,//分页组件传回的方法
            aboutChange,//操作结果change事件
            audiChange,//审计分类change事件
            stChange,//操作分类事件
            thingChange,//事件类型change事件
            pages,//页码
            sizes,//条数
            loading,
            getDate,//获取日期
            allSearch,//查询按钮
        }
    },
    components: {
        Pagination
    }
}
</script>

<style  scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 15px;
    margin-top: 10px;
}

.titleBox {
    width: 100%;
    height: 100%;
    text-align: center;
}

.settingBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.manyBox {
    margin-right: 5px;
}
</style>