# 预约列表按钮显示优化

## 问题描述

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

## 问题原因

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

原有按钮（从左到右）：
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` - 处方审核通过后锁定编辑文档

## 总结

通过根据预约状态优化按钮显示，确保了：
- ✅ "开方/查看"按钮始终可见
- ✅ 已完成状态下界面更简洁
- ✅ 避免按钮被挤出可视区域
- ✅ 优化用户体验
- ✅ 保持核心功能的可访问性