本页用于说明阶段推进器 JS 插件的配置方式、示例场景与基础实现方法。

插件配置步骤

1. 在用一个示例进行快速上手之前，首先要知道插件的配置方式

2. 当我们想配置阶段推进器的插件时，首先要在【管理后台】的【定制开发工具】中，找到【自定义插件】，并点击【新建】。

   

3. 配置插件的基本信息。这里需要注意选择支持的终端类型，以及选择我们需要的插件类型，比如我们想使用阶段推进器JS插件，那么我们就选择它。对于移动端来说，我们除了通过WEB IDE来编写插件以外，还可以通过上传压缩包的形式来配置插件，这里我们以WEB IDE创建插件为例。

   

4. 配置插件的基本信息以后，可以选择”公共模板“、“历史模板”或“使用空模板”。“公共模板”和“历史模板”历史模板都是以前创建好的，我们可以选择以后根据自己的需求来进行简单的修改，当我们选择“使用空模板”，那么我们就需要自己来编写插件内容了。

   

5. 如下图我们进行插件内容的编写，并且需要指定插件的入口，例如：plugins/testplugin.js，配置完成以后点击“保存”或“发布”。

   
   

6. 编写完成以后，我们需要在对应的流程的【高级配置】中找到【自定义插件配置】，并选择自己需要使用的插件即可。

   

简单需求说明

1. 在配置阶段推进器的时候，我们是没办法配置哪些任务隐藏的，如果需要隐藏当前阶段下的某个任务的话，我们可以使用阶段推进器JS插件来实现。

代码实现示例

module.exports = function (context, pluginService, pluginParam) {
    return {
        apply() {
            let self = this;
            return [
                {
                    event: "flow.stage.object.detail.card.data.parse.before",
                    functional: async function (context, options) {
                        let stageDetail = options && options.stageDetail;
                        // 隐藏阶段任务一
                        stageDetail.stages && stageDetail.stages[0] && stageDetail.stages[0].tasks &&(stageDetail.stages[0].tasks.splice(0,1))
                        //表单页解析数据
                        return Promise.resolve({
                            //stage-card-component  卡片替换组件
                            customComponten: null, //自定义组件
                            stageDetail: stageDetail, //卡片数据
                        });
                    }
                }
            ]
        }
    }
}

实现效果展示

下图中可以看到，配置该插件以后，对当前阶段下的任务一进行了隐藏。

插件结构说明

1. 代码主要围绕event和functional来实现
2. event：对于不同的需求要用到不同的event，例如当前示例需求中，需要对当前阶段下的某些任务进行隐藏，所以我们这里选择的是阶段推进器JS插件的flow.stage.object.detail.card.data.parse.before事件
3. functional：在functional中，是当前事件下对应的处理函数，即我们需要实现的具体功能，这里我们需要隐藏当前阶段下的某些任务，所以我们需要获取到stageDetail得到阶段的数据，然后利用stageDetail.stages[0].tasks.splice()进行隐藏处理

示例代码下载

阶段推进器JS插件demo [点击下载]