在样品管理页面添加备注列
parent
a5e2bfef4b
commit
94fdd9a38c
|
|
@ -0,0 +1,173 @@
|
|||
# Design Document
|
||||
|
||||
## Overview
|
||||
|
||||
本设计文档描述了在样品管理列表中添加备注列并实现 tooltip 功能的技术方案。该功能将利用 Element UI 的 el-table-column 组件的 show-overflow-tooltip 属性，实现当备注内容超出列宽时自动显示省略号，并在鼠标悬停时通过 tooltip 展示完整内容。
|
||||
|
||||
## Architecture
|
||||
|
||||
该功能是一个纯前端实现，不涉及后端 API 修改。主要修改点在样品管理页面的 Vue 组件中。
|
||||
|
||||
### 组件层次结构
|
||||
|
||||
```
|
||||
WarehouseSample (Vue Component)
|
||||
└── el-table
|
||||
├── el-table-column (入库单号)
|
||||
├── el-table-column (样品型号)
|
||||
├── el-table-column (样品SN号)
|
||||
├── el-table-column (硬件版本号)
|
||||
├── el-table-column (外测状态)
|
||||
├── el-table-column (计划测试项)
|
||||
├── el-table-column (测试截止日期)
|
||||
├── el-table-column (状态)
|
||||
├── el-table-column (备注) ← 新增
|
||||
└── el-table-column (操作)
|
||||
```
|
||||
|
||||
## Components and Interfaces
|
||||
|
||||
### 修改的组件
|
||||
|
||||
**文件路径**: `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue`
|
||||
|
||||
#### 新增表格列
|
||||
|
||||
在 `<el-table>` 组件中，在状态列和操作列之间添加备注列：
|
||||
|
||||
```vue
|
||||
<el-table-column
|
||||
label="备注"
|
||||
align="center"
|
||||
prop="remark"
|
||||
:show-overflow-tooltip="true"
|
||||
width="150"
|
||||
/>
|
||||
```
|
||||
|
||||
### Element UI 组件属性说明
|
||||
|
||||
- **label**: 列标题，显示为"备注"
|
||||
- **align**: 对齐方式，设置为"center"居中对齐
|
||||
- **prop**: 绑定的数据字段，对应 sampleList 中每个对象的 remark 属性
|
||||
- **show-overflow-tooltip**: Element UI 内置属性，当内容超出时自动显示 tooltip
|
||||
- **width**: 列宽度，设置为 150px 以平衡显示空间和表格整体布局
|
||||
|
||||
## Data Models
|
||||
|
||||
### 样品数据模型
|
||||
|
||||
样品列表数据已包含 remark 字段，无需修改数据结构：
|
||||
|
||||
```javascript
|
||||
{
|
||||
sampleId: Number,
|
||||
receiptNo: String,
|
||||
sampleModel: String,
|
||||
sampleSn: String,
|
||||
hardwareVersion: String,
|
||||
externalStatus: String,
|
||||
testItems: String,
|
||||
testDeadline: String,
|
||||
status: String,
|
||||
remark: String // 备注字段，已存在于后端返回数据中
|
||||
}
|
||||
```
|
||||
|
||||
## Correctness Properties
|
||||
|
||||
*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||
|
||||
### Property 1: 备注列渲染完整性
|
||||
|
||||
*For any* 样品列表数据，当页面渲染完成后，表格中应该存在一个 label 为"备注"的列，且该列位于状态列之后、操作列之前
|
||||
|
||||
**Validates: Requirements 1.1, 1.2**
|
||||
|
||||
### Property 2: Tooltip 显示条件
|
||||
|
||||
*For any* 备注单元格，当且仅当备注内容的实际渲染宽度超过列宽度时，鼠标悬停应触发 tooltip 显示
|
||||
|
||||
**Validates: Requirements 2.1, 2.2, 2.4**
|
||||
|
||||
### Property 3: 空备注处理
|
||||
|
||||
*For any* 样品数据，如果 remark 字段为 null、undefined 或空字符串，则对应单元格应显示为空白，且不触发 tooltip
|
||||
|
||||
**Validates: Requirements 1.3**
|
||||
|
||||
### Property 4: 样式一致性
|
||||
|
||||
*For any* 备注列单元格，其字体、字号、颜色和对齐方式应与同一行其他文本列（如样品型号、样品SN号）保持一致
|
||||
|
||||
**Validates: Requirements 3.1, 3.2, 3.3**
|
||||
|
||||
## Error Handling
|
||||
|
||||
### 数据缺失处理
|
||||
|
||||
- 当 API 返回的样品数据中不包含 remark 字段时，Vue 会将其视为 undefined，单元格显示为空白
|
||||
- Element UI 的 show-overflow-tooltip 会自动处理 null/undefined 值，不会报错
|
||||
|
||||
### 浏览器兼容性
|
||||
|
||||
- Element UI 的 tooltip 功能基于 Popper.js，支持主流浏览器（Chrome, Firefox, Safari, Edge）
|
||||
- 在不支持的旧版浏览器中，tooltip 可能不显示，但不会影响基本的文本显示功能
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### 单元测试
|
||||
|
||||
由于这是一个简单的 UI 展示功能，主要依赖 Element UI 的内置功能，不需要编写复杂的单元测试。可以通过以下方式验证：
|
||||
|
||||
1. **备注列存在性测试**: 检查渲染后的 DOM 中是否存在包含"备注"文本的表头
|
||||
2. **数据绑定测试**: 验证备注列是否正确显示 sampleList 中的 remark 数据
|
||||
3. **空值处理测试**: 验证当 remark 为空时，单元格是否正确显示为空白
|
||||
|
||||
### 手动测试场景
|
||||
|
||||
1. **正常显示测试**
|
||||
- 准备包含不同长度备注的样品数据
|
||||
- 验证短备注完整显示，长备注显示省略号
|
||||
- 验证鼠标悬停时 tooltip 正确显示完整内容
|
||||
|
||||
2. **边界情况测试**
|
||||
- 测试备注为空字符串的情况
|
||||
- 测试备注为 null 的情况
|
||||
- 测试备注恰好等于列宽的情况
|
||||
|
||||
3. **响应式测试**
|
||||
- 调整浏览器窗口大小
|
||||
- 验证备注列宽度和 tooltip 行为是否正常
|
||||
|
||||
4. **交互测试**
|
||||
- 快速移动鼠标经过多个备注单元格
|
||||
- 验证 tooltip 显示和隐藏的流畅性
|
||||
- 验证 tooltip 不会遮挡操作按钮
|
||||
|
||||
### 测试库选择
|
||||
|
||||
对于这个简单的 UI 功能，不需要引入 property-based testing 库。主要通过手动测试和简单的 Vue Test Utils 单元测试即可验证功能正确性。
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### 实现步骤
|
||||
|
||||
1. 在 `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue` 文件中定位到 `<el-table>` 组件
|
||||
2. 在状态列（`<el-table-column label="状态" ...>`）之后添加新的备注列
|
||||
3. 配置备注列的属性：label、align、prop、show-overflow-tooltip、width
|
||||
4. 保存文件并测试功能
|
||||
|
||||
### 注意事项
|
||||
|
||||
- 列宽度设置为 150px 是一个建议值，可以根据实际显示效果调整
|
||||
- show-overflow-tooltip 属性会自动处理文本溢出和 tooltip 显示，无需额外编写 JavaScript 代码
|
||||
- 如果需要自定义 tooltip 的样式或行为，可以使用 Element UI 的 tooltip 组件手动实现
|
||||
|
||||
### 可选优化
|
||||
|
||||
如果未来需要更高级的功能，可以考虑：
|
||||
|
||||
1. **自定义 tooltip 内容**: 使用 scoped slot 自定义 tooltip 的显示格式
|
||||
2. **可配置列宽**: 允许用户拖拽调整备注列宽度
|
||||
3. **备注编辑**: 在 tooltip 中添加快速编辑按钮
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
# Requirements Document
|
||||
|
||||
## Introduction
|
||||
|
||||
本文档定义了样品管理库中备注字段显示功能的需求。该功能旨在在样品列表表格中添加备注列，当备注内容较长导致空间不足时，通过鼠标悬停提示（tooltip）的方式完整显示备注信息，提升用户体验。
|
||||
|
||||
## Glossary
|
||||
|
||||
- **样品管理系统（Sample Management System）**: 用于管理入库样品信息的系统模块
|
||||
- **备注列（Remark Column）**: 表格中用于显示样品备注信息的列
|
||||
- **Tooltip**: 鼠标悬停提示，当鼠标悬停在元素上时显示的浮动提示框
|
||||
- **表格组件（Table Component）**: Element UI 的 el-table 组件
|
||||
- **溢出省略（Overflow Ellipsis）**: 当文本内容超出容器宽度时，使用省略号（...）表示被截断的内容
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement 1
|
||||
|
||||
**User Story:** 作为样品管理员，我希望在样品列表中看到备注信息，以便快速了解每个样品的额外说明。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 用户访问样品管理页面 THEN 样品管理系统 SHALL 在表格中显示备注列
|
||||
2. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 将备注列放置在状态列和操作列之间
|
||||
3. WHEN 备注内容为空 THEN 样品管理系统 SHALL 在该单元格中显示空白或占位符
|
||||
4. WHEN 表格加载完成 THEN 样品管理系统 SHALL 确保备注列的宽度适配表格布局
|
||||
|
||||
### Requirement 2
|
||||
|
||||
**User Story:** 作为样品管理员，当备注内容较长时，我希望能够通过鼠标悬停查看完整内容，以便在有限的空间内获取完整信息。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 备注内容超出列宽度 THEN 样品管理系统 SHALL 使用省略号截断显示的文本
|
||||
2. WHEN 用户将鼠标悬停在被截断的备注单元格上 THEN 样品管理系统 SHALL 显示包含完整备注内容的 tooltip
|
||||
3. WHEN 用户移开鼠标 THEN 样品管理系统 SHALL 隐藏 tooltip
|
||||
4. WHEN 备注内容未超出列宽度 THEN 样品管理系统 SHALL 完整显示备注内容且不显示 tooltip
|
||||
5. WHEN tooltip 显示时 THEN 样品管理系统 SHALL 确保 tooltip 内容可读且不遮挡重要界面元素
|
||||
|
||||
### Requirement 3
|
||||
|
||||
**User Story:** 作为样品管理员，我希望备注列的显示样式与其他列保持一致，以便获得统一的视觉体验。
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 使用与其他列相同的字体、字号和颜色
|
||||
2. WHEN 备注列被渲染 THEN 样品管理系统 SHALL 使用居中对齐方式
|
||||
3. WHEN 表格数据更新 THEN 样品管理系统 SHALL 保持备注列的样式一致性
|
||||
4. WHEN 用户调整浏览器窗口大小 THEN 样品管理系统 SHALL 保持备注列的响应式布局
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# Implementation Plan
|
||||
|
||||
- [-] 1. 在样品管理页面添加备注列
|
||||
|
||||
- 在 `ruoyi-fastapi-frontend/src/views/warehouse/sample/index.vue` 文件的 `<el-table>` 组件中添加备注列
|
||||
- 将备注列放置在状态列和操作列之间
|
||||
- 配置列属性：label="备注", align="center", prop="remark", show-overflow-tooltip="true", width="150"
|
||||
- _Requirements: 1.1, 1.2, 1.4, 2.1, 2.2, 2.3, 3.1, 3.2_
|
||||
|
||||
|
||||
|
||||
- [ ] 1.1 手动测试备注列显示功能
|
||||
- 测试备注列是否正确显示在表格中
|
||||
- 测试短备注内容是否完整显示
|
||||
- 测试长备注内容是否显示省略号
|
||||
- 测试鼠标悬停时 tooltip 是否正确显示完整内容
|
||||
- 测试空备注是否显示为空白
|
||||
- 测试样式是否与其他列保持一致
|
||||
- _Requirements: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 2.4, 2.5, 3.1, 3.2, 3.3, 3.4_
|
||||
|
|
@ -99,6 +99,7 @@
|
|||
<el-tag v-else-if="scope.row.status === '3'" type="danger">已退回</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="150"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
|
|||
|
|
@ -0,0 +1,313 @@
|
|||
# 前端错误排查指南
|
||||
|
||||
## 当前错误分析
|
||||
|
||||
您遇到的错误包括：
|
||||
|
||||
### 1. 404错误 - 头像图片找不到
|
||||
```
|
||||
GET http://123.56.98.4:8080/dev-api/profile/avatar/2025/08/01/avatar_20250801085429A353.png 404
|
||||
```
|
||||
|
||||
**原因**：用户头像文件不存在或路径错误
|
||||
|
||||
**影响**：不影响功能，只是头像显示不出来
|
||||
|
||||
**解决方案**：
|
||||
- 这是正常现象，如果用户没有上传头像或头像文件被删除
|
||||
- 可以忽略此错误，或者重新上传头像
|
||||
|
||||
### 2. WebSocket连接失败
|
||||
```
|
||||
GET http://172.17.164.32:8080/sockjs-node/info?t=... net::ERR_CONNECTION_TIMED_OUT
|
||||
[WDS] Disconnected!
|
||||
```
|
||||
|
||||
**原因**：Webpack开发服务器的热重载(HMR)连接失败
|
||||
|
||||
**影响**：热重载功能不可用，需要手动刷新页面才能看到代码更改
|
||||
|
||||
**解决方案**：
|
||||
1. 检查防火墙设置
|
||||
2. 检查网络连接
|
||||
3. 重启开发服务器
|
||||
4. 如果不需要热重载，可以忽略此错误
|
||||
|
||||
### 3. ChunkLoadError - JavaScript代码块加载失败 ⚠️
|
||||
```
|
||||
ChunkLoadError: Loading chunk 0 failed.(timeout: http://123.56.98.4:8080/static/js/0.js)
|
||||
```
|
||||
|
||||
**原因**：
|
||||
- 浏览器缓存问题
|
||||
- 网络连接问题
|
||||
- 构建文件损坏
|
||||
- 代理配置问题
|
||||
|
||||
**影响**：页面无法正常加载，功能不可用
|
||||
|
||||
**这是主要问题，需要解决！**
|
||||
|
||||
## 解决方案
|
||||
|
||||
### 方案1：清除缓存并重新构建（推荐）⭐
|
||||
|
||||
```bash
|
||||
# 1. 停止前端服务 (Ctrl+C)
|
||||
|
||||
# 2. 进入前端目录
|
||||
cd ruoyi-fastapi-frontend
|
||||
|
||||
# 3. 清除缓存和构建文件
|
||||
rm -rf node_modules
|
||||
rm -rf dist
|
||||
rm -rf .cache
|
||||
|
||||
# Windows用户使用：
|
||||
# rmdir /s /q node_modules
|
||||
# rmdir /s /q dist
|
||||
# rmdir /s /q .cache
|
||||
|
||||
# 4. 重新安装依赖
|
||||
npm install
|
||||
|
||||
# 5. 重新启动开发服务器
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 方案2：强制刷新浏览器
|
||||
|
||||
1. **清空缓存并硬性重新加载**
|
||||
- 打开浏览器开发者工具（F12）
|
||||
- 右键点击刷新按钮
|
||||
- 选择"清空缓存并硬性重新加载"
|
||||
|
||||
2. **清除浏览器缓存**
|
||||
- 按 `Ctrl + Shift + Delete`
|
||||
- 选择"缓存的图片和文件"
|
||||
- 点击"清除数据"
|
||||
|
||||
3. **强制刷新**
|
||||
- 按 `Ctrl + F5`（Windows）
|
||||
- 或 `Cmd + Shift + R`（Mac）
|
||||
|
||||
### 方案3：检查网络和代理配置
|
||||
|
||||
#### 检查后端服务是否运行
|
||||
|
||||
```bash
|
||||
# 检查后端是否在9099端口运行
|
||||
curl http://127.0.0.1:9099
|
||||
|
||||
# 或者在浏览器访问
|
||||
http://127.0.0.1:9099
|
||||
```
|
||||
|
||||
#### 检查代理配置
|
||||
|
||||
确保 `vue.config.js` 中的代理配置正确：
|
||||
|
||||
```javascript
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://127.0.0.1:9099`, // 确保这是正确的后端地址
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 方案4：重启开发服务器
|
||||
|
||||
```bash
|
||||
# 1. 停止当前服务 (Ctrl+C)
|
||||
|
||||
# 2. 等待几秒
|
||||
|
||||
# 3. 重新启动
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 方案5：使用无缓存模式启动浏览器
|
||||
|
||||
#### Chrome/Edge
|
||||
```bash
|
||||
# Windows
|
||||
chrome.exe --disable-cache --disable-application-cache
|
||||
|
||||
# Mac
|
||||
open -a "Google Chrome" --args --disable-cache
|
||||
```
|
||||
|
||||
#### Firefox
|
||||
```bash
|
||||
# 在地址栏输入
|
||||
about:config
|
||||
|
||||
# 搜索并设置
|
||||
browser.cache.disk.enable = false
|
||||
browser.cache.memory.enable = false
|
||||
```
|
||||
|
||||
## 预防措施
|
||||
|
||||
### 1. 定期清理缓存
|
||||
|
||||
```bash
|
||||
# 每周执行一次
|
||||
cd ruoyi-fastapi-frontend
|
||||
rm -rf node_modules/.cache
|
||||
rm -rf dist
|
||||
```
|
||||
|
||||
### 2. 使用版本控制
|
||||
|
||||
确保代码在Git中有备份：
|
||||
|
||||
```bash
|
||||
git status
|
||||
git add .
|
||||
git commit -m "添加批量添加样品功能"
|
||||
```
|
||||
|
||||
### 3. 检查依赖版本
|
||||
|
||||
```bash
|
||||
# 检查过时的依赖
|
||||
npm outdated
|
||||
|
||||
# 更新依赖（谨慎操作）
|
||||
npm update
|
||||
```
|
||||
|
||||
### 4. 使用稳定的网络环境
|
||||
|
||||
- 避免使用不稳定的WiFi
|
||||
- 使用有线网络
|
||||
- 检查防火墙设置
|
||||
|
||||
## 验证修复
|
||||
|
||||
修复后，请验证以下功能：
|
||||
|
||||
### 1. 基本功能
|
||||
- ✅ 页面能正常加载
|
||||
- ✅ 登录功能正常
|
||||
- ✅ 菜单导航正常
|
||||
|
||||
### 2. 入库单功能
|
||||
- ✅ 入库单列表能正常显示
|
||||
- ✅ 新增入库单对话框能打开
|
||||
- ✅ 批量添加样品功能可用
|
||||
|
||||
### 3. 对话框功能
|
||||
- ✅ 点击对话框外部不会关闭
|
||||
- ✅ 点击关闭按钮能正常关闭
|
||||
- ✅ 点击取消按钮能正常关闭
|
||||
|
||||
## 常见问题FAQ
|
||||
|
||||
### Q1: 为什么会出现ChunkLoadError？
|
||||
|
||||
**A**: 主要原因：
|
||||
1. 浏览器缓存了旧版本的代码
|
||||
2. 网络连接不稳定
|
||||
3. 构建文件损坏
|
||||
4. 代理配置错误
|
||||
|
||||
### Q2: 清除缓存会丢失数据吗？
|
||||
|
||||
**A**: 不会。清除的是：
|
||||
- 浏览器缓存（临时文件）
|
||||
- node_modules（可重新安装）
|
||||
- 构建文件（可重新生成）
|
||||
|
||||
不会影响：
|
||||
- 数据库数据
|
||||
- 源代码文件
|
||||
- 配置文件
|
||||
|
||||
### Q3: 为什么WebSocket连接失败？
|
||||
|
||||
**A**: 可能原因：
|
||||
1. 防火墙阻止了连接
|
||||
2. 网络配置问题
|
||||
3. 开发服务器配置问题
|
||||
|
||||
**影响**：只影响热重载功能，不影响应用本身
|
||||
|
||||
### Q4: 404错误需要处理吗？
|
||||
|
||||
**A**: 取决于具体情况：
|
||||
- 头像404：可以忽略，或重新上传头像
|
||||
- API 404：需要检查后端服务和路由配置
|
||||
- 静态资源404：需要检查文件路径
|
||||
|
||||
### Q5: 如何避免这些问题？
|
||||
|
||||
**A**: 最佳实践：
|
||||
1. 定期清理缓存
|
||||
2. 使用稳定的网络
|
||||
3. 及时更新依赖
|
||||
4. 使用版本控制
|
||||
5. 做好代码备份
|
||||
|
||||
## 紧急恢复
|
||||
|
||||
如果以上方法都不行，可以尝试：
|
||||
|
||||
### 1. 重新克隆项目
|
||||
|
||||
```bash
|
||||
# 备份当前修改
|
||||
git stash
|
||||
|
||||
# 重新克隆
|
||||
git clone <repository-url>
|
||||
cd <project-name>
|
||||
|
||||
# 恢复修改
|
||||
git stash pop
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 启动
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 2. 使用生产构建
|
||||
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run build:prod
|
||||
|
||||
# 使用静态服务器运行
|
||||
npx serve -s dist
|
||||
```
|
||||
|
||||
### 3. 联系技术支持
|
||||
|
||||
如果问题持续存在，请提供：
|
||||
- 完整的错误日志
|
||||
- 浏览器版本
|
||||
- Node.js版本
|
||||
- 操作系统版本
|
||||
- 网络环境信息
|
||||
|
||||
## 总结
|
||||
|
||||
当前遇到的错误主要是：
|
||||
1. ❌ **ChunkLoadError** - 需要立即解决
|
||||
2. ⚠️ **WebSocket连接失败** - 可以暂时忽略
|
||||
3. ℹ️ **头像404** - 不影响功能
|
||||
|
||||
**推荐操作顺序**：
|
||||
1. 清除浏览器缓存并强制刷新
|
||||
2. 如果不行，重新构建项目
|
||||
3. 如果还不行，检查网络和代理配置
|
||||
4. 最后考虑重新克隆项目
|
||||
|
||||
**重要提示**：这些错误与我们添加的"批量添加样品"功能无关，是前端开发环境的常见问题。
|
||||
Loading…
Reference in New Issue