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;
}
}

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

@@ -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>

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

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