wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c278d11390844aac34a88b3e7f1f9ce874c5e17c
ccdi/docs/plans/frontend/2026-04-17-enterprise-base-info-management-frontend-implementation.md
wkc c278d11390 修复
2026-04-20 11:22:10 +08:00

6.1 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.

Goal: 新增独立的实体库管理前端页面，打通查询、新增、查看、编辑、删除、导入、导入状态轮询与失败记录查看。

Architecture: 继续沿用员工信息维护的单页大文件实现方式，新建 ccdiEnterpriseBaseInfo 页面和独立 API 文件，不改造现有中介页面。选项数据统一从 ccdiEnum 拉取，列表、弹窗、导入和失败记录交互整体对齐员工信息维护，避免页面内再维护一套业务语义。

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

文件结构与职责

前端源码

  • ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue 实体库管理主页面，负责搜索、表格、编辑弹窗、详情弹窗、导入和失败记录。
  • ruoyi-ui/src/api/ccdiEnterpriseBaseInfo.js 新增实体库管理接口封装。
  • ruoyi-ui/src/api/ccdiEnum.js 补风险等级与企业来源选项请求方法。

依赖参考

  • ruoyi-ui/src/views/ccdiBaseStaff/index.vue 作为页面结构、导入轮询、失败记录和工具栏交互模板。
  • ruoyi-ui/src/views/ccdiIntermediary/index.vue 参考实体导入失败记录展示字段。
  • ruoyi-ui/src/api/ccdiBaseStaff.js 参考单表管理 API 风格。

实施任务

Task 1: 搭建实体库管理 API 与选项加载

Files:

  • Create: ruoyi-ui/src/api/ccdiEnterpriseBaseInfo.js

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

  • 在新 API 文件中定义 listEnterpriseBaseInfo、getEnterpriseBaseInfo、addEnterpriseBaseInfo、updateEnterpriseBaseInfo、delEnterpriseBaseInfo、importTemplate、importData、getImportStatus、getImportFailures。

  • 在 ccdiEnum.js 中新增 getEnterpriseRiskLevelOptions 与 getEnterpriseSourceOptions。

  • 继续复用现有 getCorpTypeOptions、getCorpNatureOptions、getCertTypeOptions、getDataSourceOptions。

Task 2: 搭建页面骨架与查询表单

Files:

  • Create: ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue

  • Reference: ruoyi-ui/src/views/ccdiBaseStaff/index.vue

  • 初始化页面数据结构，至少包含 loading、enterpriseBaseInfoList、queryParams、form、rules、open、detailOpen、upload、showFailureButton。

  • 查询区按设计文档落 enterpriseName、socialCreditCode、enterpriseType、enterpriseNature、industryClass、status、riskLevel、entSource。

  • 在 created 或首屏初始化流程中并发拉取主体类型、企业性质、证件类型、风险等级、企业来源、数据来源选项。

  • 搜索、重置、分页方法命名保持员工页一致，降低后续维护成本。

Task 3: 完成列表、详情与编辑弹窗

Files:

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

  • 列表区展示企业名称、统一社会信用代码、企业类型、企业性质、行业分类、所属行业、法定代表人、经营状态、风险等级、企业来源、数据来源、创建时间。

  • 通过格式化方法把 riskLevel、entSource、dataSource 展示成中文描述，不直接露出编码。

  • 实现详情弹窗，只读展示与表单同口径字段。

  • 实现新增/编辑弹窗，编辑态禁用统一社会信用代码输入框。

  • 表单中补齐 status、riskLevel、entSource、dataSource 四个可维护字段。

  • 提交时保持最短路径，不做额外参数转换层，只在需要时把空字符串标准化。

Task 4: 完成删除、导入与失败记录流程

Files:

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

  • 删除逻辑对齐员工页，支持单条删除和批量删除。

  • 新增导入弹窗配置，上传地址指向 /ccdi/enterpriseBaseInfo/importData。

  • 导入完成后缓存最近一次任务号，建议 key 使用 enterprise_base_info_import_last_task。

  • 增加导入状态轮询逻辑，状态结束后刷新列表并按结果决定是否显示“查看导入失败记录”按钮。

  • 新增失败记录弹窗，至少展示企业名称、统一社会信用代码、企业类型、企业性质、风险等级、企业来源、失败原因。

  • 提供“清除历史记录”能力，行为与员工页保持一致。

Task 5: 补页面校验和展示细节

Files:

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

  • 为统一社会信用代码增加 18 位格式校验。

  • 为企业名称、经营状态、风险等级、企业来源、数据来源增加必填校验。

  • 新增 formatRiskLevel、formatEnterpriseSource、formatDataSource、formatStatus 等展示方法。

  • 详情和列表统一复用格式化方法，避免页面出现双口径文本。

Task 6: 执行前端构建验证

Files:

  • Modify: docs/plans/frontend/2026-04-17-enterprise-base-info-management-frontend-implementation.md 在执行阶段补实际验证结果。

  • 使用 nvm 切换 Node 版本，优先使用当前仓库已验证可构建的版本。

  • 执行生产构建，确认页面编译通过。

  • 若有构建阻塞，记录真实错误，不引入额外兼容方案。

验证命令

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

执行结果

  • 实际执行命令：cd /Users/wkc/Desktop/ccdi/ccdi/ruoyi-ui && source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod
  • 构建结果：BUILD SUCCESS
  • 备注：构建过程中仅有既有包体积告警（asset size / entrypoint size limit），未出现语法或模块解析错误

完成标准

  • 前端新增独立“实体库管理”页面与 API 文件
  • 查询、分页、详情、新增、编辑、删除链路可用
  • 风险等级、企业来源、数据来源全部以统一选项口径展示和提交
  • 导入轮询、失败记录、历史任务缓存可用
  • 已使用 nvm 切换 Node 版本并完成前端构建验证
Reference in New Issue View Git Blame Copy Permalink