如何为每位独立医生关联唯一的动态时间日程

核心思路是将医生ID作为唯一标识，把生成的日程与ID做键值映射，不管是用动态路由还是下拉选择，都通过ID定位到对应医生，再生成/获取其专属日程。以下是具体实现步骤：

1. 调整Vuex状态结构（可选但推荐） #

如果需要缓存已生成的日程，避免重复计算，可在Vuex中单独维护一个以医生ID为键的日程对象：

// store/index.js
state: {
  doctors: [], // 从PostgreSQL拉取的医生数组，每个元素包含id、name、startWorkTime、endWorkTime等字段
  doctorSchedules: {} // 键：doctorId，值：对应生成的日程数组
},
mutations: {
  SET_DOCTOR_SCHEDULE(state, { doctorId, schedule }) {
    state.doctorSchedules[doctorId] = schedule;
  }
}

2. 编写日程生成工具函数 #

封装一个独立的工具函数，根据起止时间生成时间数组：

// utils/scheduleGenerator.js
export default function generateSchedule(startTime, endTime, interval = 30) {
  const schedule = [];
  let currentTime = new Date(startTime);
  const end = new Date(endTime);

  while (currentTime <= end) {
    // 格式化时间为HH:mm格式
    schedule.push(currentTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }));
    currentTime.setMinutes(currentTime.getMinutes() + interval);
  }
  return schedule;
}

3. 动态路由场景实现 #

当路由为/doctor/:id时，通过路由参数获取医生ID，生成对应日程：

<template>
  <div class="doctor-schedule">
    <h3>{{ currentDoctor?.name }}的出诊日程</h3>
    <div v-if="currentSchedule.length">
      <span v-for="time in currentSchedule" :key="time" class="time-item">{{ time }}</span>
    </div>
    <p v-else>暂无日程数据</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import generateSchedule from '@/utils/scheduleGenerator';

export default {
  computed: {
    ...mapState(['doctors', 'doctorSchedules']),
    currentDoctor() {
      // 注意转换ID类型（路由参数是字符串，医生ID通常是数字）
      const doctorId = parseInt(this.$route.params.id);
      return this.doctors.find(doc => doc.id === doctorId);
    },
    currentSchedule() {
      if (!this.currentDoctor) return [];
      const doctorId = this.currentDoctor.id;
      // 优先取缓存的日程，无则生成并存入Vuex
      if (!this.doctorSchedules[doctorId]) {
        const schedule = generateSchedule(
          this.currentDoctor.startWorkTime,
          this.currentDoctor.endWorkTime
        );
        this.SET_DOCTOR_SCHEDULE({ doctorId, schedule });
      }
      return this.doctorSchedules[doctorId];
    }
  },
  methods: {
    ...mapMutations(['SET_DOCTOR_SCHEDULE'])
  }
};
</script>

4. v-select下拉选择场景实现 #

通过下拉框绑定医生对象，实时生成对应日程：

<template>
  <div class="schedule-select">
    <v-select
      v-model="selectedDoctor"
      :items="doctors"
      item-text="name"
      item-value="id"
      label="选择医生"
      return-object
    ></v-select>

    <div v-if="selectedDoctor" class="schedule-list">
      <h3>{{ selectedDoctor.name }}的出诊日程</h3>
      <span v-for="time in selectedSchedule" :key="time" class="time-item">{{ time }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import generateSchedule from '@/utils/scheduleGenerator';

export default {
  data() {
    return {
      selectedDoctor: null
    };
  },
  computed: {
    ...mapState(['doctors', 'doctorSchedules']),
    selectedSchedule() {
      if (!this.selectedDoctor) return [];
      const doctorId = this.selectedDoctor.id;
      if (!this.doctorSchedules[doctorId]) {
        const schedule = generateSchedule(
          this.selectedDoctor.startWorkTime,
          this.selectedDoctor.endWorkTime
        );
        this.SET_DOCTOR_SCHEDULE({ doctorId, schedule });
      }
      return this.doctorSchedules[doctorId];
    }
  },
  methods: {
    ...mapMutations(['SET_DOCTOR_SCHEDULE'])
  }
};
</script>

常见问题排查 #

• ID类型不匹配：路由参数是字符串，医生ID如果是数字，必须用parseInt转换后再匹配
• 未绑定完整医生对象：v-select要添加return-object属性，确保选中的是完整医生对象，才能获取起止时间
• 无需缓存日程：如果不需要缓存，可直接在计算属性中实时生成日程，不用维护Vuex的doctorSchedules状态

内容的提问来源于stack exchange，提问作者Salaj Choudhary