Tp-gantt NPM | npm.io

tp-gantt

(Vue仿Teambition甘特图基于ts-gantt改造)

甘特图（Gantt chart）称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。

npm install --save tp-gantt

import tpGantt from 'tp-gantt'
import 'tp-gantt/lib/tp-gantt.css'

components: {
    tpGantt
}

npm run serve

序号	参数	说明	类型	可选值	默认值	注意
1	data	数据	Task[]		[]
2	columns	表格列字段数据	Column[]	任务标题、执行者、截止时间、前置依赖	不传
3	viewType	视图类型	string	支持日视图(day)、周视图(week)、月视图(month)、季视图(quarter)、年视图(halfYear)	day	TODO 待实现（增加该参数）
4	translateDate	甘特图时间偏移值	支持dayjs对象或标准时间字符串、日期对象、或ms时间戳		当前时间		TODO 待增加该参数
...	其他控制字段(待开发)	控制排序，是否可编辑等

序号	事件名	说明	回调参数
1	onTaskCreate	创建任务	function(parent, task) 依次为任务数据与父级任务数据
3	onTaskDelete	删除任务	function(task) 依次为当前任务行数据
4	onTaskIndent	任务左右移动切换父子任务	function(parent, task) 依次为左右移动的父任务、与移动当前任务
5	onTaskChangeContent	任务内容发生变更	function(task, content, oldContent) 依次为当前行数据
6	onTaskTimeChange	任务时间变更(时间dayjs类型)	function(task, startDate, endDate) 依次为当前行数据
7	onToDetail	进入详情	function(task) 当前行数据
8	onDragSort	拖拽排序	function(preParent, parentTask, preIndex, index, handleTask) 移动前后父级任务及位置
9	changeTaskType	切换任务类型	function(task) 当前行数据