审计列表页提交

src/views/pqs/auditManage/auditList/index.vue

@@ -1,56 +1,111 @@
 <template>
     <div class="default-main">
-        <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
+        <div v-show="flg">
-            <template v-slot:select>
+            <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
-                <el-form :inline="true" :model="formData" label-width="90px" class="">
+                <template v-slot:select>
-                    <el-form-item label="用户名:">
+                    <el-form :inline="true" label-width="90px" class="">
-                        <el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
+                        <el-form-item label="用户名:">
-                            <el-option
+                            <el-select
-                                v-for="item in userName"
+                                v-model="tableStore.table.params.loginName"
-                                :key="item.id"
+                                placeholder="用户名"
-                                :label="item.loginName"
+                                clearable
-                                :value="item.loginName"
+                                filterable
-                            ></el-option>
+                            >
-                        </el-select>
+                                <el-option
-                    </el-form-item>
+                                    v-for="item in userName"
-                    <el-form-item label="事件类型:">
+                                    :key="item.id"
-                        <el-select v-model="formData.type" placeholder="事件类型" clearable>
+                                    :label="item.loginName"
-                            <el-option
+                                    :value="item.loginName"
-                                v-for="item in eventType"
+                                ></el-option>
-                                :key="item.id"
+                            </el-select>
-                                :label="item.label"
+                        </el-form-item>
-                                :value="item.id"
+                        <el-form-item label="事件类型:">
-                            ></el-option>
+                            <el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
-                        </el-select>
+                                <el-option
-                    </el-form-item>
+                                    v-for="item in eventType"
-                    <el-form-item label="操作类型:">
+                                    :key="item.id"
-                        <el-select v-model="formData.operateType" placeholder="操作类型" clearable>
+                                    :label="item.label"
-                            <el-option
+                                    :value="item.id"
-                                v-for="item in operationType"
+                                ></el-option>
-                                :key="item.value"
+                            </el-select>
-                                :label="item.value"
+                        </el-form-item>
-                                :value="item.value"
+                        <el-form-item label="操作类型:">
-                            ></el-option>
+                            <el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
-                        </el-select>
+                                <el-option
-                    </el-form-item>
+                                    v-for="item in operationType"
-                    <el-form-item label="操作结果:">
+                                    :key="item.value"
-                        <el-select v-model="formData.result" placeholder="操作结果" clearable>
+                                    :label="item.value"
-                            <el-option
+                                    :value="item.value"
-                                v-for="item in resultList"
+                                ></el-option>
-                                :key="item.id"
+                            </el-select>
-                                :label="item.label"
+                        </el-form-item>
-                                :value="item.id"
+                        <el-form-item label="操作结果:">
-                            ></el-option>
+                            <el-select v-model="tableStore.table.params.result" placeholder="操作结果" clearable>
-                        </el-select>
+                                <el-option
-                    </el-form-item>
+                                    v-for="item in resultList"
-                </el-form>
+                                    :key="item.id"
-            </template>
+                                    :label="item.label"
-            <template #operation>
+                                    :value="item.id"
-                <!-- <el-button type="primary" @click="backups">文件备份</el-button>
+                                ></el-option>
-                <el-button type="primary" @click="details">统计</el-button> -->
+                            </el-select>
-            </template>
+                        </el-form-item>
-        </TableHeader>
+                    </el-form>
-        <Table ref="tableRef" />
+                </template>
+                <template #operation>
+                    <el-button type="primary" @click="backups">文件备份</el-button>
+                    <el-button type="primary" @click="details">统计</el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" @sort-change="handleSortChange" />
+        </div>
+        <div v-if="!flg">
+            <Statistics @back="onSubmit" ref="statistics" />
+            <!-- <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
+                <template v-slot:select>
+                    <el-form :inline="true" label-width="90px" class="">
+                        <el-form-item label="用户名:">
+                            <el-select
+                                v-model="tableStore.table.params.loginName"
+                                placeholder="用户名"
+                                clearable
+                                filterable
+                            >
+                                <el-option
+                                    v-for="item in userName"
+                                    :key="item.id"
+                                    :label="item.loginName"
+                                    :value="item.loginName"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="事件类型:">
+                            <el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
+                                <el-option
+                                    v-for="item in eventType"
+                                    :key="item.id"
+                                    :label="item.label"
+                                    :value="item.id"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="操作类型:">
+                            <el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
+                                <el-option
+                                    v-for="item in operationType"
+                                    :key="item.value"
+                                    :label="item.value"
+                                    :value="item.value"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </template>
+                <template #operation>
+                    <el-button type="primary" @click="back">返回</el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef_1" /> -->
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -66,8 +121,9 @@ import {
     recoverLogFile,
     getMemoInfo,
     getSysConfig
-} from '/@/api/auditManage/auditList'
+} from '@/api/auditManage/auditList'
-// import { ElMessage } from 'element-ui'
+import { ElMessage } from 'element-plus'
+import Statistics from './statistics.vue'
 
 defineOptions({
     name: 'admin/BusinessAdministrator/Audit/Operations/Management'
@@ -80,51 +136,20 @@ interface UserInfo {
 
 const userName = ref<UserInfo[]>([])
 const TableHeaderRef = ref()
-// 响应式数据定义
-const formData = reactive({
-    loginName: '', //用户名
-    type: '', //事件类型
-    operateType: '', //操作类型
-    result: null,
-    searchBeginTime: '', //开始
-    searchEndTime: '', //结束
-    sortBy: '',
-    sortName: '',
-    orderBy: '',
-    pageNum: 1,
-    pageSize: 100
-})
-
-const formLine = reactive({
-    loginName: '', //用户名
-    type: '', //事件类型
-    operateType: '', //操作类型
-    searchBeginTime: '', //开始
-    searchEndTime: '', //结束
-    sortBy: '',
-    sortName: '',
-    orderBy: '',
-    pageNum: 1,
-    pageSize: 20
-})
 
 // 其他响应式数据
 const loading = ref(false)
-const loading1 = ref(false)
+const statistics = ref()
-const view = ref(false)
+
-const view1 = ref(false)
 const flg = ref(true)
 const showMqtt = ref(false)
 const zoom = ref('') //图表焦点校验
-const vh = ref(undefined)
+
-const item = ref(['', ''])
-const item1 = ref(['', ''])
 const resultList = ref([
     { id: 1, label: '成功' },
     { id: 0, label: '失败' }
 ])
-const datamock = ref([])
+
-const statisticsData = ref([])
 const eventType = ref([
     {
         id: 0,
@@ -146,35 +171,113 @@ const operationType = ref([
     { id: 8, value: '下载' },
     { id: 9, value: '越权访问' }
 ]) //操作类型
-const timeFlag = ref('')
+
-const total = ref(undefined)
 const statisticsTotal = ref(undefined)
 
 const tableStore: any = new TableStore({
     url: '/system-boot/audit/getAuditLog',
     method: 'POST',
     column: [
-        { field: 'userName', title: '登录用户' },
+        { field: 'time', title: '操作时间', sortable: true },
-        { field: 'ip', title: '登录ip' },
+        { field: 'userName', title: '操作人员' },
-        { field: 'time', title: '登录时间' }
+        { field: 'operate', title: '操作类型', sortable: true },
+        { field: 'describe', title: '事件描述' },
+        { field: 'type', title: '事件类型', sortable: true },
+        { field: 'result', title: '操作结果', sortable: true },
+        { field: 'ip', title: '操作IP' },
+        { field: 'level', title: '事件等级', sortable: true }
     ]
 })
 
 tableStore.table.params.loginName = ''
 tableStore.table.params.type = ''
 tableStore.table.params.operateType = ''
-tableStore.table.params.result = ''
+tableStore.table.params.result = null
+tableStore.table.params.sortBy = ''
+tableStore.table.params.sortName = ''
+tableStore.table.params.orderBy = ''
+tableStore.table.params.pageSize = 100
 
 provide('tableStore', tableStore)
+
 onMounted(() => {
-    tableStore.index()
+    // tableStore.index()
     search()
+    onSubmit()
 })
 
+// 排序
+const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
+    tableStore.table.params.sortName = column?.title
+    tableStore.table.params.sortBy =
+        column?.property == 'operate' ? 'operate_type' : column?.property == 'time' ? 'create_time' : column?.property
+    tableStore.table.params.orderBy = order
+    tableStore.table.params.pageNum = 1
+
+    // tableStore.index()
+    onSubmit()
+}
+
 //下拉框查询
 const search = () => {
     getAllUserList().then(res => {
         userName.value = res.data
     })
 }
+// 统计
+const details = () => {
+    flg.value = false
+    nextTick(() => {
+        statistics.value.tableStore.index()
+    })
+}
+
+// 查询
+const onSubmit = async () => {
+    flg.value = true
+    await tableStore.index()
+    getLogSize()
+}
+
+// 查询日志大小
+const getLogSize = () => {
+    getMemoInfo({}).then(res => {
+        getSysConfig().then(re => {
+            if (res.data > re.data.logSize) {
+                ElMessage({
+                    showClose: true,
+                    duration: 0,
+                    message: '日志表存储空间已超过' + re.data.logSize + '(M)请及时备份清理!',
+                    type: 'warning'
+                })
+            }
+        })
+    })
+}
+
+// 备份
+const backups = () => {
+    loading.value = true
+    logFileWriter({}).then(res => {})
+    setTimeout(() => {
+        ElMessage({
+            type: 'success',
+            message: '文件备份成功'
+        })
+        loading.value = false
+    }, 50000)
+}
+
+// 恢复
+const restore = () => {
+    loading.value = true
+    recoverLogFile({}).then(res => {})
+    setTimeout(() => {
+        ElMessage({
+            type: 'success',
+            message: '文件恢复成功'
+        })
+        loading.value = false
+    }, 50000)
+}
 </script>

src/views/pqs/auditManage/auditList/statistics.vue

@@ -0,0 +1,135 @@
+<template>
+    <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
+        <template v-slot:select>
+            <el-form :inline="true" label-width="90px" class="">
+                <el-form-item label="用户名:">
+                    <el-select v-model="tableStore.table.params.loginName" placeholder="用户名" clearable filterable>
+                        <el-option
+                            v-for="item in userName"
+                            :key="item.id"
+                            :label="item.loginName"
+                            :value="item.loginName"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="事件类型:">
+                    <el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
+                        <el-option
+                            v-for="item in eventType"
+                            :key="item.id"
+                            :label="item.label"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="操作类型:">
+                    <el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
+                        <el-option
+                            v-for="item in operationType"
+                            :key="item.value"
+                            :label="item.value"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </template>
+        <template #operation>
+            <el-button type="primary" @click="back">返回</el-button>
+        </template>
+    </TableHeader>
+    <Table ref="tableRef_1" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import {
+    getAllUserList,
+} from '@/api/auditManage/auditList'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+    name: 'admin/BusinessAdministrator/Audit/Operations/Management'
+})
+
+interface UserInfo {
+    id: number | string
+    loginName: string
+}
+
+const emit = defineEmits(['back'])
+
+const userName = ref<UserInfo[]>([])
+const TableHeaderRef = ref()
+
+// 其他响应式数据
+const loading1 = ref(false)
+
+const flg = ref(true)
+const showMqtt = ref(false)
+const zoom = ref('') //图表焦点校验
+
+const eventType = ref([
+    {
+        id: 0,
+        label: '业务事件类型'
+    },
+    {
+        id: 1,
+        label: '系统事件类型'
+    }
+]) //事件类型
+const operationType = ref([
+    { id: 1, value: '查询' },
+    { id: 2, value: '新增' },
+    { id: 3, value: '更新' },
+    { id: 4, value: '删除' },
+    { id: 5, value: '认证' },
+    { id: 6, value: '注销' },
+    { id: 7, value: '上传' },
+    { id: 8, value: '下载' },
+    { id: 9, value: '越权访问' }
+]) //操作类型
+
+const tableStore: any = new TableStore({
+    url: '/system-boot/audit/censusAuditLog',
+    method: 'POST',
+    column: [
+        // 根据实际统计表格的列来定义
+        { field: 'loginName', title: '操作人员' },
+        { field: 'operateType', title: '事件类型' },
+        { field: 'count', title: '事件总数' }
+    ]
+})
+
+tableStore.table.params.loginName = ''
+tableStore.table.params.type = ''
+tableStore.table.params.operateType = ''
+tableStore.table.params.result = null
+tableStore.table.params.sortBy = ''
+tableStore.table.params.sortName = ''
+tableStore.table.params.orderBy = ''
+tableStore.table.params.pageSize = 100
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    search()
+    tableStore.index()
+})
+
+//下拉框查询
+const search = () => {
+    getAllUserList().then(res => {
+        userName.value = res.data
+    })
+}
+//返回
+const back = () => {
+    flg.value = true
+    // 触发父组件的 onSubmit 方法
+    emit('back')
+}
+</script>

types/table.d.ts

@@ -82,7 +82,8 @@ declare global {
             column: VxeColumnProps,
             index: number
         ) => string
-        children?: TableColumn[]
+        children?: TableColumn[],
+        property?:string
     }
 
     /* 表格右侧操作按钮 */