hlt_gis_admin/src/views/systemAdmin/system/log/user/index.vue

<template>
    <div class="p-4">
        <div class="userLogin-header">
            <div class="userLogin-title">登录日志</div>
            <div class="handle-btns">
                <span class="label-item">操作类型：</span>
                <div class="select-item">
                    <a-select v-model:value="opt" :options="selectOpt">
                    </a-select>
                </div>
                <span class="label-item">查询时间：</span>
                <div class="input-item">
                    <a-range-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '结束时间']" v-model:value="searchDate" />
                </div>
                <a-button class="btn" @click="resetForm">重置</a-button>
                <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
            </div>
        </div>
        <div class="userLogin-body">
            <div class="body-header">
                <div class="item-title">登录登出日志列表</div>
                <div class="table-btns">
                    <a-button class="btn" type="primary" @click="getLoginData" title="刷新">
                        <RedoOutlined />
                    </a-button>
                </div>
            </div>
            <div class="body-content">
                <a-table :columns="columns" :data-source="tableData" :bordered="true">
                    <template #STATE="{ record }">
                        <span>{{ record.SFCG ? '成功' : '失败' }}</span>
                    </template>
                    <template #operation="{ record }">
                        <a-tooltip title="详情" color="#2db7f5">
                            <a @click="openDialog(record)">
                                <FormOutlined /> 详情
                            </a>
                        </a-tooltip>
                    </template>
                </a-table>
            </div>
        </div>
        <LoginDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formData"
            :drawerTitle="drawerTitle">
        </LoginDrawer>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
import LoginDrawer from './LoginDrawer.vue';
import { getLoginList } from '/@/api/sys/log';
import { FormOutlined, RedoOutlined } from '@ant-design/icons-vue';
import moment from 'moment';

export default defineComponent({
    name: 'userLogin',
    components: { LoginDrawer, FormOutlined, RedoOutlined },
    setup() {
        onMounted(() => {
            getLoginData();
        });
        const data = reactive({
            tableData: [],//表格数据
            formData: {
                ID: "",
                USERNAME: "",
                USERID: "",
                OPT: "",
                CZSM: "",
                SFCG: 0,
                CJRQ: "",
            },
            drawerTitle: "日志记录详情",
            ifShowDialog: false
        });
        const selectOpt = ref([])
        const searchForm = reactive({
            opt: "",//查询类型
            searchDate: [moment().subtract(30, 'days'), moment()],//查询时间
        })
        //获取所有日志
        const getLoginData = () => {
            data.tableData = []
            selectOpt.value = []
            let param = {
                page: 1,
                rows: 10000000,
                startCreateTimeStr: searchForm.searchDate[0].format('YYYY-MM-DD HH:mm:ss'),
                endCreateTimeStr: searchForm.searchDate[1].format('YYYY-MM-DD HH:mm:ss'),
                keyStr: searchForm.opt
            }
            getLoginList(param).then(res => {
                if (res.resp_msg === "获取成功!") {
                    let resData = res.datas.records
                    let optArr = []
                    resData.forEach((item, index) => {
                        optArr.push(item.OPT)
                        data.tableData.push({
                            key: item.ID,
                            ...item
                        })
                    })
                    let set1 = new Set(optArr)
                    let newArr = [...set1]
                    newArr.forEach(item => {
                        selectOpt.value.push({
                            value: item,
                            label: item
                        })
                    })
                    searchForm.opt = selectOpt.value[0].value
                }
            })
        }
        //表格列
        const columns = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'USERNAME',
                key: 'USERNAME',
                width: "200px"
            },
            {
                title: '用户ID',
                align: 'center',
                dataIndex: 'USERID',
                key: 'USERID',
                width: "400px"
            },
            {
                title: '操作类型',
                align: 'center',
                dataIndex: 'OPT',
                key: 'OPT',
                width: "150px"
            },
            {
                title: '操作说明',
                align: 'center',
                dataIndex: 'CZSM',
                key: 'CZSM',
                width: "320px"
            },
            {
                title: '操作状态',
                align: 'center',
                dataIndex: 'SFCG',
                slots: {
                    customRender: 'STATE',
                },
                width: "100px"
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'CJRQ',
                key: 'CJRQ',
                width: "230px"
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: 'operation',
                slots: {
                    customRender: 'operation',
                }
            },
        ]
        //重置表格
        const resetForm = () => {
            searchForm.opt = selectOpt.value[0].value
            searchForm.searchDate = [moment().subtract(30, 'days'), moment()]
        }
        //表格查询功能
        const searchTable = () => {
            getLoginData();
        }
        //打开详情弹窗
        const openDialog = (record) => {
            data.formData = { ...record }
            data.drawerTitle = '日志记录详情'
            data.ifShowDialog = true
        }
        return {
            columns,
            selectOpt,
            ...toRefs(data),
            ...toRefs(searchForm),
            // func
            getLoginData,
            resetForm,
            searchTable,
            openDialog
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

    .userLogin-header {
        padding: 10px;
        width: 100%;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .userLogin-title {
            font-size: 16px;
            font-weight: 500;
            margin-left: 20px;
            user-select: none;
        }

        .handle-btns {
            margin-right: 20px;
            display: flex;
            align-items: center;

            .label-item {
                width: 80px;
            }

            .select-item {
                width: 130px;
            }

            .input-item {
                width: 350px;
            }

            .btn {
                margin-left: 10px;
            }
        }
    }

    .userLogin-body {
        padding: 0 30px;
        margin-top: 20px;
        width: 100%;
        // height: 800px;
        height: calc(100% - 90px);
        background-color: #fff;

        .body-header {
            display: flex;
            height: 80px;
            width: 100%;
            justify-content: space-between;
            align-items: center;

            .item-title {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                user-select: none;
            }

            .table-btns {
                .btn {
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .body-content {
            padding-bottom: 20px;
            height: calc(100% - 80px);

            a {
                margin-right: 10px;
            }
        }
    }
}
</style>