docs: add event list export design
This commit is contained in:
@@ -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`。
|
||||
- 手动验证当前页中无波形行复选框禁用,有波形行可选。
|
||||
- 手动验证表头全选只选择当前页有波形的行。
|
||||
- 手动验证查询、重置、翻页后旧选择不会误参与波形导出。
|
||||
Reference in New Issue
Block a user