项目详情上传数据列表增加主体账号展示
This commit is contained in:
68
docs/plans/2026-03-11-upload-data-account-display-design.md
Normal file
68
docs/plans/2026-03-11-upload-data-account-display-design.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
# 上传数据主体账号展示设计文档
|
||||||
|
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
在项目详情页的“上传数据”模块中,文件列表当前仅展示“主体名称”,未展示后端已经返回的“主体账号”。本次调整在不变更后端接口和数据库结构的前提下,为列表新增“主体账号”列,帮助用户直接核对解析出的账号信息。
|
||||||
|
|
||||||
|
## 需求分析
|
||||||
|
|
||||||
|
### 背景
|
||||||
|
|
||||||
|
- 上传数据文件列表位于项目详情页“上传数据”页签。
|
||||||
|
- 后端文件上传记录实体已包含 `accountNos` 字段,解析成功后会写入主体账号数据。
|
||||||
|
- 前端列表当前只渲染 `enterpriseNames`,导致用户无法在列表中直接查看主体账号。
|
||||||
|
|
||||||
|
### 目标
|
||||||
|
|
||||||
|
- 在上传数据文件列表中新增“主体账号”列。
|
||||||
|
- 直接复用现有接口返回的 `accountNos` 字段。
|
||||||
|
- 保持现有分页、状态、刷新逻辑不变。
|
||||||
|
|
||||||
|
## 方案对比
|
||||||
|
|
||||||
|
### 方案一:新增独立“主体账号”列
|
||||||
|
|
||||||
|
优点:
|
||||||
|
- 信息结构最清晰,主体名称和主体账号各自独立。
|
||||||
|
- 改动范围最小,只需调整前端表格模板。
|
||||||
|
- 与现有“主体名称”列保持一致,用户学习成本低。
|
||||||
|
|
||||||
|
缺点:
|
||||||
|
- 表格横向宽度略有增加。
|
||||||
|
|
||||||
|
### 方案二:主体名称和主体账号合并在同一列内分行展示
|
||||||
|
|
||||||
|
优点:
|
||||||
|
- 不增加表格列数。
|
||||||
|
|
||||||
|
缺点:
|
||||||
|
- 可读性下降,不利于后续排序、筛选或截图核对。
|
||||||
|
- 需要额外的模板和样式调整。
|
||||||
|
|
||||||
|
## 方案选择
|
||||||
|
|
||||||
|
采用方案一:新增独立“主体账号”列。
|
||||||
|
|
||||||
|
选择理由:
|
||||||
|
- 用户已经明确确认采用单独新增一列的展示方式。
|
||||||
|
- 后端字段已就绪,前端读取即用。
|
||||||
|
- 改动只落在上传数据列表模板和对应回归测试,风险最低。
|
||||||
|
|
||||||
|
## 数据流
|
||||||
|
|
||||||
|
1. 前端继续调用 `/ccdi/file-upload/list` 获取分页数据。
|
||||||
|
2. 后端返回每条上传记录的 `accountNos` 字段。
|
||||||
|
3. 前端在文件列表中新增“主体账号”列,读取 `scope.row.accountNos`。
|
||||||
|
4. 当账号为空时,展示 `-`,与“主体名称”列的兜底方式保持一致。
|
||||||
|
|
||||||
|
## 错误处理
|
||||||
|
|
||||||
|
- `accountNos` 为空、`null` 或未返回时,前端展示 `-`。
|
||||||
|
- 不新增请求,不改变轮询与刷新逻辑,因此不引入新的接口异常处理分支。
|
||||||
|
|
||||||
|
## 测试策略
|
||||||
|
|
||||||
|
- 新增前端静态回归测试,断言文件列表模板中存在 `prop="accountNos"` 且标签为“主体账号”。
|
||||||
|
- 按 TDD 流程先运行新测试并确认失败,再补模板代码。
|
||||||
|
- 回归执行现有上传数据列表相关静态测试,确保未误伤现有布局与分页设置。
|
||||||
|
- 执行前端生产构建,确认模板修改不影响编译。
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
# 上传数据主体账号展示实施计划
|
||||||
|
|
||||||
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||||
|
|
||||||
|
**目标:** 在项目详情的上传数据文件列表中新增“主体账号”列,展示后端已返回的 `accountNos`
|
||||||
|
|
||||||
|
**架构:** 保持后端接口、数据结构和页面交互逻辑不变,仅在前端表格模板增加一列,并通过静态回归测试锁定该列的存在与字段绑定
|
||||||
|
|
||||||
|
**技术栈:** Vue.js 2.6.12, Element UI 2.15.14, Node.js 内置 `assert/fs/path`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 任务 1: 编写失败中的回归测试
|
||||||
|
|
||||||
|
**文件:**
|
||||||
|
- 新建: `ruoyi-ui/tests/unit/upload-data-account-column.test.js`
|
||||||
|
|
||||||
|
**步骤 1: 写出失败测试**
|
||||||
|
|
||||||
|
新增一个零依赖静态测试,读取 `UploadData.vue` 源码并断言:
|
||||||
|
|
||||||
|
- 文件列表区域存在 `主体账号` 文案
|
||||||
|
- 存在绑定 `prop="accountNos"` 的表格列
|
||||||
|
|
||||||
|
测试主体可采用以下结构:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const assert = require("assert");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const componentPath = path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"../../src/views/ccdiProject/components/detail/UploadData.vue"
|
||||||
|
);
|
||||||
|
const source = fs.readFileSync(componentPath, "utf8");
|
||||||
|
|
||||||
|
assert(/prop="accountNos"/.test(source), "...");
|
||||||
|
assert(/label="主体账号"/.test(source), "...");
|
||||||
|
```
|
||||||
|
|
||||||
|
**步骤 2: 运行测试确认失败**
|
||||||
|
|
||||||
|
运行:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node ruoyi-ui/tests/unit/upload-data-account-column.test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
预期:
|
||||||
|
- 命令失败
|
||||||
|
- 失败信息指出未找到“主体账号”列或 `accountNos` 绑定
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 任务 2: 修改上传数据列表模板
|
||||||
|
|
||||||
|
**文件:**
|
||||||
|
- 修改: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
|
||||||
|
|
||||||
|
**步骤 1: 新增主体账号列**
|
||||||
|
|
||||||
|
在“主体名称”列后添加“主体账号”列,保持与主体名称相同的兜底展示:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<el-table-column prop="accountNos" label="主体账号" min-width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.accountNos || '-' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
```
|
||||||
|
|
||||||
|
**步骤 2: 保持现有布局不变**
|
||||||
|
|
||||||
|
- 不修改接口请求
|
||||||
|
- 不调整分页、刷新、轮询逻辑
|
||||||
|
- 不修改表格其他列的行为
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 任务 3: 重新运行测试并回归验证
|
||||||
|
|
||||||
|
**文件:**
|
||||||
|
- 验证: `ruoyi-ui/tests/unit/upload-data-account-column.test.js`
|
||||||
|
- 验证: `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js`
|
||||||
|
- 验证: `ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js`
|
||||||
|
|
||||||
|
**步骤 1: 运行新增测试确认通过**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node ruoyi-ui/tests/unit/upload-data-account-column.test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
预期:
|
||||||
|
- 输出 `upload-data-account-column test passed`
|
||||||
|
|
||||||
|
**步骤 2: 运行关联回归测试**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
|
||||||
|
node ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
预期:
|
||||||
|
- 两个测试都通过
|
||||||
|
|
||||||
|
**步骤 3: 执行前端构建验证**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ruoyi-ui
|
||||||
|
npm run build:prod
|
||||||
|
```
|
||||||
|
|
||||||
|
预期:
|
||||||
|
- 构建成功
|
||||||
|
- 无模板编译错误
|
||||||
@@ -77,6 +77,11 @@
|
|||||||
{{ scope.row.enterpriseNames || '-' }}
|
{{ scope.row.enterpriseNames || '-' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column prop="accountNos" label="主体账号" min-width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.accountNos || '-' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="uploadTime" label="上传时间" width="180">
|
<el-table-column prop="uploadTime" label="上传时间" width="180">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ formatUploadTime(scope.row.uploadTime) }}
|
{{ formatUploadTime(scope.row.uploadTime) }}
|
||||||
|
|||||||
21
ruoyi-ui/tests/unit/upload-data-account-column.test.js
Normal file
21
ruoyi-ui/tests/unit/upload-data-account-column.test.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
const assert = require("assert");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const componentPath = path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"../../src/views/ccdiProject/components/detail/UploadData.vue"
|
||||||
|
);
|
||||||
|
const source = fs.readFileSync(componentPath, "utf8");
|
||||||
|
|
||||||
|
assert(
|
||||||
|
/<el-table-column\s+prop="accountNos"\s+label="主体账号"/.test(source),
|
||||||
|
"上传数据文件列表应新增绑定 accountNos 的主体账号列"
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
/scope\.row\.accountNos\s*\|\|\s*['"]-['"]/.test(source),
|
||||||
|
"主体账号列为空时应展示 '-'"
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("upload-data-account-column test passed");
|
||||||
Reference in New Issue
Block a user