2026-03-24 21:45:55 +08:00
|
|
|
|
# 项目归档前端实施记录
|
|
|
|
|
|
|
|
|
|
|
|
## 本次改动概述
|
|
|
|
|
|
|
|
|
|
|
|
本次前端实施围绕三个目标完成：
|
|
|
|
|
|
|
|
|
|
|
|
1. 项目列表“归档”按钮接入真实接口
|
|
|
|
|
|
2. 归档确认弹窗收敛到本次需求边界
|
|
|
|
|
|
3. 已归档项目在详情页中锁定“上传数据”“参数配置”，并在子组件中补只读保护
|
|
|
|
|
|
|
|
|
|
|
|
## 改动文件
|
|
|
|
|
|
|
|
|
|
|
|
- `ruoyi-ui/src/views/ccdiProject/index.vue`
|
|
|
|
|
|
- `ruoyi-ui/src/views/ccdiProject/components/ArchiveConfirmDialog.vue`
|
|
|
|
|
|
- `ruoyi-ui/src/views/ccdiProject/detail.vue`
|
|
|
|
|
|
- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
|
|
|
|
|
- `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
|
|
|
|
|
- `ruoyi-ui/tests/unit/project-list-archive-flow.test.js`
|
|
|
|
|
|
- `ruoyi-ui/tests/unit/project-detail-archive-tab-lock.test.js`
|
|
|
|
|
|
- `ruoyi-ui/tests/unit/project-archive-readonly-guard.test.js`
|
|
|
|
|
|
- `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
|
|
|
|
|
|
|
|
|
|
|
|
## 实现说明
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 列表页接入真实归档动作
|
|
|
|
|
|
|
|
|
|
|
|
在 `index.vue` 中：
|
|
|
|
|
|
|
|
|
|
|
|
- 引入 `archiveProject`
|
|
|
|
|
|
- 将 `handleConfirmArchive` 改为真实异步调用
|
|
|
|
|
|
- 成功后提示“项目归档成功”
|
|
|
|
|
|
- 关闭弹窗并刷新列表
|
|
|
|
|
|
- 失败时展示统一失败提示或透传错误消息
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 收敛归档确认弹窗
|
|
|
|
|
|
|
|
|
|
|
|
在 `ArchiveConfirmDialog.vue` 中移除了与本次需求无关的旧内容：
|
|
|
|
|
|
|
|
|
|
|
|
- 自动生成 PDF
|
|
|
|
|
|
- 归档库查看 / 恢复
|
|
|
|
|
|
- 同时删除项目相关数据
|
|
|
|
|
|
|
|
|
|
|
|
保留为纯确认弹窗，只表达：
|
|
|
|
|
|
|
|
|
|
|
|
- 确认归档项目
|
|
|
|
|
|
- 归档后上传数据和参数配置页签不可点击
|
|
|
|
|
|
- 项目进入只读查看状态
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 详情页禁用归档态页签
|
|
|
|
|
|
|
|
|
|
|
|
在 `detail.vue` 中新增：
|
|
|
|
|
|
|
|
|
|
|
|
- `isProjectArchived`
|
|
|
|
|
|
- `isArchiveLockedTab(tab)`
|
|
|
|
|
|
- `resolveAccessibleTab(tab)`
|
2026-03-24 22:00:42 +08:00
|
|
|
|
- `syncRouteTab(tab)`
|
2026-03-24 21:45:55 +08:00
|
|
|
|
|
|
|
|
|
|
并将其应用到：
|
|
|
|
|
|
|
|
|
|
|
|
- 顶部“上传数据”“参数配置”页签的 `disabled`
|
|
|
|
|
|
- `initActiveTabFromRoute()` 的路由初始化校正
|
|
|
|
|
|
- `handleMenuSelect()` 的点击拦截
|
|
|
|
|
|
- 项目状态变化后的当前页签校正
|
2026-03-24 22:00:42 +08:00
|
|
|
|
- 归档态命中受限页签时将地址栏 `tab` 自动回写为 `overview`
|
2026-03-24 21:45:55 +08:00
|
|
|
|
|
|
|
|
|
|
### 4. 子组件增加归档态只读保护
|
|
|
|
|
|
|
|
|
|
|
|
虽然页签已经不可点，但仍在子组件内补了一层保护，避免未来从其他入口复用组件时绕过限制。
|
|
|
|
|
|
|
|
|
|
|
|
`UploadData.vue`：
|
|
|
|
|
|
|
|
|
|
|
|
- 顶部按钮在归档态下禁用
|
|
|
|
|
|
- 拉取本行信息、身份证文件解析、批量上传等操作方法在归档态前置返回
|
|
|
|
|
|
- 流水上传卡片在归档态下置灰
|
|
|
|
|
|
|
|
|
|
|
|
`ParamConfig.vue`：
|
|
|
|
|
|
|
|
|
|
|
|
- 展示“已归档项目暂不可修改参数”提示
|
|
|
|
|
|
- 输入框和保存按钮在归档态下禁用
|
|
|
|
|
|
- `handleSaveAll()` 在归档态直接返回
|
|
|
|
|
|
|
|
|
|
|
|
## 为什么这样实现
|
|
|
|
|
|
|
|
|
|
|
|
### 为什么弹窗文案必须收敛
|
|
|
|
|
|
|
|
|
|
|
|
弹窗文案必须和真实业务动作一致，否则会出现“页面承诺了删数据 / 生成 PDF / 归档库，但实际没做”的偏差，容易造成误解。
|
|
|
|
|
|
|
|
|
|
|
|
### 为什么页签禁用和 URL 拦截要同时做
|
|
|
|
|
|
|
|
|
|
|
|
只做禁用态还不够，用户仍可通过地址栏直接访问 `?tab=upload` 或 `?tab=config`。因此必须在路由初始化时同步改写到 `overview`。
|
|
|
|
|
|
|
|
|
|
|
|
### 为什么组件级保护仍要保留
|
|
|
|
|
|
|
|
|
|
|
|
页签锁定解决的是主入口问题，组件级保护解决的是复用和绕过问题。两层一起做，归档态只读限制才稳。
|
|
|
|
|
|
|
|
|
|
|
|
## 结果
|
|
|
|
|
|
|
|
|
|
|
|
本次前端实施后，用户在列表页归档项目后：
|
|
|
|
|
|
|
|
|
|
|
|
- 列表会显示真实归档结果
|
|
|
|
|
|
- 已归档项目详情页中无法点击“上传数据”“参数配置”
|
|
|
|
|
|
- 即使访问旧链接，也会自动切到“结果总览”
|
2026-03-24 22:00:42 +08:00
|
|
|
|
- 地址栏中的受限 `tab` 参数会同步被改写为 `overview`
|
