ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
caozehui
2025-04-15 09:45:00 +08:00
parent 4a80a88e6e
commit c9e41e0c82
5 changed files with 258 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/api/system/log/index.ts
View File

@@ -9,3 +9,8 @@ import http from '@/api'
export const getAuditLog = (params: AuditLog.ReqAuditLogParams) => {
return http.post(`/sysLog/list`, params)
}
export const exportCsv = (params: AuditLog.ReqAuditLogParams) => {
return http.download(`/sysLog/exportCSV`, params)
}

2
frontend/src/styles/element.scss
View File

@@ -445,7 +445,7 @@
.dialog-small {
.el-dialog__body {
max-height: 340px;
max-height: 350px;
}
}

41
frontend/src/views/log/index.vue
View File

@@ -4,13 +4,11 @@
ref='proTable'
:columns='columns'
:request-api='getTableList'
@selection-change='handleSelectionChange'
type='selection'
>
<!-- 表格 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 + '。')
}
},
{
@@ -99,7 +97,7 @@ const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
minWidth: 100,
render: scope => {
return (
<el-tag type={scope.row.warn==1 ? 'danger' : 'success'}>{scope.row.warn==1 ? '已告警' : '未告警'}</el-tag>
<el-tag type={scope.row.warn == 1 ? 'danger' : 'success'}>{scope.row.warn == 1 ? '已告警' : '未告警'}</el-tag>
)
},
},
@@ -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>

75
frontend/src/views/system/template/components/reportPopup.vue
View File

@@ -1,11 +1,12 @@
<template>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogSmall">
<el-form ref="dialogFormRef" :model="formContent" :rules="rules" style="height: 330px; overflow: hidden;" >
<div>
<el-form ref="dialogFormRef" :model="formContent" :rules="rules">
<el-form-item label="名称" prop="name">
<el-input v-model="formContent.name" placeholder="请输入报告名称" />
<el-input v-model="formContent.name" placeholder="请输入报告名称"/>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="formContent.version" placeholder="请输入版本号" />
<el-input v-model="formContent.version" placeholder="请输入版本号"/>
</el-form-item>
<el-form-item label="基础模板文件" prop="baseFile">
<el-upload
@@ -42,9 +43,10 @@
仅支持上传大小不超过5MB的.docx文件
</el-form-item>
<el-form-item label="描述信息" prop="description">
<el-input v-model="formContent.description" type="textarea" placeholder="请输入描述信息" />
<el-input v-model="formContent.description" type="textarea" placeholder="请输入描述信息"/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div>
<el-button @click="close()">取 消</el-button>
@@ -55,11 +57,11 @@
</template>
<script setup lang="ts">
import { dialogSmall } from '@/utils/elementBind'
import { type PqReport } from '@/api/device/interface/report'
import { ElMessage, UploadFile } from 'element-plus'
import { updatePqReport, addPqReport, getPqReportById } from '@/api/device/report'
import { computed, reactive, ref } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
import {type PqReport} from '@/api/device/interface/report'
import {ElMessage, UploadFile} from 'element-plus'
import {addPqReport, getPqReportById, updatePqReport} from '@/api/device/report'
import {computed, reactive, ref} from 'vue'
// 定义弹出组件元信息
const dialogFormRef = ref()
@@ -72,14 +74,14 @@ const detailFileUrl = ref('')
const baseFileList = computed(() => {
if (baseFileName.value && baseFileUrl.value) {
return [{ name: baseFileName.value, url: baseFileUrl.value }];
return [{name: baseFileName.value, url: baseFileUrl.value}];
}
return [];
});
const detailFileList = computed(() => {
if (detailFileName.value && detailFileUrl.value) {
return [{ name: detailFileName.value, url: detailFileUrl.value }];
return [{name: detailFileName.value, url: detailFileUrl.value}];
}
return [];
});
@@ -92,14 +94,14 @@ function useMetaInfo() {
name: '',
version: '', // 版本号
description: '', // 描述信息
detailFile:'',//检测项模版文件路径
baseFile:'',
detailFile: '',//检测项模版文件路径
baseFile: '',
state: 1,
})
return { dialogVisible, titleType, formContent }
return {dialogVisible, titleType, formContent}
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
const {dialogVisible, titleType, formContent} = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
@@ -108,8 +110,8 @@ const resetFormContent = () => {
name: '',
version: '', // 版本号
description: '', // 描述信息
detailFile:'',//检测项模版文件路径
baseFile:'',
detailFile: '',//检测项模版文件路径
baseFile: '',
state: 1,
}
@@ -129,10 +131,10 @@ const close = () => {
// 表单验证规则
const rules = reactive({
name: [{ required: true, message: '请输入报告名称', trigger: 'blur' }],
version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
baseFile: [{ required: true, message: '请上传基础模板文件', trigger: 'change' }],
detailFile: [{ required: true, message: '请上传检测项模版文件', trigger: 'change' }],
name: [{required: true, message: '请输入报告名称', trigger: 'blur'}],
version: [{required: true, message: '请输入版本号', trigger: 'blur'}],
baseFile: [{required: true, message: '请上传基础模板文件', trigger: 'change'}],
detailFile: [{required: true, message: '请上传检测项模版文件', trigger: 'change'}],
})
// 保存数据
@@ -149,8 +151,8 @@ const save = () => {
excelFormData.append('name', formContent.value.name)
excelFormData.append('version', formContent.value.version)
excelFormData.append('description', formContent.value.description)
let baseFileFlag=handleFileLimit(excelFormData.get('baseFile') as File)
let detailFileFlag=handleFileLimit(excelFormData.get('detailFile') as File)
let baseFileFlag = handleFileLimit(excelFormData.get('baseFile') as File)
let detailFileFlag = handleFileLimit(excelFormData.get('detailFile') as File)
if (!baseFileFlag || !detailFileFlag) {
return
}
@@ -158,10 +160,10 @@ const save = () => {
excelFormData.append('id', formContent.value.id)
await updatePqReport(excelFormData);
ElMessage.success({ message: `${dialogTitle.value}成功！` })
ElMessage.success({message: `${dialogTitle.value}成功！`})
} else {
await addPqReport(excelFormData);
ElMessage.success({ message: `${dialogTitle.value}成功！` })
ElMessage.success({message: `${dialogTitle.value}成功！`})
}
@@ -190,14 +192,14 @@ const open = async (sign: string, data?: PqReport.ResReport) => {
// 处理文件信息
if (res.data.baseFileVO) {
baseFileName.value= res.data.baseFileVO.name;
baseFileUrl.value= res.data.baseFileVO.url;
baseFileName.value = res.data.baseFileVO.name;
baseFileUrl.value = res.data.baseFileVO.url;
formContent.value.baseFile = res.data.baseFileVO.name
}
if (res.data.detailFileVO) {
detailFileName.value= res.data.detailFileVO.name;
detailFileUrl.value= res.data.detailFileVO.url;
detailFileName.value = res.data.detailFileVO.name;
detailFileUrl.value = res.data.detailFileVO.url;
formContent.value.detailFile = res.data.detailFileVO.name
}
@@ -205,7 +207,7 @@ const open = async (sign: string, data?: PqReport.ResReport) => {
})
} else {
baseFileName.value =''
baseFileName.value = ''
baseFileUrl.value = ''
detailFileName.value = ''
detailFileUrl.value = ''
@@ -257,7 +259,7 @@ const DataHandleExceed = (files: File[]) => {
};
const BaseHandleChange = async(param : UploadFile) => {
const BaseHandleChange = async (param: UploadFile) => {
baseFileName.value = param.name;
baseFileUrl.value = URL.createObjectURL(param.raw as Blob);
excelFormData.append('baseFile', param.raw as Blob, param.name);
@@ -265,7 +267,7 @@ const BaseHandleChange = async(param : UploadFile) => {
formContent.value.baseFile = param.name;
};
const DataHandleChange = async(param: UploadFile) => {
const DataHandleChange = async (param: UploadFile) => {
detailFileName.value = param.name;
detailFileUrl.value = URL.createObjectURL(param.raw as Blob);
excelFormData.append('detailFile', param.raw as Blob, param.name);
@@ -276,18 +278,20 @@ const DataHandleChange = async(param: UploadFile) => {
const fileSizeLimit = 5 * 1024 * 1024; // 5MB
const handleFileLimit = (file: File) => {
if (file) {
if (file.size > fileSizeLimit) {
ElMessage.error({message: `文件大小不能超过${fileSizeLimit / 1024 / 1024}MB`});
return false;
} else {
return true;
}
}
return true;
}
// 对外映射
defineExpose({ open })
defineExpose({open})
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined
}>()
@@ -297,7 +301,4 @@ const props = defineProps<{
display: flex;
align-items: center;
}
</style>

5
frontend/src/views/system/template/index.vue
View File

@@ -84,6 +84,11 @@
return scope.row.detailFileVO.url
}
},
{
prop:'description',
label: '描述',
minWidth: 150
},
{
prop: 'createTime',
label: '创建时间',