feat(ui): 在API层添加批量查询和批量保存方法
This commit is contained in:
745
docs/plans/2026-03-06-model-param-config-backend.md
Normal file
745
docs/plans/2026-03-06-model-param-config-backend.md
Normal file
@@ -0,0 +1,745 @@
|
||||
# 模型参数配置优化 - 后端实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**目标：** 实现模型参数批量查询和批量保存接口，支持前端统一展示和保存所有模型参数
|
||||
|
||||
**技术栈：** Spring Boot 3.5.8 + MyBatis Plus 3.0.5 + Java 21
|
||||
|
||||
**依赖模块：** ccdi-project
|
||||
|
||||
**预计时间：** 2-3小时
|
||||
|
||||
---
|
||||
|
||||
## 📋 任务概览
|
||||
|
||||
| 任务组 | 任务数 | 说明 |
|
||||
|--------|--------|------|
|
||||
| DTO/VO 创建 | 6个 | 数据传输对象 |
|
||||
| Mapper 层 | 2个 | 数据访问层 |
|
||||
| Service 层 | 5个 | 业务逻辑层 |
|
||||
| Controller 层 | 2个 | API接口层 |
|
||||
| 测试 | 1个 | Swagger测试 |
|
||||
| **总计** | **16个** | |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### Task 1: 创建批量查询请求DTO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamAllQueryDTO.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.dto;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
/**
|
||||
* 批量查询所有模型参数DTO
|
||||
*/
|
||||
@Data
|
||||
public class ModelParamAllQueryDTO {
|
||||
|
||||
/** 项目ID（0表示全局配置，>0表示项目配置） */
|
||||
private Long projectId;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamAllQueryDTO.java
|
||||
git commit -m "feat(ccdi-project): 添加批量查询所有模型参数DTO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 创建模型分组VO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/ModelGroupVO.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.vo;
|
||||
|
||||
import lombok.Data;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 模型分组VO（用于按模型分组展示参数）
|
||||
*/
|
||||
@Data
|
||||
public class ModelGroupVO {
|
||||
|
||||
/** 模型编码 */
|
||||
private String modelCode;
|
||||
|
||||
/** 模型名称 */
|
||||
private String modelName;
|
||||
|
||||
/** 参数列表 */
|
||||
private List<ModelParamVO> params;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/ModelGroupVO.java
|
||||
git commit -m "feat(ccdi-project): 添加模型分组VO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 创建批量查询响应VO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/ModelParamAllVO.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.vo;
|
||||
|
||||
import lombok.Data;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 批量查询所有模型参数响应VO
|
||||
*/
|
||||
@Data
|
||||
public class ModelParamAllVO {
|
||||
|
||||
/** 模型列表（包含每个模型及其参数） */
|
||||
private List<ModelGroupVO> models;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/ModelParamAllVO.java
|
||||
git commit -m "feat(ccdi-project): 添加批量查询所有模型参数响应VO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 创建批量保存参数项DTO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ParamValueItem.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.dto;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
/**
|
||||
* 参数值项DTO
|
||||
*/
|
||||
@Data
|
||||
public class ParamValueItem {
|
||||
|
||||
/** 参数编码 */
|
||||
private String paramCode;
|
||||
|
||||
/** 参数值 */
|
||||
private String paramValue;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ParamValueItem.java
|
||||
git commit -m "feat(ccdi-project): 添加参数值项DTO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 创建批量保存模型参数组DTO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamGroupDTO.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.dto;
|
||||
|
||||
import lombok.Data;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 模型参数分组DTO（用于批量保存）
|
||||
*/
|
||||
@Data
|
||||
public class ModelParamGroupDTO {
|
||||
|
||||
/** 模型编码 */
|
||||
private String modelCode;
|
||||
|
||||
/** 该模型下修改过的参数 */
|
||||
private List<ParamValueItem> params;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamGroupDTO.java
|
||||
git commit -m "feat(ccdi-project): 添加模型参数分组DTO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 创建批量保存请求DTO
|
||||
|
||||
**文件：**
|
||||
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamSaveAllDTO.java`
|
||||
|
||||
**步骤 1: 创建类文件**
|
||||
|
||||
```java
|
||||
package com.ruoyi.ccdi.project.domain.dto;
|
||||
|
||||
import lombok.Data;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 批量保存所有模型参数DTO
|
||||
*/
|
||||
@Data
|
||||
public class ModelParamSaveAllDTO {
|
||||
|
||||
/** 项目ID */
|
||||
private Long projectId;
|
||||
|
||||
/** 所有模型的参数修改（只包含修改过的参数） */
|
||||
private List<ModelParamGroupDTO> models;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/dto/ModelParamSaveAllDTO.java
|
||||
git commit -m "feat(ccdi-project): 添加批量保存所有模型参数DTO"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: 在Mapper接口中添加批量查询方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/mapper/CcdiModelParamMapper.java`
|
||||
|
||||
**步骤 1: 添加方法签名**
|
||||
|
||||
在接口中添加：
|
||||
|
||||
```java
|
||||
/**
|
||||
* 根据项目ID查询所有模型参数
|
||||
*
|
||||
* @param projectId 项目ID
|
||||
* @return 参数列表
|
||||
*/
|
||||
List<CcdiModelParam> selectByProjectId(@Param("projectId") Long projectId);
|
||||
```
|
||||
|
||||
**步骤 2: 检查导入**
|
||||
|
||||
确保包含必要的导入：
|
||||
```java
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
import java.util.List;
|
||||
```
|
||||
|
||||
**步骤 3: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/mapper/CcdiModelParamMapper.java
|
||||
git commit -m "feat(ccdi-project): 在Mapper接口中添加批量查询方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 8: 在Mapper XML中添加SQL查询
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/resources/mapper/ccdi/project/CcdiModelParamMapper.xml`
|
||||
|
||||
**步骤 1: 添加SQL语句**
|
||||
|
||||
在 `<mapper>` 标签内添加：
|
||||
|
||||
```xml
|
||||
<!-- 根据项目ID查询所有模型参数 -->
|
||||
<select id="selectByProjectId" resultType="CcdiModelParam">
|
||||
SELECT * FROM ccdi_model_param
|
||||
WHERE project_id = #{projectId}
|
||||
ORDER BY model_code, sort_order
|
||||
</select>
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/resources/mapper/ccdi/project/CcdiModelParamMapper.xml
|
||||
git commit -m "feat(ccdi-project): 在Mapper XML中添加批量查询SQL"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 9: 在Service接口中添加批量查询方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiModelParamService.java`
|
||||
|
||||
**步骤 1: 添加方法签名**
|
||||
|
||||
```java
|
||||
/**
|
||||
* 查询所有模型及其参数（按模型分组）
|
||||
*
|
||||
* @param projectId 项目ID（0表示全局配置）
|
||||
* @return 所有模型的参数配置
|
||||
*/
|
||||
ModelParamAllVO selectAllParams(Long projectId);
|
||||
```
|
||||
|
||||
**步骤 2: 添加导入**
|
||||
|
||||
```java
|
||||
import com.ruoyi.ccdi.project.domain.vo.ModelParamAllVO;
|
||||
```
|
||||
|
||||
**步骤 3: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiModelParamService.java
|
||||
git commit -m "feat(ccdi-project): 在Service接口中添加批量查询方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 在Service接口中添加批量保存方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiModelParamService.java`
|
||||
|
||||
**步骤 1: 添加方法签名**
|
||||
|
||||
```java
|
||||
/**
|
||||
* 批量保存所有模型的参数修改
|
||||
*
|
||||
* @param saveAllDTO 所有模型的参数修改数据
|
||||
*/
|
||||
void saveAllParams(ModelParamSaveAllDTO saveAllDTO);
|
||||
```
|
||||
|
||||
**步骤 2: 添加导入**
|
||||
|
||||
```java
|
||||
import com.ruoyi.ccdi.project.domain.dto.ModelParamSaveAllDTO;
|
||||
```
|
||||
|
||||
**步骤 3: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiModelParamService.java
|
||||
git commit -m "feat(ccdi-project): 在Service接口中添加批量保存方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 11: 添加Service实现所需的导入语句
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java`
|
||||
|
||||
**步骤 1: 添加导入语句**
|
||||
|
||||
在文件顶部导入区域添加：
|
||||
|
||||
```java
|
||||
import com.ruoyi.ccdi.project.domain.dto.ModelParamSaveAllDTO;
|
||||
import com.ruoyi.ccdi.project.domain.dto.ModelParamGroupDTO;
|
||||
import com.ruoyi.ccdi.project.domain.dto.ParamValueItem;
|
||||
import com.ruoyi.ccdi.project.domain.vo.ModelParamAllVO;
|
||||
import com.ruoyi.ccdi.project.domain.vo.ModelGroupVO;
|
||||
import java.util.Comparator;
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java
|
||||
git commit -m "feat(ccdi-project): 添加批量操作所需的导入语句"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 12: 实现批量查询方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java`
|
||||
|
||||
**步骤 1: 实现 selectAllParams 方法**
|
||||
|
||||
在 `CcdiModelParamServiceImpl` 类中添加方法：
|
||||
|
||||
```java
|
||||
@Override
|
||||
public ModelParamAllVO selectAllParams(Long projectId) {
|
||||
// 1. 参数验证
|
||||
if (projectId == null) {
|
||||
projectId = 0L;
|
||||
}
|
||||
|
||||
// 2. 如果是项目查询，根据 configType 决定查询哪组参数
|
||||
Long effectiveProjectId = projectId;
|
||||
if (projectId > 0) {
|
||||
CcdiProject project = projectMapper.selectById(projectId);
|
||||
if (project == null) {
|
||||
throw new ServiceException("项目不存在");
|
||||
}
|
||||
if ("default".equals(project.getConfigType())) {
|
||||
effectiveProjectId = 0L;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 查询所有模型的参数
|
||||
List<CcdiModelParam> allParams = modelParamMapper.selectByProjectId(effectiveProjectId);
|
||||
|
||||
// 4. 按模型分组
|
||||
Map<String, List<CcdiModelParam>> groupedParams = allParams.stream()
|
||||
.collect(Collectors.groupingBy(CcdiModelParam::getModelCode));
|
||||
|
||||
// 5. 转换为VO
|
||||
ModelParamAllVO result = new ModelParamAllVO();
|
||||
List<ModelGroupVO> models = new ArrayList<>();
|
||||
|
||||
groupedParams.forEach((modelCode, params) -> {
|
||||
ModelGroupVO groupVO = new ModelGroupVO();
|
||||
groupVO.setModelCode(modelCode);
|
||||
groupVO.setModelName(params.get(0).getModelName());
|
||||
|
||||
List<ModelParamVO> paramVOs = params.stream()
|
||||
.map(param -> {
|
||||
ModelParamVO vo = new ModelParamVO();
|
||||
BeanUtils.copyProperties(param, vo);
|
||||
return vo;
|
||||
})
|
||||
.collect(Collectors.toList());
|
||||
|
||||
groupVO.setParams(paramVOs);
|
||||
models.add(groupVO);
|
||||
});
|
||||
|
||||
// 6. 按模型编码排序（保证固定顺序）
|
||||
models.sort(Comparator.comparing(ModelGroupVO::getModelCode));
|
||||
|
||||
result.setModels(models);
|
||||
return result;
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java
|
||||
git commit -m "feat(ccdi-project): 实现批量查询所有模型参数方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 13: 实现批量保存方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java`
|
||||
|
||||
**步骤 1: 实现 saveAllParams 方法**
|
||||
|
||||
在 `CcdiModelParamServiceImpl` 类中添加方法：
|
||||
|
||||
```java
|
||||
@Override
|
||||
@Transactional(rollbackFor = Exception.class)
|
||||
public void saveAllParams(ModelParamSaveAllDTO saveAllDTO) {
|
||||
try {
|
||||
// 1. 参数验证
|
||||
if (saveAllDTO.getProjectId() == null) {
|
||||
throw new ServiceException("项目ID不能为空");
|
||||
}
|
||||
if (saveAllDTO.getModels() == null || saveAllDTO.getModels().isEmpty()) {
|
||||
throw new ServiceException("参数列表不能为空");
|
||||
}
|
||||
|
||||
Long projectId = saveAllDTO.getProjectId();
|
||||
|
||||
// 2. 如果是项目保存，检查是否需要复制默认参数
|
||||
if (projectId > 0) {
|
||||
CcdiProject project = projectMapper.selectById(projectId);
|
||||
if (project == null) {
|
||||
throw new ServiceException("项目不存在");
|
||||
}
|
||||
|
||||
// 如果是首次保存（configType=default），需要复制所有模型的系统默认参数
|
||||
if ("default".equals(project.getConfigType())) {
|
||||
for (ModelParamGroupDTO modelGroup : saveAllDTO.getModels()) {
|
||||
copyDefaultParamsToProject(projectId, modelGroup.getModelCode());
|
||||
}
|
||||
|
||||
// 更新项目配置类型为 custom
|
||||
project.setConfigType("custom");
|
||||
projectMapper.updateById(project);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 批量更新所有模型的参数值
|
||||
for (ModelParamGroupDTO modelGroup : saveAllDTO.getModels()) {
|
||||
for (ParamValueItem item : modelGroup.getParams()) {
|
||||
int updated = modelParamMapper.updateParamValue(
|
||||
projectId,
|
||||
modelGroup.getModelCode(),
|
||||
item.getParamCode(),
|
||||
item.getParamValue()
|
||||
);
|
||||
if (updated == 0) {
|
||||
log.warn("参数不存在或未更新，modelCode={}, paramCode={}",
|
||||
modelGroup.getModelCode(), item.getParamCode());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} catch (ServiceException e) {
|
||||
throw e;
|
||||
} catch (Exception e) {
|
||||
log.error("批量保存模型参数失败", e);
|
||||
throw new ServiceException("批量保存模型参数失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java
|
||||
git commit -m "feat(ccdi-project): 实现批量保存所有模型参数方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 14: 在Controller中添加批量查询接口
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiModelParamController.java`
|
||||
|
||||
**步骤 1: 添加导入语句**
|
||||
|
||||
在文件顶部添加：
|
||||
|
||||
```java
|
||||
import com.ruoyi.ccdi.project.domain.dto.ModelParamAllQueryDTO;
|
||||
import com.ruoyi.ccdi.project.domain.dto.ModelParamSaveAllDTO;
|
||||
import com.ruoyi.ccdi.project.domain.vo.ModelParamAllVO;
|
||||
```
|
||||
|
||||
**步骤 2: 添加接口方法**
|
||||
|
||||
在 `CcdiModelParamController` 类中添加：
|
||||
|
||||
```java
|
||||
/**
|
||||
* 查询所有模型及其参数（按模型分组）
|
||||
*/
|
||||
@Operation(summary = "查询所有模型及其参数")
|
||||
@GetMapping("/listAll")
|
||||
public AjaxResult listAll(@Validated ModelParamAllQueryDTO queryDTO) {
|
||||
ModelParamAllVO result = modelParamService.selectAllParams(queryDTO.getProjectId());
|
||||
return success(result);
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 3: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiModelParamController.java
|
||||
git commit -m "feat(ccdi-project): 在Controller中添加批量查询接口"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 15: 在Controller中添加批量保存接口
|
||||
|
||||
**文件：**
|
||||
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiModelParamController.java`
|
||||
|
||||
**步骤 1: 添加接口方法**
|
||||
|
||||
在 `CcdiModelParamController` 类中添加：
|
||||
|
||||
```java
|
||||
/**
|
||||
* 批量保存所有模型的参数修改
|
||||
*/
|
||||
@Operation(summary = "批量保存所有模型参数")
|
||||
@Log(title = "模型参数配置", businessType = BusinessType.UPDATE)
|
||||
@PostMapping("/saveAll")
|
||||
public AjaxResult saveAll(@Validated @RequestBody ModelParamSaveAllDTO saveAllDTO) {
|
||||
modelParamService.saveAllParams(saveAllDTO);
|
||||
return success("保存成功");
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiModelParamController.java
|
||||
git commit -m "feat(ccdi-project): 在Controller中添加批量保存接口"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 16: 使用Swagger测试后端接口
|
||||
|
||||
**检查点：后端开发完成**
|
||||
|
||||
**步骤 1: 启动后端应用**
|
||||
|
||||
提示用户手动启动：
|
||||
```bash
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
**步骤 2: 访问Swagger UI**
|
||||
|
||||
打开浏览器：`http://localhost:8080/swagger-ui/index.html`
|
||||
|
||||
**步骤 3: 测试批量查询接口**
|
||||
|
||||
1. 找到"模型参数配置"分组
|
||||
2. 找到 `GET /ccdi/modelParam/listAll` 接口
|
||||
3. 点击 "Try it out"
|
||||
4. 输入参数：`projectId: 0`
|
||||
5. 点击 "Execute"
|
||||
6. 验证响应：
|
||||
- 状态码：200
|
||||
- 返回数据包含 `models` 数组
|
||||
- 每个模型包含 `modelCode`, `modelName`, `params`
|
||||
|
||||
**预期结果：**
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "操作成功",
|
||||
"data": {
|
||||
"models": [
|
||||
{
|
||||
"modelCode": "LARGE_TRANSACTION",
|
||||
"modelName": "大额交易模型",
|
||||
"params": [
|
||||
{
|
||||
"paramCode": "THRESHOLD_AMOUNT",
|
||||
"paramName": "单笔交易金额阈值",
|
||||
"paramDesc": "单笔交易金额超过此值触发预警",
|
||||
"paramValue": "50000",
|
||||
"paramUnit": "元"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 4: 测试批量保存接口**
|
||||
|
||||
1. 找到 `POST /ccdi/modelParam/saveAll` 接口
|
||||
2. 点击 "Try it out"
|
||||
3. 输入请求体：
|
||||
```json
|
||||
{
|
||||
"projectId": 0,
|
||||
"models": [
|
||||
{
|
||||
"modelCode": "LARGE_TRANSACTION",
|
||||
"params": [
|
||||
{
|
||||
"paramCode": "THRESHOLD_AMOUNT",
|
||||
"paramValue": "60000"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
4. 点击 "Execute"
|
||||
5. 验证响应：状态码 200，msg 为 "保存成功"
|
||||
|
||||
**步骤 5: 测试其他场景**
|
||||
|
||||
- 测试项目配置查询（projectId > 0）
|
||||
- 测试首次保存参数复制
|
||||
- 测试多模型同时保存
|
||||
|
||||
**步骤 6: 提交测试记录**
|
||||
|
||||
```bash
|
||||
mkdir -p docs/test-records
|
||||
git add docs/test-records/
|
||||
git commit -m "test(ccdi-project): 记录后端接口测试结果"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 完成标志
|
||||
|
||||
后端实施完成的标志：
|
||||
- ✅ 所有16个任务执行完成
|
||||
- ✅ Swagger接口测试通过
|
||||
- ✅ 代码已提交到git
|
||||
- ✅ 可以响应前端的批量查询和保存请求
|
||||
|
||||
## 📝 后端API说明
|
||||
|
||||
### 批量查询接口
|
||||
- **URL**: `GET /ccdi/modelParam/listAll?projectId=0`
|
||||
- **返回**: 所有模型的参数配置（按模型分组）
|
||||
|
||||
### 批量保存接口
|
||||
- **URL**: `POST /ccdi/modelParam/saveAll`
|
||||
- **请求体**:
|
||||
```json
|
||||
{
|
||||
"projectId": 0,
|
||||
"models": [
|
||||
{
|
||||
"modelCode": "MODEL_CODE",
|
||||
"params": [
|
||||
{
|
||||
"paramCode": "PARAM_CODE",
|
||||
"paramValue": "NEW_VALUE"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
- **返回**: `{"code": 200, "msg": "保存成功"}`
|
||||
|
||||
---
|
||||
|
||||
**后端实施计划完成！准备前端开发时，使用前端实施计划。**
|
||||
888
docs/plans/2026-03-06-model-param-config-frontend.md
Normal file
888
docs/plans/2026-03-06-model-param-config-frontend.md
Normal file
@@ -0,0 +1,888 @@
|
||||
# 模型参数配置优化 - 前端实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**目标：** 重构全局配置页面和项目配置页面，取消模型下拉切换，改为垂直堆叠展示所有模型参数，实现统一保存
|
||||
|
||||
**技术栈：** Vue 2.6.12 + Element UI 2.15.14 + Axios 0.28.1
|
||||
|
||||
**依赖：** 后端接口已完成（参考后端实施计划）
|
||||
|
||||
**预计时间：** 2-3小时
|
||||
|
||||
---
|
||||
|
||||
## 📋 任务概览
|
||||
|
||||
| 任务组 | 任务数 | 说明 |
|
||||
|--------|--------|------|
|
||||
| API 层 | 2个 | 添加批量接口方法 |
|
||||
| 全局配置页面 | 4个 | 重构页面结构 |
|
||||
| 项目配置页面 | 4个 | 重构页面结构 |
|
||||
| 测试 | 2个 | 功能测试和集成测试 |
|
||||
| **总计** | **12个** | |
|
||||
|
||||
---
|
||||
|
||||
## 前置条件
|
||||
|
||||
**在开始前端开发前，确保：**
|
||||
- ✅ 后端接口已部署完成
|
||||
- ✅ 后端接口测试通过（Swagger测试）
|
||||
- ✅ 后端服务正常运行（http://localhost:8080）
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### Task 1: 在API层添加批量查询方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/api/ccdi/modelParam.js`
|
||||
|
||||
**步骤 1: 打开API文件**
|
||||
|
||||
找到并打开 `ruoyi-ui/src/api/ccdi/modelParam.js` 文件
|
||||
|
||||
**步骤 2: 添加批量查询方法**
|
||||
|
||||
在文件末尾添加：
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* 查询所有模型及其参数（按模型分组）
|
||||
* @param {Object} query - 查询参数
|
||||
* @param {Number} query.projectId - 项目ID（0表示全局配置）
|
||||
* @returns {Promise} 返回所有模型的参数配置
|
||||
*/
|
||||
export function listAllParams(query) {
|
||||
return request({
|
||||
url: '/ccdi/modelParam/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 3: 验证导入**
|
||||
|
||||
确保文件顶部有：
|
||||
```javascript
|
||||
import request from '@/utils/request'
|
||||
```
|
||||
|
||||
**步骤 4: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/api/ccdi/modelParam.js
|
||||
git commit -m "feat(ui): 在API层添加批量查询方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 在API层添加批量保存方法
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/api/ccdi/modelParam.js`
|
||||
|
||||
**步骤 1: 添加批量保存方法**
|
||||
|
||||
在文件末尾添加：
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* 批量保存所有模型的参数修改
|
||||
* @param {Object} data - 保存数据
|
||||
* @param {Number} data.projectId - 项目ID
|
||||
* @param {Array} data.models - 模型参数列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function saveAllParams(data) {
|
||||
return request({
|
||||
url: '/ccdi/modelParam/saveAll',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/api/ccdi/modelParam.js
|
||||
git commit -m "feat(ui): 在API层添加批量保存方法"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 重构全局配置页面 - 模板部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
||||
|
||||
**步骤 1: 备份原文件（可选）**
|
||||
|
||||
```bash
|
||||
cp ruoyi-ui/src/views/ccdi/modelParam/index.vue ruoyi-ui/src/views/ccdi/modelParam/index.vue.backup
|
||||
```
|
||||
|
||||
**步骤 2: 替换整个 template 部分**
|
||||
|
||||
找到 `<template>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="param-config-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h2>全局模型参数管理</h2>
|
||||
</div>
|
||||
|
||||
<!-- 模型参数卡片组（垂直堆叠） -->
|
||||
<div class="model-cards-container">
|
||||
<div
|
||||
v-for="model in modelGroups"
|
||||
:key="model.modelCode"
|
||||
class="model-card"
|
||||
>
|
||||
<!-- 模型标题 -->
|
||||
<div class="model-header">
|
||||
<h3>{{ model.modelName }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 参数表格 -->
|
||||
<el-table :data="model.params" border style="width: 100%">
|
||||
<el-table-column label="监测项" prop="paramName" width="200" />
|
||||
<el-table-column label="描述" prop="paramDesc" />
|
||||
<el-table-column label="阈值设置" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.paramValue"
|
||||
placeholder="请输入阈值"
|
||||
@input="markAsModified(model.modelCode, row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="paramUnit" width="120" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统一保存按钮 -->
|
||||
<div class="button-section">
|
||||
<el-button type="primary" @click="handleSaveAll" :loading="saving">
|
||||
保存所有修改
|
||||
</el-button>
|
||||
<span v-if="modifiedCount > 0" class="modified-tip">
|
||||
已修改 {{ modifiedCount }} 个参数
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
**步骤 3: 暂不提交，继续下一步**
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 重构全局配置页面 - 脚本部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
||||
|
||||
**步骤 1: 替换整个 script 部分**
|
||||
|
||||
找到 `<script>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";
|
||||
|
||||
export default {
|
||||
name: "ModelParam",
|
||||
data() {
|
||||
return {
|
||||
// 模型参数数据（按模型分组）
|
||||
modelGroups: [],
|
||||
// 修改记录（记录哪些参数被修改过）
|
||||
modifiedParams: new Map(),
|
||||
// 保存状态
|
||||
saving: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/** 计算已修改参数数量 */
|
||||
modifiedCount() {
|
||||
let count = 0;
|
||||
this.modifiedParams.forEach(params => {
|
||||
count += params.size;
|
||||
});
|
||||
return count;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAllParams();
|
||||
},
|
||||
methods: {
|
||||
/** 加载所有模型参数 */
|
||||
async loadAllParams() {
|
||||
try {
|
||||
const res = await listAllParams({ projectId: 0 });
|
||||
this.modelGroups = res.data.models;
|
||||
// 清空修改记录
|
||||
this.modifiedParams.clear();
|
||||
} catch (error) {
|
||||
this.$message.error('加载参数失败：' + error.message);
|
||||
console.error('加载参数失败', error);
|
||||
}
|
||||
},
|
||||
|
||||
/** 标记参数为已修改 */
|
||||
markAsModified(modelCode, row) {
|
||||
if (!this.modifiedParams.has(modelCode)) {
|
||||
this.modifiedParams.set(modelCode, new Set());
|
||||
}
|
||||
this.modifiedParams.get(modelCode).add(row.paramCode);
|
||||
},
|
||||
|
||||
/** 保存所有修改 */
|
||||
async handleSaveAll() {
|
||||
// 验证是否有修改
|
||||
if (this.modifiedCount === 0) {
|
||||
this.$message.info('没有需要保存的修改');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造保存数据（只包含修改过的参数）
|
||||
const saveDTO = {
|
||||
projectId: 0,
|
||||
models: []
|
||||
};
|
||||
|
||||
this.modifiedParams.forEach((paramCodes, modelCode) => {
|
||||
const modelGroup = this.modelGroups.find(m => m.modelCode === modelCode);
|
||||
const modifiedParamList = modelGroup.params
|
||||
.filter(p => paramCodes.has(p.paramCode))
|
||||
.map(p => ({
|
||||
paramCode: p.paramCode,
|
||||
paramValue: p.paramValue
|
||||
}));
|
||||
|
||||
if (modifiedParamList.length > 0) {
|
||||
saveDTO.models.push({
|
||||
modelCode: modelCode,
|
||||
params: modifiedParamList
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 保存
|
||||
this.saving = true;
|
||||
try {
|
||||
await saveAllParams(saveDTO);
|
||||
this.$modal.msgSuccess('保存成功');
|
||||
// 清空修改记录并重新加载
|
||||
this.modifiedParams.clear();
|
||||
await this.loadAllParams();
|
||||
} catch (error) {
|
||||
if (error.response && error.response.data && error.response.data.msg) {
|
||||
this.$message.error('保存失败：' + error.response.data.msg);
|
||||
} else {
|
||||
this.$message.error('保存失败：' + error.message);
|
||||
}
|
||||
console.error('保存失败', error);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
**步骤 2: 暂不提交，继续下一步**
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 重构全局配置页面 - 样式部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
|
||||
|
||||
**步骤 1: 替换整个 style 部分**
|
||||
|
||||
找到 `<style>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<style scoped lang="scss">
|
||||
.param-config-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.model-cards-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.model-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e4e7ed;
|
||||
|
||||
.model-header {
|
||||
margin-bottom: 15px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-section {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
|
||||
.modified-tip {
|
||||
margin-left: 15px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdi/modelParam/index.vue
|
||||
git commit -m "feat(ui): 重构全局模型参数配置页面"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 测试全局配置页面
|
||||
|
||||
**检查点：全局配置页面完成**
|
||||
|
||||
**步骤 1: 启动前端开发服务器**
|
||||
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run dev
|
||||
```
|
||||
|
||||
等待编译完成，看到 "Compiled successfully" 提示。
|
||||
|
||||
**步骤 2: 访问页面**
|
||||
|
||||
1. 打开浏览器：`http://localhost:80`
|
||||
2. 登录系统：
|
||||
- 用户名：`admin`
|
||||
- 密码：`admin123`
|
||||
3. 导航到：系统管理 > 模型参数管理
|
||||
|
||||
**步骤 3: 验证页面显示**
|
||||
|
||||
检查以下项目：
|
||||
- [ ] 页面标题显示"全局模型参数管理"
|
||||
- [ ] 所有模型的参数表格按垂直堆叠方式显示
|
||||
- [ ] 每个模型卡片有标题和参数表格
|
||||
- [ ] 参数表格包含：监测项、描述、阈值设置、单位
|
||||
|
||||
**步骤 4: 测试修改功能**
|
||||
|
||||
1. 修改某个参数的值
|
||||
2. 观察底部是否显示"已修改 X 个参数"提示
|
||||
3. 验证修改数量是否准确
|
||||
4. 点击"保存所有修改"按钮
|
||||
5. 验证保存成功提示
|
||||
6. 验证页面是否刷新显示最新数据
|
||||
|
||||
**步骤 5: 测试错误处理**
|
||||
|
||||
1. 尝试清空必填参数值（如果后端有验证）
|
||||
2. 尝试保存，验证错误提示是否友好
|
||||
|
||||
**步骤 6: 提交测试记录**
|
||||
|
||||
```bash
|
||||
mkdir -p docs/test-records
|
||||
echo "## 全局配置页面测试结果\n\n测试时间：$(date)\n\n- [x] 页面显示正确\n- [x] 修改功能正常\n- [x] 保存功能正常\n- [x] 错误处理正常" > docs/test-records/global-config-test.md
|
||||
git add docs/test-records/
|
||||
git commit -m "test(ui): 记录全局配置页面测试结果"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: 重构项目配置页面 - 模板部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||||
|
||||
**步骤 1: 替换整个 template 部分**
|
||||
|
||||
找到 `<template>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="param-config-container">
|
||||
<!-- 模型参数卡片组（垂直堆叠） -->
|
||||
<div class="model-cards-container">
|
||||
<div
|
||||
v-for="model in modelGroups"
|
||||
:key="model.modelCode"
|
||||
class="model-card"
|
||||
>
|
||||
<!-- 模型标题 -->
|
||||
<div class="model-header">
|
||||
<h3>{{ model.modelName }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 参数表格 -->
|
||||
<el-table :data="model.params" border style="width: 100%">
|
||||
<el-table-column label="监测项" prop="paramName" width="200" />
|
||||
<el-table-column label="描述" prop="paramDesc" />
|
||||
<el-table-column label="阈值设置" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-model="row.paramValue"
|
||||
placeholder="请输入阈值"
|
||||
@input="markAsModified(model.modelCode, row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" prop="paramUnit" width="120" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统一保存按钮 -->
|
||||
<div class="button-section">
|
||||
<el-button type="primary" @click="handleSaveAll" :loading="saving">
|
||||
保存所有修改
|
||||
</el-button>
|
||||
<span v-if="modifiedCount > 0" class="modified-tip">
|
||||
已修改 {{ modifiedCount }} 个参数
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
**步骤 2: 暂不提交，继续下一步**
|
||||
|
||||
---
|
||||
|
||||
### Task 8: 重构项目配置页面 - 脚本部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||||
|
||||
**步骤 1: 替换整个 script 部分**
|
||||
|
||||
找到 `<script>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";
|
||||
|
||||
export default {
|
||||
name: 'ParamConfig',
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
projectInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 模型参数数据（按模型分组）
|
||||
modelGroups: [],
|
||||
// 修改记录（记录哪些参数被修改过）
|
||||
modifiedParams: new Map(),
|
||||
// 保存状态
|
||||
saving: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** 计算已修改参数数量 */
|
||||
modifiedCount() {
|
||||
let count = 0;
|
||||
this.modifiedParams.forEach(params => {
|
||||
count += params.size;
|
||||
});
|
||||
return count;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
projectId(newVal) {
|
||||
if (newVal) {
|
||||
this.loadAllParams();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.projectId) {
|
||||
this.loadAllParams();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 加载所有模型参数 */
|
||||
async loadAllParams() {
|
||||
try {
|
||||
const res = await listAllParams({ projectId: this.projectId });
|
||||
this.modelGroups = res.data.models;
|
||||
// 清空修改记录
|
||||
this.modifiedParams.clear();
|
||||
} catch (error) {
|
||||
this.$message.error('加载参数失败：' + error.message);
|
||||
console.error('加载参数失败', error);
|
||||
}
|
||||
},
|
||||
|
||||
/** 标记参数为已修改 */
|
||||
markAsModified(modelCode, row) {
|
||||
if (!this.modifiedParams.has(modelCode)) {
|
||||
this.modifiedParams.set(modelCode, new Set());
|
||||
}
|
||||
this.modifiedParams.get(modelCode).add(row.paramCode);
|
||||
},
|
||||
|
||||
/** 保存所有修改 */
|
||||
async handleSaveAll() {
|
||||
// 验证是否有修改
|
||||
if (this.modifiedCount === 0) {
|
||||
this.$message.info('没有需要保存的修改');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造保存数据（只包含修改过的参数）
|
||||
const saveDTO = {
|
||||
projectId: this.projectId,
|
||||
models: []
|
||||
};
|
||||
|
||||
this.modifiedParams.forEach((paramCodes, modelCode) => {
|
||||
const modelGroup = this.modelGroups.find(m => m.modelCode === modelCode);
|
||||
const modifiedParamList = modelGroup.params
|
||||
.filter(p => paramCodes.has(p.paramCode))
|
||||
.map(p => ({
|
||||
paramCode: p.paramCode,
|
||||
paramValue: p.paramValue
|
||||
}));
|
||||
|
||||
if (modifiedParamList.length > 0) {
|
||||
saveDTO.models.push({
|
||||
modelCode: modelCode,
|
||||
params: modifiedParamList
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 保存
|
||||
this.saving = true;
|
||||
try {
|
||||
await saveAllParams(saveDTO);
|
||||
this.$message.success('保存成功');
|
||||
// 清空修改记录并重新加载
|
||||
this.modifiedParams.clear();
|
||||
await this.loadAllParams();
|
||||
} catch (error) {
|
||||
if (error.response && error.response.data && error.response.data.msg) {
|
||||
this.$message.error('保存失败：' + error.response.data.msg);
|
||||
} else {
|
||||
this.$message.error('保存失败：' + error.message);
|
||||
}
|
||||
console.error('保存失败', error);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**步骤 2: 暂不提交，继续下一步**
|
||||
|
||||
---
|
||||
|
||||
### Task 9: 重构项目配置页面 - 样式部分
|
||||
|
||||
**文件：**
|
||||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
|
||||
|
||||
**步骤 1: 替换整个 style 部分**
|
||||
|
||||
找到 `<style>` 标签，完全替换为：
|
||||
|
||||
```vue
|
||||
<style scoped lang="scss">
|
||||
.param-config-container {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.model-cards-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.model-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e4e7ed;
|
||||
|
||||
.model-header {
|
||||
margin-bottom: 15px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-section {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
|
||||
.modified-tip {
|
||||
margin-left: 15px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**步骤 2: 提交代码**
|
||||
|
||||
```bash
|
||||
git add ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
|
||||
git commit -m "feat(ui): 重构项目内模型参数配置页面"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 测试项目配置页面
|
||||
|
||||
**检查点：项目配置页面完成**
|
||||
|
||||
**步骤 1: 确保前后端都已启动**
|
||||
|
||||
- 后端：`http://localhost:8080` 运行中
|
||||
- 前端：`http://localhost:80` 运行中
|
||||
|
||||
**步骤 2: 访问项目页面**
|
||||
|
||||
1. 打开浏览器：`http://localhost:80`
|
||||
2. 登录系统
|
||||
3. 导航到：初核项目管理
|
||||
4. 点击任意项目的"进入"按钮
|
||||
5. 切换到"参数配置"标签页
|
||||
|
||||
**步骤 3: 验证页面显示**
|
||||
|
||||
- [ ] 页面显示项目的参数配置
|
||||
- [ ] 所有模型的参数表格按垂直堆叠方式显示
|
||||
- [ ] 参数表格包含正确数据
|
||||
|
||||
**步骤 4: 测试使用默认配置的项目**
|
||||
|
||||
1. 创建一个新项目
|
||||
2. 配置类型选择"使用默认配置"
|
||||
3. 进入该项目的参数配置页面
|
||||
4. 验证显示的是系统默认参数
|
||||
5. 修改某个参数并保存
|
||||
6. 验证保存成功
|
||||
7. 验证项目配置类型变为"自定义配置"（可通过项目详情查看）
|
||||
|
||||
**步骤 5: 测试已有自定义配置的项目**
|
||||
|
||||
1. 进入一个已有自定义配置的项目
|
||||
2. 修改参数并保存
|
||||
3. 验证保存成功
|
||||
|
||||
**步骤 6: 测试多模型同时修改**
|
||||
|
||||
1. 同时修改多个模型的参数
|
||||
2. 验证"已修改 X 个参数"提示准确
|
||||
3. 保存并验证所有修改都成功
|
||||
|
||||
**步骤 7: 提交测试记录**
|
||||
|
||||
```bash
|
||||
echo "## 项目配置页面测试结果\n\n测试时间：$(date)\n\n- [x] 页面显示正确\n- [x] 使用默认配置项目测试通过\n- [x] 自定义配置项目测试通过\n- [x] 多模型修改测试通过" > docs/test-records/project-config-test.md
|
||||
git add docs/test-records/
|
||||
git commit -m "test(ui): 记录项目配置页面测试结果"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 11: 端到端集成测试
|
||||
|
||||
**检查点：前后端集成完成**
|
||||
|
||||
**步骤 1: 测试全局配置影响项目配置**
|
||||
|
||||
1. 在全局配置页面修改某个参数（如：LARGE_TRANSACTION 的阈值）
|
||||
2. 保存成功
|
||||
3. 创建一个新项目，选择"使用默认配置"
|
||||
4. 进入该项目的参数配置页面
|
||||
5. 验证显示的是修改后的默认参数值
|
||||
|
||||
**步骤 2: 测试项目配置不影响全局配置**
|
||||
|
||||
1. 在项目配置页面修改某个参数
|
||||
2. 保存成功
|
||||
3. 返回全局配置页面
|
||||
4. 验证全局参数值未改变
|
||||
|
||||
**步骤 3: 测试并发场景**
|
||||
|
||||
1. 打开两个浏览器标签页
|
||||
2. 标签页1：打开全局配置页面
|
||||
3. 标签页2：打开项目配置页面
|
||||
4. 同时修改参数并保存
|
||||
5. 验证各自的修改都成功保存
|
||||
|
||||
**步骤 4: 性能测试**
|
||||
|
||||
1. 打开浏览器开发者工具（F12）
|
||||
2. 切换到 Network 标签
|
||||
3. 访问全局配置页面
|
||||
4. 记录 `listAll` 接口响应时间（应 < 200ms）
|
||||
5. 修改多个参数并保存
|
||||
6. 记录 `saveAll` 接口响应时间（应 < 500ms）
|
||||
|
||||
**步骤 5: 提交测试报告**
|
||||
|
||||
```bash
|
||||
echo "## 端到端集成测试结果\n\n测试时间：$(date)\n\n### 功能测试\n- [x] 全局配置影响项目配置\n- [x] 项目配置不影响全局配置\n- [x] 并发操作正常\n\n### 性能测试\n- [x] listAll接口响应时间 < 200ms\n- [x] saveAll接口响应时间 < 500ms\n\n### 结论\n前后端集成测试通过，功能正常，性能符合要求。" > docs/test-records/e2e-test.md
|
||||
git add docs/test-records/
|
||||
git commit -m "test(ui): 完成端到端集成测试"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 12: 最终提交和推送
|
||||
|
||||
**检查点：所有前端任务完成**
|
||||
|
||||
**步骤 1: 检查所有更改**
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
确保所有文件都已提交。如果有未提交的文件：
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat(ui): 完成模型参数配置页面优化"
|
||||
```
|
||||
|
||||
**步骤 2: 推送到远程仓库**
|
||||
|
||||
```bash
|
||||
git push origin dev
|
||||
```
|
||||
|
||||
**步骤 3: 创建Pull Request（可选）**
|
||||
|
||||
如果需要在GitHub/GitLab上创建PR：
|
||||
|
||||
**PR标题：** `feat(ui): 优化模型参数配置页面布局`
|
||||
|
||||
**PR描述：**
|
||||
```markdown
|
||||
## 变更说明
|
||||
|
||||
### 前端优化
|
||||
- ✅ 取消模型下拉切换
|
||||
- ✅ 改为垂直堆叠展示所有模型参数
|
||||
- ✅ 实现统一保存机制
|
||||
- ✅ 添加修改提示（显示已修改参数数量）
|
||||
- ✅ 全局配置和项目配置页面同步优化
|
||||
|
||||
### 影响范围
|
||||
- `ruoyi-ui/src/api/ccdi/modelParam.js` - API层
|
||||
- `ruoyi-ui/src/views/ccdi/modelParam/index.vue` - 全局配置页面
|
||||
- `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue` - 项目配置页面
|
||||
|
||||
### 测试结果
|
||||
- ✅ 全局配置页面功能正常
|
||||
- ✅ 项目配置页面功能正常
|
||||
- ✅ 端到端集成测试通过
|
||||
- ✅ 性能测试通过
|
||||
|
||||
### 截图
|
||||
（如果有，可以添加前后对比截图）
|
||||
```
|
||||
|
||||
**完成！🎉**
|
||||
|
||||
---
|
||||
|
||||
## ✅ 完成标志
|
||||
|
||||
前端实施完成的标志：
|
||||
- ✅ 所有12个任务执行完成
|
||||
- ✅ 全局配置页面重构完成并测试通过
|
||||
- ✅ 项目配置页面重构完成并测试通过
|
||||
- ✅ 端到端集成测试通过
|
||||
- ✅ 代码已提交并推送到远程仓库
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI效果说明
|
||||
|
||||
### 新布局特点：
|
||||
1. **垂直堆叠**：所有模型的参数表格按顺序垂直排列
|
||||
2. **卡片式设计**：每个模型一个独立的卡片区域
|
||||
3. **统一保存**：底部一个"保存所有修改"按钮
|
||||
4. **修改提示**：实时显示已修改参数数量
|
||||
5. **响应式**：参数表格自适应宽度
|
||||
|
||||
### 用户体验提升：
|
||||
- 无需切换模型，一目了然查看所有参数
|
||||
- 统一保存，操作更简便
|
||||
- 修改提示，避免遗漏
|
||||
- 性能优化，响应更快
|
||||
|
||||
---
|
||||
|
||||
**前端实施计划完成！与后端实施计划配合使用，完成整个优化项目。**
|
||||
1441
docs/plans/2026-03-06-model-param-config-optimization-split.md
Normal file
1441
docs/plans/2026-03-06-model-param-config-optimization-split.md
Normal file
File diff suppressed because it is too large
Load Diff
@@ -38,3 +38,32 @@ export function saveParams(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询所有模型及其参数（按模型分组）
|
||||
* @param {Object} query - 查询参数
|
||||
* @param {Number} query.projectId - 项目ID（0表示全局配置）
|
||||
* @returns {Promise} 返回所有模型的参数配置
|
||||
*/
|
||||
export function listAllParams(query) {
|
||||
return request({
|
||||
url: '/ccdi/modelParam/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量保存所有模型的参数修改
|
||||
* @param {Object} data - 保存数据
|
||||
* @param {Number} data.projectId - 项目ID
|
||||
* @param {Array} data.models - 模型参数列表
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function saveAllParams(data) {
|
||||
return request({
|
||||
url: '/ccdi/modelParam/saveAll',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user