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" style="width: 100%;" placeholder="请选择">
                    </a-select>
                </div>
                <span class="label-item">功能模块：</span>
                <div class="select-item">
                    <a-select v-model:value="fun" :options="selectFun" style="width: 100%;" placeholder="请选择">
                    </a-select>
                </div>
                <span class="label-item">操作IP：</span>
                <div class="select-item">
                    <a-input v-model:value="ip" placeholder="请输入IP" />
                </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>
            </div>
            <div class="handle-btns">
                <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" class="basic-table">
                <!-- <template #STATE="{ record }">
                    <span>{{ record.SFCG ? '成功' : '失败' }}</span>
                </template> -->
                <template #STATE="{ record }">
                    <div class="sf" style="display: flex;align-items: center;justify-content: center;">
                        <div v-if="!record.SFCG"
                            style="width: 8px;height: 8px;border-radius: 50%;background-color: #f8252c;"></div>
                        <div v-if="record.SFCG"
                            style="width: 8px;height: 8px;border-radius: 50%;background-color: #05b069;"></div>
                        <div style="margin-left: 10px;">{{ record.SFCG ? '成功' : '失败' }}</div>
                    </div>
                </template>
                <template #action="{ record }">
                    <TableAction :actions="[
                        {
                            label: '查看',
                            tooltip: '查看',
                            // icon: 'ant-design:form-outlined',
                            onClick: openDialog.bind(null, record),
                        },
                    ]" />
                </template>
            </BasicTable>
        </div>
        <a-modal v-model:visible="ifShowDialog" centered title="日志详情" width="800px" :maskClosable="false" :footer="null">
            <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
                <a-form ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <!-- 名称 -->
                    <!-- <a-form-item label="记录id" name="ID">
                        <a-input v-model:value="formData.ID" style="width: 100%" placeholder="" disabled />
                    </a-form-item> -->
                    <!-- 编码 -->
                    <a-form-item label="用户名称" name="USERNAME">
                        <a-input v-model:value="formData.USERNAME" style="width: 100%" placeholder="" />
                    </a-form-item>
                    <a-form-item label="操作模块" name="FUN">
                        <a-input v-model:value="formData.FUN" style="width: 100%" placeholder=""  />
                    </a-form-item>
                    <a-form-item label="操作IP" name="IP">
                        <a-input v-model:value="formData.IP" style="width: 100%" placeholder=""  />
                    </a-form-item>
                    <!-- 排序 -->
                    <!-- <a-form-item label="用户id" name="USERID">
                        <a-input v-model:value="formData.USERID" style="width: 100%" placeholder="" disabled />
                    </a-form-item> -->
                    <!-- 排序 -->
                    <a-form-item label="操作类型" name="OPT">
                        <a-input v-model:value="formData.OPT" style="width: 100%" placeholder=""  />
                    </a-form-item>
                    <!-- 排序 -->
                    <!-- <a-form-item label="操作说明" name="CZSM">
                        <a-input v-model:value="formData.CZSM" style="width: 100%" placeholder="" disabled />
                    </a-form-item> -->
                    <!-- 排序 -->
                    <a-form-item label="是否成功" name="SFCG">
                        <a-input v-model:value="formData.SFCG" style="width: 100%" placeholder=""  />
                    </a-form-item>
                    <!-- 排序 -->
                    <a-form-item label="创建时间" name="CJRQ">
                        <a-input v-model:value="formData.CJRQ" style="width: 100%" placeholder=""  />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </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: "",
                FUN:"",
                IP:"",
                USERID: "",
                OPT: "",
                CZSM: "",
                SFCG: 0,
                CJRQ: "",
            },
            drawerTitle: "日志记录详情",
            ifShowDialog: false
        });
        const selectOpt = ref([
            {
                label:'新增',
                value:'add'
            },
            {
                label:'删除',
                value:'del'
            },
            {
                label:'修改',
                value:'edit'
            },
            {
                label:'申请',
                value:'req'
            },
            {
                label:'授权',
                value:'auth'
            },
        ])
        const selectFun = ref([
            {
                label:'目录管理',
                value:'dir'
            },
            {
                label:'版本管理',
                value:'version'
            },
            {
                label:'地图上传',
                value:'map'
            },
            {
                label:'场景上传',
                value:'scene'
            },
            {
                label:'文件上传',
                value:'file'
            },
        ])
        const searchForm = reactive({
            opt: "add",//查询类型
            fun:"dir",//功能模块
            ip:"",//ip地址
            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 dataSource = [
            {
                USERNAME:'系统管理员',
                FUN:'数据管理/目录管理',
                OPT:'新增',
                CZSM:'新增目录管理',
                IP:'192.168.1.1',
                CJRQ:'2023-09-21 10:10:00',
                SFCG:1
            },
            {
                USERNAME:'系统管理员',
                FUN:'数据管理/地图资源上传',
                OPT:'删除',
                CZSM:'删除地图资源',
                IP:'192.168.1.1',
                CJRQ:'2023-09-21 10:10:00',
                SFCG:0
            },
            {
                USERNAME:'系统管理员',
                FUN:'版本管理',
                OPT:'新增',
                CZSM:'新增版本',
                IP:'192.168.1.1',
                CJRQ:'2023-09-21 10:10:00',
                SFCG:0
            },
        ]
        //表格列
        const columns = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'USERNAME',
                key: 'USERNAME'
            },
            // {
            //     title: '用户ID',
            //     align: 'center',
            //     dataIndex: 'USERID',
            //     key: 'USERID'
            // },
            {
                title: '功能模块',
                align: 'center',
                dataIndex: 'FUN',
                key: 'FUN'
            },
            {
                title: '操作类型',
                align: 'center',
                dataIndex: 'OPT',
                key: 'OPT'
            },
            {
                title: '操作IP',
                align: 'center',
                dataIndex: 'IP',
                key: 'IP'
            },
            {
                title: '操作说明',
                align: 'center',
                dataIndex: 'CZSM',
                key: 'CZSM'
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'CJRQ',
                key: 'CJRQ'
            },
            {
                title: '操作状态',
                align: 'center',
                dataIndex: 'SFCG',
                slots: {
                    customRender: 'STATE',
                }
            },
        ]
        //重置表格
        const resetForm = () => {
            // selectOpt.value.length && (searchForm.opt = selectOpt.value[0].value)
            searchForm.opt = 'add';
            searchForm.fun = 'dir';
            searchForm.ip = '';
            searchForm.searchDate = [moment().subtract(30, 'days'), moment()];
        }
        //表格查询功能
        const searchTable = () => {
            reload();
        }
        //打开详情弹窗
        const openDialog = (record) => {
            data.formData = { ...record }
            data.formData.SFCG = data.formData.SFCG?'成功':'失败'
            data.drawerTitle = '日志记录详情'
            data.ifShowDialog = true
        }
        const [registerTable, { reload }] = useTable({
            title: '操作日志列表',
            // api: getLoginData,		 //数据
            dataSource:dataSource,
            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
            },
            canResize: false,
            showTableSetting: true,  // 显示表格设置
            showIndexColumn: true,
            indexColumnProps: { fixed: 'left' },
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
        });
        return {
            columns,
            selectOpt,
            selectFun,
            ...toRefs(data),
            ...toRefs(searchForm),
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            // 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;
            &:first-child{
                margin-left: 10px;
            }

            .label-item {
                // width: 80px;
            }

            .select-item {
                width: 200px;
                margin-right: 20px;
            }

            .input-item {
                width: 350px;
            }

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

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

            ::v-deep .ant-table-title {
                padding: 0 !important;

                .vben-basic-title {
                    font-family: '阿里巴巴普惠体 2.0';
                    font-size: 16px;
                    font-weight: bold;
                    color: #333333;
                }

            }
        }

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