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 |

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

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.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能夠管理是否自動調整，若是要關閉自動調整請保證時間跨度儘量的少，不然會有明顯的性能問題。修復部分時間更改狀況不回調的問題。