新增功能
This commit is contained in:
Your Name
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="appointment-list">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form class="ls-form" :model="formData" inline>
|
||||
<el-form-item class="w-[280px]" label="患者姓名">
|
||||
<el-input
|
||||
v-model="formData.patient_name"
|
||||
placeholder="请输入患者姓名"
|
||||
clearable
|
||||
@keyup.enter="resetPage"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="w-[280px]" label="医生姓名">
|
||||
<el-input
|
||||
v-model="formData.doctor_name"
|
||||
placeholder="请输入医生姓名"
|
||||
clearable
|
||||
@keyup.enter="resetPage"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="w-[280px]" label="预约状态">
|
||||
<el-select v-model="formData.status" placeholder="请选择" clearable>
|
||||
<el-option label="已预约" :value="1" />
|
||||
<el-option label="已取消" :value="2" />
|
||||
<el-option label="已完成" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预约日期">
|
||||
<daterange-picker
|
||||
v-model:startTime="formData.start_date"
|
||||
v-model:endTime="formData.end_date"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<el-table
|
||||
v-loading="pager.loading"
|
||||
:data="pager.lists"
|
||||
size="large"
|
||||
>
|
||||
<el-table-column label="ID" prop="id" width="80" />
|
||||
|
||||
<el-table-column label="患者信息" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div>{{ row.patient_name }}</div>
|
||||
<div class="text-xs text-gray-400">{{ row.patient_phone }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="医生" prop="doctor_name" min-width="120" />
|
||||
|
||||
<el-table-column label="预约日期" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ row.appointment_date }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="预约时间" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.appointment_time }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="时段" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.period === 'morning' ? 'success' : 'warning'" size="small">
|
||||
{{ row.period === 'morning' ? '上午' : '下午' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="预约类型" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.appointment_type_desc }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="row.status === 1 ? 'success' : row.status === 2 ? 'info' : 'primary'"
|
||||
size="small"
|
||||
>
|
||||
{{ row.status_desc }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="备注" prop="remark" min-width="150" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="创建时间" min-width="160">
|
||||
<template #default="{ row }">
|
||||
{{ row.create_time }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-perms="['doctor.appointment/detail']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
v-perms="['doctor.appointment/cancel']"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleCancel(row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
v-perms="['doctor.appointment/complete']"
|
||||
type="success"
|
||||
link
|
||||
@click="handleComplete(row)"
|
||||
>
|
||||
完成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailVisible"
|
||||
title="挂号详情"
|
||||
width="600px"
|
||||
>
|
||||
<el-descriptions :column="2" border v-if="detailData">
|
||||
<el-descriptions-item label="挂号ID">
|
||||
{{ detailData.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag
|
||||
:type="detailData.status === 1 ? 'success' : detailData.status === 2 ? 'info' : 'primary'"
|
||||
size="small"
|
||||
>
|
||||
{{ detailData.status_desc }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="患者姓名">
|
||||
{{ detailData.patient_name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="患者电话">
|
||||
{{ detailData.patient_phone }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="医生姓名">
|
||||
{{ detailData.doctor_name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预约日期">
|
||||
{{ detailData.appointment_date }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">
|
||||
{{ detailData.appointment_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="时段">
|
||||
{{ detailData.period === 'morning' ? '上午' : '下午' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预约类型">
|
||||
{{ detailData.appointment_type_desc }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ detailData.create_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">
|
||||
{{ detailData.remark || '无' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { appointmentLists, cancelAppointment, completeAppointment, appointmentDetail } from '@/api/doctor'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
const formData = reactive({
|
||||
patient_name: '',
|
||||
doctor_name: '',
|
||||
status: '',
|
||||
start_date: '',
|
||||
end_date: ''
|
||||
})
|
||||
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||||
fetchFun: appointmentLists,
|
||||
params: formData
|
||||
})
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref<any>(null)
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = async (row: any) => {
|
||||
try {
|
||||
const res = await appointmentDetail({ id: row.id })
|
||||
detailData.value = res
|
||||
detailVisible.value = true
|
||||
} catch (error) {
|
||||
console.error('获取详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消挂号
|
||||
const handleCancel = async (row: any) => {
|
||||
try {
|
||||
await feedback.confirm('确定要取消该挂号吗？')
|
||||
await cancelAppointment({ id: row.id })
|
||||
feedback.msgSuccess('取消成功')
|
||||
getLists()
|
||||
} catch (error) {
|
||||
// 用户取消操作
|
||||
}
|
||||
}
|
||||
|
||||
// 完成挂号
|
||||
const handleComplete = async (row: any) => {
|
||||
try {
|
||||
await feedback.confirm('确认患者已就诊完成？')
|
||||
await completeAppointment({ id: row.id })
|
||||
feedback.msgSuccess('操作成功')
|
||||
getLists()
|
||||
} catch (error) {
|
||||
// 用户取消操作
|
||||
}
|
||||
}
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.appointment-list {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user