127 lines
6.1 KiB
Markdown
127 lines
6.1 KiB
Markdown
# 实体库管理前端实施计划
|
||
|
||
> **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`
|
||
|
||
- [x] 在新 API 文件中定义 `listEnterpriseBaseInfo`、`getEnterpriseBaseInfo`、`addEnterpriseBaseInfo`、`updateEnterpriseBaseInfo`、`delEnterpriseBaseInfo`、`importTemplate`、`importData`、`getImportStatus`、`getImportFailures`。
|
||
- [x] 在 `ccdiEnum.js` 中新增 `getEnterpriseRiskLevelOptions` 与 `getEnterpriseSourceOptions`。
|
||
- [x] 继续复用现有 `getCorpTypeOptions`、`getCorpNatureOptions`、`getCertTypeOptions`、`getDataSourceOptions`。
|
||
|
||
### Task 2: 搭建页面骨架与查询表单
|
||
|
||
**Files:**
|
||
|
||
- Create: `ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue`
|
||
- Reference: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
|
||
- [x] 初始化页面数据结构，至少包含 `loading`、`enterpriseBaseInfoList`、`queryParams`、`form`、`rules`、`open`、`detailOpen`、`upload`、`showFailureButton`。
|
||
- [x] 查询区按设计文档落 `enterpriseName`、`socialCreditCode`、`enterpriseType`、`enterpriseNature`、`industryClass`、`status`、`riskLevel`、`entSource`。
|
||
- [x] 在 `created` 或首屏初始化流程中并发拉取主体类型、企业性质、证件类型、风险等级、企业来源、数据来源选项。
|
||
- [x] 搜索、重置、分页方法命名保持员工页一致，降低后续维护成本。
|
||
|
||
### Task 3: 完成列表、详情与编辑弹窗
|
||
|
||
**Files:**
|
||
|
||
- Modify: `ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue`
|
||
|
||
- [x] 列表区展示企业名称、统一社会信用代码、企业类型、企业性质、行业分类、所属行业、法定代表人、经营状态、风险等级、企业来源、数据来源、创建时间。
|
||
- [x] 通过格式化方法把 `riskLevel`、`entSource`、`dataSource` 展示成中文描述，不直接露出编码。
|
||
- [x] 实现详情弹窗，只读展示与表单同口径字段。
|
||
- [x] 实现新增/编辑弹窗，编辑态禁用统一社会信用代码输入框。
|
||
- [x] 表单中补齐 `status`、`riskLevel`、`entSource`、`dataSource` 四个可维护字段。
|
||
- [x] 提交时保持最短路径，不做额外参数转换层，只在需要时把空字符串标准化。
|
||
|
||
### Task 4: 完成删除、导入与失败记录流程
|
||
|
||
**Files:**
|
||
|
||
- Modify: `ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue`
|
||
|
||
- [x] 删除逻辑对齐员工页，支持单条删除和批量删除。
|
||
- [x] 新增导入弹窗配置，上传地址指向 `/ccdi/enterpriseBaseInfo/importData`。
|
||
- [x] 导入完成后缓存最近一次任务号，建议 key 使用 `enterprise_base_info_import_last_task`。
|
||
- [x] 增加导入状态轮询逻辑，状态结束后刷新列表并按结果决定是否显示“查看导入失败记录”按钮。
|
||
- [x] 新增失败记录弹窗，至少展示企业名称、统一社会信用代码、企业类型、企业性质、风险等级、企业来源、失败原因。
|
||
- [x] 提供“清除历史记录”能力，行为与员工页保持一致。
|
||
|
||
### Task 5: 补页面校验和展示细节
|
||
|
||
**Files:**
|
||
|
||
- Modify: `ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue`
|
||
|
||
- [x] 为统一社会信用代码增加 18 位格式校验。
|
||
- [x] 为企业名称、经营状态、风险等级、企业来源、数据来源增加必填校验。
|
||
- [x] 新增 `formatRiskLevel`、`formatEnterpriseSource`、`formatDataSource`、`formatStatus` 等展示方法。
|
||
- [x] 详情和列表统一复用格式化方法，避免页面出现双口径文本。
|
||
|
||
### Task 6: 执行前端构建验证
|
||
|
||
**Files:**
|
||
|
||
- Modify: `docs/plans/frontend/2026-04-17-enterprise-base-info-management-frontend-implementation.md`
|
||
在执行阶段补实际验证结果。
|
||
|
||
- [x] 使用 `nvm` 切换 Node 版本，优先使用当前仓库已验证可构建的版本。
|
||
- [x] 执行生产构建，确认页面编译通过。
|
||
- [x] 若有构建阻塞，记录真实错误，不引入额外兼容方案。
|
||
|
||
## 验证命令
|
||
|
||
```bash
|
||
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 版本并完成前端构建验证
|