components-ui

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

简介：

支持拖拽、吸附（辅助线展示）、冲突检测（不可重叠）

组件库 ant-design-vue、vue-draggable-resizable

属性

1、taskItem -- 数据源（右侧甘特图数据，默认为空），示例如下：

taskItem：[  
        {  id: 1011, 
           title: 'xxxxxx',  
           children: [{  
             title: 'week第一个块',  
             startTime: '2022-12-01 11:00:00',  
             endTime: '2022-12-02 20:00:00'
            },
            {
             title: 'week第二个块',
             startTime: '2022-12-17 11:00:00',
             endTime: '2022-12-19 08:00:00'
            }]
        },
        {
         id: 1012,
         title: 'xxxxxx',
         children: [{
             title: 'week第三个块',
             startTime: '2022-12-01 11:00:00',
             endTime: '2022-12-02 20:00:00'
            },
            {
             title: 'week第四个块',
             startTime: '2022-12-17 11:00:00',
             endTime: '2022-12-19 08:00:00'
            }]
        }
    ]

2、dateRange -- 时间范围（设置起止时间，必需字段），示例如下：

dateRange: { 
    ganttStart: dayjs('2022-06-01').toDate(), 
    ganttEnd: dayjs('2023-01-18').toDate()
 }

3、highLightName -- 指定高亮属性（默认为示例数据），示例如下：

highLightName: 'title'

4、columns -- 左侧表格展示列，示例如下（默认为示例数据）：

columns： [ 
    { 
        title: 'id', 4
        dataIndex: 'id', 
        ellipsis: true
   },
   { 
      title: '名称', 
      dataIndex: 'title',
    ellipsis: true
   }
   ]

5、rowHeight -- 行高（不包括表头），示例如下（默认为示例数据）：

rowHeight： 38

6、ganttHeight -- 甘特图高度（整体高度），示例如下（默认为示例数据）：

ganttHeight： 600

API

1、handleTypeChange -- 当甘特图切换模式时触发，返回模式类型（周：week；天：day；小时：hour）

2、change -- 当触发拖拽、伸缩时间时触发，返回该块信息和变动后的全部数据信息