如何为PrimeVue MenuItems传递预约ID并触发重排模态框

按以下步骤修改代码即可实现需求：

1. 列表项组件调整 #

首先确保组件已通过props接收当前预约对象appointment，然后添加响应式变量存储选中的预约ID，并动态生成绑定当前预约的菜单项：

<template>
  <div>
    <div>
      <label class="text-slate-500 text-sm">医生姓名</label>
      <div class="text-sm">{{ appointment.doctor.name }}</div>
    </div>
    <div>
      <span>
        <a href="#" @click="toggle($event)"><i class="pi pi-ellipsis-v"></i></a>
      </span>
      <Menu ref="menu" :model="menuItems" :popup="true" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    appointment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rescheduleVisible: false,
      selectedAppointmentId: null,
      form: {
        appointment_time: null,
        doctor_id: null,
        processing: false
      },
      doctors: [] // 医生列表可通过接口或props传入
    }
  },
  computed: {
    menuItems() {
      return [
        {
          label: '重新预约',
          command: () => {
            this.selectedAppointmentId = this.appointment.id
            this.rescheduleVisible = true
          }
        },
        { label: '标记完成' },
        { label: '取消预约' },
        { label: '生成账单' },
        { label: '设置提醒' },
        { label: '发送消息' }
      ]
    }
  },
  methods: {
    toggle(event) {
      this.$refs.menu.toggle(event)
    }
  },
  watch: {
    rescheduleVisible(newVal) {
      if (newVal && this.selectedAppointmentId) {
        // 这里可根据ID请求接口获取预约详情，或从已有列表中匹配填充表单
        const targetAppointment = this.$parent.appointments.find(item => item.id === this.selectedAppointmentId)
        if (targetAppointment) {
          this.form.appointment_time = targetAppointment.appointment_time
          this.form.doctor_id = targetAppointment.doctor.id
        }
      }
    }
  }
}
</script>

2. 模态框功能完善 #

调整模态框的提交逻辑，确保提交时携带选中的预约ID：

<Dialog v-model:visible="rescheduleVisible" modal header="重新预约" :style="{ width: '30vw' }">
  <div class="bg-white dark:bg-gray-800 sm:rounded-lg">
    <div class="p-2 text-gray-900 dark:text-gray-100">
      <div class="grid grid-col-1 gap-3">
        <div class="p-2">
          <div>
            <InputLabel for="appointment_time" value="日期和时间" />
            <Calendar inputId="appointment_time" v-model="form.appointment_time" :showTime="true"
              :showSeconds="false" hourFormat="12" />
          </div>
        </div>
        <div class="p-2">
          <div>
            <InputLabel for="doctor" value="医生" />
            <Dropdown v-model="form.doctor_id" :options="doctors" optionLabel="name"
              optionValue="id" placeholder="选择医生" :filter="true" />
          </div>
        </div>
      </div>
      <div class="mt-3">
        <div class="flex justify-end">
          <PrimaryButton class="ml-2" :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing" @click="submitReschedule">
            确认重新预约
          </PrimaryButton>
        </div>
      </div>
    </div>
  </div>
</Dialog>

3. 添加重新预约提交方法 #

在组件的methods中添加提交逻辑：

methods: {
  // ... 保留原有方法
  async submitReschedule() {
    this.form.processing = true
    try {
      // 携带预约ID发起修改请求
      await this.$axios.put(`/appointments/${this.selectedAppointmentId}`, this.form)
      this.rescheduleVisible = false
      this.$toast.success('预约已重新安排')
      // 可触发父组件刷新列表
      this.$emit('refresh-list')
    } catch (error) {
      this.$toast.error('操作失败，请重试')
    } finally {
      this.form.processing = false
    }
  }
}

内容的提问来源于stack exchange，提问作者Happy Coder