Skip to content

甘特图编辑器

综合示例

loading

其他方式

函数式弹框打开

javascript
<script lang="ts">
  import { defineComponent, getCurrentInstance } from 'vue';
  import { openBaseGanttEditor } from '@crami/project';

  export default defineComponent({
    setup() {
      const instance = getCurrentInstance();
      /**
        * 打开甘特图编辑器
        */
      const openEditor = () => {
        openBaseGanttEditor(instance?.appContext, {
          projectId,
          calendarsApi,
          configApi,
          dataSourceApi,
          menusApi,
          resourcesApi,
          saveDataApi,
        });
      };

      return {
        openEditor,
      };
    },
  });
</script>

字段属性

编辑器支持的字段属性参考 业务甘特图 数据格式说明

注意

由于时间和进度问题,部分文档描述和部分参数格式描述未详细列出,请自行参考项目工程 Dome

API

注意

甘特图编辑器是基于业务甘特图进行封装的,业务甘特图支持的传参,甘特图编辑器都支持,具体参数请参考 业务甘特图,可以继续传参使用。

HBBaseGanttEditor 属性

参数说明类型默认值
initialLoad初始化是否加载数据(data 数据)Booleantrue
calendarsApi项目日历参数Object{}
configApi列查询参数Object{}
dataSourceApi数据源参数Object{}
menusApi按钮数据接口Object{}
menusArray按钮数据(不用过接口直接传入的)Object{}
resourcesApi资源数据接口Object{}
resourcesData资源数据(不用过接口直接传入的)Object{}
saveDataApi数据保存接口Object{}
saveColumnsApi列数据保存接口Object{}
projectId项目 idString''
planId计划 idString''
fineTuning是否是微调Booleanfalse
bizType所属模块String'EditPlan'
menuConfig不显示的顶部按钮Object{}
contextMenuConfig不显示的右键菜单按钮Object{}
checkProjectStart校验根任务开始时间和项目开始时间是否一致Booleanfalse
checkMileStoneUpdate微调模式下校验里程任务是否可以在更新数据中Booleanfalse
separateProjectStart项目开始时间是否和根任务开始时间分离Booleantrue

HBBaseGanttEditor 方法

方法名称说明类型版本
getCureentGanttInstance获取甘特图编辑器当前的实例() => any
enableBaseGanttLoading开启 loading 显示() => any
closeBaseGanttLoading关闭 loading 显示() => any
switchGanttGrid显示或者隐藏 chart(flag: Boolean) => any
taskIndent任务降级() => void
taskOutdent任务升级() => void
deleteSelectData删除选中的数据() => void
undo撤销() => void
redo恢复() => void
expandAll展开全部(level: Number) => void
collapseAll收起所有() => void
highLightCriticalPath关键路径高亮() => void
noLightCriticalPath隐藏关键路径高亮() => void
setCurrentZoom设置视图层级(zoom: String) => void
addRelationTaskLink任务链接() => void
deleteRelationTaskLink取消链接() => void
openColumnConfigModal显示列配置弹框() => void
openSearch显示查找弹框() => void
copy复制() => void
cut剪切() => void
paste粘贴() => void
insertTask插入任务() => void
insertChildTask插入子任务、里程碑(obj: object) => void
toEditTask编辑任务、任务属性() => void
about显示关于() => void
openProjectScheduleModal打开项目时间() => void
openFilterDrawer开启筛选() => void
openFreezeColumns列冻结() => void
cancelFreezeColumns取消列冻结() => void
openUpdateResource批量更新资源() => void
openResourceLoad打开资源负荷弹框() => void
checkDifferenceData校验是否有差异化数据() => boolean
getDifferenceData获取差异化数据() => any
beforeSaveBaseGanttData差异化数据保存之前的校验(obj) => boolean
afterSaveBaseGanttData差异化数据保存之后操作(obj) => void
saveDifferenceBaseGanttData保存差异化数据(组合操作,返回校验之后的差异化数据)(refreshFlag: boolean)=> object
switchFullScreen是否切换全屏显示(isFull: boolean) => void
switchBaseLine切换基线对比()=> void
getAllMethods业务甘特图对外提供的方法集合()=> obj
checkCanRemoveResource校验资源是否可以移除(ids: array)=> obj

HBBaseGanttEditor 事件

方法名称说明回调类型版本
saveBaseGanttData调用保存差异化数据是触发(saveData: Object) => void

功能演示

数据动态加载


任务升级


任务降级


任务连接


取消链接


删除任务


任务属性


项目日历


项目团队


项目时间


动态层级显示


动态视图显示


甘特图动态切换


复制


剪切


粘贴


撤销和恢复


查找和替换


筛选


动态列配置


锁定列


关键路径显示


插入任务、插入子任务、插入里程碑


资源负荷


行内数据编辑


前置、批量前置任务


进度编辑


任务资源


Tooptip 显示


右键菜单集成


快捷键支持


差异化数据保存


自定义主题切换


自定义列渲染


基于 MIT 许可发布