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

以上实现方案可以根据实际需求进行调整和扩展，例如添加批量排班、排班模板、医生休假管理等功能。