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) => { export const getAuditLog = (params: AuditLog.ReqAuditLogParams) => {
return http.post(`/sysLog/list`, params) 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 { .dialog-small {
.el-dialog__body { .el-dialog__body {
max-height: 340px; max-height: 350px;
} }
} }

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

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

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

@@ -1,65 +1,67 @@
<template> <template>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogSmall"> <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-item label="名称" prop="name"> <el-form ref="dialogFormRef" :model="formContent" :rules="rules">
<el-input v-model="formContent.name" placeholder="请输入报告名称" /> <el-form-item label="名称" prop="name">
</el-form-item> <el-input v-model="formContent.name" placeholder="请输入报告名称"/>
<el-form-item label="版本号" prop="version"> </el-form-item>
<el-input v-model="formContent.version" placeholder="请输入版本号" /> <el-form-item label="版本号" prop="version">
</el-form-item> <el-input v-model="formContent.version" placeholder="请输入版本号"/>
<el-form-item label="基础模板文件" prop="baseFile"> </el-form-item>
<el-upload <el-form-item label="基础模板文件" prop="baseFile">
action="#" <el-upload
:limit="1" action="#"
:on-change='BaseHandleChange' :limit="1"
:auto-upload="false" :on-change='BaseHandleChange'
:file-list="baseFileList" :auto-upload="false"
:on-exceed="BaseHandleExceed" :file-list="baseFileList"
:on-remove="BaseHandleRemove" :on-exceed="BaseHandleExceed"
style="width: 100% !important;" :on-remove="BaseHandleRemove"
accept=".docx" style="width: 100% !important;"
class="upload-container" accept=".docx"
> class="upload-container"
<el-button type="primary">选择文件</el-button> >
</el-upload> <el-button type="primary">选择文件</el-button>
仅支持上传大小不超过5MB的.docx文件 </el-upload>
</el-form-item> 仅支持上传大小不超过5MB的.docx文件
<el-form-item label="检测项模版文件" prop="detailFile"> </el-form-item>
<el-upload <el-form-item label="检测项模版文件" prop="detailFile">
action="#" <el-upload
:limit="1" action="#"
:on-change='DataHandleChange' :limit="1"
:auto-upload="false" :on-change='DataHandleChange'
:file-list="detailFileList" :auto-upload="false"
:on-exceed="DataHandleExceed" :file-list="detailFileList"
:on-remove="DataHandleRemove" :on-exceed="DataHandleExceed"
style="width: 100% !important;" :on-remove="DataHandleRemove"
accept=".docx" style="width: 100% !important;"
class="upload-container" accept=".docx"
> class="upload-container"
<el-button type="primary">选择文件</el-button> >
</el-upload> <el-button type="primary">选择文件</el-button>
仅支持上传大小不超过5MB的.docx文件 </el-upload>
</el-form-item> 仅支持上传大小不超过5MB的.docx文件
<el-form-item label="描述信息" prop="description"> </el-form-item>
<el-input v-model="formContent.description" type="textarea" placeholder="请输入描述信息" /> <el-form-item label="描述信息" prop="description">
</el-form-item> <el-input v-model="formContent.description" type="textarea" placeholder="请输入描述信息"/>
</el-form> </el-form-item>
<template #footer> </el-form>
<div> </div>
<el-button @click="close()">取 消</el-button> <template #footer>
<el-button type="primary" @click="save()">保存</el-button> <div>
</div> <el-button @click="close()">取 消</el-button>
</template> <el-button type="primary" @click="save()">保存</el-button>
</el-dialog> </div>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { dialogSmall } from '@/utils/elementBind' import {dialogSmall} from '@/utils/elementBind'
import { type PqReport } from '@/api/device/interface/report' import {type PqReport} from '@/api/device/interface/report'
import { ElMessage, UploadFile } from 'element-plus' import {ElMessage, UploadFile} from 'element-plus'
import { updatePqReport, addPqReport, getPqReportById } from '@/api/device/report' import {addPqReport, getPqReportById, updatePqReport} from '@/api/device/report'
import { computed, reactive, ref } from 'vue' import {computed, reactive, ref} from 'vue'
// 定义弹出组件元信息 // 定义弹出组件元信息
const dialogFormRef = ref() const dialogFormRef = ref()
@@ -71,233 +73,232 @@ const detailFileName = ref('')
const detailFileUrl = ref('') const detailFileUrl = ref('')
const baseFileList = computed(() => { const baseFileList = computed(() => {
if (baseFileName.value && baseFileUrl.value) { if (baseFileName.value && baseFileUrl.value) {
return [{ name: baseFileName.value, url: baseFileUrl.value }]; return [{name: baseFileName.value, url: baseFileUrl.value}];
} }
return []; return [];
}); });
const detailFileList = computed(() => { const detailFileList = computed(() => {
if (detailFileName.value && detailFileUrl.value) { if (detailFileName.value && detailFileUrl.value) {
return [{ name: detailFileName.value, url: detailFileUrl.value }]; return [{name: detailFileName.value, url: detailFileUrl.value}];
} }
return []; return [];
}); });
function useMetaInfo() { function useMetaInfo() {
const dialogVisible = ref(false) const dialogVisible = ref(false)
const titleType = ref('add') const titleType = ref('add')
const formContent = ref<PqReport.ResReport>({ const formContent = ref<PqReport.ResReport>({
id: '', id: '',
name: '', name: '',
version: '', // 版本号 version: '', // 版本号
description: '', // 描述信息 description: '', // 描述信息
detailFile:'',//检测项模版文件路径 detailFile: '',//检测项模版文件路径
baseFile:'', baseFile: '',
state: 1, state: 1,
}) })
return { dialogVisible, titleType, formContent } return {dialogVisible, titleType, formContent}
} }
const { dialogVisible, titleType, formContent } = useMetaInfo() const {dialogVisible, titleType, formContent} = useMetaInfo()
// 清空formContent // 清空formContent
const resetFormContent = () => { const resetFormContent = () => {
formContent.value = { formContent.value = {
id: '', id: '',
name: '', name: '',
version: '', // 版本号 version: '', // 版本号
description: '', // 描述信息 description: '', // 描述信息
detailFile:'',//检测项模版文件路径 detailFile: '',//检测项模版文件路径
baseFile:'', baseFile: '',
state: 1, state: 1,
} }
} }
let dialogTitle = computed(() => { let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增报告模版' : '编辑报告模版' return titleType.value === 'add' ? '新增报告模版' : '编辑报告模版'
}) })
// 关闭弹窗 // 关闭弹窗
const close = () => { const close = () => {
excelFormData = new FormData() excelFormData = new FormData()
dialogVisible.value = false dialogVisible.value = false
resetFormContent() resetFormContent()
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
} }
// 表单验证规则 // 表单验证规则
const rules = reactive({ const rules = reactive({
name: [{ required: true, message: '请输入报告名称', trigger: 'blur' }], name: [{required: true, message: '请输入报告名称', trigger: 'blur'}],
version: [{ required: true, message: '请输入版本号', trigger: 'blur' }], version: [{required: true, message: '请输入版本号', trigger: 'blur'}],
baseFile: [{ required: true, message: '请上传基础模板文件', trigger: 'change' }], baseFile: [{required: true, message: '请上传基础模板文件', trigger: 'change'}],
detailFile: [{ required: true, message: '请上传检测项模版文件', trigger: 'change' }], detailFile: [{required: true, message: '请上传检测项模版文件', trigger: 'change'}],
}) })
// 保存数据 // 保存数据
const save = () => { const save = () => {
try { try {
dialogFormRef.value?.validate(async (valid: boolean) => { dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) { if (valid) {
// 清空 excelFormData // 清空 excelFormData
excelFormData.delete('id') excelFormData.delete('id')
excelFormData.delete('name') excelFormData.delete('name')
excelFormData.delete('version') excelFormData.delete('version')
excelFormData.delete('description') excelFormData.delete('description')
excelFormData.append('name', formContent.value.name) excelFormData.append('name', formContent.value.name)
excelFormData.append('version', formContent.value.version) excelFormData.append('version', formContent.value.version)
excelFormData.append('description', formContent.value.description) excelFormData.append('description', formContent.value.description)
let baseFileFlag=handleFileLimit(excelFormData.get('baseFile') as File) let baseFileFlag = handleFileLimit(excelFormData.get('baseFile') as File)
let detailFileFlag=handleFileLimit(excelFormData.get('detailFile') as File) let detailFileFlag = handleFileLimit(excelFormData.get('detailFile') as File)
if (!baseFileFlag || !detailFileFlag) { if (!baseFileFlag || !detailFileFlag) {
return return
} }
if (formContent.value.id) { if (formContent.value.id) {
excelFormData.append('id', formContent.value.id) excelFormData.append('id', formContent.value.id)
await updatePqReport(excelFormData); await updatePqReport(excelFormData);
ElMessage.success({ message: `${dialogTitle.value}成功！` }) ElMessage.success({message: `${dialogTitle.value}成功！`})
} else { } else {
await addPqReport(excelFormData); await addPqReport(excelFormData);
ElMessage.success({ message: `${dialogTitle.value}成功！` }) ElMessage.success({message: `${dialogTitle.value}成功！`})
} }
close() close()
// 刷新表格 // 刷新表格
await props.refreshTable!() await props.refreshTable!()
} }
}) })
} catch (err) { } catch (err) {
console.error('验证过程中出现错误', err) console.error('验证过程中出现错误', err)
} }
} }
// 打开弹窗，可能是新增，也可能是编辑 // 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data?: PqReport.ResReport) => { const open = async (sign: string, data?: PqReport.ResReport) => {
titleType.value = sign titleType.value = sign
dialogVisible.value = true dialogVisible.value = true
if (data?.id) { if (data?.id) {
await getPqReportById(data).then((res) => { await getPqReportById(data).then((res) => {
formContent.value.id = res.data.id formContent.value.id = res.data.id
formContent.value.name = res.data.name formContent.value.name = res.data.name
formContent.value.version = res.data.version formContent.value.version = res.data.version
formContent.value.description = res.data.description formContent.value.description = res.data.description
// 处理文件信息
if (res.data.baseFileVO) {
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;
formContent.value.detailFile = res.data.detailFileVO.name // 处理文件信息
} if (res.data.baseFileVO) {
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;
formContent.value.detailFile = res.data.detailFileVO.name
}
})
} else {
baseFileName.value = ''
baseFileUrl.value = ''
detailFileName.value = ''
detailFileUrl.value = ''
resetFormContent();
dialogFormRef.value?.resetFields()
// 清空 excelFormData
excelFormData = new FormData();
}
})
} else {
baseFileName.value =''
baseFileUrl.value = ''
detailFileName.value = ''
detailFileUrl.value = ''
resetFormContent();
dialogFormRef.value?.resetFields()
// 清空 excelFormData
excelFormData = new FormData();
}
} }
const DataHandleRemove = () => { const DataHandleRemove = () => {
excelFormData.delete('detailFile'); excelFormData.delete('detailFile');
formContent.value.detailFile = '' formContent.value.detailFile = ''
}; };
const BaseHandleRemove = () => { const BaseHandleRemove = () => {
excelFormData.delete('baseFile'); excelFormData.delete('baseFile');
formContent.value.baseFile = '' formContent.value.baseFile = ''
}; };
const BaseHandleExceed = (files: File[]) => { const BaseHandleExceed = (files: File[]) => {
// 移除旧文件 // 移除旧文件
excelFormData.delete('baseFile'); excelFormData.delete('baseFile');
// 添加新文件 // 添加新文件
if (files.length > 0) { if (files.length > 0) {
const newFile = files[0] as unknown as UploadFile; const newFile = files[0] as unknown as UploadFile;
baseFileName.value = newFile.name; baseFileName.value = newFile.name;
excelFormData.append('baseFile', newFile as Blob, newFile.name); excelFormData.append('baseFile', newFile as Blob, newFile.name);
formContent.value.detailFile = newFile.name
}
formContent.value.detailFile = newFile.name
}
}; };
const DataHandleExceed = (files: File[]) => { const DataHandleExceed = (files: File[]) => {
// 移除旧文件 // 移除旧文件
excelFormData.delete('detailFile'); excelFormData.delete('detailFile');
// 添加新文件 // 添加新文件
if (files.length > 0) { if (files.length > 0) {
const newFile = files[0] as UploadFile; const newFile = files[0] as UploadFile;
detailFileName.value = newFile.name; detailFileName.value = newFile.name;
excelFormData.append('detailFile', newFile as Blob, newFile.name); excelFormData.append('detailFile', newFile as Blob, newFile.name);
formContent.value.detailFile = newFile.name
}
formContent.value.detailFile = newFile.name
}
}; };
const BaseHandleChange = async(param : UploadFile) => { const BaseHandleChange = async (param: UploadFile) => {
baseFileName.value = param.name; baseFileName.value = param.name;
baseFileUrl.value = URL.createObjectURL(param.raw as Blob); baseFileUrl.value = URL.createObjectURL(param.raw as Blob);
excelFormData.append('baseFile', param.raw as Blob, param.name); excelFormData.append('baseFile', param.raw as Blob, param.name);
formContent.value.baseFile = param.name; formContent.value.baseFile = param.name;
}; };
const DataHandleChange = async(param: UploadFile) => { const DataHandleChange = async (param: UploadFile) => {
detailFileName.value = param.name; detailFileName.value = param.name;
detailFileUrl.value = URL.createObjectURL(param.raw as Blob); detailFileUrl.value = URL.createObjectURL(param.raw as Blob);
excelFormData.append('detailFile', param.raw as Blob, param.name); excelFormData.append('detailFile', param.raw as Blob, param.name);
formContent.value.detailFile = param.name; formContent.value.detailFile = param.name;
}; };
const fileSizeLimit = 5 * 1024 * 1024; // 5MB const fileSizeLimit = 5 * 1024 * 1024; // 5MB
const handleFileLimit = (file: File) => { const handleFileLimit = (file: File) => {
if (file.size > fileSizeLimit) { if (file) {
ElMessage.error({message: `文件大小不能超过${fileSizeLimit / 1024 / 1024}MB`}); if (file.size > fileSizeLimit) {
return false; ElMessage.error({message: `文件大小不能超过${fileSizeLimit / 1024 / 1024}MB`});
} else { return false;
return true; } else {
return true;
}
} }
return true;
} }
// 对外映射 // 对外映射
defineExpose({ open }) defineExpose({open})
const props = defineProps<{ const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined refreshTable: (() => Promise<void>) | undefined
}>() }>()
</script> </script>
<style scoped> <style scoped>
.upload-container { .upload-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
</style> </style>

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

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