个人组件库

Appearance

甘特图查看器 ​

使用说明

甘特图查看器是基于业务甘特图进行的定向封装组件，专注于甘特图的浏览模式，项目管理业务开发人员 更专注于甘特图查看器的使用，而不需要关注甘特图查看器的封装，查看器的侧重点是把原有查看器 功能进行内部集成，通关开关项的方式提供给业务开发人员。

支持功能点 ​

  • 支持展开/折叠所有
  • 支持展开到一级/二级/三级
  • 支持刷新数据操作
  • 支持筛选数据操作
  • 支持显示/隐藏甘特图
  • 支持显示/隐藏时间线
  • 支持锁定列操作
  • 支持取消锁定列操作
  • 支持显示/隐藏关键路径
  • 支持查找数据操作
  • 支持列排序/列宽调整
  • 支持列动态显隐/列重置
  • 支持列拖拽/列保存
  • 支持最大/最小化操作
  • 支持自定义查询条件

综合示例 ​

loading

数据格式 ​

关键数据格式说明

saveColumnsParams、calendarsApi、configApi、dataSourceApi 相关四个参数进行说明, 由于这四个参数都是用于接口数据请求和保存用的，所以需要进行格式说明

javascript
/**
 * calendarsApi、configApi、dataSourceApi参数说明，其结构包含如下:
 * url、method、params 跟原先业务请求接口保持一致
 */
const calendarsApi = {
    url: '/wbs/v1/data/getProjectCal',
    method: 'post',
    params: {
        lang: 'zhs',
        connect: 'MYSQL',
        companyId: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        userDept: 'P_SYS_DEPT_dz90005725;P_SYS_DEPT_dz90005725;',
        userGroup: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        projectCode: 'PLM_PROJECT',
        timeZone: '8',
        objectType: '',
        projectId: 'PLM_PM_PROJECT_d9b82a9844e94d0b980e461a43007a87',
    },
};
const configApi = {
    url: '/wbs/v1/data/gantt/column',
    method: 'post',
    params: {
        lang: 'zhs',
        connect: 'MYSQL',
        companyId: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        userDept: 'P_SYS_DEPT_dz90005725;P_SYS_DEPT_dz90005725;',
        userGroup: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        projectCode: 'PLM_PROJECT',
        timeZone: '8',
        viewName: 'PLM_PM_PLANTOTASK_VIEW',
        userId: 'P_SYS_USER_99abfffd40da4d6eb66dc692d3f815fc',
        path: 'projectPlanGantt',
    },
};
const dataSourceApi = {
    url: '/wbs/v1/data/gantt',
    method: 'post',
    params: {
        projectId: 'PLM_PM_PROJECT_18f4598f059a4baa9468f84e36252f3f',
        lang: 'zhs',
        connect: 'MYSQL',
        companyId: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        userDept: 'P_SYS_DEPT_dz90005725;P_SYS_DEPT_dz90005725;',
        userGroup: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
        projectCode: 'PLM_PROJECT',
        timeZone: '8',
        userId: 'P_SYS_USER_99abfffd40da4d6eb66dc692d3f815fc',
        bizType: '1',
    },
};

// 由于列保存接口是组件内部进行集成的，所有只需要传入接口入参即可
const saveColumnsParams = {
    lang: 'zhs',
    connect: 'MYSQL',
    companyId: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
    userDept: 'P_SYS_DEPT_dz90005725;P_SYS_DEPT_dz90005725;',
    userGroup: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
    projectCode: 'PLM_PROJECT',
    timeZone: '8',
    userId: 'P_SYS_USER_99abfffd40da4d6eb66dc692d3f815fc',
    unKey: 'projectPlanGantt',
};
另一种使用方式是不配置接口请求参数，直接传入相关数据，像基本使用的方式即可。 ​

📌 内置渲染组件类型

columnConfig 参数需要说明一下，甘特图查看器自定义列渲染是由此参数控制的，具体配置项如下: 现在支持 progress、badge、 avatar(头像)三种类型的组件渲染，后续根据业务进行扩展。

javascript
const columnConfig = {
    // 列字段
    PLANPROGRESS: {
        // 组件类型(进度条组件)
        componentType: 'progress',
        // 组件属性
        componentProps: {
            strokeColor: '#2CDC9B',
        },
    },
    // 列字段
    PROGRESSSTATE: {
        // 组件类型(徽标数组件)
        componentType: 'badge',
         // 组件属性
        componentProps: {
            type: 'plan',
            nameIsText: true,
        },
    },
     // 列字段
    PERFORMER: {
        // 组件类型(人员头像组件)
        componentType: 'avatar',
         // 组件属性
        componentProps: {},
    },
};

📌 自定义查询

自定义查询是通过插槽实现的，具体使用方式如下:

vue
<template>
    <!-- 查询的时候直接使用HBBaseGanttViewer的getTableData方法即可-->
    <HBBaseGanttViewer
        :calendars-api="calendarsApi"
        :config-api="configApi"
        :data-source-api="dataSourceApi"
        :save-columns-params="saveColumnsParams"
        :column-config="columnConfig"
    >
        <template #headerContent>
            <div class="project-button">
                <h-b-button-group ref="menuRef" v-bind="menuProps"/>
            </div>
        </template>
    </HBBaseGanttViewer>
</template>

注意

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

API ​

注意

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

HBBaseGanttViewer 属性 ​

参数说明类型默认值
initialLoad初始化是否加载数据(data 数据)Booleantrue
calendarsApi项目日历参数Object{}
configApi列查询参数Object{}
dataSourceApi数据源参数Object{}
saveColumnsApi列保存参数Object{}
columnConfig列配置(指定当前列渲染组件类型)Object{}
templates列扩展配置(用户传入的列扩展配置)Object{}
projectId项目 idString''
planId计划 idString''
foucsKey关注字段值String'FOCUSON'
disabledKey不可用字段值String'DISABLED'
showGantt传入的是否显示甘特图(用于自己控制)Booleanfalse
showExpandAll是否显示全部展开Booleantrue
showCollapseAll是否显示全部收起Booleantrue
showExpandOne是否显示展开一级Booleantrue
showExpandTwo是否显示展开二级Booleantrue
showExpandThree是否显示展开三级Booleantrue
showRefresh是否显示刷新Booleantrue
showFilterDrawer是否显示筛选Booleantrue
specialHandleFilterParams显示筛选框列转换数组Array[]
showGanttChart是否显示甘特图Booleantrue
showToday是否显示今天时间线Booleantrue
showFreeze是否显示冻结列Booleantrue
showCriticalPath是否显示关键路径Booleantrue
showSearch是否显示查找Booleantrue
nameKey任务名称字段属性值String'ENAME'
showNameLink任务名称是否显示超链接Booleanfalse
searchDropdown显示查找的列Object
showColumnsSetting是否显示列设置(列配置和保存是成对出现)Booleantrue
showMaxMin是否显示最大化最小化Booleantrue
showTooltip是否显示 tooltipBooleantrue

HBBaseGanttViewer 方法 ​

方法名称说明类型版本
getTask获取相关任务(id：string) => any
expandAll展开全部()=> void
updateTask更新任务(obj: object) => void
saveColumns保存列信息()=> void
collapseAll收起全部()=> void
renderGantt重新渲染甘特图()=> void
openFilterDrawer打开筛选抽屉()=> void
freezeColumn冻结列(index: number) => void
getTableData查询甘特图数据(params = {}, state = true)=> void
queryGanttData重新加载数据()=> void
getSelectedRows获取选中的甘特图数据()=> void
refreshGanttData刷新甘特图数据()=> void
showHideGanttChart切换甘特图显示隐藏()=> void
expandCurrentLevel展开指定得层级(level: any) =>void
toggleTodayTimeLine显示今日时间线(show?: boolean)=> void
handleSwitchFullScreen切换全屏显示和非全屏显示()=> void
setBaseGanttColumnsDisplay设置列展示(columns: any)=> void
getCurrentGanttInstance获取甘特图当前实例()=> any
getAllMethods业务甘特图对外提供的方法集合（）=> obj

HBBaseGanttViewer 事件 ​

方法名称说明回调类型版本
clickNameLink任务名称超链接点击事件(task) => any

基于 MIT 许可发布

Copyright © 2024-2025 框架作者(LMX) 版权所有