vue3甘特图 vxe-gantt 行内显示子任务，拆分任务展示同时可拖拽调整任务日期

vue3甘特图 vxe-gantt 行内显示子任务，拆分任务展示同时可拖拽调整任务日期,内展示子任务由 task-bar-subview-config 和父级任务设置type='subview' 来启用。

启用后会将所有子任务渲染到父级任务中，可以直观的看到任务全程进度。

https://gantt.vxeui.com

设置 task-bar-config.moveable 启用拖拽任务条移动日期功能，设置 task-bar-config.resizable 启用拖拽任务条调整日期功能。

当设置为里子视图类型时，无需要设置 start 开始日期和 end 结束日期

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

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  height: 500,
  rowConfig: {
    keyField: 'id' // 行主键
  },
  treeConfig: {
    transform: true, // 自动将列表转为树结构
    rowField: 'id', // 自定义树节点关联的主键
    parentField: 'parentId' // 自定义树节点关联的父节点的字段名
  },
  taskConfig: {
    titleField: 'title', // 自定义标题字段名
    startField: 'start', // 自定义开始日期字段名
    endField: 'end', // 自定义结束期字段名
    progressField: 'progress', // 自定义进度值字段名
    typeField: 'type' // 自定义渲染类型字段名
  },
  taskBarSubviewConfig: {
    showOverview: true // 是否显示任务总览，当子任务被展开后自动显示任务总览
  },
  taskBarConfig: {
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f', // 已完成部分任务条的背景颜色
      overviewBgColor: '#617b63' // 总览任务条的背景颜色
    }
  },
  columns: [
    { field: 'title', title: '任务名称', treeNode: true }
  ],
  data: [
    { id: 10001, parentId: null, title: '任务1', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10002, parentId: 10001, title: '任务2', start: '2024-03-01', end: '2024-03-03', progress: 60 },
    { id: 10003, parentId: null, title: '任务3', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10004, parentId: 10003, title: '任务4', start: '2024-03-01', end: '2024-03-02', progress: 100 },
    { id: 10005, parentId: 10003, title: '任务5', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10006, parentId: 10003, title: '任务6', start: '2024-03-19', end: '2024-03-22', progress: 90 },
    { id: 10007, parentId: 10005, title: '任务7', start: '2024-03-03', end: '2024-03-05', progress: 50 },
    { id: 10008, parentId: null, title: '任务8', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10009, parentId: 10008, title: '任务9', start: '2024-03-02', end: '2024-03-03', progress: 60 },
    { id: 10010, parentId: 10008, title: '任务10', start: '2024-03-05', end: '2024-03-07', progress: 80 },
    { id: 10011, parentId: 10008, title: '任务11', start: '2024-03-08', end: '2024-03-11', progress: 80 },
    { id: 10012, parentId: null, title: '任务12', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10013, parentId: 10012, title: '任务13', start: '2024-03-04', end: '2024-03-05', progress: 80 },
    { id: 10014, parentId: 10012, title: '任务14', start: '2024-03-06', end: '2024-03-07', progress: 80 },
    { id: 10015, parentId: 10012, title: '任务15', start: '2024-03-09', end: '2024-03-12', progress: 100 },
    { id: 10016, parentId: 10012, title: '任务16', start: '2024-03-13', end: '2024-03-15', progress: 90 },
    { id: 10017, parentId: 10012, title: '任务17', start: '2024-03-17', end: '2024-03-21', progress: 80 },
    { id: 10018, parentId: null, title: '任务18', start: '2024-03-02', end: '2024-03-06', progress: 80 },
    { id: 10019, parentId: null, title: '任务19', start: '2024-03-06', end: '2024-03-11', progress: 80 },
    { id: 10020, parentId: null, title: '任务20', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10021, parentId: 10020, title: '任务21', start: '2024-03-18', end: '2024-03-21', progress: 80 },
    { id: 10022, parentId: 10020, title: '任务22', start: '2024-03-23', end: '2024-03-25', progress: 80 },
    { id: 10023, parentId: 10020, title: '任务23', start: '2024-03-27', end: '2024-04-02', progress: 100 },
    { id: 10024, parentId: 10020, title: '任务24', start: '2024-04-04', end: '2024-04-06', progress: 100 },
    { id: 10025, parentId: 10020, title: '任务25', start: '2024-04-07', end: '2024-04-11', progress: 100 },
    { id: 10026, parentId: null, title: '任务26', start: '2024-03-20', end: '2024-04-01', progress: 80 },
    { id: 10027, parentId: null, title: '任务27', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10028, parentId: 10027, title: '任务28', start: '2024-03-10', end: '2024-03-13', progress: 80 },
    { id: 10029, parentId: 10027, title: '任务29', start: '2024-03-14', end: '2024-03-18', progress: 80 },
    { id: 10030, parentId: 10027, title: '任务30', start: '2024-03-19', end: '2024-03-25', progress: 100 },
    { id: 10031, parentId: null, title: '任务31', start: '2024-03-17', end: '2024-03-22', progress: 80 },
    { id: 10032, parentId: null, title: '任务32', start: '', end: '', progress: 0, type: 'subview' },
    { id: 10033, parentId: 10032, title: '任务33', start: '2024-03-09', end: '2024-03-14', progress: 80 },
    { id: 10034, parentId: 10032, title: '任务34', start: '2024-03-15', end: '2024-03-21', progress: 80 },
    { id: 10035, parentId: 10005, title: '任务35', start: '2024-03-06', end: '2024-03-11', progress: 80 },
    { id: 10036, parentId: 10005, title: '任务36', start: '2024-03-12', end: '2024-03-17', progress: 80 }
  ]
})
</script>

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