基于React的甘特图组件

⚠️ ⚠️ ⚠️ 该组件目前还在开发中，请谨慎使用 ⚠️ ⚠️ ⚠️

使用

安装

使用yarn

yarn add @zonejs/zosc-gantt

使用npm

npm install @zonejs/zosc-gantt --save

基本使用

import React from 'react';
import ReactDOM from 'react-dom';
import Gantt from '@choerodon/gantt';

ReactDOM.render(<div style={{ width: '100%', height: 500 }}>
    <Gantt
      data={[{
        name: '一个名称',
        startDate: '2020-10-01',
        endDate: '2020-10-08',
        collapsed: false,
        children: [{
          startDate: '2020-10-01',
          endDate: '2020-10-08',
          name: '一个名称',
          collapsed: false
        }]
      }]}
      columns={[{
        name: 'name',
        label: '名称',
      }]}
      onUpdate={async () => {
        return true
      }}
    />
  </div>,document.getElementById("root"))

data

• 说明: 甘特图的数据

单任务传参
[{
  name: '一个名称',
  startDate: '2020-10-01',
  endDate: '2020-10-08',
  collapsed: false,
  children: [{
    startDate: '2020-10-01',
    endDate: '2020-10-08',
    name: '一个名称',
    collapsed: false
  }]
}]

多任务传参
multiple='timeRange'
[{
  name: '一个名称',
  timeRange: [
    { startDate: '2022-07-21', endDate: '2022-07-28' },
    { startDate: '2022-07-31', endDate: '2022-08-08' },
  ],
  collapsed: false,
  children: [{
    name: '一个名称',
    timeRange: [
      { startDate: '2022-07-21', endDate: '2022-07-28' },
      { startDate: '2022-07-31', endDate: '2022-08-08' },
    ],
    collapsed: false
  }]
}]

columns

• 说明: table的列配置
• 类型: Gantt.Column[]
  • width: number
  • minWidth: number
  • maxWidth: number
  • flex: number
  • name: string
  • label: string
  • render: (record) => React.ReactNode

startDateKey

• 说明: 开始时间对应的key
• 类型: string
• 默认: startDate

endDateKey

• 说明: 结束时间对应的key
• 类型: string
• 默认: endDate

onUpdate

• 说明: 时间更新的回调，返回true代表修改成功
• 类型: (record, startDate, endDate) => boolean
  • record: Gantt.Record<RecordType>
  • startDate: string
  • endDate: string

isRestDay

• 说明: 甘特图的节假日判断，返回true代表节假日
• 默认: 周六和周日节假日
• 类型: (date: string) => boolean

getBarColor

• 说明: 任务条的颜色配置
• 类型: (record => { backgroundColor: string; borderColor: string }

showBackToday

• 说明: 是否展示回到今天的按钮
• 类型: boolean
• 默认: true

showUnitSwitch

• 说明: 是否展示单位切换按钮
• 类型: boolean
• 默认: true

unit

• 说明: 单位
• 类型: string
• 默认: day
• 可选值: hour,day,week,month,quarter,halfYear

onRow

• 说明: table的行事件配置，目前支持onClick
• 类型: (record) => void

tableIndent

• 说明: table每一级的缩进
• 类型: number
• 默认: 30

expandIcon

• 说明: table展开图标
• 类型: ({level, collapsed, onClick}) => React.ReactNode
  • level: number
  • collapsed: boolean
  • onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void

renderBar

• 说明: 任务条自定义渲染
• 类型: (barInfo, { width, height }) => React.ReactNode
  • barInfo: Gantt.Bar<RecordType>
  • width: number
  • height: number

renderBarThumb

• 说明: 创建时的任务条自定义渲染
• 类型: (record, type: 'left' | 'right') => React.ReactNode

onBarClick

• 说明: 任务条点击回调
• 类型: (record) => void

tableCollapseAble

• 说明: 是否可以收起table
• 默认: true
• 类型: boolean

multiple

• 说明: 时间集合
• 类型: boolean
• 默认: false | string

onBarDoubleClick

• 说明: 任务条双击回调
• 类型: (record) => void

onBarContextMenu

• 说明: 任务条右击回调
• 类型: (record) => void

reservedHeight

• 说明: 内部预留高度
• 类型: number
• 默认: 0

showToday

• 说明: 是否展示今天标记
• 类型: boolean
• 默认: true

selectionColor

• 说明: 移入行颜色
• 类型: string
• 默认: #0000000a

selectedColor

• 说明: 选中行颜色
• 类型: string
• 默认: #0000000a