wl gantt

wl-gantt

簡介

甘特圖（Gantt chart）又稱為橫道圖、長條圖(Bar chart)、生產計畫進度圖。其透過條狀圖來顯示項目，進度，和其他時間相關的系統進展的內在關係隨著時間進展的情況。以提出者亨利·勞倫斯·甘特（Henry Laurence Gantt）先生的名字命名。
目前市面上最有名的幾個gantt插件佔據江湖了非常久遠的時間，它們古老又強大。 但無一例外的是：它們收費或極其難用並且依賴非常古老的技術，其中有些技術現在入行的新手甚至從未聽聞。
【jQueryGantt】【plusgantt】【dhtmlx】 不可否認它們都非常的強大，不管是從效能還是功能性。但是大多的業務需求並不需要如此龐然大物才能滿足需求。 另一方面古老的技術稀缺的文檔又讓開發者無從下手（收費版甚至不提供文檔，而你的老闆又肯定不會提供錢買下授權）。
wl-gantt出現的背景是筆者在公司的Vue專案中使用B***Gantt插件所受到的巨大傷害：基於extjs（對於17年入行的我來說沒聽過）、不提供開發文件、沒有中文資料、原始碼加密，開發全靠列印實例找屬性。 wl-gantt是一個基於Vue及elementUi的gantt甘特圖插件，是一個896的碼奴在僅有的剩餘的1中擠時間開發而成。
它目提供的功能有：自動檢查來源資料是否符合project任務安排規則、結束後開始的前置任務規則、yearAndmonth|yearAndWeek|ManthAndDay日期跨度地洞切換、內建前置任務管理器。
它的優點：非常簡單易用，且高度可配置，自動抹平不合格資料並給與提示，不會無緣無故產生異常。
它正在逐漸長大，下個階段，它將學會：
1. yearAndMonth、monthAndDay、yearAndWeek時間跨度配置【已完成，month及week格子起止位置待精確化】
2. 內建前置任務選擇器【已完成】
3. 整合樹表全選連動功能【已完成】
4. 新增、移除任務回檔【已完成】
4. 任務連接線
5. 任務自訂懸浮提示
6. 和所有你覺得需要用到的需求

線上演示- GitHub

wl-gantt 與市面應用較廣的大佬型插件對比

wl-gantt 外觀簡潔清爽，非常簡單易用，高度可配置

jquery Gantt 笨重、老舊、較醜但文檔還算清晰

js gantt 不想多說了

dhtmlxGantt 功能強大、全面；但使用難度高，不切實際框架及ui庫，很難在專案中完美應用

frappe-gantt 功能好少

bryntum 唯一較美觀的，但是可配置性差，無法和組件結合;不校驗源資料正確性就報錯、崩潰;規則死板不符合項目使用；收費年950$; 功能強大但文檔只有簡單介紹，詳細用法只能控制台列印

更新說明

2020-04-03 懶載入2020-02-20 更新gantt，詳見版本說明1.0.1 2019-12-14 更新gantt，增加內建前置任務列，支援多選前置和單選前置，並自動校驗來源資料前置任務合法性。 2019-12-3 更新gantt。 1表格支援el-table大部分Attributes和Events ,詳細列表見下方；2名稱列增加nameFormatter格式化內容函數支援；3日期列改為點選顯示編輯輸入框的形式。
2019-12-2 更新gantt.1日期支援yearAndMonth、monthAndDay、yearAndWeek類型，詳見版本记录1 ；2修復部分時間更改情況不回調的問題。

已支援el-table參數及事件列表

    :fit="fit"
    :size="size"
    :border="border"
    :data="selfData"
    :stripe="stripe"
    :height="height"
    :row-key="rowKey"
    :row-style="rowStyle"
    :class="dateTypeClass"
    :cell-style="cellStyle"
    :max-height="maxHeight"
    :tree-props="selfProps"
    :current-row-key="rowKey"
    :row-class-name="rowClassName"
    :cell-class-name="cellClassName"
    :expand-row-keys="expandRowKeys"
    :header-row-style="headerRowStyle"
    :header-cell-style="headerCellStyle"
    :default-expand-all="defaultExpandAll"
    :header-row-class-name="headerRowClassName"
    :highlight-current-row="highlightCurrentRow"
    :header-cell-class-name="headerCellClassName"
    @header-contextmenu="handleHeaderContextMenu"
    @selection-change="handleSelectionChange"
    @row-contextmenu="handleRowContextMenu"
    @current-change="handleCurrentChange"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @expand-change="handleExpandChange"
    @filter-change="handleFilterChange"
    @cell-dblclick="handleCellDbClick"
    @header-click="handleHeaderClick"
    @row-dblclick="handleRowDbClick"
    @sort-change="handleSortChange"
    @cell-click="handleCellClick"
    @select-all="handleSelectAll"
    @row-click="handleRowClick"
    @select="handleSelect"

快速上手

npm i wl-gantt --save

或

npm i wl-gantt -S

import wlGantt from 'wl-gantt'

import "wl-gantt/lib/wl-gantt.css"

Vue.use(wlGantt)

文件

Attributes 參數

序號	參數	說明	類型	可選值	預設值	注意
1	data	數據	Array	-	[]	-
2	dateType	gantt圖區日期表頭類型	String	monthAndDay、yearAndMonth、yearAndDay	yearAndMonth	-
3	treeProps	樹表配置項	Object	-	-	見下方props
4	startDate	專案開始時間	String、Object	必填	-	注意：不要求任務時間線在專案開始時間內，且當任務時間超出專案時間時，將更新專案時間
5	endDate	專案結束時間	String、Object	必填	-	注意：不要求任務時間線在專案開始時間內，且當任務時間超出專案時間時，將更新專案時間
6	checkSource	是否檢查來源資料符合規則	Boolean	-	-	檢查來源資料為自動修改不符合規範的時間為符合規則的期望值
7	treatIdAsIdentityId	是否使用id作為自增id	Boolean	-	false	如果是請保證id本來就簡短的數字型而不是較長的字串或guid
8	autoGanttDateType	自動調整gantt時間跨度類型，具體規則請參考版本记录1	Boolean	-	true	-
9	nameFormatter	名稱列格式化內容函數	Function	-	-	Function(row, column, cellValue, index)
10	其他Table Attributes	文件地址	-	-	-	-
11	usePreColumn	是否使用內建前置任務列	Boolean	-	false	-
12	preMultiple	前置任務是否可以多選	Boolean	-	true	如果開啟多重選取則pre欄位必須是Array，否則可以是NumberString
13	preFormatter	前置內容列格式化函數	Function	-	-	如不傳則依prop name字段+，拼接
14	emptyCellText	空值單元格佔位符	String	-	'-'	-
15	useCheckColumn	是否使用內建複選框列	Boolean	-	false	-
16	useIndexColumn	是否使用內建序號列	Boolean	-	false	-
17	edit	是否可編輯	Boolean	-	true	-
18	parentChild	使用複選框時，是否父子關聯	Boolean	-	true	必須配置props的id、children字段
19	ganttOnly	是否只顯示圖形	Boolean	-	false	-
20	lazy	同el-table	Boolean	-	false	-
21	load	同el-table	Function	-	-	-
22	contextMenuOptions	右鍵浮窗配置項，如果存在則點選gantt右鍵顯示配置的浮窗訊息	Array	-	-	陣列內物件屬性有：* @param {String} label 展示名稱* @param {String} prop 綁定的欄位* @param {String} icon 選用字型圖示class
23	useRealTime	是否使用實際開始時間、實際結束時間，開啟則在計劃時間藍色條外展示實際時間棕紅色條	Boolean	-	false	-
24	useCard	是否使用表格hover視窗	Boolean	-	false	-

props 設定項

序號	參數	說明	預設值
1	children	資料的子集children欄位,表示為樹表	children
2	name	用於顯示名字的字段	name
3	id	每個資料的id，必須唯一	id
4	pid	每條資料的父節點id字段	pid
5	startDate	每條資料的開始時間字段	startDate
6	endDate	每條資料的結束時間字段	endDate
7	identityId	數據自增id	identityId
8	parents	自增父級id樹，逗號分隔	parents
9	pre	前置任務字段，字段值應為前置任務的id	pre
10	hasChildren	指定哪些行是包含子節點	hasChildren
11	realStartDate	實際開始時間字段	realEndDate
12	realEndDate	實際結束時間字段	realEndDate

Events 事件

序號	事件名	說明	回呼參數
1	timeChange	當任務時間發生變更時觸發	function(row) 依序為目前行數據
2	其他Table Events	文件地址	-
3	preChange	前置任務修改事件	function(row) 依序為目前行數據
4	nameChange	名稱修改事件	function(row) 依序為目前行數據
5	taskAdd	新增任務事件	function(row) 依序為目前行數據
6	taskRemove	刪除任務事件	function(row) 依序為目前行數據

Methods 方法

序號	方法名	說明	回呼參數
1	loadTree	手動呼叫樹表懶加載	function(row) 依序為要展開的行資訊
2	loadTreeAdd	更新樹表懶載入後的子節點	function(id, list) 依序為要更新的節點id，要新增的子節點list，注意此為合併list和原來的子節點數據
3	loadTreeRemove	移除懶載入資料的子節點	function(id, list) 依序為要更新的節點id，要刪掉的子位元組的rowKey

slot

序號	名字	說明
1	prv	用於插入清單中名稱前的列，如不生效需加fixed
2	-	插入在預設列及甘特圖之間的列

版本記錄

1.0.6 修復任務結束日期變更超出專案時間範圍時，gantt圖形未動態規劃的錯誤；另發現useCard體驗不好

1.0.5 增加列表行hover窗口

1.0.3版本，修復超過一年的時間跨度展示錯誤；增加右鍵浮窗功能

1.0.2版本，增加lazy和load參數，支援懶加載，並提供懶加載時的方法：Methods：1,2,3；增加ganttOnly參數支援只顯示圖形

1.0.1版本增加內建複選框列、序號列；增加是否可編輯參數；修改內建前置任務列配置參數值為false；增加複選框的父子連動屬性；增加名稱列可編輯邏輯；增加新增、移除任務事件；

1.0.0版本增加內建前置任務列，支援多選前置和單選前置，並自動校驗來源資料前置任務合法性。

0.1.6版本更新gantt。 1表格支援el-table大部分Attributes和Events ；2名稱列增加nameFormatter格式化內容函數支援；3日期列改為點選顯示編輯輸入框的形式。注意樹表時rowKey參數必須傳，預設為id 。

0.1.5版本更新gantt日期支援yearAndMonth、monthAndDay、yearAndWeek類型，並自動調整，規則為：大於12個月的自動調整為yearAndMonth ,3個月到12個月之間的，自動調整為yearAndWeek , 2個月及以內的自動調整為monthAndDay 。新增參數autoGanttDateType可以管理是否自動調整，如果要關閉自動調整請確保時間跨度盡可能的少，否則會有明顯的效能問題。修復部分時間更改情況不回調的問題。