vue 甘特圖 vxe-gantt 任務里程碑和依賴線的使用

https://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>

https://gitee.com/x-extends/vxe-gantt