审计列表

src/api/common.ts

@@ -0,0 +1,9 @@
+import createAxios from '@/utils/request'
+
+// 用户名列表
+export function saveLogParam() {
+    return createAxios({
+        url: '/system-boot/audit/saveLogParam',
+        method:'POST'
+    })
+}

src/components/datePicker/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-date-picker
+        v-bind='$attrs'
+        type='daterange'
+        unlink-panels
+        range-separator='至'
+        start-placeholder='开始日期'
+        end-placeholder='结束日期'
+        value-format='YYYY-MM-DD'
+        :shortcuts='shortcuts'
+    />
+</template>
+
+<script lang='ts' setup>
+import { ref } from 'vue'
+
+const shortcuts = [
+    {
+        text: '最近一周',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近一个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近3个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            return [start, end]
+        }
+    }
+]
+</script>
+
+<style scoped>
+.demo-date-picker {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px var(--el-border-color);
+    flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+    border-right: none;
+}
+
+.demo-date-picker .demonstration {
+    display: block;
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+</style>

src/components/table/header/index.vue

@@ -4,6 +4,9 @@
         <div class='table-com-search' v-if='showSelect'>
             <el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
                 <slot name='select'></slot>
+                <el-form-item label='日期' v-if='datePicker'>
+                    <DatePicker v-model='date' @change='dateChange'></DatePicker>
+                </el-form-item>
                 <el-form-item>
                     <el-button @click='onComSearch' type='primary'>查询</el-button>
                     <el-button @click='onResetForm'>重置</el-button>
@@ -28,17 +31,25 @@
 <script setup lang='ts'>
 import { inject, ref } from 'vue'
 import type TableStore from '@/utils/tableStore'
+import DatePicker from '@/components/datePicker/index.vue'
 
 const tableStore = inject('tableStore') as TableStore
+const date = ref([window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'), window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])
 
 interface Props {
     // 默认展开
     showSelect?: boolean
+    datePicker?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    showSelect: false
+    showSelect: true,
+    datePicker: false
 })
+if (props.datePicker) {
+    tableStore.table.params.searchBeginTime = date.value[0]
+    tableStore.table.params.searchEndTime = date.value[1]
+}
 const showSelect = ref(props.showSelect)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
@@ -49,6 +60,10 @@ const onComSearch = () => {
 const onResetForm = () => {
     tableStore.onTableAction('reset', {})
 }
+const dateChange = () => {
+    tableStore.table.params.searchBeginTime = date.value[0]
+    tableStore.table.params.searchEndTime = date.value[1]
+}
 </script>
 
 <style scoped lang='scss'>

src/components/table/index.vue

@@ -7,7 +7,7 @@
         :border="true"
         v-loading="tableStore.table.loading"
         stripe
-        @selection-change="onSelectionChange"
+        @checkbox-change="onSelectionChange"
         v-bind="$attrs"
         :column-config="{resizable: true}"
         :tree-config="{}"

src/layouts/admin/index.vue

@@ -78,7 +78,24 @@ const init = () => {
             url: '',
             component: '/src/views/dashboard/test.vue',
             keepalive: 'test',
-            extend: 'none'
+            extend: 'none',
+            children: [
+                {
+                    id: 1,
+                    pid: 3,
+                    type: 'menu',
+                    title: '审计列表',
+                    name: 'comptroller/list',
+                    path: 'comptroller/list',
+                    icon: 'el-icon-List',
+                    menu_type: 'tab',
+                    url: '',
+                    component: '/src/views/comptroller/list.vue',
+                    keepalive: 'auth/role',
+                    extend: 'none',
+                    children: []
+                },
+            ]
         },
         {
             id: 2,

src/main.ts

@@ -5,6 +5,7 @@ import pinia from '@/stores/index'
 import { registerIcons } from '@/utils/common'
 import mitt from 'mitt'
 import VXETable from 'vxe-table'
+import XEUtils from 'xe-utils'
 import 'vxe-table/lib/style.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -13,6 +14,7 @@ import 'element-plus/theme-chalk/display.css'
 import '@/styles/index.scss'
 import '@/assets/font/iconfont.css'
 
+window.XEUtils = XEUtils
 const app = createApp(App)
 
 app.use(router)

src/utils/request.ts

@@ -35,7 +35,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
 
     const Axios = axios.create({
         baseURL: getUrl(),
-        timeout: 1000 * 10,
+        timeout: 1000 * 60 * 5,
         headers: {},
         responseType: 'json'
     })

src/views/comptroller/list.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="default-main">
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <!-- <el-form-item label="用户名">
+                    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="操作类型">
+                    <el-input v-model="tableStore.table.params.loginName" placeholder="Please input" />
+                </el-form-item> -->
+            </template>
+            <template v-slot:operation>
+                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { saveLogParam } from '@/api/common'
+
+defineOptions({
+    name: 'comptroller/list'
+})
+const tableStore = new TableStore({
+    url: '/system-boot/audit/getAuditLog',
+    method: 'POST',
+    column: [
+        { title: '操作时间', field: 'time', align: 'center', width: 200 },
+        { title: '操作人员', field: 'userName', align: 'center', width: 120 },
+        { title: '操作类型', field: 'operate', align: 'center', width: 220 },
+        { title: '事件描述', field: 'describe', align: 'center', showOverflow: true,minWidth: 200 },
+        { title: '事件类型', field: 'type', align: 'center', width: 160 },
+        { title: '操作结果', field: 'type', align: 'center', width: 100 },
+        { title: '操作IP', field: 'ip', align: 'center', width: 160 },
+        { title: '事件等级', field: 'level', align: 'center', width: 100 }
+    ]
+})
+tableStore.table.params.loginName = ''
+tableStore.table.params.operateType = ''
+tableStore.table.params.type = ''
+tableStore.table.params.pageSize = 100
+provide('tableStore', tableStore)
+
+saveLogParam().then(res => {
+    console.log(res)
+})
+
+onMounted(() => {
+    tableStore.index()
+})
+
+const addMenu = () => {}
+</script>

types/global.d.ts

@@ -1,4 +1,5 @@
 interface Window {
+    XEUtils: Record<string, any>
     existLoading: boolean
     lazy: number
     unique: number