如何使用 vue vxe-table 甘特圖 vxe-gantt 渲染顯示多行任務，預計完成日期和實際完成日期多條任務條，可以自定義任務條顏色，拖拽調整日期等

https://gantt.vxeui.com

使用樹結構渲染子任務和隱藏樹節點按鈕來實現一行拆分多條任務條，每條任務條還可以通過css變量來設置顏色 --vxe-ui-gantt-view-task-bar-completed-background-color

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

<script setup>
import { reactive } from 'vue'
import { VxeGanttTaskType } from 'vxe-gantt'
import XEUtils from 'xe-utils'

const ganttOptions = reactive({
  border: true,
  height: 500,
  loading: false,
  cellConfig: {
    height: 60 // 設置單元格高度，確保滿足2個任務條的高度
  },
  rowConfig: {
    keyField: 'id' // 行主鍵
  },
  treeConfig: {
    transform: true, // 自動將列表轉為樹結構
    rowField: 'id', // 自定義樹節點關聯的主鍵
    parentField: 'parentId' // 自定義樹節點關聯的父節點的字段名
  },
  taskConfig: {
    titleField: 'title', // 自定義標題字段名
    startField: 'start', // 自定義開始日期字段名
    endField: 'end', // 自定義結束期字段名
    progressField: 'progress', // 自定義進度值字段名
    typeField: 'type' // 自定義渲染類型字段名
  },
  taskBarSubviewConfig: {
    // 自定義子任務視圖任務條的樣式
    barStyle ({ row }) {
      if (row.flag === 1) {
        return {
          transform: 'translateY(-24px)'
        }
      }
      if (row.flag === 2) {
        return {
          transform: 'translateY(1px)',
          '--vxe-ui-gantt-view-task-bar-completed-background-color': '#31d231'
        }
      }
    }
  },
  taskBarConfig: {
    showContent: true, // 是否在任務條顯示內容
    moveable: true, // 是否允許拖拽任務移動日期
    resizable: true, // 是否允許拖拽任務調整日期
    linkCreatable: true, // 是否允許自定義創建依賴線
    barStyle: {
      round: true // 圓角
    }
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格寬度
    }
  },
  columns: [
    { field: 'title', title: '任務名稱', minWidth: 100 },
    { field: 'planStartDate', title: '計劃開始時間', width: 100 },
    { field: 'planEndDate', title: '計劃結束時間', width: 100 },
    { field: 'actualStartDate', title: '實際開始時間', width: 100 },
    { field: 'actualEndDate', title: '實際結束時間', width: 100 }
  ],
  data: []
})

// 模擬後端接口
const loadList = () => {
  ganttOptions.loading = true
  setTimeout(() => {
    const list = [
      { id: 10001, parentId: null, title: '任務1', planStartDate: '2024-03-03', planEndDate: '2024-03-15', actualStartDate: '2024-03-03', actualEndDate: '2024-03-12' },
      { id: 10002, parentId: null, title: '任務2', planStartDate: '2024-03-10', planEndDate: '2024-03-25', actualStartDate: '2024-03-08', actualEndDate: '2024-03-16' },
      { id: 10003, parentId: null, title: '任務3', planStartDate: '2024-03-20', planEndDate: '2024-04-10', actualStartDate: '2024-03-22', actualEndDate: '2024-04-01' },
      { id: 10004, parentId: null, title: '任務4', planStartDate: '2024-03-28', planEndDate: '2024-04-19', actualStartDate: '2024-03-28', actualEndDate: '2024-04-12' },
      { id: 10005, parentId: null, title: '任務5', planStartDate: '2024-04-05', planEndDate: '2024-04-28', actualStartDate: '2024-04-01', actualEndDate: '2024-04-24' }
    ]
    // 轉成子任務視圖
    const ganttData = []
    list.forEach(item => {
      const currRow = XEUtils.assign({}, item, { type: VxeGanttTaskType.Subview })
      const planRow = XEUtils.assign({}, item, {
        id: 10000000 + item.id,
        title: '計劃',
        parentId: item.id,
        start: item.planStartDate,
        end: item.planEndDate,
        flag: 1
      })
      const actualRow = XEUtils.assign({}, item, {
        id: 20000000 + item.id,
        parentId: item.id,
        title: '實際',
        start: item.actualStartDate,
        end: item.actualEndDate,
        flag: 2
      })
      ganttData.push(currRow)
      ganttData.push(planRow)
      ganttData.push(actualRow)
    })
    ganttOptions.data = ganttData
    ganttOptions.loading = false
  }, 200)
}

loadList()
</script>

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