日志导出csv、报告模板编辑框样式调整

frontend/src/views/log/index.vue

@@ -1,16 +1,14 @@
 <template>
   <div class='table-box'>
     <ProTable
-      ref='proTable'
-      :columns='columns'
-      :request-api='getTableList'
-      @selection-change='handleSelectionChange'
-      type='selection'
+        ref='proTable'
+        :columns='columns'
+        :request-api='getTableList'
     >
       <!-- 表格 header 按钮 -->
       <template #tableHeader>
-        <el-button type='primary' :icon='DataAnalysis' >分析</el-button>
-        <el-button type='primary' :icon='Upload'>导出csv</el-button>
+        <el-button type='primary' :icon='DataAnalysis'>分析</el-button>
+        <el-button type='primary' :icon='Upload' @click='handleExport'>导出csv</el-button>
       </template>
     </ProTable>
 
@@ -21,14 +19,14 @@
 <script setup lang='tsx' name='useProTable'>
 // 根据实际路径调整
 import TimeControl from '@/components/TimeControl/index.vue'
-import { type  AuditLog} from '@/api/system/log/interface/log.ts'
+import {type  AuditLog} from '@/api/system/log/interface/log.ts'
 import ProTable from '@/components/ProTable/index.vue'
-import { Upload ,DataAnalysis} from '@element-plus/icons-vue'
-import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
-import { reactive,ref,watch } from 'vue'
-import {
-  getAuditLog,
-} from '@/api/system/log/index.ts'
+import {DataAnalysis, Upload} from '@element-plus/icons-vue'
+import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
+import {reactive, ref} from 'vue'
+import {getAuditLog, exportCsv} from '@/api/system/log/index.ts'
+import {useDownload} from "@/hooks/useDownload";
+import {exportPqDev} from "@/api/device/device";
 
 
 // defineOptions({
@@ -50,12 +48,12 @@ const getTableList = async (params: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {type: 'selection', fixed: 'left', width: 70},
+  {type: 'index', fixed: 'left', width: 70, label: '序号'},
   {
     prop: 'userName',
     label: '操作用户',
-    search: { el: 'input' },
+    search: {el: 'input'},
     minWidth: 100,
   },
   {
@@ -85,7 +83,7 @@ const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
     label: '事件描述',
     minWidth: 450,
     render: (scope) => {
-      return (scope.row.userName + '在' + scope.row.logTime + '执行了' + scope.row.operateType +scope.row.operate + '操作，结果为' + scope.row.result + '。')
+      return (scope.row.userName + '在' + scope.row.logTime + '执行了' + scope.row.operateType + scope.row.operate + '操作，结果为' + scope.row.result + '。')
     }
   },
   {
@@ -96,12 +94,12 @@ const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
   {
     prop: 'warn',
     label: '告警标志',
-      minWidth: 100,
-      render: scope => {
-        return (
-           <el-tag type={scope.row.warn==1 ? 'danger' : 'success'}>{scope.row.warn==1 ? '已告警' : '未告警'}</el-tag>
-        )
-      },
+    minWidth: 100,
+    render: scope => {
+      return (
+          <el-tag type={scope.row.warn == 1 ? 'danger' : 'success'}>{scope.row.warn == 1 ? '已告警' : '未告警'}</el-tag>
+      )
+    },
   },
   {
     prop: 'operateType',
@@ -110,13 +108,22 @@ const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
   },
 ])
 
-  // 处理日期变化的回调函数
+// 处理日期变化的回调函数
 const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
   startDate.value = startDateTemp
   endDate.value = endDateTemp
 }
 
+const handleExport = () => {
+  // 获取当前的搜索参数
+  let searchParam = proTable.value?.searchParam || {}
 
+  // 将开始时间和结束时间添加到搜索参数中
+  searchParam.searchBeginTime = startDate.value
+  searchParam.searchEndTime = endDate.value
+
+  useDownload(exportCsv, '日志列表', searchParam, false, '.csv')
+}
 
 </script>