docs: add event list export design

This commit is contained in:
2026-05-15 22:51:57 +08:00
parent 6687cf0339
commit 8b19e4a779

View File

@@ -0,0 +1,95 @@
# 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`,没有选中波形时禁用。
表格左侧新增“波形选择”列,放在序号列之前或之后均可,优先靠近序号列:
- 表头为一个复选框。
- 表头复选框仅统计当前页可导出波形行。
- 当前页可导出波形行全部选中时为选中态。
- 当前页可导出波形行部分选中时为半选态。
- 当前页没有可导出波形行时禁用。
- 切换页码、查询、重置后,应清理不在当前页的数据选择,避免旧页选中项误参与导出。
## 数据与接口
事件导出沿用现有接口:
```ts
exportTransientEvents(params: EventList.TransientPageParams)
```
波形导出新增接口方法,前端按 `eventIds` 传参:
```ts
exportTransientWaveforms(params: EventList.TransientWaveformExportParams)
```
参数类型:
```ts
interface TransientWaveformExportParams {
eventIds: string[]
}
```
接口路径按以下命名实现;如果后端最终提供不同路径,实施时只替换 API 方法中的路径:
```text
POST /event/list/transient/waveform/export
```
后端负责根据事件 ID 校验波形文件并打包导出。前端不直接拼装本地波形文件路径。
## 边界处理
- 行没有 `eventId` 时,不允许加入波形导出选择。
-`fileFlag` 不为 `1` 时,不允许加入波形导出选择。
-`wavePath` 为空时,不允许加入波形导出选择。
- 点击“波形导出”时再次过滤可导出行,避免页面状态残留导致传入非法数据。
- 如果过滤后没有可导出事件,提示用户先选择存在波形的事件。
- 事件导出仍使用当前搜索条件,并保持原有时间范围构造逻辑。
## 验证方式
- 静态检查“事件导出”按钮文案已更新,且仍调用 `exportTransientEvents`
- 静态检查事件导出参数仍来自 `buildEventQueryParams(resolveCurrentSearchParams(searchParam))`
- 静态检查“波形导出”调用新增接口,并传入 `eventIds`
- 静态检查波形选择判断同时包含 `fileFlag === 1``wavePath``eventId`
- 手动验证当前页中无波形行复选框禁用,有波形行可选。
- 手动验证表头全选只选择当前页有波形的行。
- 手动验证查询、重置、翻页后旧选择不会误参与波形导出。