本文介绍审批详情页JS插件的使用方法以及如何通过纷享的平台能力扩展审批同意，进而实现以下场景：

• 自定义审批同意弹窗

本教程将帮助你了解如何从零开始开发审批详情页插件，并实现上述功能。

概述

审批详情页插件是一种扩展方式，旨在帮助用户创建灵活且交互性强的弹窗页面。该插件允许用户轻松进行UI层面的修改动作，或者通过数据判断是否可以直接完成任务，强制弹出编辑内容弹窗等功能。从而满足不同业务场景下的需求。

主要特性

目前支持以下扩展功能：

1. 自定义: 弹窗标题、意见输入框标题、串行/并行加签文案、后加签功能隐藏与展示、【是否同时处理审批】区域的内容。
2. 扩展: 通过数据判断是否可以直接完成任务，强制弹出编辑内容弹窗等功能。

开发指南

如何从零开始开发审批详情页插件

步骤一: 创建自定义插件

1. 登录纷享销客的后台管理页面。

2. 在左侧导航栏中点击 "定制开发平台" -> "自定义插件"，进入自定义插件管理页面。

   

3. 点击 新建，填写 名称、支持终端和插件类型，点击 下一步，点击使用 空模板，新建代码文件并复制粘贴以下代码，选择 入口文件，点击 发布。

   

   export default class Plugin {
       apply() {
           return [
               {
                   event: 'approval.agree.render.after',
                   functional: this.approvalAgreeRenderAfter.bind(this)
               }
           ]
       }
   
       approvalAgreeRenderAfter(api) {
           api.setDialogTitle('<h5>这是一段HTML代码</h5>') // 标题替换为 "这是一段HTML代码"
           api.setOpinionLabel("<h5>自定义审批意见输入框标题</h5>")
       }
   }

步骤二: 配置自定义插件

1. 在左侧导航栏中点击进入审批流程管理页面。

   

2. 点击全局配置，点击自定义插件，点击web端单选框 。选择审批弹窗插件，点击确认。

   

步骤三: 效果体验

1. 查看一条审批流程的详情页，会看到弹窗已遵循自定义的弹窗标题、意见输入框标题。

   

事件

事件名称	功能
approval.agree.render.before	该事件用于审批同意渲染之前定制审批同意弹窗
approval.agree.render.after	该事件用于审批同意渲染之后定制审批同意弹窗
approval.reject.render.before	该事件用于审批驳回渲染之前定制审批驳回弹窗
approval.reject.render.after	该事件用于审批驳回渲染之后定制审批驳回弹窗
approval.content.render,after	该事件用于审批内容渲染之后定制审批内容页面
approval.opinions.render.before	该事件用于审批意见渲染之前定制审批意见
approval.changeApprover.render.before	该事件用于审批更换处理人渲染之前定制审批更换处理人弹窗