# 创建订单功能说明

## 功能概述

在订单列表页面添加了完整的创建订单功能，支持：
- 搜索患者
- 选择订单类型
- 输入订单金额
- 添加多个订单项
- 自动计算总价

## 新增功能

### 1. 创建订单按钮

在搜索表单右侧添加了"+ 创建订单"按钮，点击打开创建订单弹窗。

```vue
<el-button
    v-perms="['order.order/create']"
    type="success"
    class="ml-2.5"
    @click="handleCreate"
>
    + 创建订单
</el-button>
```

### 2. 创建订单弹窗

包含以下字段：

#### 基本信息
- **患者**：远程搜索患者列表，支持按姓名和手机号搜索
- **订单类型**：下拉选择（挂号费、问诊费、药品费用）
- **订单金额**：自动计算（订单项总价之和）
- **备注**：可选的备注信息

#### 订单详情
- 支持添加多个订单项
- 每个订单项包含：
  - 关联类型（挂号、问诊、药品）
  - 关联ID
  - 数量
  - 单价
  - 总价（自动计算）

### 3. 患者搜索

使用远程搜索功能，实时搜索患者：

```typescript
const searchPatients = async (query: string) => {
    if (!query) {
        patientList.value = []
        return
    }
    try {
        patientLoading.value = true
        const res = await getUserList({
            page_no: 1,
            page_size: 10,
            keyword: query
        })
        patientList.value = res?.lists || []
    } finally {
        patientLoading.value = false
    }
}
```

### 4. 订单项管理

#### 添加订单项
```typescript
const addOrderDetail = () => {
    createForm.details.push({
        related_type: '',
        related_id: '',
        quantity: 1,
        unit_price: 0,
        total_price: 0
    })
}
```

#### 删除订单项
```typescript
const removeOrderDetail = (index: number) => {
    createForm.details.splice(index, 1)
}
```

#### 自动计算总价
```typescript
const updateDetailTotal = (index: number) => {
    const detail = createForm.details[index]
    detail.total_price = detail.quantity * detail.unit_price
}
```

### 5. 表单验证

创建订单表单包含以下验证规则：

```typescript
const createRules = {
    patient_id: [{ required: true, message: '请选择患者', trigger: 'change' }],
    order_type: [{ required: true, message: '请选择订单类型', trigger: 'change' }],
    amount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }]
}
```

### 6. 提交创建

```typescript
const submitCreateOrder = async () => {
    try {
        await createFormRef.value?.validate()
        
        if (createForm.details.length === 0) {
            feedback.msgWarning('请至少添加一个订单项')
            return
        }

        createLoading.value = true
        
        // 计算总金额
        const totalAmount = createForm.details.reduce((sum, detail) => {
            return sum + (detail.quantity * detail.unit_price)
        }, 0)

        const params = {
            patient_id: createForm.patient_id,
            order_type: createForm.order_type,
            amount: totalAmount,
            remark: createForm.remark,
            details: createForm.details.map(detail => ({
                related_type: detail.related_type,
                related_id: detail.related_id,
                quantity: detail.quantity,
                unit_price: detail.unit_price,
                total_price: detail.quantity * detail.unit_price
            }))
        }

        await orderCreate(params)
        feedback.msgSuccess('订单创建成功')
        createDialogVisible.value = false
        getLists()
    } finally {
        createLoading.value = false
    }
}
```

## 使用流程

### 第一步：打开创建订单弹窗
点击"+ 创建订单"按钮打开弹窗

### 第二步：选择患者
1. 在患者输入框中输入患者姓名或手机号
2. 从下拉列表中选择患者

### 第三步：填写基本信息
1. 选择订单类型（挂号费、问诊费、药品费用）
2. 输入订单金额（可选，会自动计算）
3. 输入备注（可选）

### 第四步：添加订单项
1. 点击"+ 添加订单项"按钮
2. 填写订单项信息：
   - 选择关联类型
   - 输入关联ID
   - 输入数量
   - 输入单价
3. 总价会自动计算

### 第五步：提交创建
1. 点击"创建订单"按钮
2. 系统验证表单
3. 创建成功后自动刷新列表

## 数据结构

### 创建订单请求参数

```typescript
{
    patient_id: number,           // 患者ID
    order_type: number,           // 订单类型 1-挂号费 2-问诊费 3-药品费用
    amount: number,               // 订单金额
    remark: string,               // 备注
    details: [
        {
            related_type: string, // 关联类型 appointment/diagnosis/medicine
            related_id: number,   // 关联ID
            quantity: number,     // 数量
            unit_price: number,   // 单价
            total_price: number   // 总价
        }
    ]
}
```

## 权限控制

创建订单功能受权限控制：

```vue
v-perms="['order.order/create']"
```

需要在后端权限系统中添加 `order.order/create` 权限节点。

## 新增导入

在 API 导入中添加了 `orderCreate`：

```typescript
import { orderLists, orderDetail, orderPay, orderCancel, orderDelete, orderRefund, orderExport, orderCreate } from '@/api/order'
```

同时导入了患者列表 API：

```typescript
import { getUserList } from '@/api/consumer'
```

## 新增状态

### 响应式数据

```typescript
const createDialogVisible = ref(false)      // 创建弹窗显示状态
const createFormRef = ref()                 // 表单引用
const createLoading = ref(false)            // 提交加载状态
const patientLoading = ref(false)           // 患者搜索加载状态
const patientList = ref<any[]>([])          // 患者列表
```

### 表单数据

```typescript
const createForm = reactive({
    patient_id: '',
    order_type: '',
    amount: 0,
    remark: '',
    details: []
})
```

## 新增方法

| 方法 | 说明 |
|------|------|
| `handleCreate()` | 打开创建订单弹窗 |
| `searchPatients()` | 搜索患者 |
| `addOrderDetail()` | 添加订单项 |
| `removeOrderDetail()` | 删除订单项 |
| `updateDetailTotal()` | 更新订单项总价 |
| `resetCreateForm()` | 重置创建表单 |
| `submitCreateOrder()` | 提交创建订单 |

## 特性

✅ 远程搜索患者
✅ 动态添加/删除订单项
✅ 自动计算总价
✅ 表单验证
✅ 权限控制
✅ 加载状态提示
✅ 成功/失败反馈

## 注意事项

1. **患者搜索**：需要至少输入一个字符才能搜索
2. **订单项**：至少需要添加一个订单项才能创建订单
3. **金额计算**：订单金额自动计算为所有订单项的总价
4. **权限**：需要 `order.order/create` 权限才能看到创建按钮

## 相关文件

- `admin/src/views/order/index.vue` - 订单列表页面（已更新）
- `admin/src/api/order.ts` - 订单 API（已有 orderCreate）
- `server/app/adminapi/controller/order/OrderController.php` - 后端控制器

---

**更新日期**: 2024-03-10
**版本**: 1.1.0
**状态**: ✅ 完成