295 lines
7.0 KiB
Markdown
295 lines
7.0 KiB
Markdown
# 创建订单功能说明
|
||
|
||
## 功能概述
|
||
|
||
在订单列表页面添加了完整的创建订单功能，支持：
|
||
- 搜索患者
|
||
- 选择订单类型
|
||
- 输入订单金额
|
||
- 添加多个订单项
|
||
- 自动计算总价
|
||
|
||
## 新增功能
|
||
|
||
### 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
|
||
**状态**: ✅ 完成
|