xiaoye-components

Appearance

Scheduler 业务接入模板 ​

这页不是再讲一遍 xy-scheduler 的基础能力，而是直接给你一份可以迁到业务项目里的最小接入骨架：接口数据保留在页面层，xy-scheduler 只负责渲染和交互入口，真正的创建、编辑和回写仍然由业务模型控制。

这页解决什么 ​

  • 后端接口返回的原始排期行数据，如何映射成 SchedulerEvent[]
  • 用户框选日期或点击事件后，如何打开自己的抽屉或表单
  • 用户拖拽改期后，如何把结果回写回原始业务数组
  • 页面层如何同时维护“原始数据”“映射后的 events”“最近一次待提交 payload”

业务接入骨架 ​

这个示例把“接口行数据 -> events 映射 -> 抽屉编辑 -> 回写源数据”放在一个最小页面里，适合作为业务接入模板。

接口数据

左侧保留业务原始行数据，右侧 `xy-scheduler` 只消费映射后的 `events`。 

[
  {
    "id": "api-kickoff",
    "subject": "项目 Kickoff",
    "startAt": "2026-03-24T10:00:00",
    "endAt": "2026-03-24T11:00:00",
    "isAllDay": false,
    "owner": "Xiaoye",
    "category": "meeting"
  },
  {
    "id": "api-handover",
    "subject": "交付排期",
    "startAt": "2026-03-25",
    "endAt": "2026-03-27",
    "isAllDay": true,
    "owner": "Alice",
    "category": "delivery"
  },
  {
    "id": "api-standup",
    "subject": "工作日站会",
    "startAt": "2026-03-23T09:30:00",
    "isAllDay": false,
    "owner": "Team A",
    "category": "meeting",
    "repeat": {
      "freq": "weekly",
      "byweekday": [
        "mo",
        "tu",
        "we",
        "th",
        "fr"
      ],
      "dtstart": "2026-03-23T09:30:00"
    }
  }
]
排期日历
映射后 events

这里展示传给 `xy-scheduler` 的事件数组，以及最近一次准备提交的 payload。 

[
  {
    "id": "api-kickoff",
    "title": "项目 Kickoff",
    "start": "2026-03-24T10:00:00",
    "end": "2026-03-24T11:00:00",
    "allDay": false,
    "editable": true,
    "extendedProps": {
      "owner": "Xiaoye",
      "category": "meeting"
    }
  },
  {
    "id": "api-handover",
    "title": "交付排期",
    "start": "2026-03-25",
    "end": "2026-03-27",
    "allDay": true,
    "editable": true,
    "extendedProps": {
      "owner": "Alice",
      "category": "delivery"
    }
  },
  {
    "id": "api-standup",
    "title": "工作日站会",
    "start": "2026-03-23T09:30:00",
    "allDay": false,
    "editable": false,
    "extendedProps": {
      "owner": "Team A",
      "category": "meeting"
    },
    "rrule": {
      "freq": "weekly",
      "byweekday": [
        "mo",
        "tu",
        "we",
        "th",
        "fr"
      ],
      "dtstart": "2026-03-23T09:30:00"
    },
    "duration": "00:30"
  }
]
这里会显示最近一次映射、创建或改期操作。
{}

推荐迁移顺序 ​

  1. 先把你的接口数据字段名替换到示例里的 ScheduleApiRow。
  2. 再把 rows -> schedulerEvents 的映射函数替换成业务实际映射。
  3. 接着把 date-select、event-click、event-change 分别接到你自己的抽屉、表单和接口调用。
  4. 最后再补充权限控制、只读模式、重复规则和外部拖入这类高级场景。

最关键的分层 ​

层级建议职责
接口层返回业务原始行数据，例如排班、会议、值班、交付计划
页面层维护源数据、映射逻辑、抽屉状态、保存动作和请求回写
xy-scheduler负责渲染日历和抛出交互事件，不直接持久化业务数据

什么时候用这个模板 ​

  • 你已经确认 xy-scheduler 的展示和交互满足需求，现在准备真正接业务接口
  • 你需要给团队一个统一的接入骨架，而不是让每个人自己摸索 events 和回调怎么组织
  • 你希望“日历是组件，数据流是页面层”，而不是把业务逻辑写死在组件里

相关页面 ​