vue 甘特图 vxe-gantt 任务里程碑和依赖线的使用

gantt.vxeui.com/

通过设置 task-bar-milestone-config 和 type=moveable 启用里程碑类型，当设置为里程碑类型时，只需要设置 start 开始日期就可以，无需设置 end 结束日期，设置 links 定义连接线,from 对应源任务的行主键,tom 对应目标任务的行主键

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeGanttDependencyType, VxeGanttTaskType } from 'vxe-gantt'

const ganttOptions = reactive({
  border: true,
  height: 500,
  rowConfig: {
    keyField: 'id' // 行主键
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskViewConfig: {
    tableStyle: {
      width: 280 // 表格宽度
    },
    gridding: {
      leftSpacing: 1, // 左侧间距多少列
      rightSpacing: 4 // 右侧间距多少列
    }
  },
  taskBarMilestoneConfig: {
    // 自定义里程碑图标
    icon ({ row }) {
      if (row.id === 10001) {
        return 'vxe-icon-warning-triangle-fill'
      }
      if (row.id === 10007) {
        return 'vxe-icon-square-fill'
      }
      if (row.id === 10009) {
        return 'vxe-icon-warning-circle-fill'
      }
      return 'vxe-icon-radio-unchecked-fill'
    },
    // 自定义里程碑图标样式
    iconStyle ({ row }) {
      if (row.id === 10001) {
        return {
          color: '#65c16f'
        }
      }
      if (row.id === 10007) {
        return {
          color: '#dc3cc7'
        }
      }
    }
  },
  taskLinkConfig: {
    lineType: 'flowDashed'
  },
  links: [
    { from: 10001, to: 10002, type: VxeGanttDependencyType.StartToFinish },
    { from: 10003, to: 10004, type: VxeGanttDependencyType.StartToStart },
    { from: 10007, to: 10008, type: VxeGanttDependencyType.StartToStart },
    { from: 10008, to: 10009, type: VxeGanttDependencyType.FinishToFinish },
    { from: 10009, to: 10010, type: VxeGanttDependencyType.FinishToStart }
  ],
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任务名称' }
  ],
  data: [
    { id: 10001, title: '项目启动会议', start: '2024-03-01', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10002, title: '项目启动与计划', start: '2024-03-03', end: '2024-03-08', progress: 80, type: '' },
    { id: 10003, title: '需求评审完成', start: '2024-03-03', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10004, title: '技术及方案设计', start: '2024-03-05', end: '2024-03-11', progress: 80, type: '' },
    { id: 10005, title: '功能开发', start: '2024-03-08', end: '2024-03-15', progress: 70, type: '' },
    { id: 10007, title: '测试环境发布', start: '2024-03-11', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10008, title: '系统测试', start: '2024-03-14', end: '2024-03-19', progress: 80, type: '' },
    { id: 10009, title: '测试完成', start: '2024-03-19', end: '', progress: 0, type: VxeGanttTaskType.Milestone },
    { id: 10010, title: '正式发布上线', start: '2024-03-20', end: '', progress: 0, type: VxeGanttTaskType.Milestone }
  ]
})
</script>

gitee.com/x-extends/v…