Compare commits
8 Commits
328e5d9bec
...
34a4baa267
| Author | SHA1 | Date | |
|---|---|---|---|
| 34a4baa267 | |||
| 1b9256533c | |||
| ebc4e61f53 | |||
| 2871b3c00b | |||
| 7e7b68e678 | |||
| 8855507bb4 | |||
| ed565ea1d1 | |||
| 08cc9b2927 |
@@ -135,7 +135,7 @@ public class GetBankStatementResponse {
|
||||
private Integer batchId;
|
||||
|
||||
/** 上传序号 */
|
||||
private Integer uploadSequenceNumber;
|
||||
private Integer uploadSequnceNumber;
|
||||
|
||||
/** 项目id */
|
||||
private Integer groupId;
|
||||
|
||||
@@ -62,8 +62,13 @@ public class CcdiFileUploadController extends BaseController {
|
||||
return AjaxResult.error("文件 " + file.getOriginalFilename() + " 超过50MB限制");
|
||||
}
|
||||
String fileName = file.getOriginalFilename();
|
||||
if (!fileName.endsWith(".xlsx") && !fileName.endsWith(".xls")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持，仅支持Excel文件");
|
||||
if (fileName == null || fileName.trim().isEmpty()) {
|
||||
return AjaxResult.error("文件名不能为空");
|
||||
}
|
||||
String lowerFileName = fileName.toLowerCase();
|
||||
if (!lowerFileName.endsWith(".xlsx") && !lowerFileName.endsWith(".xls")
|
||||
&& !lowerFileName.endsWith(".csv") && !lowerFileName.endsWith(".pdf")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持, 仅支持 PDF, CSV, Excel 文件");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -198,7 +198,7 @@ public class CcdiBankStatement implements Serializable {
|
||||
entity.setTrxType(item.getTransTypeId());
|
||||
entity.setCustomerLeId(item.getCustomerId());
|
||||
entity.setCustomerAccountName(item.getCustomerName());
|
||||
entity.setBatchSequence(item.getUploadSequenceNumber());
|
||||
entity.setBatchSequence(item.getUploadSequnceNumber());
|
||||
|
||||
// 5. 特殊字段处理
|
||||
entity.setMetaJson(null); // 根据文档要求强制设为 null
|
||||
|
||||
103
docs/plans/2026-03-09-csv-pdf-upload-support-design.md
Normal file
103
docs/plans/2026-03-09-csv-pdf-upload-support-design.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# 流水导入CSV和PDF文件格式支持设计
|
||||
|
||||
## 概述
|
||||
|
||||
扩展流水导入功能，支持CSV和PDF格式的文件上传，与前端已有的文件类型配置保持一致。
|
||||
|
||||
## 背景
|
||||
|
||||
### 当前问题
|
||||
|
||||
| 层级 | 当前支持格式 | 问题 |
|
||||
|------|-------------|------|
|
||||
| 前端提示 | PDF、CSV、Excel | - |
|
||||
| 前端校验 | `.pdf`, `.csv`, `.xlsx`, `.xls` | - |
|
||||
| 后端校验 | 仅 `.xlsx`, `.xls` | ❌ 与前端不一致 |
|
||||
|
||||
**根本原因**：后端 `CcdiFileUploadController.java` 第65行只校验Excel格式，导致上传CSV或PDF文件时被拒绝。
|
||||
|
||||
## 设计方案
|
||||
|
||||
### 修改范围
|
||||
|
||||
| 模块 | 文件 | 修改类型 |
|
||||
|------|------|---------|
|
||||
| ccdi-project | CcdiFileUploadController.java | 扩展文件类型校验 |
|
||||
|
||||
### 具体修改
|
||||
|
||||
**文件路径**：`ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java`
|
||||
|
||||
**修改位置**：第65-67行
|
||||
|
||||
**修改前**：
|
||||
```java
|
||||
if (!fileName.endsWith(".xlsx") && !fileName.endsWith(".xls")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持，仅支持Excel文件");
|
||||
}
|
||||
```
|
||||
|
||||
**修改后**：
|
||||
```java
|
||||
String lowerFileName = fileName.toLowerCase();
|
||||
if (!lowerFileName.endsWith(".xlsx") && !lowerFileName.endsWith(".xls")
|
||||
&& !lowerFileName.endsWith(".csv") && !lowerFileName.endsWith(".pdf")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持，仅支持 PDF、CSV、Excel 文件");
|
||||
}
|
||||
```
|
||||
|
||||
### 改进点
|
||||
|
||||
1. **添加格式支持**：支持 `.csv` 和 `.pdf` 文件
|
||||
2. **大小写不敏感**：使用 `toLowerCase()` 处理文件名，支持 `.CSV`、`.Pdf` 等扩展名变体
|
||||
3. **错误提示优化**：与前端提示保持一致，用户体验更统一
|
||||
|
||||
## 技术要点
|
||||
|
||||
### 文件格式与流水分析平台兼容性
|
||||
|
||||
- 流水分析平台API已支持CSV文件上传（根据前期探索确认）
|
||||
- PDF格式同样被平台接受
|
||||
- 后端只负责文件类型校验，实际解析由流水分析平台处理
|
||||
|
||||
### 后续无需修改的部分
|
||||
|
||||
- 前端代码已正确配置，无需修改
|
||||
- 文件上传服务（`CcdiFileUploadServiceImpl`）无需修改
|
||||
- 数据库表结构无需修改
|
||||
|
||||
## 测试要点
|
||||
|
||||
### 功能测试
|
||||
|
||||
1. 上传 `.csv` 文件 → 成功
|
||||
2. 上传 `.pdf` 文件 → 成功
|
||||
3. 上传 `.xlsx` 文件 → 成功（原有功能）
|
||||
4. 上传 `.xls` 文件 → 成功（原有功能）
|
||||
5. 上传 `.txt` 文件 → 失败，提示格式不支持
|
||||
|
||||
### 边界测试
|
||||
|
||||
1. 上传 `.CSV`（大写）→ 成功
|
||||
2. 上传 `.Csv`（混合大小写）→ 成功
|
||||
3. 上传其他格式文件 → 失败
|
||||
|
||||
## 风险评估
|
||||
|
||||
| 风险 | 级别 | 应对措施 |
|
||||
|------|------|---------|
|
||||
| 流水分析平台不支持某些CSV/PDF变体 | 低 | 平台已确认支持，后端不做内容校验 |
|
||||
| 文件大小超限 | 无 | 已有50MB限制，无需额外处理 |
|
||||
|
||||
## 实施步骤
|
||||
|
||||
1. 修改 `CcdiFileUploadController.java` 第65-67行代码
|
||||
2. 启动后端服务
|
||||
3. 通过Swagger或前端页面测试各种格式文件上传
|
||||
4. 验证错误提示正确显示
|
||||
|
||||
## 预计影响
|
||||
|
||||
- **代码改动量**：1个文件，约3行代码
|
||||
- **测试工作量**：约10分钟
|
||||
- **部署风险**：极低（仅扩展支持范围，不影响现有功能）
|
||||
157
docs/plans/2026-03-09-csv-pdf-upload-support.md
Normal file
157
docs/plans/2026-03-09-csv-pdf-upload-support.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# CSV和PDF文件上传支持实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**目标:** 扩展流水导入功能，支持CSV和PDF格式文件上传
|
||||
|
||||
**架构:** 修改后端文件类型校验逻辑，添加 `.csv` 和 `.pdf` 支持，使前后端校验规则一致
|
||||
|
||||
**技术栈:** Spring Boot 3.5.8, Java 21, MyBatis Plus
|
||||
|
||||
---
|
||||
|
||||
## 任务1: 修改后端文件类型校验
|
||||
|
||||
**文件:**
|
||||
- 修改: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java:65-67`
|
||||
|
||||
**步骤1: 修改文件类型校验逻辑**
|
||||
|
||||
定位到 `CcdiFileUploadController.java` 第65-67行，修改校验逻辑：
|
||||
|
||||
**修改前:**
|
||||
```java
|
||||
if (!fileName.endsWith(".xlsx") && !fileName.endsWith(".xls")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持，仅支持Excel文件");
|
||||
}
|
||||
```
|
||||
|
||||
**修改后:**
|
||||
```java
|
||||
String lowerFileName = fileName.toLowerCase();
|
||||
if (!lowerFileName.endsWith(".xlsx") && !lowerFileName.endsWith(".xls")
|
||||
&& !lowerFileName.endsWith(".csv") && !lowerFileName.endsWith(".pdf")) {
|
||||
return AjaxResult.error("文件 " + fileName + " 格式不支持，仅支持 PDF、CSV、Excel 文件");
|
||||
}
|
||||
```
|
||||
|
||||
**步骤2: 验证修改**
|
||||
|
||||
- 确认代码语法正确
|
||||
- 确认导入语句无缺失（无需新增导入）
|
||||
|
||||
---
|
||||
|
||||
## 任务2: 通过Swagger测试接口
|
||||
|
||||
**前置条件:** 后端服务已启动（端口8080）
|
||||
|
||||
**步骤1: 访问Swagger UI**
|
||||
|
||||
浏览器打开: http://localhost:8080/swagger-ui/index.html
|
||||
|
||||
**步骤2: 测试CSV文件上传**
|
||||
|
||||
1. 找到 `POST /upload/batch/{projectId}` 接口
|
||||
2. 点击 "Try it out"
|
||||
3. 选择 projectId（如：1）
|
||||
4. 上传一个 `.csv` 测试文件
|
||||
5. 点击 "Execute"
|
||||
6. **预期结果**: 返回成功响应，包含 batchId
|
||||
|
||||
**步骤3: 测试PDF文件上传**
|
||||
|
||||
1. 使用同一接口
|
||||
2. 上传一个 `.pdf` 测试文件
|
||||
3. **预期结果**: 返回成功响应，包含 batchId
|
||||
|
||||
**步骤4: 测试大小写不敏感**
|
||||
|
||||
1. 上传文件名为 `.CSV`（大写）的文件
|
||||
2. **预期结果**: 返回成功响应
|
||||
|
||||
**步骤5: 测试不支持格式**
|
||||
|
||||
1. 上传 `.txt` 文件
|
||||
2. **预期结果**: 返回错误 "格式不支持，仅支持 PDF、CSV、Excel 文件"
|
||||
|
||||
---
|
||||
|
||||
## 任务3: 前端功能验证
|
||||
|
||||
**前置条件:** 前端服务已启动（端口80）
|
||||
|
||||
**步骤1: 访问前端页面**
|
||||
|
||||
浏览器打开: http://localhost
|
||||
|
||||
登录账号: admin / admin123
|
||||
|
||||
**步骤2: 进入项目详情页面**
|
||||
|
||||
导航到: 项目管理 → 选择项目 → 详情 → 数据上传
|
||||
|
||||
**步骤3: 测试CSV文件上传**
|
||||
|
||||
1. 点击 "批量上传" 按钮
|
||||
2. 拖拽或选择 `.csv` 文件
|
||||
3. 点击 "开始上传"
|
||||
4. **预期结果**: 文件成功上传，无格式错误提示
|
||||
|
||||
**步骤4: 测试PDF文件上传**
|
||||
|
||||
1. 选择 `.pdf` 文件
|
||||
2. 点击 "开始上传"
|
||||
3. **预期结果**: 文件成功上传，无格式错误提示
|
||||
|
||||
---
|
||||
|
||||
## 任务4: 提交代码
|
||||
|
||||
**步骤1: 查看修改状态**
|
||||
|
||||
运行:
|
||||
```bash
|
||||
cd D:/ccdi/ccdi
|
||||
git status
|
||||
```
|
||||
|
||||
预期输出:
|
||||
```
|
||||
modified: ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java
|
||||
```
|
||||
|
||||
**步骤2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiFileUploadController.java
|
||||
git commit -m "feat(ccdi-project): 流水导入支持CSV和PDF文件格式"
|
||||
```
|
||||
|
||||
**步骤3: 推送到远程仓库（可选）**
|
||||
|
||||
```bash
|
||||
git push origin dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 实施检查清单
|
||||
|
||||
- [ ] 后端文件类型校验已修改
|
||||
- [ ] CSV文件上传测试通过（Swagger）
|
||||
- [ ] PDF文件上传测试通过（Swagger）
|
||||
- [ ] 大小写不敏感测试通过
|
||||
- [ ] 不支持格式被正确拒绝
|
||||
- [ ] 前端CSV上传功能正常
|
||||
- [ ] 前端PDF上传功能正常
|
||||
- [ ] 代码已提交到git
|
||||
|
||||
---
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **测试文件准备**: 准备好 `.csv`、`.pdf`、`.xlsx`、`.txt` 格式的测试文件
|
||||
2. **文件大小**: 测试文件不超过50MB
|
||||
3. **流水分析平台**: 确认平台支持CSV和PDF格式（已确认支持）
|
||||
4. **不影响现有功能**: Excel文件上传功能保持不变
|
||||
240
docs/plans/2026-03-09-param-config-type-display-design.md
Normal file
240
docs/plans/2026-03-09-param-config-type-display-design.md
Normal file
@@ -0,0 +1,240 @@
|
||||
# 参数配置类型显示设计文档
|
||||
|
||||
## 概述
|
||||
|
||||
在项目详情页面的参数配置页面，显示当前参数配置是默认配置还是自定义配置。
|
||||
|
||||
## 需求分析
|
||||
|
||||
### 背景
|
||||
|
||||
当前系统中，项目可以使用两种参数配置方式：
|
||||
- **默认配置**：使用系统级默认参数（`configType = 'default'`）
|
||||
- **自定义配置**：项目独立的自定义参数（`configType = 'custom'`）
|
||||
|
||||
用户在查看项目详情时，无法直观地识别当前项目使用的是哪种配置方式。
|
||||
|
||||
### 目标
|
||||
|
||||
在项目详情页面顶部，项目名称旁边添加配置类型标签，让用户能够快速识别当前项目的参数配置类型。
|
||||
|
||||
## 设计方案
|
||||
|
||||
### 1. 展示位置
|
||||
|
||||
**页面位置：** 项目详情页面顶部（`detail.vue`）
|
||||
|
||||
**具体位置：** 项目名称和状态标签旁边
|
||||
|
||||
**展示效果：**
|
||||
```
|
||||
[返回] 2024年Q1初核项目 [进行中] [默认配置]
|
||||
最后更新时间：2026-03-09 10:30:00
|
||||
```
|
||||
|
||||
### 2. 标签样式
|
||||
|
||||
使用 Element UI 的 `el-tag` 组件，采用不同颜色区分：
|
||||
|
||||
| 配置类型 | 标签文字 | 颜色类型 | 视觉效果 |
|
||||
|---------|---------|---------|---------|
|
||||
| 默认配置 | "默认配置" | `info`（蓝色） | 蓝色背景标签 |
|
||||
| 自定义配置 | "自定义配置" | `warning`（橙色） | 橙色背景标签 |
|
||||
|
||||
### 3. 实现方案
|
||||
|
||||
**方案选择：** 纯前端实现
|
||||
|
||||
**理由：**
|
||||
- ✅ 实现简单快速
|
||||
- ✅ 不需要修改后端代码
|
||||
- ✅ 利用现有数据（`projectInfo.configType`）
|
||||
- ✅ 性能最优（无额外请求）
|
||||
- ✅ 风险最小
|
||||
|
||||
**数据流：**
|
||||
1. 用户打开项目详情页面
|
||||
2. 前端调用 `getProject(projectId)` 获取项目信息
|
||||
3. 后端返回包含 `configType` 字段的项目数据
|
||||
4. 前端根据 `configType` 值显示对应的配置类型标签
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 前端修改
|
||||
|
||||
**修改文件：** `ruoyi-ui/src/views/ccdiProject/detail.vue`
|
||||
|
||||
**修改位置：** 第 10-19 行的页面标题区域
|
||||
|
||||
**代码实现：**
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="detail-header">
|
||||
<div class="header-left">
|
||||
<el-button size="small" icon="el-icon-back" @click="handleBack"
|
||||
>返回</el-button
|
||||
>
|
||||
<div class="title-section">
|
||||
<div class="page-title">
|
||||
<h2>
|
||||
{{ projectInfo.projectName }}
|
||||
</h2>
|
||||
<el-tag
|
||||
:type="getStatusType(projectInfo.projectStatus)"
|
||||
size="small"
|
||||
>
|
||||
{{ getStatusLabel(projectInfo.projectStatus) }}
|
||||
</el-tag>
|
||||
<!-- 新增：配置类型标签 -->
|
||||
<el-tag
|
||||
:type="getConfigTypeStyle(projectInfo.configType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getConfigTypeLabel(projectInfo.configType) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<p class="update-time">
|
||||
最后更新时间：{{ formatUpdateTime(projectInfo.updateTime) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ... 其他代码 ... -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
// ... 现有方法 ...
|
||||
|
||||
/**
|
||||
* 获取配置类型标签文字
|
||||
* @param {string} configType - 配置类型
|
||||
* @returns {string} 标签文字
|
||||
*/
|
||||
getConfigTypeLabel(configType) {
|
||||
const configTypeMap = {
|
||||
'default': '默认配置',
|
||||
'custom': '自定义配置'
|
||||
};
|
||||
return configTypeMap[configType] || '默认配置';
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取配置类型标签样式
|
||||
* @param {string} configType - 配置类型
|
||||
* @returns {string} Element UI tag 类型
|
||||
*/
|
||||
getConfigTypeStyle(configType) {
|
||||
const styleMap = {
|
||||
'default': 'info', // 蓝色
|
||||
'custom': 'warning' // 橙色
|
||||
};
|
||||
return styleMap[configType] || 'info';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 后端依赖
|
||||
|
||||
**无需修改后端代码**
|
||||
|
||||
**已有数据支持：**
|
||||
- `CcdiProject` 实体类已包含 `configType` 字段
|
||||
- `getProject()` 接口已返回完整的 `configType` 数据
|
||||
- 数据库表 `ccdi_project` 已存储 `config_type` 字段
|
||||
|
||||
### 数据字典
|
||||
|
||||
系统已存在配置类型字典（在 `sql/ccdi_project.sql` 中初始化）：
|
||||
|
||||
```sql
|
||||
INSERT INTO sys_dict_type (dict_name, dict_type, status, create_by, create_time, remark)
|
||||
VALUES ('配置方式', 'ccdi_config_type', '0', 'admin', NOW(), '项目配置方式');
|
||||
|
||||
INSERT INTO sys_dict_data (dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time)
|
||||
VALUES
|
||||
(1, '全局默认配置', 'default', 'ccdi_config_type', '', 'primary', 'Y', '0', 'admin', NOW()),
|
||||
(2, '自定义配置', 'custom', 'ccdi_config_type', '', 'warning', 'N', '0', 'admin', NOW());
|
||||
```
|
||||
|
||||
**注意：** 虽然系统已有配置类型字典，但本设计采用纯前端硬编码方式，理由是：
|
||||
- 配置类型固定（仅两种），无需动态配置
|
||||
- 避免增加字典查询的复杂度
|
||||
- 简化实现，提高性能
|
||||
|
||||
## 测试方案
|
||||
|
||||
### 功能测试
|
||||
|
||||
**测试场景：**
|
||||
|
||||
1. **默认配置项目**
|
||||
- 前提：项目 `configType = 'default'`
|
||||
- 预期：显示蓝色标签 "默认配置"
|
||||
|
||||
2. **自定义配置项目**
|
||||
- 前提：项目 `configType = 'custom'`
|
||||
- 预期：显示橙色标签 "自定义配置"
|
||||
|
||||
3. **配置类型为空**
|
||||
- 前提：项目 `configType` 为 `null` 或 `undefined`
|
||||
- 预期：显示蓝色标签 "默认配置"（默认值）
|
||||
|
||||
4. **配置类型切换**
|
||||
- 前提：用户修改参数后保存
|
||||
- 预期：配置类型从 `default` 切换为 `custom`，标签从蓝色变为橙色
|
||||
|
||||
### 边界测试
|
||||
|
||||
- 新建项目默认使用默认配置
|
||||
- 刷新页面后标签状态保持一致
|
||||
- 不同浏览器显示效果一致
|
||||
|
||||
### 兼容性测试
|
||||
|
||||
- Chrome、Firefox、Edge 等主流浏览器
|
||||
- 不同分辨率下的显示效果
|
||||
|
||||
## 实施影响
|
||||
|
||||
### 用户影响
|
||||
|
||||
- **正面影响：** 用户可以直观识别项目的参数配置类型
|
||||
- **负面影响：** 无
|
||||
|
||||
### 系统影响
|
||||
|
||||
- **性能影响：** 极小（仅增加一个标签渲染）
|
||||
- **兼容性：** 完全向后兼容
|
||||
- **风险：** 无（纯前端展示，不影响业务逻辑）
|
||||
|
||||
## 实施步骤
|
||||
|
||||
1. **修改前端代码** - 修改 `detail.vue` 文件
|
||||
2. **本地测试** - 验证标签显示正确
|
||||
3. **提交代码** - 提交到 Git 仓库
|
||||
4. **部署上线** - 正式环境部署
|
||||
|
||||
## 验收标准
|
||||
|
||||
✅ 项目详情页面顶部显示配置类型标签
|
||||
✅ 默认配置显示蓝色 "默认配置" 标签
|
||||
✅ 自定义配置显示橙色 "自定义配置" 标签
|
||||
✅ 标签位置在状态标签旁边
|
||||
✅ 标签样式与设计一致
|
||||
✅ 不影响现有功能
|
||||
|
||||
## 后续优化
|
||||
|
||||
暂无后续优化计划。
|
||||
|
||||
---
|
||||
|
||||
**设计日期：** 2026-03-09
|
||||
**设计人员：** Claude Code
|
||||
**审核状态：** 待审核
|
||||
@@ -0,0 +1,300 @@
|
||||
# 参数配置类型显示实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**目标:** 在项目详情页面顶部添加配置类型标签，显示当前项目使用默认配置还是自定义配置
|
||||
|
||||
**架构:** 纯前端实现，利用已有的 projectInfo.configType 字段，使用 Element UI 的 el-tag 组件在不同颜色区分配置类型
|
||||
|
||||
**技术栈:** Vue.js 2.6.12, Element UI 2.15.14
|
||||
|
||||
---
|
||||
|
||||
## 前置条件
|
||||
|
||||
- ✅ 后端 CcdiProject 实体类已包含 configType 字段
|
||||
- ✅ getProject() 接口已返回 configType 数据
|
||||
- ✅ 数据库表 ccdi_project 已存储 config_type 字段
|
||||
- ✅ 前端项目详情页面已存在 detail.vue 文件
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 任务 1: 添加配置类型标签转换方法
|
||||
|
||||
**文件:**
|
||||
- 修改: `ruoyi-ui/src/views/ccdiProject/detail.vue` (methods 部分)
|
||||
|
||||
**步骤 1: 添加 getConfigTypeLabel 方法**
|
||||
|
||||
在 `methods` 对象中添加配置类型标签文字转换方法（建议添加在 `getStatusLabel` 方法后面）：
|
||||
|
||||
```javascript
|
||||
/** 获取配置类型标签文字 */
|
||||
getConfigTypeLabel(configType) {
|
||||
const configTypeMap = {
|
||||
'default': '默认配置',
|
||||
'custom': '自定义配置'
|
||||
};
|
||||
return configTypeMap[configType] || '默认配置';
|
||||
},
|
||||
```
|
||||
|
||||
**步骤 2: 添加 getConfigTypeStyle 方法**
|
||||
|
||||
在刚才添加的方法后面添加配置类型样式转换方法：
|
||||
|
||||
```javascript
|
||||
/** 获取配置类型标签样式 */
|
||||
getConfigTypeStyle(configType) {
|
||||
const styleMap = {
|
||||
'default': 'info', // 蓝色
|
||||
'custom': 'warning' // 橙色
|
||||
};
|
||||
return styleMap[configType] || 'info';
|
||||
},
|
||||
```
|
||||
|
||||
**预期位置:** 在第 220 行 `getStatusLabel` 方法后面
|
||||
|
||||
**注意:** 两个方法之间需要逗号分隔
|
||||
|
||||
---
|
||||
|
||||
### 任务 2: 在模板中添加配置类型标签
|
||||
|
||||
**文件:**
|
||||
- 修改: `ruoyi-ui/src/views/ccdiProject/detail.vue:10-19`
|
||||
|
||||
**步骤 1: 在状态标签后添加配置类型标签**
|
||||
|
||||
在项目标题区域，在状态标签 `</el-tag>` 后面添加配置类型标签（约第 18 行后）：
|
||||
|
||||
```vue
|
||||
<!-- 配置类型标签 -->
|
||||
<el-tag
|
||||
:type="getConfigTypeStyle(projectInfo.configType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getConfigTypeLabel(projectInfo.configType) }}
|
||||
</el-tag>
|
||||
```
|
||||
|
||||
**完整上下文:**
|
||||
|
||||
```vue
|
||||
<div class="page-title">
|
||||
<h2>
|
||||
{{ projectInfo.projectName }}
|
||||
</h2>
|
||||
<el-tag
|
||||
:type="getStatusType(projectInfo.projectStatus)"
|
||||
size="small"
|
||||
>
|
||||
{{ getStatusLabel(projectInfo.projectStatus) }}
|
||||
</el-tag>
|
||||
<!-- 配置类型标签 - 新增 -->
|
||||
<el-tag
|
||||
:type="getConfigTypeStyle(projectInfo.configType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getConfigTypeLabel(projectInfo.configType) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
```
|
||||
|
||||
**注意:**
|
||||
- 标签使用 `size="small"` 与状态标签保持一致
|
||||
- 使用 `:type` 动态绑定样式
|
||||
- 位置在状态标签后面，与状态标签同级
|
||||
|
||||
---
|
||||
|
||||
### 任务 3: 本地测试验证
|
||||
|
||||
**步骤 1: 启动前端开发服务器**
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**预期:** 前端服务启动在 http://localhost:80
|
||||
|
||||
**步骤 2: 登录系统**
|
||||
|
||||
访问 http://localhost:80，使用测试账号登录：
|
||||
- 用户名: `admin`
|
||||
- 密码: `admin123`
|
||||
|
||||
**步骤 3: 测试默认配置项目**
|
||||
|
||||
1. 进入"纪检初核管理" -> "项目管理"
|
||||
2. 点击一个使用默认配置的项目（configType='default'）
|
||||
3. 查看项目详情页面顶部
|
||||
|
||||
**预期结果:**
|
||||
- 项目名称旁边显示两个标签：[状态] [默认配置]
|
||||
- "默认配置"标签为蓝色（info 类型）
|
||||
- 标签显示正常，无样式错乱
|
||||
|
||||
**步骤 4: 测试自定义配置项目**
|
||||
|
||||
1. 在参数配置页面修改任意参数值
|
||||
2. 点击"保存所有修改"
|
||||
3. 观察页面顶部标签变化
|
||||
|
||||
**预期结果:**
|
||||
- 保存成功后，标签从蓝色 "默认配置" 变为橙色 "自定义配置"
|
||||
- 配置类型已从 'default' 切换为 'custom'
|
||||
|
||||
**步骤 5: 测试边界情况**
|
||||
|
||||
刷新页面，验证标签状态保持一致
|
||||
|
||||
**预期结果:**
|
||||
- 刷新后标签颜色和文字与刷新前一致
|
||||
- 无 JavaScript 控制台错误
|
||||
|
||||
**步骤 6: 测试浏览器兼容性**
|
||||
|
||||
在不同浏览器（Chrome、Firefox、Edge）中重复步骤 3-5
|
||||
|
||||
**预期结果:**
|
||||
- 各浏览器显示效果一致
|
||||
- 标签样式正常
|
||||
|
||||
---
|
||||
|
||||
### 任务 4: 提交代码到 Git
|
||||
|
||||
**步骤 1: 查看修改内容**
|
||||
|
||||
```bash
|
||||
git status
|
||||
git diff ruoyi-ui/src/views/ccdiProject/detail.vue
|
||||
```
|
||||
|
||||
**预期:** 只修改了 detail.vue 文件，修改内容符合设计
|
||||
|
||||
**步骤 2: 添加文件到暂存区**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/detail.vue
|
||||
```
|
||||
|
||||
**步骤 3: 提交更改**
|
||||
|
||||
```bash
|
||||
git commit -m "$(cat <<'EOF'
|
||||
feat(ui): 在项目详情页面添加配置类型标签显示
|
||||
|
||||
- 在项目名称旁添加配置类型标签
|
||||
- 默认配置显示蓝色"默认配置"标签
|
||||
- 自定义配置显示橙色"自定义配置"标签
|
||||
- 添加 getConfigTypeLabel 和 getConfigTypeStyle 方法
|
||||
- 纯前端实现，无需后端修改
|
||||
|
||||
Ref: docs/plans/2026-03-09-param-config-type-display-design.md
|
||||
EOF
|
||||
)"
|
||||
```
|
||||
|
||||
**步骤 4: 验证提交**
|
||||
|
||||
```bash
|
||||
git log -1 --stat
|
||||
```
|
||||
|
||||
**预期输出:**
|
||||
```
|
||||
commit [hash]
|
||||
Author: [Your Name] <[Your Email]>
|
||||
Date: [Date]
|
||||
|
||||
feat(ui): 在项目详情页面添加配置类型标签显示
|
||||
|
||||
- 在项目名称旁添加配置类型标签
|
||||
- 默认配置显示蓝色"默认配置"标签
|
||||
- 自定义配置显示橙色"自定义配置"标签
|
||||
- 添加 getConfigTypeLabel 和 getConfigTypeStyle 方法
|
||||
- 纯前端实现，无需后端修改
|
||||
|
||||
Ref: docs/plans/2026-03-09-param-config-type-display-design.md
|
||||
|
||||
ruoyi-ui/src/views/ccdiProject/detail.vue | [lines changed]
|
||||
1 file changed, [stats]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验收清单
|
||||
|
||||
实施完成后，请确认以下验收标准：
|
||||
|
||||
- [ ] 项目详情页面顶部显示配置类型标签
|
||||
- [ ] 默认配置显示蓝色 "默认配置" 标签
|
||||
- [ ] 自定义配置显示橙色 "自定义配置" 标签
|
||||
- [ ] 标签位置在状态标签旁边
|
||||
- [ ] 标签样式与设计一致（大小、颜色）
|
||||
- [ ] 修改参数保存后，标签正确切换
|
||||
- [ ] 刷新页面后标签状态保持一致
|
||||
- [ ] 无 JavaScript 控制台错误
|
||||
- [ ] 不影响现有功能
|
||||
- [ ] 代码已提交到 Git
|
||||
|
||||
---
|
||||
|
||||
## 回滚方案
|
||||
|
||||
如果实施后出现问题，可以快速回滚：
|
||||
|
||||
```bash
|
||||
# 查看最近的提交
|
||||
git log --oneline -5
|
||||
|
||||
# 回滚到上一个版本
|
||||
git revert HEAD
|
||||
|
||||
# 或者硬回滚（谨慎使用）
|
||||
git reset --hard HEAD~1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
**Q1: 标签不显示怎么办？**
|
||||
|
||||
检查：
|
||||
1. `projectInfo.configType` 是否有值（在浏览器控制台打印）
|
||||
2. 方法名是否正确拼写
|
||||
3. 模板语法是否正确
|
||||
|
||||
**Q2: 标签颜色不对怎么办？**
|
||||
|
||||
检查：
|
||||
1. `getConfigTypeStyle` 方法返回值是否正确
|
||||
2. Element UI 版本是否支持 info/warning 类型
|
||||
|
||||
**Q3: 修改参数后标签不变化怎么办？**
|
||||
|
||||
检查：
|
||||
1. 参数保存是否成功
|
||||
2. 后端是否正确更新了 configType
|
||||
3. 页面是否重新加载了 projectInfo
|
||||
|
||||
---
|
||||
|
||||
## 相关文档
|
||||
|
||||
- 设计文档: `docs/plans/2026-03-09-param-config-type-display-design.md`
|
||||
- Element UI Tag 组件: https://element.eleme.cn/#/zh-CN/component/tag
|
||||
- 项目 CLAUDE.md: `CLAUDE.md`
|
||||
|
||||
---
|
||||
|
||||
**计划创建日期:** 2026-03-09
|
||||
**预计实施时间:** 15-30 分钟
|
||||
**难度等级:** 简单
|
||||
@@ -17,6 +17,14 @@
|
||||
>
|
||||
{{ getStatusLabel(projectInfo.projectStatus) }}
|
||||
</el-tag>
|
||||
<!-- 配置类型标签 -->
|
||||
<el-tag
|
||||
:type="getConfigTypeStyle(projectInfo.configType)"
|
||||
size="small"
|
||||
style="margin-left: 8px"
|
||||
>
|
||||
{{ getConfigTypeLabel(projectInfo.configType) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<p class="update-time">
|
||||
@@ -219,6 +227,22 @@ export default {
|
||||
};
|
||||
return statusMap[status] || "未知";
|
||||
},
|
||||
/** 获取配置类型标签文字 */
|
||||
getConfigTypeLabel(configType) {
|
||||
const configTypeMap = {
|
||||
"default": "默认配置",
|
||||
"custom": "自定义配置"
|
||||
}
|
||||
return configTypeMap[configType] || "默认配置"
|
||||
},
|
||||
/** 获取配置类型标签样式 */
|
||||
getConfigTypeStyle(configType) {
|
||||
const styleMap = {
|
||||
"default": "info", // 蓝色
|
||||
"custom": "warning" // 橙色
|
||||
}
|
||||
return styleMap[configType] || "info"
|
||||
},
|
||||
/** 标签页切换 */
|
||||
handleTabChange(tab) {
|
||||
console.log("切换到标签页:", tab.name);
|
||||
|
||||
Reference in New Issue
Block a user