3.9 KiB
3.9 KiB
eventList 事件导出与波形导出设计
背景
frontend/src/views/event/eventList/index.vue 当前只有一个“导出”按钮,导出接口为
/event/list/transient/export,按当前查询条件导出事件列表。页面已有波形状态字段
fileFlag 和波形路径 wavePath,行操作根据波形是否存在切换“查看波形”和“波形补招”。
本次需要:
- 将现有“导出”更名为“事件导出”。
- 新增“波形导出”。
- 波形导出支持单条或多条。
- 表格增加用于波形导出的多选能力。
- 有波形的行可选,无波形的行不可选。
- 表头增加全选复选框。
- 事件导出不受波形是否存在影响。
推荐方案
采用独立的“波形选择”列,不复用 ProTable 原生 selection 列。
原因是原生 selection 列只能表达一套选择状态。如果用 selectable(row) 按波形是否存在控制行是否可选,那么没有波形的事件也无法被选中用于事件导出,这与“事件导出不存在波形控制多选框是否可选的逻辑”冲突。
独立“波形选择”列只服务波形导出:
- 表头复选框控制当前页所有可导出波形行。
- 行复选框只在
fileFlag === 1 && wavePath时可选。 - 无波形行禁用,且不参与全选、半选、导出参数。
- 事件导出继续按当前查询条件导出,不读取波形选择状态。
UI 行为
表格头部按钮按现有业务页面按钮风格:
- “事件导出”:
type="primary" plain,图标继续使用Download。 - “波形导出”:
type="primary" plain,图标继续使用Download,没有选中波形时禁用。
表格左侧新增“波形选择”列,放在序号列之前或之后均可,优先靠近序号列:
- 表头为一个复选框。
- 表头复选框仅统计当前页可导出波形行。
- 当前页可导出波形行全部选中时为选中态。
- 当前页可导出波形行部分选中时为半选态。
- 当前页没有可导出波形行时禁用。
- 切换页码、查询、重置后,应清理不在当前页的数据选择,避免旧页选中项误参与导出。
数据与接口
事件导出沿用现有接口:
exportTransientEvents(params: EventList.TransientPageParams)
波形导出新增接口方法,前端按 eventIds 传参:
exportTransientWaveforms(params: EventList.TransientWaveformExportParams)
参数类型:
interface TransientWaveformExportParams {
eventIds: string[]
}
接口路径按以下命名实现;如果后端最终提供不同路径,实施时只替换 API 方法中的路径:
POST /event/list/transient/waveform/export
后端负责根据事件 ID 校验波形文件并打包导出。前端不直接拼装本地波形文件路径。
边界处理
- 行没有
eventId时,不允许加入波形导出选择。 - 行
fileFlag不为1时,不允许加入波形导出选择。 - 行
wavePath为空时,不允许加入波形导出选择。 - 点击“波形导出”时再次过滤可导出行,避免页面状态残留导致传入非法数据。
- 如果过滤后没有可导出事件,提示用户先选择存在波形的事件。
- 事件导出仍使用当前搜索条件,并保持原有时间范围构造逻辑。
验证方式
- 静态检查“事件导出”按钮文案已更新,且仍调用
exportTransientEvents。 - 静态检查事件导出参数仍来自
buildEventQueryParams(resolveCurrentSearchParams(searchParam))。 - 静态检查“波形导出”调用新增接口,并传入
eventIds。 - 静态检查波形选择判断同时包含
fileFlag === 1、wavePath和eventId。 - 手动验证当前页中无波形行复选框禁用,有波形行可选。
- 手动验证表头全选只选择当前页有波形的行。
- 手动验证查询、重置、翻页后旧选择不会误参与波形导出。