项目归档前端实施记录

本次改动概述

本次前端实施围绕三个目标完成：

项目列表“归档”按钮接入真实接口
归档确认弹窗收敛到本次需求边界
已归档项目在详情页中锁定“上传数据”“参数配置”，并在子组件中补只读保护

改动文件

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)

并将其应用到：

顶部“上传数据”“参数配置”页签的 disabled
initActiveTabFromRoute() 的路由初始化校正
handleMenuSelect() 的点击拦截
项目状态变化后的当前页签校正

4. 子组件增加归档态只读保护

虽然页签已经不可点，但仍在子组件内补了一层保护，避免未来从其他入口复用组件时绕过限制。

UploadData.vue：

顶部按钮在归档态下禁用
拉取本行信息、身份证文件解析、批量上传等操作方法在归档态前置返回
流水上传卡片在归档态下置灰

ParamConfig.vue：

展示“已归档项目暂不可修改参数”提示
输入框和保存按钮在归档态下禁用
handleSaveAll() 在归档态直接返回

为什么这样实现

为什么弹窗文案必须收敛

弹窗文案必须和真实业务动作一致，否则会出现“页面承诺了删数据 / 生成 PDF / 归档库，但实际没做”的偏差，容易造成误解。

为什么页签禁用和 URL 拦截要同时做

只做禁用态还不够，用户仍可通过地址栏直接访问 ?tab=upload 或 ?tab=config。因此必须在路由初始化时同步改写到 overview。

为什么组件级保护仍要保留

页签锁定解决的是主入口问题，组件级保护解决的是复用和绕过问题。两层一起做，归档态只读限制才稳。

结果

本次前端实施后，用户在列表页归档项目后：

列表会显示真实归档结果
已归档项目详情页中无法点击“上传数据”“参数配置”
即使访问旧链接，也会自动切到“结果总览”

3.3 KiB Raw Blame History Unescape Escape