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

<template>
    <div class="p-4">
        <div class="operate-header">
            <div class="operate-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="operate-body">
            <BasicTable @register="registerTable">
                <template #STATE="{ record }">
                    <span>{{ record.SFCG ? '成功' : '失败' }}</span>
                </template>
                <template #action="{ record }">
                    <TableAction :actions="[
                        {
                            label: '详情',
                            tooltip: '详情',
                            icon: 'ant-design:form-outlined',
                            onClick: openDialog.bind(null, record),
                        },
                    ]" />
                </template>
            </BasicTable>
        </div>
        <OperateDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" :formData="formData"
            :drawerTitle="drawerTitle">
        </OperateDrawer>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import OperateDrawer from './OperateDrawer.vue';
import { getSelectList } from '/@/api/sys/log';
import { FormOutlined, RedoOutlined } from '@ant-design/icons-vue';
import moment from 'moment';

export default defineComponent({
    name: 'operate',
    components: { OperateDrawer, FormOutlined, RedoOutlined, BasicTable, TableAction },
    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 = () => {
            return new Promise((resolve, reject) => {
                // 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
                }
                getSelectList(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
                            })
                        })
                        selectOpt.value.length && (searchForm.opt = selectOpt.value[0].value)
                        resolve(resData)
                    }else{
                        reject()
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'USERNAME',
                key: 'USERNAME'
            },
            {
                title: '用户ID',
                align: 'center',
                dataIndex: 'USERID',
                key: 'USERID'
            },
            {
                title: '操作类型',
                align: 'center',
                dataIndex: 'OPT',
                key: 'OPT'
            },
            {
                title: '操作说明',
                align: 'center',
                dataIndex: 'CZSM',
                key: 'CZSM'
            },
            {
                title: '操作状态',
                align: 'center',
                dataIndex: 'SFCG',
                slots: {
                    customRender: 'STATE',
                }
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'CJRQ',
                key: 'CJRQ'
            }
        ]
        //重置表格
        const resetForm = () => {
            selectOpt.value.length && (searchForm.opt = selectOpt.value[0].value)
            searchForm.searchDate = [moment().subtract(30, 'days'), moment()]
        }
        //表格查询功能
        const searchTable = () => {
            reload();
        }
        //打开详情弹窗
        const openDialog = (record) => {
            data.formData = { ...record }
            data.drawerTitle = '日志记录详情'
            data.ifShowDialog = true
        }
        const [registerTable, { reload }] = useTable({
            title: '操作日志列表',
            api: getLoginData,		 //数据
            columns: columns,        //表头配置
            bordered: true,
            useSearchForm: false,     //开启搜索区域
            // formConfig: formConfig,  //搜索字段配置
            actionColumn: {
                width: 120,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            },
            // rowSelection: { type: 'radio' },
            pagination: { 
                // pageSize: 10,
                hideOnSinglePage: false 
            },
            showTableSetting: true,  // 显示表格设置
            tableSetting: { fullScreen: false },
            showIndexColumn: true,
            indexColumnProps: { fixed: 'left' },
        });
        return {
            columns,
            selectOpt,
            ...toRefs(data),
            ...toRefs(searchForm),
            // func
            registerTable,
            reload,
            getLoginData,
            resetForm,
            searchTable,
            openDialog
        };
    },
});
</script>

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

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

        .operate-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;
            }
        }
    }

    .operate-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>