# 订单列表操作按钮设计

## 设计概述

为订单列表页面设计了根据不同订单状态显示相应操作按钮的功能，提供更精准、更直观的订单管理体验。

## 按钮设计原则

### 1. 🎯 **状态驱动**
- 根据订单的支付状态、发货状态、订单状态组合显示按钮
- 确保每个状态下的操作都符合业务逻辑

### 2. 🎨 **视觉层次**
- 主要操作使用蓝色样式 (`ele-text-primary`)
- 成功操作使用绿色样式 (`ele-text-success`)
- 警告操作使用橙色样式 (`ele-text-warning`)
- 危险操作使用红色样式 (`ele-text-danger`)

### 3. 🔒 **安全确认**
- 所有危险操作都有确认对话框
- 明确的操作说明和后果提示

## 完整的按钮矩阵

### 基础操作（所有状态）

| 按钮 | 图标 | 样式 | 说明 |
|------|------|------|------|
| 详情 | 👁️ EyeOutlined | 默认 | 查看订单详细信息 |

### 未付款状态 (payStatus=0, orderStatus=0)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 修改 | ✏️ EditOutlined | 默认 | 修改订单信息 |
| 取消 | ❌ CloseOutlined | 警告 | 取消订单 |

### 已付款未发货 (payStatus=1, deliveryStatus=10, 未取消)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 发货 | 🚚 SendOutlined | 主要 | 标记为已发货 |
| 退款 | ↩️ UndoOutlined | 默认 | 申请退款 |

### 已发货未完成 (payStatus=1, deliveryStatus=20, orderStatus=0)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 确认收货 | ✅ CheckOutlined | 主要 | 确认收货并完成订单 |
| 退款 | ↩️ UndoOutlined | 默认 | 申请退款 |

### 退款申请中 (orderStatus=4,7)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 同意退款 | ✅ CheckCircleOutlined | 成功 | 同意退款申请 |
| 拒绝退款 | ❌ CloseCircleOutlined | 危险 | 拒绝退款申请 |

### 退款被拒绝 (orderStatus=5)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 重新处理 | 🔄 RedoOutlined | 默认 | 重新提交退款申请 |

### 已完成 (orderStatus=1)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 申请退款 | ↩️ UndoOutlined | 默认 | 为已完成订单申请退款 |

### 可删除状态 (orderStatus=1,2,6)

| 按钮 | 图标 | 样式 | 操作 |
|------|------|------|------|
| 删除 | 🗑️ DeleteOutlined | 危险 | 删除订单记录 |

## 代码实现

### 模板结构

```vue
<template v-if="column.key === 'action'">
  <a-space>
    <!-- 查看详情 - 所有状态都可以查看 -->
    <a @click.stop="openEdit(record)">
      <EyeOutlined /> 详情
    </a>
    
    <!-- 未付款状态的操作 -->
    <template v-if="record.payStatus === 0 && record.orderStatus === 0">
      <!-- 修改和取消按钮 -->
    </template>

    <!-- 已付款未发货状态的操作 -->
    <template v-if="record.payStatus === 1 && record.deliveryStatus === 10 && !isCancelledStatus(record.orderStatus)">
      <!-- 发货和退款按钮 -->
    </template>

    <!-- 其他状态的操作... -->
  </a-space>
</template>
```

### 辅助判断函数

```typescript
// 判断是否为取消状态
const isCancelledStatus = (orderStatus?: number) => {
  return [2, 3].includes(orderStatus || 0);
};

// 判断是否为退款相关状态
const isRefundStatus = (orderStatus?: number) => {
  return [4, 5, 6, 7].includes(orderStatus || 0);
};

// 判断是否可以删除订单
const canDeleteOrder = (order: ShopOrder) => {
  return [1, 2, 6].includes(order.orderStatus || 0);
};
```

### 操作方法示例

```typescript
// 发货处理
const handleDelivery = (record: ShopOrder) => {
  Modal.confirm({
    title: '确认发货',
    content: '确定要将此订单标记为已发货吗？',
    onOk: async () => {
      try {
        const deliveryTime = toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss');
        await updateShopOrder({
          ...record,
          deliveryStatus: 20,
          deliveryTime: deliveryTime
        });
        message.success('发货成功');
        reload();
      } catch (error: any) {
        message.error(error.message || '发货失败');
      }
    }
  });
};
```

## 状态流转图

```
未付款订单 → [修改/取消]
    ↓ 付款
已付款未发货 → [发货/退款]
    ↓ 发货
已发货未完成 → [确认收货/退款]
    ↓ 确认收货
已完成订单 → [申请退款/删除]

退款流程：
申请退款 → [同意/拒绝]
    ↓ 同意
退款成功 → [删除]
    ↓ 拒绝
退款被拒绝 → [重新处理/删除]
```

## 用户体验优化

### 1. 按钮排序
- 主要操作放在前面（发货、确认收货）
- 次要操作放在中间（修改、申请退款）
- 危险操作放在最后（取消、删除）

### 2. 视觉反馈
- 使用图标增强按钮识别度
- 颜色编码表示操作类型
- 分隔线清晰区分不同操作

### 3. 操作确认
- 危险操作使用 `a-popconfirm` 组件
- 明确的确认文案
- 详细的操作说明

### 4. 错误处理
- 统一的错误提示
- 操作失败后的状态恢复
- 网络异常的友好提示

## 权限控制建议

### 1. 角色权限
```typescript
// 根据用户角色显示不同按钮
const userRole = getCurrentUserRole();

// 财务人员可以处理退款
const canHandleRefund = userRole.includes('FINANCE') || userRole.includes('ADMIN');

// 仓库人员可以发货
const canDelivery = userRole.includes('WAREHOUSE') || userRole.includes('ADMIN');
```

### 2. 按钮权限控制
```vue
<a 
  v-if="canHandleRefund && (record.orderStatus === 4 || record.orderStatus === 7)"
  @click.stop="handleApproveRefund(record)" 
  class="ele-text-success"
>
  <CheckCircleOutlined /> 同意退款
</a>
```

## 性能优化

### 1. 条件渲染优化
- 使用 `v-if` 而不是 `v-show` 减少DOM节点
- 合理组织条件判断顺序
- 避免重复的状态计算

### 2. 事件处理优化
- 使用 `@click.stop` 防止事件冒泡
- 异步操作添加loading状态
- 防抖处理频繁点击

## 总结

新的订单列表操作按钮设计具有以下优势：

1. **功能完整**：覆盖订单全生命周期的所有操作
2. **逻辑清晰**：按钮显示严格遵循业务流程
3. **用户友好**：直观的图标和颜色编码
4. **安全可靠**：危险操作有确认机制
5. **易于维护**：模块化的代码结构

这个设计将显著提升订单管理的效率和用户体验。