本页用于说明审批详情页 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.approval.opinion.page.render.before",
                    functional: async function (context, options) {
                        let arg = options && options.arg;
                        // isSupprtAfterTag = false，隐藏后加签功能
                        arg.isSupportAfterTag = false;
                        return Promise.resolve({
                            arg: arg
                        });
                    }
                }
            ];
        }
    };
};

实现效果展示

插件结构说明

1. 代码主要围绕event和functional来实现
2. event：对于不同的需求要用到不同的event，例如当前示例需求中，需要隐藏编辑审批意见弹窗中的后加签功能，所以这里的event选择的是编辑审批意见弹窗/页面渲染之前
3. functional：在functional中，是当前事件下对应的处理函数，即我们需要实现的具体功能，这里我们需要对后加签功能进行隐藏，所以我们通过options.arg.isSupportAfterTag对后加签功能的展示进行修改

示例代码下载

审批详情页JS插件demo [点击下载]