日志管理

frontend/src/views/log/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class='table-box'>
+    <ProTable
+      ref='proTable'
+      :columns='columns'
+      :data='logData'
+      @selection-change="handleSelectionChange" 
+      type="selection"
+    >
+     <!-- 表格 header 按钮 -->
+     <template #tableHeader>
+          <el-button type='primary' :icon='Upload'>导出csv</el-button>
+        </template>
+    </ProTable>
+  </div>
+
+</template>
+<script setup lang='tsx' name='useProTable'>
+import TimeControl from '@/components/TimeControl/index.vue'; // 根据实际路径调整
+import { defineComponent,ref ,reactive} from 'vue'
+import {type Log } from '@/api/log/interface'
+import ProTable from '@/components/ProTable/index.vue'
+import {Upload} from '@element-plus/icons-vue'
+import logDataList from '@/api/log/logData'
+import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
+let multipleSelection = ref<string[]>([]);
+const logData = logDataList
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+// 表格配置项
+const columns = reactive<ColumnProps<Log.LogList>[]>([
+  { type: 'selection', fixed: 'left', width: 50 },
+  {
+    prop: 'content',
+    label: '内容',
+    width: 600,
+  },
+  {
+    prop: 'record_Time',
+    label: '记录时间',
+    width: 180,
+    search: {
+      // 自定义 search 显示内容
+      render: ({ searchParam }) => {
+        return (
+          <div class='flx-center'>
+            <TimeControl/>
+          </div>
+        )
+      },
+    },
+  },
+  {
+    prop: 'user',
+    label: '操作用户',
+    search: { el: 'select', props: { filterable: true } },
+  },
+  
+  {
+    prop: 'type',
+    label: '日志类型',
+    search: { el: 'select', props: { filterable: true } },
+  },
+  {
+    prop: 'level',
+    label: '日志等级',
+    search: { el: 'select', props: { filterable: true } },
+  },
+])
+
+//选中
+// 处理选择变化
+const handleSelectionChange = (selection:Log.LogList[]) => {
+  multipleSelection.value = selection.map(row => row.id); // 更新选中的行
+  
+};
+</script>
+
+<style scoped>
+
+</style>