更新

2026-04-10 14:43:58 +08:00
parent fdf714f833
commit 4909ec6daa
38 changed files with 6549 additions and 735 deletions
@@ -0,0 +1,208 @@
+# 预约列表按钮显示优化
+
+## 问题描述
+
+在预约列表中，同样的情况下，有的预约显示"开方"按钮，有的不显示。
+
+## 问题原因
+
+操作列的按钮过多，导致"开方"按钮被挤出可视区域或被其他按钮遮挡。
+
+原有按钮（从左到右）：
+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` - 处方审核通过后锁定编辑文档
+
+## 总结
+
+通过根据预约状态优化按钮显示，确保了：
+- ✅ "开方/查看"按钮始终可见
+- ✅ 已完成状态下界面更简洁
+- ✅ 避免按钮被挤出可视区域
+- ✅ 优化用户体验
+- ✅ 保持核心功能的可访问性