#?wl-gantt
#?簡介
??目前市面上最有名的幾個gantt插件占據江湖了非常久遠的時間，它們古老又強大。?
????但無一例外的是：它們收費或極其難用并且依賴非常古老的技術，其中有些技術現在入行的新手甚至從未聽聞。??
??????【jQueryGantt】【plusgantt】【dhtmlx】??
????????不可否認它們都非常的強大，不管是從性能還是功能性。但是大多的業務需求并不需要如此龐然大物才能滿足需求。????
??????????另一方面古老的技術稀缺的文檔又讓開發者無從下手（收費版甚至不提供文檔，而你的老板又肯定不會提供錢買下授權）。
??????????????`【wl-gantt】`出現的背景就是筆者在公司的Vue項目中使用B***Gantt插件所受到的巨大傷害：基于extjs（對于17年入行的我來說沒聽過）、不提供開發文檔、沒有中文資料、源碼加密，開發全靠打印實例找屬性。?
????????????wl-gantt是一個基于Vue及elementUi的gantt甘特圖插件，是一個896的碼奴在僅有的剩余的1中擠時間開發而成。???
??????????????它目前僅提供了很少的功能：自動檢查源數據是否符合project任務安排規則，結束后開始的前置任務規則。yearAndmonth的gantt時間跨度。????
????????????????但它絕對簡單易用，并且高度可配置。??
????????????????它的實際年齡才只有3天，它正在我和所有熱愛開源事業的朋友們手中逐漸長大。???
????????????????下個階段，它將學會：????
????????????????1.?yearAndMonth、monthAndDay、yearAndWeek時間跨度配置?【已完成，month及week格子起止位置待精確化】
????????????????2.?內置前置任務選擇器???
????????????????3.?整合樹表全選聯動功能
????????????????4.?任務連接線???
????????????????5.?任務自定義懸浮提示???
????????????????6.?和所有你覺得需要用到的需求?
##?[在線演示](https://hql7.github.io/)
##?[GitHub](https://github.com/hql7)
###?更新說明
??>?2019-12-3?更新gantt。1表格支持[el-table](https://element.eleme.cn/#/zh-CN/component/table)大部分`Attributes`和`Events`,詳細列表見下方；2名稱列增加`nameFormatter`格式化內容函數支持；3日期列改為點擊顯示編輯輸入框的形式。??
??>?2019-12-2?更新gantt.1日期支持`?yearAndMonth、monthAndDay、yearAndWeek`類型，詳見`版本記錄1`；2修復部分時間更改情況不回調的問題。
#####?Demo
####?已支持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?|?[文檔地址](https://element.eleme.cn/#/zh-CN/component/table)?|?-?|?-?|?-?|?-?|
###?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?|?[文檔地址](https://element.eleme.cn/#/zh-CN/component/table)?|?-?|?-?|
###?slot
??|?序號?|?名字?|?說明?|
??|?----?|?----?|?----?|
??|?1?|?prv?|?用于插入列表中名稱前的列，如不生效需加`fixed`?|
??|?2?|?-?|?插入在默認列及甘特圖之間的列?|
###?版本記錄
>?2.?0.1.6版本?更新gantt。1表格支持[el-table](https://element.eleme.cn/#/zh-CN/component/table)大部分`Attributes`和`Events`；2名稱列增加`nameFormatter`格式化內容函數支持；3日期列改為點擊顯示編輯輸入框的形式。注意樹表時`rowKey`參數必須傳，默認為`id`。
>?1.?0.1.5版本?更新gantt日期支持`?yearAndMonth、monthAndDay、yearAndWeek`類型，并自動調整，規則為：大于12個月的自動調整為`yearAndMonth`,3個月到12個月之間的，自動調整為`yearAndWeek`,?2個月及以內的自動調整為`monthAndDay`。新增參數`autoGanttDateType`可以管理是否自動調整，如果要關閉自動調整請保證時間跨度盡可能的少，否則會有明顯的性能問題。修復部分時間更改情況不回調的問題。
