ZYT/zyt

Fork 0

Files

T

Your Name 38ad60f4bb 更新

2026-03-11 09:49:47 +08:00

7.0 KiB

Raw Permalink Blame History

创建订单功能说明

功能概述

在订单列表页面添加了完整的创建订单功能，支持：

搜索患者
选择订单类型
输入订单金额
添加多个订单项
自动计算总价

新增功能

1. 创建订单按钮

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

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

2. 创建订单弹窗

包含以下字段：

基本信息

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

订单详情

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

3. 患者搜索

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

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. 订单项管理

添加订单项

const addOrderDetail = () => {
    createForm.details.push({
        related_type: '',
        related_id: '',
        quantity: 1,
        unit_price: 0,
        total_price: 0
    })
}

删除订单项

const removeOrderDetail = (index: number) => {
    createForm.details.splice(index, 1)
}

自动计算总价

const updateDetailTotal = (index: number) => {
    const detail = createForm.details[index]
    detail.total_price = detail.quantity * detail.unit_price
}

5. 表单验证

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

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

6. 提交创建

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
    }
}

使用流程

第一步：打开创建订单弹窗

点击"+ 创建订单"按钮打开弹窗

第二步：选择患者

在患者输入框中输入患者姓名或手机号
从下拉列表中选择患者

第三步：填写基本信息

选择订单类型（挂号费、问诊费、药品费用）
输入订单金额（可选，会自动计算）
输入备注（可选）

第四步：添加订单项

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

第五步：提交创建

点击"创建订单"按钮
系统验证表单
创建成功后自动刷新列表

数据结构

创建订单请求参数

{
    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   // 总价
        }
    ]
}

权限控制

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

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

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

新增导入

在 API 导入中添加了 orderCreate：

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

同时导入了患者列表 API：

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

新增状态

响应式数据

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

表单数据

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

新增方法

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

特性

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

注意事项

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

7.0 KiB Raw Permalink Blame History Unescape Escape