vue3-ep-biz-lib

Appearance

BizGantt 甘特图 ​

排期甘特图：日 / 周 / 月三档时间粒度（月份表头 + 日格刻度 + 周末底纹 + 今日线）、任务条起止区间与完成度着色、里程碑菱形、计划基线对照条（baselineStart/End）、分组行折叠、任务条拖拽改期（整条平移 + 拖缘伸缩工期 + 里程碑平移，本地预览抬起确认、贴边自动滚动、ESC 取消）、拖拽排序换分组（reorderable）、条内进度边界拖拽（progress-editable）、任务选中态（v-model:selected-key）、刻度缩放（zoomable）、空白轨道框选区间新建任务（可垂直跨行批量）、双击编辑面板（内置表单或 #editor 插槽接管，业务扩展字段并入任务交 #bar 插槽渲染；removable 可删除；texts 覆盖内置文案）、可视范围锁定与编程式 API、键盘可达（↑↓ 换行、Enter 激活、空格选中/折叠、+- 缩放）、泳道资源模式（lanes：左列固定泳道、一条泳道多任务重叠错层、框选加条不加行、跨泳道同建、垂直拖拽换泳道）。单滚动容器，左任务列与表头 sticky。项目排期、生产计划、设备检修窗口、活动档期、按人 / 场地的资源排期——与 BizProcess（流程节点展示）互补，本组件承载真实时间轴刻度。

基础排期 ​

任务
2026年9月
2026年10月
2026年11月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
需求评审
概要与接口设计
前端开发
联调与缺陷修复
验收发布
任务条起止区间、今日线与周末底纹（拖动查看 sticky 列与表头）。
显示代码

进度与里程碑 ​

任务
2026年8月
2026年9月
2026年10月
2026年11月
8/31
9/7
9/14
9/21
9/28
10/5
10/12
10/19
10/26
11/2
基建搭建
模块开发
里程碑：中期评审
系统集成测试
里程碑：正式发布
线上观察期
progress 条内着色比例，milestone 渲染菱形节点（验收 / 发布节点）。
显示代码

粒度切换 ​

粒度
任务
2026年1月
2026年2月
2026年3月
2026年4月
2026年5月
2026年6月
2026年7月
2026年8月
2026年9月
2026年10月
2026年11月
2026年12月
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
一季度扩容
二季度迁移
三季度治理
四季度优化
view 切换 日（40px/格）/ 周（26px/格，周一标注日期）/ 月（14px/格）。
显示代码

分组折叠 ​

任务
2026年9月
2026年10月
2026年11月
10/5
10/12
10/19
10/26
11/2
主体工程2
商铺外立面
消防管道改造
机电安装2
强电布线
弱电与网络
装修收尾1
软装进场
group 字段聚合分组行，点击分组行折叠 / 展开，expose toggleAll。
显示代码

泳道资源排期 ​

lanes 传入泳道名字符串数组，声明顺序即左列泳道顺序；任务的 group 值即其所在泳道（与 lanes 中的名字精确匹配）：

ts
const lanes = ['张三', '李四', '会议室A'] // 左列固定渲染 3 条泳道（按声明顺序）

const tasks: BizGanttTask[] = [
  { key: 1, group: '张三', name: '需求评审', start: '2026-09-28', end: '2026-09-30' }, // → 张三泳道
  { key: 2, group: '李四', name: '前端开发', start: '2026-10-08', end: '2026-10-23' }, // → 李四泳道
  { key: 3, group: '会议室A', name: '方案评审', start: '2026-10-12', end: '2026-10-13' }, // → 会议室A泳道
  // 同一泳道可挂多条（日期重叠自动错层）；group 不必出现在相邻位置，渲染按 lanes 聚合
]
html
<BizGantt :lanes="lanes" :tasks="tasks" />

匹配与兜底规则：

  • group 与泳道名精确匹配（区分大小写，须完全一致）；
  • group 未在 lanes 中声明 → 该泳道自动追加在声明泳道之后（数据不丢失，开发模式 console.warn 提示）；
  • group 缺省（undefined）→ 落入末尾「未分配」泳道；把任务垂直拖入「未分配」泳道即清除其 group；
  • lanes 传空数组 [] → 仍为泳道模式，泳道完全由任务 group 出现顺序自动推导；
  • lanes 名字重复时自动去重（保留首次出现顺序）；不传 lanes → 保持任务清单模式（一条任务一行）。
任务
2026年9月
2026年10月
2026年11月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
张三2
李四2
会议室A2
传入 lanes 即切换为泳道模式：左列固定泳道（不随框选 / 新建增行），任务 group 即泳道归属；一条泳道可挂多条任务，日期重叠的错层堆叠；泳道内框选 = 该泳道加一条（单目标弹面板），跨泳道框选 = 每个覆盖泳道同建一条（外抛 range-select，groups 为泳道列表）；reorderable 垂直拖拽 = 换泳道。
显示代码

设备检修窗口（泳道锁定与状态色） ​

任务
2026年10月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1号产线2
季度大修 100%
试产爬坡 30%
2号产线2
保养窗口
模具更换
包装线1

泳道即设备：`min-date` / `max-date` 锁定十月窗口（编辑面板禁选越界日期）；任务级 `color` 按状态着色（红=大修、橙=保养）； 2号产线「保养窗口 / 模具更换」日期重叠自动错层半高；拖条平移改期、拖条两端伸缩窗口，里程碑（安全巡检）同样可拖。

泳道即设备：min-date / max-date 锁定窗口（面板日期联动禁选越界）、任务级 color 按状态着色、日期重叠自动错层半高、draggable / resizable 平移与伸缩窗口、里程碑同样落在泳道内可拖。
显示代码

门店档期（泳道选中与缩放） ​

任务
2026年9月
2026年10月
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
旗舰店2
万达店1
校园店2

点击档期条选中（主色描边高亮）：尚未选中 ；按住 ctrl 滚轮缩放 日 / 周 / 月 总览（当前 day），长档期在月视图一屏尽收。

v-model:selected-key 点选档期条联动右侧详情（门店 / 档期 / 进度），zoomable ctrl+滚轮缩放 日 / 周 / 月，长档期月视图一屏总览。
显示代码

值班巡检（跨泳道批量排期） ​

任务
2026年10月
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
厂区东2
厂区西1
办公楼1
垂直跨泳道框选一次，为所有覆盖区域同建相同区间的排期（range-select 载荷 groups 为区域列表，业务逐泳道落库）；单区域框选走内置面板，配合 editable / removable 完成编辑删除闭环。
显示代码

拖拽改期 ​

任务
2026年9月
2026年10月
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
物料采购
设备进场
产线调试
试产爬坡
draggable 任务条水平拖拽整条平移，抬起时 reschedule 外抛新起止日期。
显示代码

自定义条色 ​

任务
2026年9月
2026年10月
10/5
10/12
10/19
10/26
营销活动页（设计）
营销活动页（前端）
投放配置（运营）
线上保障（运维）
复盘节点
任务级 color 定制条色（按责任人 / 按状态着色）。
显示代码

条内文字 ​

bar-text 函数：任务名 · 进度 / 工期

任务
2026年9月
2026年10月
2026年11月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
需求分析
需求分析 · 100% / 9天
系统设计
系统设计 · 55% / 12天
开发实施
开发实施 · 20% / 19天
上线验收
上线验收 · 0% / 10天

#bar 插槽：图标 + 文字完全自定义

任务
2026年9月
2026年10月
2026年11月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
需求分析
已完成
系统设计
系统设计…
开发实施
开发实施…
上线验收
上线验收…
bar-text 函数生成条内文字（任务名 / 进度 / 工期等），#bar 插槽可完全自定义（图标 + 文字）。
显示代码

框选新建与双击编辑 ​

任务
2026年9月
2026年10月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
需求评审
系统设计
里程碑1
方案定稿

单行框选弹出编辑面板（尚未框选）；垂直跨行框选覆盖多行时按分组归并目标，只外抛 range-select（groups 列表）不弹面板，本示例按分组批量落库。 双击任务条 / 里程碑可编辑，面板左下「删除」可移除任务（removable）；键盘：↑↓ 换行、Enter 打开编辑 / 折叠分组、空格选中 / 折叠；拖动 / 框选中按 ESC 取消。

creatable 开启后可在空白轨道按住拖动框选日期区间（浅色选区 + 日期浮签，按天精确，ESC 取消），可垂直跨行：覆盖到的行按分组归并目标（任务行取其 group、分组头取组名，去重保序），单目标弹编辑面板（内置表单：名称、起止、进度、里程碑），多目标只外抛 range-select（载荷含 groups 列表）交业务批量落库；确认后 update:tasks 同步并外抛 save；removable 开启后面板左下提供「删除」按钮（仅编辑模式，气泡二次确认），删除后外抛 delete。
显示代码

自定义编辑面板 ​

任务
2026年9月
2026年10月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
物料采购
物料采购@李工
设备进场
设备进场@王工
试产节点

#editor 插槽接管面板（含按钮）：草稿直接绑定业务字段（负责人 / 条色），confirm 后并入任务对象，#bar 插槽按业务字段自定义渲染条内内容。

#editor 插槽整体接管面板内容（含确认 / 取消按钮），作用域提供 { mode, draft, task, confirm, cancel }：草稿可直接绑定业务扩展字段（负责人 / 条色等），confirm() 后并入任务对象，再由 #bar 插槽按业务字段自定义渲染条内内容。
显示代码

拖缘调期 ​

任务
2026年9月
2026年10月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
场地勘测
管线预埋
设备安装

拖动中为本地预览（不逐步同步 tasks），贴近容器左右缘自动滚动，抬起时一次性 update:tasks + reschedule。

resizable 任务条左右端把手拖拽伸缩起止 / 工期（与 draggable 整条平移互补，reschedule 以 type: move / resize 区分）；拖动中本地预览不逐步同步 tasks，贴近容器左右缘自动滚动，抬起一次性确认。
显示代码

范围锁定与编程式 API ​

任务
2026年9月
2026年10月
2026年11月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
立项审批
一期施工
竣工验收

可视窗口锁定 9/1 ~ 11/30（与任务数据无关）；面板打开与滚动定位均可编程式调用，不依赖框选 / 双击手势。

min-date / max-date 锁定可视窗口（未指定侧由任务数据推导）；expose openCreate / openEdit 编程式打开编辑面板（不依赖手势），scrollToToday / scrollToDate / scrollToTask 滚动定位。
显示代码

任务选中态 ​

任务
2026年9月
2026年10月
2026年11月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
需求评审
系统设计
开发实施
里程碑1
发布上线

点击任务条 / 里程碑选中（主色描边高亮）：尚未选中 ；键盘空格选中焦点行，expose `select(null)` 清空；任务条右键外抛 bar-contextmenu（含指针坐标，可挂 ElDropdown 虚拟触发菜单）。

v-model:selected-key 选中任务条 / 里程碑（主色描边高亮），配合右侧详情面板联动；键盘空格选中焦点行，expose select(null) 清空；任务条右键外抛 bar-contextmenu（含指针坐标，可挂 ElDropdown 虚拟触发菜单）。
显示代码

计划基线对照 ​

任务
2026年9月
2026年10月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
需求评审
系统设计
开发实施

设置 `baseline-start` / `baseline-end` 后在任务条后方渲染灰色虚线对照条（悬停查看计划区间）：延迟开工、超期一目了然。

任务设置 baseline-start / baseline-end 后在条后方渲染灰色虚线对照条，计划与实际偏差一屏可见（悬停查看计划区间）。
显示代码

进度拖拽 ​

任务
2026年9月
2026年10月
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
物料采购
物料采购 40%
产线调试
产线调试 65%
progress-editable 开启后拖动条内进度色块右缘直接改完成度：拖动中本地预览（条内文字实时跟随），抬起一次性确认并外抛 progress-change（from 为原进度）。
显示代码

刻度缩放 ​

任务
2026年1月
2026年2月
2026年3月
2026年4月
2026年5月
2026年6月
2026年7月
2026年8月
2026年9月
1/5
1/12
1/19
1/26
2/2
2/9
2/16
2/23
3/2
3/9
3/16
3/23
3/30
4/6
4/13
4/20
4/27
5/4
5/11
5/18
5/25
6/1
6/8
6/15
6/22
6/29
7/6
7/13
7/20
7/27
8/3
8/10
8/17
8/24
8/31
9/7
9/14
9/21
一季度扩容
二季度迁移
三季度验收

按住 ctrl 滚动滚轮在 日 / 周 / 月 间缩放（当前：week），指针下的日期缩放前后不漂移；焦点在任务行时按 + / - 同效。

zoomable 开启后按住 ctrl 滚动滚轮在 日 / 周 / 月 间缩放（v-model:view 双向同步），指针下的日期缩放前后不漂移；焦点在任务行时按 + / - 同效。
显示代码

拖拽排序 ​

任务
2026年9月
2026年10月
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
需求评审
设计2
视觉稿
交互稿
开发实施
reorderable（配合 draggable）按住任务条垂直拖到其他行：目标行渲染虚线 ghost 预览落点，抬起换位、分组随落点行（分组行 = 追加到该分组块末尾），外抛 reorder；水平分量照常改期，一次拖拽可同时改期 + 换位。
显示代码

Props ​

属性名类型默认值说明
tasksBizGanttTask[][]任务列表（key / name / start / end / progress / group / milestone / color）
view'day' | 'week' | 'month''day'时间粒度（每格像素 40 / 26 / 14）
heightnumber360表体高度（整体滚动）
row-heightnumber36行高
show-todaybooleantrue绘制今日竖线
draggablebooleanfalse任务条可水平拖拽整条平移改期
resizablebooleanfalse任务条左右端可拖拽伸缩起止 / 工期（reschedule type=resize）
bar-text(task) => string—条内文字生成（返回空串不显示；被 #bar 插槽覆盖）
creatablebooleanfalse允许在空白轨道按住拖动框选日期区间（emit range-select）
editablebooleanfalse双击 / 框选后弹出编辑面板（内置表单或 #editor 插槽）
removablebooleanfalse编辑面板显示删除按钮（仅 update 模式，气泡确认后 emit delete）
editor-widthnumber420编辑面板宽度
min-datestring—锁定可视范围起始日期 YYYY-MM-DD（未指定由任务数据推导）
max-datestring—锁定可视范围结束日期 YYYY-MM-DD 含当日（未指定由任务数据推导）
selected-keystring | number | null—选中任务 key（v-model:selected-key；未绑定组件内自管理）
progress-editablebooleanfalse条内进度边界可拖拽调整完成度（emit progress-change）
zoomablebooleanfalsectrl+滚轮 / 行上 +- 键缩放时间粒度（emit update:view）
reorderablebooleanfalse任务条可垂直拖拽换行调序 / 换分组（emit reorder；需配合 draggable）
textsPartial<BizGanttTexts>—内置面板与校验提示文案覆盖（缺省中文；rangeOverflow 支持 {min}/{max} 占位）
lanesstring[]—泳道名字符串数组（声明序即左列顺序，任务 group 精确匹配泳道名；未声明分组追加末尾、无 group 落「未分配」、传 [] 按数据推导；传入即切换泳道模式，详见「泳道资源排期」）

Events ​

事件名参数说明
update:tasks(tasks: BizGanttTask[])拖拽 / 拖缘调整抬起、进度拖拽、排序、编辑面板确认后同步（v-model:tasks；拖动中为本地预览）
update:view(view: BizGanttView)zoomable 缩放切换粒度（v-model:view）
update:selectedKey(key: string | number | null)选中任务变化（v-model:selected-key）
reschedule(payload: { task, from, to, tasks, type })拖拽抬起确认改期（from / to 为原起止；type 为 move 平移 / resize 拖缘，缺省 move）
progress-change(payload: { task, from, tasks })进度拖拽确认（from 为原进度）
reorder(payload: { task, tasks })垂直拖拽换位确认（任务模式：分组随落点行；泳道模式：换泳道、数组位置不变）
task-click(task)行点击
bar-click(task)任务条 / 里程碑点击（同时置选中）
bar-contextmenu(task, event)任务条 / 里程碑右键（event 含坐标，可挂自定义菜单）
range-select(payload: { start, end, task, group, groups })框选完成（单目标 task/group 为所在行信息；跨行多目标 task 为 null、groups 为归并分组列表，内置面板不弹，可据此批量落库）
bar-dblclick(task)双击任务条 / 里程碑（editable 关闭时可据此自行接管）
track-dblclick(payload: { start, end, group })双击轨道空白（start === end 为双击处日期）
save(payload: { mode, task, tasks })编辑面板确认后（mode 为 create / update，task 含扩展字段）
delete(payload: { task, tasks })编辑面板删除确认后（removable；tasks 为删除后的列表）

Slots ​

插槽名作用域说明
bar{ task, progress }任务条内容接管（图标 / 文字等，超出条宽自动裁剪）
editor{ mode, draft, task, confirm, cancel, remove? }编辑面板内容接管（含按钮）；草稿可绑定业务扩展字段，confirm(patch?) 将其并入任务；remove 在 removable 时提供（删除当前任务）

Expose ​

名称类型说明
toggleGroup(name: string) => void折叠 / 展开指定分组
toggleAll(collapsed: boolean) => void全部折叠 / 展开
openCreate(dates?: { start, end }) => void编程式打开新建面板（可选预填区间，不依赖 editable 手势）
openEdit(task: BizGanttTask) => void编程式打开指定任务的编辑面板
scrollToDate(date: string) => void横向滚动到指定日期（居中）
scrollToToday() => void滚动到今日线
scrollToTask(key: string | number) => void滚动定位到指定任务（水平居中其区间，垂直滚到所在行）
select(key: string | number | null) => void选中指定任务 / 传 null 清空选中

TIP

日期格式为 YYYY-MM-DD（结束日期含当日）。泳道模式（lanes）：左列固定泳道、一行多任务（重叠错层半高堆叠）、框选加条不加行、跨泳道逐泳道同建、垂直拖拽换泳道；未声明分组追加末尾、无 group 任务落「未分配」泳道。任务模式：拖拽 / 拖缘 / 里程碑平移 / 进度拖拽 / 排序在拖动中以本地预览渲染（不逐步同步 tasks），抬起时一次性确认，按住拖动中可按 ESC 取消。框选可垂直跨行：覆盖行按分组（泳道模式下即泳道）归并目标（同组多行仍为单目标），单目标自动弹面板、多目标只外抛 range-select（groups 列表）由业务批量落库，框选贴容器左右 / 上下缘自动滚动。reorderable 换位落点为目标行之前（分组行 = 该分组块末尾），分组随落点行。框选 / 双击新建的任务自动插入同分组块末尾（无分组则追加末尾）。分组数据建议按组连续排列（同名分组不相邻会渲染多个分组头）；min-date / max-date 需覆盖任务日期范围——面板日期选择器联动禁选窗口外日期，confirm 越界兜底拦截，窗口外任务的条在网格内截断显示（悬停仍见真实日期）。键盘可达：Tab 进入任务区后 ↑↓ 在行间移动焦点，Enter 激活（任务行选中并打开编辑、分组行折叠）、空格选中任务行 / 折叠分组、zoomable 时 +- 缩放。开发模式下 key 重复、日期格式非法、泳道归属缺失会 console.warn 提示。#editor 草稿上直接 v-model 业务扩展字段（如负责人），confirm() 后随任务并入，供 #bar 插槽自定义渲染。