wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49118a4418605ee2b0b8fce3a7a267c3744905ce
ccdi/docs/plans/frontend/2026-04-20-intermediary-import-frontend-implementation.md
wkc 49118a4418 新增中介库导入实施计划
2026-04-22 09:52:32 +08:00

11 KiB
Raw Blame History

中介库导入改造前端实施计划

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking. 执行约束： 仓库约定不开 subagent，执行时使用 superpowers:executing-plans；前端 Node 版本必须通过 nvm 切换到仓库已验证版本。

Goal: 将中介库前端导入入口改造为“导入中介信息 + 导入中介实体关联关系”两按钮模式，去掉旧的“个人/机构”切换导入，打通异步轮询、失败记录查看、历史任务恢复，并保持现有手工维护链路继续使用 bizId 契约。

Architecture: 保留 ruoyi-ui/src/views/ccdiIntermediary/ 作为唯一页面入口，不新增平行页面。导入弹窗继续复用现有 ImportDialog.vue 外壳，但改为由父页面通过 scene/importType 驱动，而不是弹窗内部单选切换；index.vue 负责管理两类导入任务状态、失败记录和按钮展示，交互整体对齐员工数据导入页面。

Tech Stack: Vue 2, Element UI, JavaScript, npm, nvm, Markdown

文件结构与职责

设计与计划基线

  • docs/design/2026-04-20-intermediary-import-refactor-design.md 已确认的导入边界、字段口径和前端交互基线。

前端源码

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/index.vue 负责顶部按钮、两类导入弹窗打开逻辑、异步任务状态恢复、失败记录弹窗和表格刷新。
  • Modify: ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue 从“内部切换 person/entity”改为“父组件传入导入场景”，支持中介信息导入和实体关联关系导入。
  • Modify: ruoyi-ui/src/api/ccdiIntermediary.js 补两类导入的模板下载、上传、状态查询、失败记录 API。

测试

  • Create: ruoyi-ui/tests/unit/intermediary-import-toolbar.test.js
  • Create: ruoyi-ui/tests/unit/intermediary-import-dialog.test.js
  • Create: ruoyi-ui/tests/unit/intermediary-import-state.test.js
  • Create: ruoyi-ui/tests/unit/intermediary-import-api.test.js
  • Modify: ruoyi-ui/tests/unit/intermediary-person-edit-ui.test.js

依赖参考

  • ruoyi-ui/src/views/ccdiBaseStaff/index.vue 参考顶部导入按钮、轮询、失败记录、历史任务恢复。
  • ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue 继续作为导入弹窗壳子，不重复造一个全新组件。
  • ruoyi-ui/tests/unit/employee-asset-import-ui.test.js 参考导入类单测结构和断言风格。

实施任务

Task 1: 改造 API 文件为两类导入链路

Files:

  • Modify: ruoyi-ui/src/api/ccdiIntermediary.js

  • Test: ruoyi-ui/tests/unit/intermediary-import-api.test.js

  • Step 1: 先写失败测试，固定 API 方法名与路径

覆盖：

importPersonTemplate
importPersonData
getPersonImportStatus
getPersonImportFailures
importEnterpriseRelationTemplate
importEnterpriseRelationData
getEnterpriseRelationImportStatus
getEnterpriseRelationImportFailures
  • Step 2: 保留中介信息导入 API

中介信息导入继续使用：

/ccdi/intermediary/importPersonTemplate
/ccdi/intermediary/importPersonData
/ccdi/intermediary/importPersonStatus/{taskId}
/ccdi/intermediary/importPersonFailures/{taskId}
  • Step 3: 新增实体关联关系导入 API

新增：

/ccdi/intermediary/importEnterpriseRelationTemplate
/ccdi/intermediary/importEnterpriseRelationData
/ccdi/intermediary/importEnterpriseRelationStatus/{taskId}
/ccdi/intermediary/importEnterpriseRelationFailures/{taskId}
  • Step 4: 删除前端对旧 importEntity* 导入接口的依赖

Expected: 页面不再调用旧“机构中介导入”接口。

  • Step 5: 运行 API 测试

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
node tests/unit/intermediary-import-api.test.js

Expected: PASS，方法名和 URL 与设计文档一致。

  • Step 6: 提交 API 调整
git add ruoyi-ui/src/api/ccdiIntermediary.js ruoyi-ui/tests/unit/intermediary-import-api.test.js
git commit -m "调整中介导入前端接口"

Task 2: 将导入弹窗改为场景驱动

Files:

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue

  • Test: ruoyi-ui/tests/unit/intermediary-import-dialog.test.js

  • Step 1: 先写弹窗行为测试

覆盖：

// 1. 不再渲染“个人中介/机构中介”单选
// 2. scene=person 时调用中介信息导入地址
// 3. scene=enterpriseRelation 时调用实体关联关系导入地址
// 4. 模板文案随场景切换
  • Step 2: 把内部单选切换改成父组件传参

新增 props：

scene: {
  type: String,
  default: 'person'
}

Expected: 弹窗自身不再维护 formData.importType。

  • Step 3: 根据 scene 计算上传地址和模板地址
scene === 'person'
scene === 'enterpriseRelation'
  • Step 4: 按场景返回不同提示文案

中介信息导入提示需要包含：

personSubType 为字典下拉；
本人行 relatedNumId 为空；
亲属行 relatedNumId 填关联中介本人证件号码。

实体关联关系导入提示需要包含：

只导入中介与机构关系；
统一社会信用代码必须已存在于系统机构表。
  • Step 5: 运行弹窗测试

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
node tests/unit/intermediary-import-dialog.test.js

Expected: PASS，弹窗只根据外部场景工作。

  • Step 6: 提交弹窗改造
git add ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue ruoyi-ui/tests/unit/intermediary-import-dialog.test.js
git commit -m "改造中介导入弹窗场景切换"

Task 3: 改造页面顶部按钮与任务状态

Files:

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/index.vue

  • Test: ruoyi-ui/tests/unit/intermediary-import-toolbar.test.js

  • Test: ruoyi-ui/tests/unit/intermediary-import-state.test.js

  • Step 1: 先写按钮与状态测试

覆盖：

// 1. 顶部有两个导入按钮
// 2. 按钮文案正确
// 3. 两类失败记录按钮独立显示
// 4. localStorage 使用两套独立 key
  • Step 2: 在工具栏增加两个导入按钮

按钮文案固定为：

导入中介信息
导入中介实体关联关系
  • Step 3: 在页面中维护两套独立任务状态

建议状态结构：

personImportTask
enterpriseRelationImportTask

以及两套本地缓存 key：

ccdi_intermediary_person_import_task
ccdi_intermediary_enterprise_relation_import_task
  • Step 4: 保持页面原有手工维护链路不变

Expected: 打开详情、新增亲属、查询关系列表等既有逻辑继续走 bizId，不因导入改造改变页面其它交互。

  • Step 5: 运行按钮与状态测试

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
node tests/unit/intermediary-import-toolbar.test.js
node tests/unit/intermediary-import-state.test.js

Expected: PASS，按钮与任务缓存隔离正确。

  • Step 6: 提交页面状态改造
git add ruoyi-ui/src/views/ccdiIntermediary/index.vue ruoyi-ui/tests/unit/intermediary-import-toolbar.test.js ruoyi-ui/tests/unit/intermediary-import-state.test.js
git commit -m "调整中介导入页面入口状态"

Task 4: 接入失败记录弹窗与完成态刷新

Files:

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/index.vue

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue

  • Modify: ruoyi-ui/tests/unit/intermediary-person-edit-ui.test.js

  • Step 1: 先写失败记录行为断言

在现有中介页面测试里补充：

// 1. 导入完成且 failureCount > 0 时显示对应失败记录按钮
// 2. 查看失败记录时调用对应接口
// 3. 清除历史记录后按钮消失
  • Step 2: 在 index.vue 中落两套失败记录弹窗状态

建议状态：

personFailureDialogVisible
enterpriseRelationFailureDialogVisible
personFailureList
enterpriseRelationFailureList
  • Step 3: 对齐员工导入的完成态逻辑

Expected:

导入完成 -> 刷新列表 -> 刷新当前详情(如有) -> 更新失败按钮状态
  • Step 4: 对齐员工导入的历史记录恢复逻辑

页面刷新后如果任务仍在缓存中：

恢复失败记录按钮
恢复上次导入摘要
必要时继续轮询
  • Step 5: 运行页面行为测试

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
node tests/unit/intermediary-person-edit-ui.test.js

Expected: PASS，没有把导入状态逻辑打坏现有详情维护链路。

  • Step 6: 提交失败记录与刷新逻辑
git add ruoyi-ui/src/views/ccdiIntermediary/index.vue ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue ruoyi-ui/tests/unit/intermediary-person-edit-ui.test.js
git commit -m "补齐中介导入失败记录交互"

Task 5: 做前端验证并回写计划结果

Files:

  • Modify: docs/plans/frontend/2026-04-20-intermediary-import-frontend-implementation.md

  • Step 1: 使用 nvm 切换到仓库已验证版本

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
source ~/.nvm/nvm.sh && nvm use 14.21.3

Expected: 输出 Now using node v14.21.3。

  • Step 2: 运行前端相关单测脚本

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
node tests/unit/intermediary-import-api.test.js
node tests/unit/intermediary-import-dialog.test.js
node tests/unit/intermediary-import-toolbar.test.js
node tests/unit/intermediary-import-state.test.js
node tests/unit/intermediary-person-edit-ui.test.js

Expected: 全部 PASS。

  • Step 3: 执行生产构建验证

Run:

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod

Expected: BUILD SUCCESS，没有新增语法或模块解析错误。

  • Step 4: 回写执行结果

在计划文档末尾补：

- 实际执行的 node / build 命令
- 各测试脚本 PASS / FAIL 结果
- 构建结果
  • Step 5: 提交验证结果
git add docs/plans/frontend/2026-04-20-intermediary-import-frontend-implementation.md
git commit -m "补充中介导入前端实施记录"

验证命令

cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui
source ~/.nvm/nvm.sh && nvm use 14.21.3
node tests/unit/intermediary-import-api.test.js
node tests/unit/intermediary-import-dialog.test.js
node tests/unit/intermediary-import-toolbar.test.js
node tests/unit/intermediary-import-state.test.js
node tests/unit/intermediary-person-edit-ui.test.js
source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod

完成标准

  • 顶部只有“导入中介信息”和“导入中介实体关联关系”两个按钮
  • 导入弹窗不再内部切换“个人/机构”，而是由页面场景驱动
  • 两类导入的模板下载、上传、轮询、失败记录全部独立
  • 现有手工维护链路继续保持 bizId 契约
  • 页面支持恢复两类最近一次导入任务状态
  • 导入提示文案已经明确 personSubType 字典下拉、relationType 废弃、relatedNumId 新语义
  • 已使用 nvm use 14.21.3 完成前端测试脚本和生产构建验证
Reference in New Issue View Git Blame Copy Permalink