README
wyg-gantt
简介
甘特图(Gantt chart)又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目,进度,和其他时间相关的系统进展的内在关系随着时间进展的情况。
本插件基于wl-gantt技术支持,如有侵权请联系
邮箱704429524@qq.com
已支持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"
:currentPage="pages.currentPage"
:pageSizes="pages.pageSizes"
:pageSize="pages.pageSize"
:total="pages.total"
@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"
@rowClick="rowClick"
@current-change-page="currentChange"
快速上手
npm i wyg-gantt --save
或
npm i wyg-gantt -S
import wygGantt from "wyg-gantt/src/pages/wl-gantt"
components:{wygGantt},
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,否则可以是Number\String |
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 | color | 项目开始时间颜色 | String | - | blue | - |
25 | realColor | 时间开发时间颜色 | String | - | pick | - |
26 | otherColor | 其他时间颜色 | String | - | black | - |
27 | alreadyColor | 真实开发时间颜色 | String | - | green | - |
28 | currentPage | 状态布局 | String | - | center | - |
29 | pageSizes | 每页显示个数选择器的选项设置 | Array | - | [10, 20, 30, 50, 100] | - |
30 | pageSize | 每页显示条目个数 | Number | - | 10 | - |
31 | total | 总条目数 | Number | - | 0 | - |
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) 依次为当前行数据 |
7 | rowClick | 右键点击事件 | function(row) 依次为当前行数据 |
8 | current-change-page | currentPage 改变时会触发 | function(row) 当前页 |
9 | size-change | currentPage 改变时会触发 | function(row) 每页条数 |
Methods 方法
序号 | 方法名 | 说明 | 回调参数 |
---|---|---|---|
1 | loadTree | 手动调用树表懒加载 | function(row) 依次为要展开的行信息 |
2 | loadTreeAdd | 更新树表懒加载后的子节点 | function(id, list) 依次为要更新的节点id,要添加的子节点list,注意此为合并list和原来的子节点数据 |
3 | loadTreeRemove | 移除懒加载数据的子节点 | function(id, list) 依次为要更新的节点id,要删掉的子字节的rowKey |