approval.content.render.after

约 1868 字大约 6 分钟

2025-12-16

说明：该事件用于审批内容渲染之后调用

该事件用于审批内容渲染之后执行额外的动作，包括但不限于以下功能： 1. 获取审批内容数据 2. 自定义审批内容实例名称区域 3. 自定义出发审批操作内容区域 4. 自定义字段变更信息 5. 自定义从对象变更信息 6. 自定义按钮触发配置表单内容展示

参数

参数	说明	类型
getContentData	获取审批内容数据（示例）	Function
setTitle	自定义审批内容实例名称区域（示例）	Function
setOperationMsg	自定义出发审批操作内容区域（示例）	Function
setFieldChange	自定义字段变更信息（示例）	Function
setSubObjectChange	自定义从对象变更信息（示例）	Function
setButtonDescribe	自定义按钮触发配置表单内容展示（示例）	Function
callViewEditRecord	触发”查看编辑记录”事件（示例）	Function
callDetailChangeRecord	触发”查看从对象变更记录”事件（示例）	Function
setFlowCustomArea	设置流程信息自定义区域（示例）	Function
setTaskCustomArea	设置任务信息自定义区域（示例）	Function

示例

一、getContentData

功能描述

获取当前审批内容的一些数据，用户可以据此做一些判断，运行不同的业务逻辑，自定义设置展示内容等。

参数

无

返回结果

参数	说明	类型
workflowName	实例名称	String
triggerName	触发操作	String
entityName	对象名称	String
objectName	数据名称	String
changeDetail	字段变更数据	Object
instanceDescribe	按钮配置表单内容	Object
tasks	节点任务数据，包含节点任务列表及任务状态等信息（示例）	Array
...	...	...

参数代码示例

无

代码示例

// getContentData()
export default class Plugin {
    apply() {
        return [
            {
                event: 'approval.content.render.after',
                functional: this.approvalContentRenderAfter.bind(this)
            }
        ]
    }

    approvalContentRenderAfter(api) {
        let contentData = api.getContentData();
        console.log(contentData);
    }
}

二、setTitle

功能描述

用户可以自定义审批内容实例名称区域，更改文案或样式等。

参数

参数	说明	类型
Dom对象/html字符串	自定义设置实例名称	Object/String

返回结果

无

参数代码示例

// 以Html字符串为例，将其作为参数传入
api.setTitle('这是自定义Title文案')

代码示例

// setTitle()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setTitle('这是自定义Title文案');
    }
}

三、setOperationMsg

功能描述

用户可以自定义触发审批操作内容区域，设置文案内容或样式等。

参数

参数	说明	类型
Dom对象/html字符串	自定义设置文字内容和样式	Object/String

返回结果

无

参数代码示例

// 以Html字符串为例，将其作为参数传入
api.setOperationMsg('这是自定义操作信息文案')

代码示例

// setOperationMsg()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setOperationMsg('这是自定义操作信息文案');
    }
}

四、setFieldChange

功能描述

用户获取字段变更数据后，自定义设置展示哪些字段，如何展示字段变更信息等。

参数

参数	说明	类型
Dom对象/html字符串	自定义展示内容	Object/String

返回结果

无

参数代码示例

见代码示例

代码示例

// setFieldChange()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        let data = api.getContentData();
        let fieldChangeDemo = FxUI.create({
            template:`<div>
                  <div v-for="filed in list">
                    <span>{{filed.fieldDescribe.label}}</span>
                    <span>{{filed.oldValue}}</span>
                    <span>{{filed.newValue}}</span>
                  </div>
                </div>`,
            data() {
                return {
                    list:data.changeDetail.fieldChangeDetailList || [],//字段变更数据
                }
            },
        })
        api.setFieldChange(fieldChangeDemo.$el)
    }
}

五、setSubObjectChange

功能描述

用户获取从对象变更内容后，自定义设置如何展示该区域内容。

参数

参数	说明	类型
Dom对象/html字符串	自定义设置展示内容	Object/String

返回结果

无

参数代码示例

// 以Html字符串为例，将其作为参数传入
api.setSubObjectChange('这是从对象变更数据的位置 你想怎么展示')

代码示例

// setSubObjectChange()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setSubObjectChange('这是从对象变更数据的位置 你想怎么展示')
    }
}

六、setButtonDescribe

功能描述

用户可以自定义按钮触发配置表单内容展示。

参数

参数	说明	类型
Dom对象/html字符串	自定义设置内容	Object/String

返回结果

无

参数代码示例

// 以Html字符串为例，将其作为参数传入
api.setButtonDescribe('自定义按钮配置表单内容')

代码示例

// setButtonDescribe()
import test from './test.js'
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        api.setButtonDescribe('自定义按钮配置表单内容')
    }
}

七、callViewEditRecord

功能描述

触发“查看编辑记录”事件。

参数

参数	说明	类型
instance	即 api.getContentData() 方法拿到的数据直接透传即可	Object

返回结果

无

参数代码示例

let data = api.getContentData();
api.callViewEditRecord(data)

代码示例

export default class Plugin{
  apply(){
    return [{
      event: "approval.content.render.after",
      functional: this.approvalContentRenderAfter.bind(this)
    }]
  }
  approvalContentRenderAfter(api){
    console.log(api.getContentData(), 'getContentData')
    let data = api.getContentData();
    let titleDom = FxUI.create({
            template:`<div>
                  我在测试自定义tile区域查看编辑记录按钮触发操作
                  <fx-button 
                    class="info-btn"
                    size="mini"
                    plain
                    @click.stop="ViewInstanceForm">
                    查看编辑记录
                  </fx-button>
                </div>`,
            methods:{
              ViewInstanceForm(){
                api.callViewEditRecord(data)
              }
            }
        })
    api.setTitle(titleDom.$el)
  }
}

八、callDetailChangeRecord

功能描述

触发“查看从对象变更记录”事件。

参数

无

返回结果

无

返回结果

无

参数代码示例

api.callDetailChangeRecord()

代码示例

export default class Plugin{
  apply(){
    return [{
      event: "approval.content.render.after",
      functional: this.approvalContentRenderAfter.bind(this)
    }]
  }
  approvalContentRenderAfter(api){
    console.log(api.getContentData(), 'getContentData')
    let data = api.getContentData();
    let subObjectChangeDom = FxUI.create({
            template:`<div>
                  我在测试自定义查看从对象区域查看从对象记录按钮触发操作
                  <fx-button 
                    class="info-btn"
                    size="mini"
                    plain
                    @click.stop="showMasterDetail">
                    查看从对象变更信息
                  </fx-button>
                </div>`,
            methods:{
              showMasterDetail(){
                api.callDetailChangeRecord()
              }
            }
       })
    api.setSubObjectChange(subObjectChangeDom.$el)
  }
}

九、setFlowCustomArea

功能描述

用户可以在流程信息内容下方自定义展示内容。可以根据 api.getContentData() 返回的 tasks 数据判断节点状态，按需展示自定义内容。

tasks 数据说明：

参数	说明	类型
candidateIds	任务待处理人员 id 列表	Array
state	任务状态（如 `in_progress`）	String
name	任务名称	String
tasks	并行节点下的子任务列表	Array

参数

参数	说明	类型
Dom对象/html字符串	自定义展示内容	Object/String

返回结果

无

参数代码示例

见代码示例

代码示例

// setFlowCustomArea()
export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        let flowCustomAreaDom = FxUI.create({
            template: `<div>
                  <fx-button size="mini" type="primary">流程信息自定义区域配置按钮</fx-button>
                </div>`,
        });
        api.setFlowCustomArea(flowCustomAreaDom.$el)
    }
}

十、setTaskCustomArea

功能描述

用户可以在任务信息内容下方自定义展示区域。可以根据 api.getContentData() 返回的 tasks 数据判断节点状态，按需展示自定义内容。

tasks 数据说明：

参数	说明	类型
candidateIds	任务待处理人员 id 列表	Array
state	任务状态（如 `in_progress`）	String
name	任务名称	String
tasks	并行节点下的子任务列表	Array

参数

参数	说明	类型
Dom对象/html字符串	自定义展示内容	Object/String

返回结果

无

参数代码示例

见代码示例

代码示例

// setTaskCustomArea()
import test from './test.js'

export default class Plugin {
    apply() {
        return [{
            event: "approval.content.render.after",
            functional: this.approvalContentRenderAfter.bind(this)
        }]
    }

    approvalContentRenderAfter(api) {
        // 审批内容数据
        let contentData = api.getContentData();
        // 找到匹配的 task 后，设置自定义区域
        // 示例：正在处理中的任务，处理人为自己，且任务名称为"单人审批"的，在任务信息自定义区域展示内容
        let currentEmployeeId = FxUI.organization.getCurrentEmployee().id;
        let matched = contentData.tasks.some(task =>
            task.state === "in_progress" &&
            task.name === "单人审批" &&
            task.candidateIds.includes(String(currentEmployeeId))
        );
        if (matched) {
            let taskCustomAreaDom = FxUI.create({
                template: `<div>
                    <fx-button size="mini" type="primary">任务信息自定义区域配置按钮</fx-button>
                    </div>`,
            });
            api.setTaskCustomArea(taskCustomAreaDom.$el);
        }
    }
}

bizApi

dataGetter

dataUpdater

bizApi

dataGetter

bizApi

dataGetter

approval.content.render.after