在阶段推进器场景中，对阶段卡片、阶段列表、阶段详情、任务按钮、任务点击等操作进行功能增强。

功能描述

阶段推进器任务功能增强涵盖多个扩展点，包括阶段卡片渲染控制、阶段列表渲染控制、阶段详情渲染控制、任务按钮渲染、任务点击拦截、任务动作拦截、阶段选择控制、阶段跳转拦截等能力。

典型场景示例

• 场景 1：隐藏或修改任务按钮
  例如：任务完成后隐藏所有操作按钮，或根据业务状态隐藏特定按钮

• 场景 2：拦截任务点击或动作
  例如：阻止不符合条件的任务点击或动作执行

• 场景 3：控制阶段选择范围
  例如：限制只能选择特定阶段，或过滤不可选的阶段选项

• 场景 4：自定义阶段头部样式
  例如：根据阶段状态显示不同颜色

• 场景 5：限制处理人范围
  例如：更换处理人时只允许选择特定人员

• 场景 6：阶段跳转前校验
  例如：跳转前检查是否满足前置条件

适用场景

• 需要在阶段推进器各页面精细控制渲染行为
• 需要根据业务状态动态调整任务、按钮、阶段等显示
• 需要实现任务操作拦截和阶段选择控制
• 需要限制更换处理人的可选范围
• 需要控制阶段跳转流程

适用页面

• 移动端对象详情页-阶段卡片
• 移动端阶段列表页
• 移动端单阶段详情页
• 移动端阶段任务详情页
• 移动端阶段任务详情页-表单编辑页
• 移动端阶段推进器-阶段跳转按钮
• 移动端阶段推进器-普通阶段选择弹层
• 移动端阶段推进器-终结态阶段选择弹层
• Web端阶段推进器头部区域
• Web端阶段推进器任务区域

功能点索引

功能点	移动端事件	Web 端事件	说明
阶段卡片渲染控制	flow.stage.card.render.before	-	控制阶段卡片的显示与隐藏
阶段卡片数据解析	flow.stage.object.detail.card.data.parse.before	-	修改阶段卡片接口返回的数据
阶段列表渲染控制	flow.stage.list.render.before	-	控制阶段列表的渲染数据
阶段列表数据解析	flow.stage.list.data.parse.before	-	修改阶段列表接口返回的数据
阶段详情渲染控制	flow.stage.stage_detail.render.before	-	控制阶段详情的渲染数据
阶段详情数据解析	flow.stage.stage_detail.data.parse.before	-	修改阶段详情接口返回的数据
阶段头部渲染控制	-	stage.header.render.before	获取阶段数据或自定义头部背景色
阶段任务渲染后增强	-	stage.task.render.after	任务渲染后的综合控制
阶段任务按钮渲染	flow.stage.task.button.render.before	-	控制任务操作面板按钮
阶段任务详情数据解析	flow.stage.taskdetail.data.parse.before	-	修改任务详情数据
表单任务详情按钮控制	flow.edit.form.parse.taskdetail.before	-	表单任务详情按钮控制
阶段任务点击拦截	flow.stage.task.item.click.before	-	拦截任务点击行为
阶段任务动作执行拦截	flow.stage.task.action.before	-	拦截任务动作执行
阶段跳转点击拦截	flow.stage.moveto.next.click.before	-	拦截阶段跳转按钮
普通阶段选择选项控制	flow.stage.select.normal.stage.option.render.before	-	控制普通阶段选择选项
终结态阶段选择选项控制	flow.stage.select.terminal.stage.option.render.before	-	控制终结态阶段选择选项
阶段任务更换处理人范围控制	flow.stage.task.change.handler.selelect.range.before	stage.task.render.after	控制处理人选择范围

---

阶段卡片渲染控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制阶段卡片的显示与隐藏

2. 选择合适的扩展事件/钩子

   • flow.stage.card.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写对象详情页阶段卡片的最终渲染数据，控制阶段推进器的显示行为。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.card.render.before",
                functional: async function (context, options) {
                    let setParamsData = options && options.setParamsData;
                    // 隐藏阶段切换视图
                    if (setParamsData) {
                        setParamsData.dIsShowStageChangeView = false;
                    }
                    return Promise.resolve({
                        setParamsData: setParamsData
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.card.render.before

---

阶段卡片数据解析

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 修改阶段卡片接口返回的数据

2. 选择合适的扩展事件/钩子

   • flow.stage.object.detail.card.data.parse.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在对象详情页阶段卡片渲染前，通过插件改写卡片接口返回的数据，实现对阶段、任务等数据的动态调整。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.object.detail.card.data.parse.before",
                functional: async function (context, options) {
                    let stageDetail = options && options.stageDetail;
                    // 隐藏第一个阶段的任务
                    if (stageDetail.stages && stageDetail.stages[0] && stageDetail.stages[0].tasks) {
                        stageDetail.stages[0].tasks.splice(0, 1);
                    }
                    return Promise.resolve({
                        stageDetail: stageDetail
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.object.detail.card.data.parse.before

---

阶段列表渲染控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制阶段列表的渲染数据

2. 选择合适的扩展事件/钩子

   • flow.stage.list.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写阶段列表页的最终渲染数据，控制阶段列表的显示行为。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.list.render.before",
                functional: async function (context, options) {
                    let setParamsData = options && options.setParamsData;
                    if (setParamsData) {
                        setParamsData.dIsShowStageChangeView = false;
                    }
                    return Promise.resolve({
                        setParamsData: setParamsData
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.list.render.before

---

阶段列表数据解析

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 修改阶段列表接口返回的数据

2. 选择合适的扩展事件/钩子

   • flow.stage.list.data.parse.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写阶段列表页接口返回的推进器数据，实现对阶段列表数据的动态调整。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.list.data.parse.before",
                functional: async function (context, options) {
                    let propellerResult = options && options.propellerResult;
                    return Promise.resolve({
                        propellerResult: propellerResult
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.list.data.parse.before

---

阶段详情渲染控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制阶段详情的渲染数据

2. 选择合适的扩展事件/钩子

   • flow.stage.stage_detail.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写单阶段详情页的最终渲染数据，控制阶段详情区域的显示行为。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.stage_detail.render.before",
                functional: async function (context, options) {
                    let setParamsData = options && options.setParamsData;
                    if (setParamsData) {
                        setParamsData.dIsShowStageChangeView = false;
                    }
                    return Promise.resolve({
                        setParamsData: setParamsData
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.stage_detail.render.before

---

阶段详情数据解析

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 修改阶段详情接口返回的数据

2. 选择合适的扩展事件/钩子

   • flow.stage.stage_detail.data.parse.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写单阶段详情页接口返回的推进器数据，实现对阶段详情数据的动态调整。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.stage_detail.data.parse.before",
                functional: async function (context, options) {
                    let propellerResult = options && options.propellerResult;
                    return Promise.resolve({
                        propellerResult: propellerResult
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.stage_detail.data.parse.before

---

阶段头部渲染控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 获取阶段数据或自定义头部背景色

2. 选择合适的扩展事件/钩子

   • stage.header.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在阶段推进器头部渲染前触发此事件，可用于获取阶段推进器实例数据，或自定义阶段头部各节点的背景色。

Web 端开发流程

module.exports = class Plugin {
    apply() {
        return [{
            event: 'stage.header.render.before',
            functional: this.stageHeaderRenderBefore.bind(this),
        }];
    }

    async stageHeaderRenderBefore(api) {
        // 获取阶段数据
        const stageData = await api.getStageData();

        // 自定义阶段背景色
        const colorMap = {
            in_progress: 'red',
            pass: 'blue',
            unstart: 'yellow',
            uncompleted: 'green',
        };
        const customConfig = stageData.stages.map((item) => ({
            state: item.state,
            backgroundColor: colorMap[item.state] || 'gray'
        }));
        api.customStagesStyle(customConfig);
    }
};

推荐入口

• stage.header.render.before

---

阶段任务渲染后增强

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 任务渲染后的综合控制

2. 选择合适的扩展事件/钩子

   • stage.task.render.after

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在阶段任务渲染完成后触发此事件，提供多种能力来控制任务区域的显示、按钮的显隐、处理人范围等。

Web 端开发流程

module.exports = class Plugin {
    apply() {
        return [{
            event: 'stage.task.render.after',
            functional: this.stageTaskRenderAfter.bind(this),
        }];
    }

    async stageTaskRenderAfter(api) {
        // 获取当前阶段任务数据
        const stageTaskData = await api.getCurrentStageData();

        // 示例1：隐藏指定任务
        const targetTaskId = stageTaskData.tasks[0].taskId;
        api.toggleTaskArea(targetTaskId);

        // 示例2：隐藏任务按钮
        api.hideTaskButton([
            { taskId: targetTaskId, button: ['ChangeHandler', 'complete'] }
        ]);

        // 示例3：限制处理人范围
        api.getCustomSelectionRange(['1049', '1001', '1002']);
    }
};

推荐入口

• stage.task.render.after

---

阶段任务按钮渲染

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制任务操作面板按钮

2. 选择合适的扩展事件/钩子

   • flow.stage.task.button.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写任务操作面板的按钮列表，控制任务按钮的显示、隐藏及自定义按钮的注入。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.task.button.render.before",
                functional: async function (context, options) {
                    let task = options && options.task;
                    let buttons = options && options.buttons;
                    // 隐藏所有按钮
                    return Promise.resolve({
                        taskButtons: []
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.task.button.render.before
• flow.stage.stage_task.button.render.before

---

阶段任务详情数据解析

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 修改任务详情数据

2. 选择合适的扩展事件/钩子

   • flow.stage.taskdetail.data.parse.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写单个阶段任务详情的数据，实现对任务数据的动态调整。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.taskdetail.data.parse.before",
                functional: async function (context, options) {
                    let propellerResult = options && options.propellerResult;
                    return Promise.resolve({
                        propellerResult: propellerResult
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.taskdetail.data.parse.before

---

表单任务详情按钮控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 表单任务详情按钮控制

2. 选择合适的扩展事件/钩子

   • flow.edit.form.parse.taskdetail.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写表单任务详情解析前的数据，实现对任务操作按钮的显示控制，典型如根据任务状态隐藏操作按钮。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.edit.form.parse.taskdetail.before",
                functional: async function (context, options) {
                    let taskDetail = options && options.taskDetail;
                    let taskState = taskDetail && taskDetail.state;
                    // 任务状态为 pass，则将按钮置空
                    if (taskState === 'pass') {
                        taskDetail.buttons = [];
                    }
                    return Promise.resolve({
                        customComponten: null,
                        stageDetail: taskDetail
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.edit.form.parse.taskdetail.before

---

阶段任务点击拦截

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 拦截任务点击行为

2. 选择合适的扩展事件/钩子

   • flow.stage.task.item.click.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在阶段任务项被点击时触发拦截事件，可用于阻止默认行为或执行自定义逻辑。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.task.item.click.before",
                functional: async function (context, options) {
                    let task = options && options.task;
                    let isIntercept = false;
                    // 根据任务状态判断是否拦截
                    if (task && task.state === 'completed') {
                        isIntercept = true;
                    }
                    return Promise.resolve({
                        isIntercept: isIntercept
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.task.item.click.before

---

阶段任务动作执行拦截

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 拦截任务动作执行

2. 选择合适的扩展事件/钩子

   • flow.stage.task.action.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在任务动作（如完成、取消等）执行前触发拦截事件，可用于阻止不符合条件的动作执行或执行自定义处理逻辑。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.task.action.before",
                functional: async function (context, options) {
                    let task = options && options.task;
                    let action = options && options.action;
                    let executionType = options && options.executionType;
                    let isIntercept = false;
                    // 根据任务状态或动作类型判断是否拦截
                    if (action && action.type === 'complete' && task && task.state === 'pending') {
                        isIntercept = true;
                    }
                    return Promise.resolve({
                        isIntercept: isIntercept
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.task.action.before

---

阶段跳转点击拦截

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 拦截阶段跳转按钮

2. 选择合适的扩展事件/钩子

   • flow.stage.moveto.next.click.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

在阶段跳转按钮点击前触发拦截事件，可用于执行自定义校验逻辑或阻止不符合条件的阶段跳转。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.moveto.next.click.before",
                functional: async function (context, options) {
                    let button = options && options.button;
                    let currentStageIndex = options && options.currentStageIndex;
                    let stages = options && options.stages;
                    let isIntercept = false;
                    // 根据业务条件判断是否拦截
                    if (currentStageIndex === 0 && stages.length > 1) {
                        isIntercept = true;
                    }
                    return Promise.resolve({
                        isIntercept: isIntercept
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.moveto.next.click.before

---

普通阶段选择选项控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制普通阶段选择选项

2. 选择合适的扩展事件/钩子

   • flow.stage.select.normal.stage.option.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写普通阶段选择弹层的选项列表，控制用户可选择的阶段范围。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.select.normal.stage.option.render.before",
                functional: async function (context, options) {
                    let optionsList = options && options.options;
                    let currentStageIndex = options && options.currentStageIndex;
                    // 过滤选项
                    let filteredOptions = optionsList.filter(Boolean);
                    return Promise.resolve({
                        stageOptions: filteredOptions
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.select.normal.stage.option.render.before

---

终结态阶段选择选项控制

功能说明

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 控制终结态阶段选择选项

2. 选择合适的扩展事件/钩子

   • flow.stage.select.terminal.stage.option.render.before

3. 在插件中接入扩展点并验证行为

   • 编写插件逻辑，获取数据并进行分析处理

通过插件改写终结态阶段选择弹层的选项列表，控制用户可选择的终结态阶段范围。

移动端开发流程

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            return [{
                event: "flow.stage.select.terminal.stage.option.render.before",
                functional: async function (context, options) {
                    let optionsList = options && options.options;
                    let currentStageIndex = options && options.currentStageIndex;
                    // 过滤选项
                    let filteredOptions = optionsList.filter(Boolean);
                    return Promise.resolve({
                        stageOptions: filteredOptions
                    });
                }
            }];
        }
    };
};

推荐入口

• flow.stage.select.terminal.stage.option.render.before

---

注意事项

1. 执行时机：注意区分 render（渲染）和 data parse（数据解析）钩子的执行时机
2. 返回格式：某些钩子需要返回特定格式的数据，如 stageDetail、propellerResult、setParamsData 等
3. 权限配合：按钮的最终显隐还可能受权限和任务状态影响
4. 用户体验：隐藏关键按钮可能影响用户操作，应提供替代方案或提示
5. 数据完整性：修改数据后需保证数据结构的完整性