依赖关系——VisActor/VTable 教程文档

任务依赖关系

VTable 甘特图支持任务之间的依赖关系，可以通过连线展示任务之间的前后关系。

依赖类型

支持四种依赖类型，定义在DependencyType枚举中：

完成到开始（FinishToStart）：前一个任务结束后，下一个任务才能开始
开始到开始（StartToStart）：两个任务同时开始
完成到完成（FinishToFinish）：两个任务同时结束
开始到完成（StartToFinish）：前一个任务开始后，下一个任务才能结束

如下配置一个依赖关系：

// 使用依赖类型
import { DependencyType } from '@visactor/vtable-gantt';

const dependencyLinks = [
  {
    type: DependencyType.FinishToStart,
    linkedFromTaskKey: 1,
    linkedToTaskKey: 2
  }
];

const ganttOptions = {
  dependency: {
    links: dependencyLinks
  }
};

其中linkedFromTaskKey 和 linkedToTaskKey 的值需要对应任务数据中的唯一标识字段，唯一标识的字段名默认为id，如果需要修改可以通过taskKeyField配置项来修改。每个依赖关系可以通过linkLineStyle属性为这条依赖线单独设置样式，比如线条颜色、宽度等，这样可以更好地区分不同类型的依赖关系。

创建依赖

可以通过 API 或者交互添加依赖关系：

API 方式：

// 添加依赖
gantt.addLink({
  type: 'finish_to_start',
  linkedFromTaskKey: 3,
  linkedToTaskKey: 4
});

// 删除依赖
gantt.deleteLink({
  type: 'finish_to_start',
  linkedFromTaskKey: 1,
  linkedToTaskKey: 2
});

交互方式：

开启dependency.linkCreatable配置项后，可以通过交互添加依赖关系。

删除依赖

开启dependency.linkDeletable配置项后，可以通过交互删除依赖关系。

做法举例一：

想要通过鼠标右键删除关联线，可以监听CONTEXTMENU_DEPENDENCY_LINK事件，来主动调用接口deleteLink来删除。

做法举例二：

配置快捷键keyboardOptions.deleteLinkOnDel或者keyboardOptions.deleteLinkOnBack来通过按下键盘'del'或者'back'键来删除关联线。

依赖样式配置

样式配置入口：

{
  /** 依赖线基本样式 */
  linkLineStyle?: ILineStyle;
  /** 选中时的样式 */
  linkSelectedLineStyle?: ITaskLinkSelectedStyle;
  /** 创建关联线的操作点 */
  linkCreatePointStyle?: IPointStyle;
  /** 创建关联线的操作点响应状态效果 */
  linkCreatingPointStyle?: IPointStyle;
  /** 创建关联线的操作线样式 */
  linkCreatingLineStyle?: ILineStyle;
}

代码举例：

const ganttOptions = {
  dependency: {
    // 依赖线基本样式
    linkLineStyle: {
      lineColor: '#8c8c8c',
      lineWidth: 1,
      lineDash: [4, 2]
    },
    // 选中时的样式
    linkSelectedLineStyle: {
      lineColor: '#1890ff',
      lineWidth: 2,
      shadowBlur: 4,
      shadowColor: 'rgba(24, 144, 255, 0.5)'
    },
    // 创建点样式
    linkCreatePointStyle: {
      strokeColor: '#8c8c8c',
      strokeWidth: 1,
      fillColor: '#fff',
      radius: 5
    },
    // 创建中点样式
    linkCreatingPointStyle: {
      strokeColor: '#1890ff',
      strokeWidth: 2,
      fillColor: '#fff',
      radius: 6
    },
    // 创建中线样式
    linkCreatingLineStyle: {
      lineColor: '#1890ff',
      lineWidth: 2,
      lineDash: [4, 2]
    }
  }
};

除了统一设置依赖线样式外，您还可以为每条依赖线单独配置样式。在 links 数组中，每个 link 对象都可以通过 linkLineStyle 属性来设置该条依赖线的样式。linkLineStyle 的接口类型同为 ILineStyle。

const dependencyLinks = [
  {
    type: DependencyType.FinishToStart,
    linkedFromTaskKey: 1,
    linkedToTaskKey: 2,
    // 这条依赖线的样式
    linkLineStyle: {
      lineColor: 'skyblue',
      lineWidth: 2,
      lineDash: [4, 2]
    }
  }
];

const ganttOptions = {
  dependency: {
    links: dependencyLinks
  }
};

注意事项