209 lines
5.6 KiB
Markdown
209 lines
5.6 KiB
Markdown
# 预约列表按钮显示优化
|
||
|
||
## 问题描述
|
||
|
||
在预约列表中，同样的情况下，有的预约显示"开方"按钮，有的不显示。
|
||
|
||
## 问题原因
|
||
|
||
操作列的按钮过多，导致"开方"按钮被挤出可视区域或被其他按钮遮挡。
|
||
|
||
原有按钮（从左到右）：
|
||
1. 编辑患者
|
||
2. 视频二维码
|
||
3. 通话
|
||
4. 完成
|
||
5. 开方/查看
|
||
6. 更多
|
||
|
||
当所有按钮都显示时，操作列宽度为 380px，可能不够容纳所有按钮。
|
||
|
||
## 解决方案
|
||
|
||
根据预约状态优化按钮显示：
|
||
|
||
### 已完成状态（status = 3）
|
||
|
||
只显示核心按钮：
|
||
- 编辑患者
|
||
- 开方/查看
|
||
- 更多
|
||
|
||
隐藏按钮：
|
||
- 视频二维码（已完成，不需要视频）
|
||
- 通话（已完成，不需要通话）
|
||
- 完成（已经完成）
|
||
|
||
### 其他状态（待接诊、已过号、已取消）
|
||
|
||
显示所有按钮：
|
||
- 编辑患者
|
||
- 视频二维码
|
||
- 通话
|
||
- 完成
|
||
- 开方/查看
|
||
- 更多
|
||
|
||
## 修改内容
|
||
|
||
**文件**: `admin/src/views/tcm/appointment/list.vue`
|
||
|
||
### 修改前
|
||
|
||
```vue
|
||
<el-table-column label="操作" width="380" fixed="right" align="left">
|
||
<template #default="{ row }">
|
||
<div class="action-btns">
|
||
<el-button>编辑患者</el-button>
|
||
<el-button>视频二维码</el-button>
|
||
<el-button>通话</el-button>
|
||
<el-button>完成</el-button>
|
||
<el-button>{{ prescriptionActionLabel(row) }}</el-button>
|
||
<el-dropdown>更多</el-dropdown>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
### 修改后
|
||
|
||
```vue
|
||
<el-table-column label="操作" width="380" fixed="right" align="left">
|
||
<template #default="{ row }">
|
||
<div class="action-btns">
|
||
<el-button>编辑患者</el-button>
|
||
|
||
<!-- 已完成状态不显示这些按钮 -->
|
||
<template v-if="row.status !== 3">
|
||
<el-button>视频二维码</el-button>
|
||
<el-button>通话</el-button>
|
||
<el-button>完成</el-button>
|
||
</template>
|
||
|
||
<!-- 开方/查看按钮始终显示 -->
|
||
<el-button>{{ prescriptionActionLabel(row) }}</el-button>
|
||
|
||
<el-dropdown>更多</el-dropdown>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
## 按钮显示规则
|
||
|
||
### 预约状态说明
|
||
|
||
| 状态值 | 状态名称 | 说明 |
|
||
|-------|---------|------|
|
||
| 1 | 待接诊 | 患者已挂号，等待医生接诊 |
|
||
| 2 | 已取消 | 挂号已取消 |
|
||
| 3 | 已完成 | 医生已完成接诊 |
|
||
| 4 | 已过号 | 患者未按时就诊，已过号 |
|
||
|
||
### 按钮显示矩阵
|
||
|
||
| 按钮 | 待接诊(1) | 已取消(2) | 已完成(3) | 已过号(4) |
|
||
|-----|----------|----------|----------|----------|
|
||
| 编辑患者 | ✅ | ✅ | ✅ | ✅ |
|
||
| 视频二维码 | ✅ | ✅ | ❌ | ✅ |
|
||
| 通话 | ✅ | ✅ | ❌ | ✅ |
|
||
| 完成 | ✅ | ✅ | ❌ | ✅ |
|
||
| 开方/查看 | ✅ | ✅ | ✅ | ✅ |
|
||
| 更多 | ✅ | ✅ | ✅ | ✅ |
|
||
|
||
## 优势
|
||
|
||
### 1. 确保核心按钮始终可见
|
||
|
||
- "开方/查看"按钮是核心功能，必须始终显示
|
||
- 已完成状态下，减少不必要的按钮，确保核心按钮可见
|
||
|
||
### 2. 优化用户体验
|
||
|
||
- 已完成的预约不需要"视频二维码"、"通话"、"完成"按钮
|
||
- 减少按钮数量，界面更简洁
|
||
|
||
### 3. 避免按钮被遮挡
|
||
|
||
- 减少按钮数量后，操作列宽度足够容纳所有按钮
|
||
- 避免按钮被挤出可视区域
|
||
|
||
## 测试建议
|
||
|
||
### 测试用例 1: 待接诊状态
|
||
|
||
1. 找到一个待接诊的预约（status = 1）
|
||
2. 检查操作列是否显示所有按钮：
|
||
- ✅ 编辑患者
|
||
- ✅ 视频二维码
|
||
- ✅ 通话
|
||
- ✅ 完成
|
||
- ✅ 开方/查看
|
||
- ✅ 更多
|
||
|
||
### 测试用例 2: 已完成状态
|
||
|
||
1. 找到一个已完成的预约（status = 3）
|
||
2. 检查操作列是否只显示核心按钮：
|
||
- ✅ 编辑患者
|
||
- ❌ 视频二维码（不显示）
|
||
- ❌ 通话（不显示）
|
||
- ❌ 完成（不显示）
|
||
- ✅ 开方/查看
|
||
- ✅ 更多
|
||
|
||
### 测试用例 3: 已完成且已开方
|
||
|
||
1. 找到一个已完成且已开方的预约
|
||
2. 检查"开方/查看"按钮是否显示为"查看"
|
||
3. 点击"查看"按钮，应该可以查看处方（只读模式）
|
||
|
||
### 测试用例 4: 已完成但未开方
|
||
|
||
1. 找到一个已完成但未开方的预约
|
||
2. 检查"开方/查看"按钮是否显示为"开方"
|
||
3. 点击"开方"按钮，应该可以创建新处方
|
||
|
||
## 注意事项
|
||
|
||
### 1. 权限检查
|
||
|
||
所有按钮都有权限检查，如果用户没有相应权限，按钮会被隐藏：
|
||
- `tcm.diagnosis/edit` - 编辑患者
|
||
- `tcm.diagnosis/videoQr` - 视频二维码
|
||
- `doctor.appointment/prescription` - 通话
|
||
- `doctor.appointment/complete` - 完成
|
||
- `tcm.diagnosis/kaifang` - 开方/查看
|
||
|
||
### 2. 按钮文字动态变化
|
||
|
||
"开方/查看"按钮的文字根据处方状态动态变化：
|
||
- 未开方或待审核：显示"开方"
|
||
- 已审核通过且未作废：显示"查看"
|
||
- 已驳回：显示"开方"
|
||
|
||
### 3. 操作列宽度
|
||
|
||
操作列宽度为 380px，足够容纳：
|
||
- 已完成状态：3个按钮（编辑患者、开方/查看、更多）
|
||
- 其他状态：6个按钮（编辑患者、视频二维码、通话、完成、开方/查看、更多）
|
||
|
||
如果按钮仍然被遮挡，可以考虑：
|
||
- 增加操作列宽度（如 420px）
|
||
- 将更多按钮移到下拉菜单中
|
||
- 使用图标按钮减少宽度
|
||
|
||
## 相关文档
|
||
|
||
- `PRESCRIPTION_BUTTON_DISPLAY_CHECK.md` - 处方按钮显示检查文档
|
||
- `PRESCRIPTION_APPROVED_LOCK.md` - 处方审核通过后锁定编辑文档
|
||
|
||
## 总结
|
||
|
||
通过根据预约状态优化按钮显示，确保了：
|
||
- ✅ "开方/查看"按钮始终可见
|
||
- ✅ 已完成状态下界面更简洁
|
||
- ✅ 避免按钮被挤出可视区域
|
||
- ✅ 优化用户体验
|
||
- ✅ 保持核心功能的可访问性
|