前言
团队需要基于Jira Issue做一些甘特图,方便进行工作排期,工作统计等。
感兴趣的同学可以看看~ 链接
结合了antd,找了一波组件,感觉antd tree最接近,但是样式不太符合,丰衣足食只能自己改造啦,先来看看效果:
tree组件支持的功能有:
- 上下收放,能展示数据层级关系
- 点击放下,可以按需加载
- 支持拖拽,可以改变指定数据的位置
就问你们一句香不香,我觉得挺香的😂😂
实现
想要实现像表格一样有表头,而且有行有列,第一时间能想到栅格布局col row
学习table,先来构造columns:
interface Columns {
value: string // dataIndex
title:string // 表头label
span?: number // 占多少格,一行一共有24格
offset?: number // 偏移多少格
}
const cols = [
{
value: 'type',
title: 'Type',
span: 1.5,
},
{
value: 'key',
title: 'key',
span: 4,
},
{
value: 'summary',
title: 'Summary',
span: 7,
},
{
value: 'startDate',
title: 'Start Date',
span: 4,
},
{
value: 'endDate',
title: 'End Date',
span: 4,
},
{
value: 'status',
title: 'Status',
span: 3,
},
];
生成表头
<Row className="tableHeader" align="middle" gutter={12}>
{columns.map(({ value, title, ...rest }) => (
<Col key={value} {...rest} className={value}>
{title}
</Col>
))}
</Row>
生成tree
const getTreeData = (event) => {
const result = [];
const fn = (list, parentId, target, count) => {
list.forEach((item) => {
// 计算当前层级
const sCount = count < 0 ? 0 : count - 1;
const children = [];
const task = {
title: (
<Row
align="middle"
// 层级越深padding约大
style={{ paddingLeft: `${sCount * 24}px` }}
gutter={{ xs: 8, sm: 12 }}
>
{columns.map(({ value, title, ...rest }) => (
<Col
key={title}
{...rest}
style={{
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
}}
>
{item[value]}
</Col>
))}
</Row>
),
isLeaf: false,
key: `${item.id}_${parentId}_${item.id}`,
children
};
target.push(task);
if (item.children) fn(item.children, item.id, children, sCount);
});
};
fn(event, 0, result, 3);
return result;
};
<Tree
treeData={data}
// 按需加载函数
loadData={onLoadData}
// 监听展开
onExpand={handleExpand}
// 监听选择
onSelect={handleSelect}
autoExpandParent={false}
/>