26年寒假生活指导1.23

以下是根据今日工作内容整理的学习日志：

📅 今日学习日志 - 日结单审批系统全栈开发与优化

日期：2026-01-23
项目：日结单管理系统 (RjdDailyWork)

---

1. 🎯 核心目标

完成“日结单审批”功能的端到端开发，解决页面 404、数据无法加载等阻断性问题，并根据业务需求进行深度 UI/UX 优化及逻辑完善。

2. 💻 技术实现与突破

2.1 前端开发 (Vue 3 + Element Plus)

• 组件重构与路由修复
  • 创建 audit.vue 替换原有 HTML 原型，确保与系统整体风格一致。
  • 修复路由 404 问题，在 base.ts 中正确注册 /rjd/daily/audit 静态路由。
  • 解决 I18n 国际化缺失问题，补充 pageApprovalReport 键值。
• 复杂表格交互
  • 嵌套明细：实现 el-table 的展开行功能，展示工作事项明细。
  • 状态保持：攻克了“操作后列表刷新导致明细收起”的体验痛点，通过手动维护 expandedRowKeys 实现刷新后保持展开状态。
  • 交互优化：增加 row-click 事件，支持点击行任意位置展开/收起明细。
• UI/UX 深度定制
  • 视觉分层：将下拉明细区域背景设为浅灰色 (#f0f2f5) 并添加边框圆角，形成“卡片式”视觉效果，显著提升辨识度。
  • 智能预警：实现工时逻辑校验（工时耗时 > 通勤时长），不符合条件的行背景标红，并在数值旁添加红色感叹号图标 (Tooltip 提示)。
  • 布局微调：将“合计”字段移至明细栏左下角，符合用户阅读视线。

2.2 后端开发 (Spring Boot + MyBatis Plus)

• 数据聚合与性能优化
  • 批量填充：在 RjdDailyWorkRecordServiceImpl 中实现数据组装逻辑，提取列表中的关联 ID（产品、客户、合同、事务），通过 selectBatchIds 批量查询名称并填充，避免 N+1 查询问题。
• 多租户隔离突破
  • 问题排查：解决“明细数据存在但前端显示暂无数据”的 Bug。
  • 解决方案：定位到 MyBatis Plus 多租户插件过滤了缺少 tenant_code 的历史数据。在 DAO 层使用 @InterceptorIgnore(tenantLine = "true") 注解，强制忽略租户限制，确保完整读取明细。
• 业务状态流转
  • 审批逻辑：点击“审批” -> 审核状态变更为“已审核”。
  • 驳回闭环：点击“打回” -> 审核状态变更为“已驳回” 且 日结单状态重置为“草稿”，确保填报人可重新编辑提交。

3. 📝 关键代码片段回顾

前端：工时预警与图标显示

<el-table-column prop="totalWorkHours" label="工时耗时">
  <template #default="scope">
    <div style="display: flex; align-items: center; justify-content: center;">
      <!-- 动态样式类 error-text -->
      <span :class="{ 'error-text': isWarning(scope.row) }">{{ scope.row.totalWorkHours }} h</span>
      <!-- 条件渲染警告图标 -->
      <el-tooltip v-if="isWarning(scope.row)" content="工时耗时大于通勤时长" placement="top">
        <el-icon style="color: #f56c6c; margin-left: 5px;"><Warning /></el-icon>
      </el-tooltip>
    </div>
  </template>
</el-table-column>

后端：忽略租户限制查询

@InterceptorIgnore(tenantLine = "true")
@Select("select * from rjd_daily_work_detail where summary_id = #{summaryId}")
List<RjdDailyWorkDetailEntity> selectListBySummaryId(@Param("summaryId") Long summaryId);

4. 🌟 总结

今日工作不仅完成了基础功能的开发，更在用户体验（UX）细节上做了大量打磨（如颜色警示、状态保持）。同时，通过后端拦截器注解的使用，有效解决了复杂场景下的数据查询问题，保证了系统的健壮性。