vue实现医生排班
vue实现医生排班
数据结构设计
医生排班系统通常需要设计合理的数据结构来存储排班信息。可以采用以下格式：
data() {
return {
doctors: [
{ id: 1, name: '张医生', department: '内科' },
{ id: 2, name: '李医生', department: '外科' }
],
schedules: [
{ doctorId: 1, date: '2023-06-01', shift: '上午' },
{ doctorId: 2, date: '2023-06-01', shift: '下午' }
],
shifts: ['上午', '下午', '晚上']
}
}排班表格展示
使用表格组件展示排班信息，可以结合element-ui或ant-design-vue等UI框架：
<template>
<table>
<thead>
<tr>
<th>日期</th>
<th v-for="doctor in doctors" :key="doctor.id">{{ doctor.name }}</th>
</tr>
</thead>
<tbody>
<tr v-for="day in weekDays" :key="day">
<td>{{ day }}</td>
<td v-for="doctor in doctors" :key="doctor.id">
{{ getSchedule(doctor.id, day) }}
</td>
</tr>
</tbody>
</table>
</template>排班编辑功能
实现排班编辑功能，可以通过下拉选择或模态框方式：
methods: {
editSchedule(doctorId, date) {
this.currentEdit = { doctorId, date }
this.showDialog = true
},
saveSchedule() {
// 更新或添加排班记录
const index = this.schedules.findIndex(s =>
s.doctorId === this.currentEdit.doctorId &&
s.date === this.currentEdit.date
)
if(index >= 0) {
this.schedules[index].shift = this.selectedShift
} else {
this.schedules.push({
doctorId: this.currentEdit.doctorId,
date: this.currentEdit.date,
shift: this.selectedShift
})
}
this.showDialog = false
}
}日历视图展示
对于更直观的展示，可以使用日历组件：
<template>
<full-calendar
:events="calendarEvents"
@eventClick="handleEventClick"
/>
</template>
<script>
export default {
computed: {
calendarEvents() {
return this.schedules.map(schedule => {
const doctor = this.doctors.find(d => d.id === schedule.doctorId)
return {
title: `${doctor.name}(${schedule.shift})`,
start: schedule.date,
allDay: true
}
})
}
}
}
</script>冲突检测
实现排班冲突检测功能，确保同一时段不会有重复排班：
methods: {
checkConflict(doctorId, date, shift) {
return this.schedules.some(s =>
s.date === date &&
s.shift === shift &&
s.doctorId !== doctorId
)
}
}数据持久化
将排班数据保存到后端API：
methods: {
async saveToBackend() {
try {
const response = await axios.post('/api/schedules', {
schedules: this.schedules
})
console.log('保存成功', response.data)
} catch (error) {
console.error('保存失败', error)
}
},
async loadFromBackend() {
try {
const response = await axios.get('/api/schedules')
this.schedules = response.data
} catch (error) {
console.error('加载失败', error)
}
}
}响应式设计
确保排班系统在不同设备上都能良好显示：
@media (max-width: 768px) {
table {
font-size: 12px;
}
th, td {
padding: 4px;
}
}以上实现方案可以根据实际需求进行调整和扩展，例如添加批量排班、排班模板、医生休假管理等功能。
