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 许可发布