ZYT/zyt

Fork 0

Files

T

Your Name 4909ec6daa 更新

2026-04-10 14:43:58 +08:00

5.6 KiB

Raw Blame History

预约列表按钮显示优化

问题描述

在预约列表中，同样的情况下，有的预约显示"开方"按钮，有的不显示。

问题原因

操作列的按钮过多，导致"开方"按钮被挤出可视区域或被其他按钮遮挡。

原有按钮（从左到右）：

编辑患者
视频二维码
通话
完成
开方/查看
更多

当所有按钮都显示时，操作列宽度为 380px，可能不够容纳所有按钮。

解决方案

根据预约状态优化按钮显示：

已完成状态（status = 3）

只显示核心按钮：

编辑患者
开方/查看
更多

隐藏按钮：

视频二维码（已完成，不需要视频）
通话（已完成，不需要通话）
完成（已经完成）

其他状态（待接诊、已过号、已取消）

显示所有按钮：

编辑患者
视频二维码
通话
完成
开方/查看
更多

修改内容

文件: admin/src/views/tcm/appointment/list.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>

修改后

<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: 待接诊状态

找到一个待接诊的预约（status = 1）
检查操作列是否显示所有按钮：
- ✅ 编辑患者
- ✅ 视频二维码
- ✅ 通话
- ✅ 完成
- ✅ 开方/查看
- ✅ 更多

测试用例 2: 已完成状态

找到一个已完成的预约（status = 3）
检查操作列是否只显示核心按钮：
- ✅ 编辑患者
- ❌ 视频二维码（不显示）
- ❌ 通话（不显示）
- ❌ 完成（不显示）
- ✅ 开方/查看
- ✅ 更多

测试用例 3: 已完成且已开方

找到一个已完成且已开方的预约
检查"开方/查看"按钮是否显示为"查看"
点击"查看"按钮，应该可以查看处方（只读模式）

测试用例 4: 已完成但未开方

找到一个已完成但未开方的预约
检查"开方/查看"按钮是否显示为"开方"
点击"开方"按钮，应该可以创建新处方

注意事项

1. 权限检查

所有按钮都有权限检查，如果用户没有相应权限，按钮会被隐藏：

tcm.diagnosis/edit - 编辑患者
tcm.diagnosis/videoQr - 视频二维码
doctor.appointment/prescription - 通话
doctor.appointment/complete - 完成
tcm.diagnosis/kaifang - 开方/查看

2. 按钮文字动态变化

"开方/查看"按钮的文字根据处方状态动态变化：

未开方或待审核：显示"开方"
已审核通过且未作废：显示"查看"
已驳回：显示"开方"

3. 操作列宽度

操作列宽度为 380px，足够容纳：

已完成状态：3个按钮（编辑患者、开方/查看、更多）
其他状态：6个按钮（编辑患者、视频二维码、通话、完成、开方/查看、更多）

如果按钮仍然被遮挡，可以考虑：

增加操作列宽度（如 420px）
将更多按钮移到下拉菜单中
使用图标按钮减少宽度

总结

通过根据预约状态优化按钮显示，确保了：

✅ "开方/查看"按钮始终可见
✅ 已完成状态下界面更简洁
✅ 避免按钮被挤出可视区域
✅ 优化用户体验
✅ 保持核心功能的可访问性

5.6 KiB Raw Blame History Unescape Escape