cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
9b7a6e2103add78c311d675f16ab219920c6800d
hzdyjs/docs/变更管理/code-adjust-record-2025-01-26-cw-ui-optimization.md
T
wuzhen e4e4679da9 wuzhen updat
2025-07-30 23:24:43 +08:00

11 KiB
Raw Blame History

财务项目申报界面优化修复记录

日期: 2025-01-26
操作人员: AI Assistant
模块: 财务项目申报管理 - 用户界面优化

📋 问题描述

🚨 用户反馈的三个问题

问题1: 搜索区域布局不合理

  • 现象: 所有搜索条件挤在一行，布局混乱
  • 要求: 每一行的搜索条件只保留4个，合理分布

问题2: 列表显示不符合预期

  • 现象: 列表显示所有用户的申报项目
  • 要求: 只显示当前登录账号本人申请的项目

问题3: 审批状态显示异常

  • 现象: 审批状态显示为数字"1"，而不是状态描述
  • 要求: 显示正确的状态描述（如"草稿"、"已提交"等）

🔧 修复方案分析

根本原因分析:

问题1根因:

  • 前端表单使用了 :inline="true" 内联布局
  • 5个搜索条件 + 操作按钮全部挤在一行
  • 缺少响应式布局设计

问题2根因:

  • 后端 buildQueryWrapper 方法缺少用户权限过滤
  • 前端查询接口调用的是通用列表查询，未限制当前用户

问题3根因:

  • 后端代码使用数字字符串状态值："1", "2", "7"
  • 数据库字典配置使用英文字符串："draft", "submitted", "cancelled"
  • 状态值不匹配导致字典映射失败

📝 修复实施

修复1: 搜索区域布局优化

文件: web/src/views/cw/application/index.vue

修改前:

<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  <!-- 所有搜索条件在一行 -->
  <el-form-item label="申报编号">...</el-form-item>
  <el-form-item label="项目名称">...</el-form-item>
  <el-form-item label="项目负责人">...</el-form-item>
  <el-form-item label="审批状态">...</el-form-item>
  <el-form-item label="预算年度">...</el-form-item>
  <el-form-item>
    <el-button type="primary">搜索</el-button>
    <el-button>重置</el-button>
  </el-form-item>
</el-form>

修改后:

<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="80px">
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="申报编号">...</el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="项目名称">...</el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="项目负责人">...</el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="审批状态">...</el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="预算年度">...</el-form-item>
    </el-col>
    <el-col :span="18">
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

改进特性:

  • ✅ 响应式布局: 使用 el-row 和 el-col 网格系统
  • ✅ 合理分布: 第一行4个搜索条件，第二行1个条件 + 操作按钮
  • ✅ 视觉优化: 增加 gutter="20" 间距，提升视觉效果
  • ✅ 统一宽度: 标签宽度调整为 80px，内容对齐

修复2: 数据权限过滤

文件: backend/ruoyi-modules/ruoyi-cw/src/main/java/org/dromara/cw/service/impl/CwProjectApplicationServiceImpl.java

修改位置: buildQueryWrapper 方法

修改前:

private LambdaQueryWrapper<CwProjectApplication> buildQueryWrapper(CwProjectApplicationBo bo) {
    Map<String, Object> params = bo.getParams();
    LambdaQueryWrapper<CwProjectApplication> lqw = Wrappers.lambdaQuery();
    lqw.like(StringUtils.isNotBlank(bo.getApplicationNo()), CwProjectApplication::getApplicationNo, bo.getApplicationNo());
    // ... 其他查询条件
    lqw.eq(bo.getApplicantId() != null, CwProjectApplication::getApplicantId, bo.getApplicantId());
    // ... 其他条件
    return lqw;
}

修改后:

private LambdaQueryWrapper<CwProjectApplication> buildQueryWrapper(CwProjectApplicationBo bo) {
    Map<String, Object> params = bo.getParams();
    LambdaQueryWrapper<CwProjectApplication> lqw = Wrappers.lambdaQuery();
    
    // 自动过滤当前用户的申报记录
    Long currentUserId = LoginHelper.getUserId();
    lqw.eq(CwProjectApplication::getApplicantId, currentUserId);
    
    lqw.like(StringUtils.isNotBlank(bo.getApplicationNo()), CwProjectApplication::getApplicationNo, bo.getApplicationNo());
    // ... 其他查询条件
    // 移除bo.getApplicantId()查询条件，因为已经强制过滤当前用户
    // ... 其他条件
    return lqw;
}

改进特性:

  • ✅ 数据安全: 强制过滤当前用户的申报记录
  • ✅ 权限控制: 用户只能看到自己的申报项目
  • ✅ 简化逻辑: 移除冗余的applicantId查询条件
  • ✅ 自动化: 无需前端传递用户ID，后端自动获取

修复3: 审批状态映射修正

文件: backend/ruoyi-modules/ruoyi-cw/src/main/java/org/dromara/cw/service/impl/CwProjectApplicationServiceImpl.java

问题根因:

  • 后端使用数字状态："1" (草稿), "2" (已提交), "7" (已取消)
  • 字典配置英文状态："draft", "submitted", "cancelled"
  • 状态值不匹配，导致字典无法正确映射

修改范围: 所有涉及状态设置的方法

修改详情:

1. insertByBo 方法:
// 修改前
add.setApprovalStatus("1");

// 修改后
add.setApprovalStatus("draft");
2. saveDraft 方法:
// 修改前
bo.setApprovalStatus("1"); // 草稿状态

// 修改后
bo.setApprovalStatus("draft"); // 草稿状态
3. submitApplication 方法:
// 修改前
if (!"1".equals(application.getApprovalStatus())) {
    throw new RuntimeException("只能提交草稿状态的申报");
}
application.setApprovalStatus("2");

// 修改后
if (!"draft".equals(application.getApprovalStatus())) {
    throw new RuntimeException("只能提交草稿状态的申报");
}
application.setApprovalStatus("submitted");
4. withdrawApplication 方法:
// 修改前
if (!"2".equals(application.getApprovalStatus())) {
    throw new RuntimeException("只能撤回已提交状态的申报");
}
application.setApprovalStatus("1");

// 修改后
if (!"submitted".equals(application.getApprovalStatus())) {
    throw new RuntimeException("只能撤回已提交状态的申报");
}
application.setApprovalStatus("draft");
5. cancelApplication 方法:
// 修改前
application.setApprovalStatus("7");

// 修改后
application.setApprovalStatus("cancelled");

前端按钮逻辑修正:

文件: web/src/views/cw/application/index.vue
<!-- 修改前 -->
<el-button v-if="scope.row.approvalStatus === 'pending'">撤回</el-button>

<!-- 修改后 -->
<el-button v-if="scope.row.approvalStatus === 'submitted'">撤回</el-button>

状态映射关系:

数据库状态 字典值 显示文本 颜色标识
draft draft 草稿 默认
submitted submitted 已提交 默认
approving approving 审批中 蓝色
approved approved 已通过 绿色
rejected rejected 已拒绝 红色
returned returned 已退回 橙色
cancelled cancelled 已取消 灰色

改进特性:

  • ✅ 状态一致性: 后端状态值与字典配置完全匹配
  • ✅ 正确显示: 前端将显示"草稿"、"已提交"等中文描述
  • ✅ 逻辑统一: 所有状态判断和设置使用统一的英文值
  • ✅ 颜色标识: 支持字典配置的颜色分类显示

✅ 修复效果预期

修复前的问题:

  1. ❌ 搜索条件挤在一行，布局混乱
  2. ❌ 显示所有用户的申报项目，数据权限不当
  3. ❌ 审批状态显示为数字"1"，用户体验差

修复后的效果:

  1. ✅ 布局优化: 搜索区域分两行显示，每行4个条件，布局美观
  2. ✅ 权限控制: 用户只能查看自己的申报项目，数据安全
  3. ✅ 状态显示: 正确显示"草稿"、"已提交"等中文状态描述

用户体验提升:

  • ✅ 界面美观: 搜索区域布局合理，视觉效果更佳
  • ✅ 数据聚焦: 用户专注于自己的申报项目，减少干扰
  • ✅ 信息清晰: 状态描述直观明了，操作逻辑更清楚
  • ✅ 操作便捷: 按钮显示逻辑与状态完全匹配

🧪 测试验证建议

布局测试:

  • ✅ 验证搜索区域在不同屏幕尺寸下的显示效果
  • ✅ 确认搜索条件合理分布，无重叠或错位
  • ✅ 检查操作按钮位置合适，易于点击

权限测试:

  • ✅ 使用不同用户账号登录，验证只显示各自的申报记录
  • ✅ 确认搜索功能在当前用户权限范围内正常工作
  • ✅ 验证新增申报自动关联当前用户

状态测试:

  • ✅ 新建申报 → 确认显示"草稿"状态
  • ✅ 提交申报 → 确认显示"已提交"状态
  • ✅ 撤回申报 → 确认状态回到"草稿"
  • ✅ 取消申报 → 确认显示"已取消"状态
  • ✅ 验证操作按钮根据状态正确显示/隐藏

兼容性测试:

  • ✅ 确认现有数据的状态值正确迁移
  • ✅ 验证字典配置生效，颜色标识正确
  • ✅ 检查审批流程中的状态变更逻辑

📋 后续操作指引

需要手动执行:

1. 重新编译后端:

cd backend
mvn clean compile -pl ruoyi-modules/ruoyi-cw

2. 重启后端服务:

# 停止现有服务
ps aux | grep java | grep ruoyi-admin
kill -9 [进程ID]

# 启动新服务
mvn spring-boot:run -pl ruoyi-admin

3. 清理前端缓存:

cd web
npm run dev

4. 数据状态迁移（如果需要）:

-- 如果数据库中存在旧的数字状态值，需要执行以下迁移脚本
UPDATE cw_project_application 
SET approval_status = 
  CASE approval_status
    WHEN '1' THEN 'draft'
    WHEN '2' THEN 'submitted'
    WHEN '3' THEN 'approving'
    WHEN '4' THEN 'approved'
    WHEN '5' THEN 'rejected'
    WHEN '6' THEN 'returned'
    WHEN '7' THEN 'cancelled'
    ELSE approval_status
  END
WHERE approval_status IN ('1','2','3','4','5','6','7');

🎯 技术价值

用户体验:

  • ✅ 界面美观: 响应式搜索布局，适配不同屏幕
  • ✅ 数据聚焦: 权限控制确保用户专注自己的工作
  • ✅ 信息清晰: 状态描述直观，操作逻辑明确

系统安全:

  • ✅ 数据权限: 用户级别的数据隔离，防止越权访问
  • ✅ 自动过滤: 后端强制权限控制，前端无需额外处理

代码质量:

  • ✅ 状态统一: 所有状态使用标准字典值，便于维护
  • ✅ 响应式布局: 现代化的前端界面设计
  • ✅ 逻辑清晰: 状态流转和权限控制逻辑清楚

✅ 状态: 界面优化修复完成，待编译测试
🎯 目标: 提升用户体验，确保数据安全，优化界面交互
📈 价值: 建立用户友好、安全可靠的申报管理界面

Reference in new issue View Git Blame Copy Permalink