Ecode在流程表单指定位置新增按钮

最新推荐文章于 2025-06-25 17:36:28 发布

原创最新推荐文章于 2025-06-25 17:36:28 发布 · 1.1k 阅读

14 ·

CC 4.0 BY-SA版权

欢迎转载！转载请注明出处！

文章标签：

#泛微OA #泛微oa

泛微OA学习专栏专栏收录该内容

27 篇文章

订阅专栏

前言

最近有接到需求说，需要在流程表单中将之前E8通过<a>标签实现的链接跳转改成按钮的形式，说是这样更加的明确。

刚接到需求的时候我是懵的，因为给的文档说明中只写了如何在Ecode平台上重写组件，但是并没有说如何在流程表单中新增按钮。就只能在网上搜寻一些参考了，但是不得不说泛微OA的开发资料真的很少，找不到什么有用的参考，最后没有办法，还是得去看泛微的培训视频

之所以不一开始就去看培训视频是因为视频真的很多，并且一个视频三小时，每个视频也没一个具体的内容介绍，有些时候看完一个视频还不一定能看到你需要的内容，没办法只能在下班后一个个视频看过去了，好在最后也是找到方法了

为了方便大家，下面就将我所了解到的方法分享出来，如果有什么问题的话欢迎在评论区一起讨论哦~

在PC端新增按钮

基本上了解Ecode的伙伴都了解，对于电脑端和移动端，Ecode的一些代码是不一样的，所以需要分别进行开发，但是基本上PC端可以了，那么移动端做好对应的修改也就可以了，这里就拿PC端为例具体说明一下如何在流程表单指定位置新增按钮

前期准备

首先就需要在Ecode中新建对应的文件夹，这都是基础工作了，不清楚的话可以去看我的基础入门文章讲解【手把手教你Ecode入门】

代码编写

const { WeaTools, WeaSlideModal } = ecCom;

class CustomComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        // 绑定 getUpdate 方法的 this 指向
        this.getUpdate = this.getUpdate.bind(this);
        this.getInfo = this.getInfo.bind(this);
    }

    componentDidMount() {
        window.WfCustomInfoRef = this;
    }

  getInfo() {
        var requestId = WfForm.getBaseInfo().requestid;
       
        jQuery.ajax({
            type: "POST",
            //这里的url填的是按钮触发的接口地址，对应着填进来就好了
            url: "接口地址",
            data: { 'id': requestId,'name': "test1" },
            success: function (data) {
                window.location.reload();//这里是接口调用成功后的回调，我这里是重新加载当前页面
                console.log(data);

            },
            error: function (data) {
              //接口调用失败的输出
                alert("系统出现问题，请联系管理员!");
            }
        });
    }

    getUpdate() {
        var requestId = WfForm.getBaseInfo().requestid;
        var deptid = WfForm.getFieldValue(WfForm.convertFieldNameToId("shenqbm"));
        jQuery.ajax({
            type: "POST",
            //这里的url填的是按钮触发的接口地址，对应着填进来就好了
            url: "接口地址",
            data: { 'id': requestId, 'deptid': deptid, 'name': "test1" },
            success: function (data) {
                window.location.reload();//这里是接口调用成功后的回调，我这里是重新加载当前页面
                console.log(data);

            },
            error: function (data) {
              //接口调用失败的输出
                alert("系统出现问题，请联系管理员!");
            }
        });
    }

    render() {
      //这里接收的renderButton是在流程节点插入代码里面返回的props属性
        const { renderButton } = this.props;
      //通过返回的props属性来判断对应显示的内容
        if (renderButton === 'btn1') {
            return (
                <button id='btn1' className="custom-button" type="button" onClick={this.getUpdate}>
                    获取数据
                </button>
            );
        } else if (renderButton === 'btn2') {
            return (
                <button id='btn2' className="custom-button" type="button" onClick={this.getInfo}>
                    获取最新数据
                </button>
            );
        }
        return null;
    }
}

ecodeSDK.setCom('${appId}', 'CustomComponent', CustomComponent);

上面这段代码有几个注意的点：

需要接收返回的props属性进行判断动态的展示对应的内容（这里一定要加判断，如果不加直接写return的话容易造成两个按钮在同一个单元格进行展示）
需要绑定方法的this指定【这是我在发现流程一直报错，不断搜索解决办法的时候发现的，真的是万万没想到会是因为这个】

流程节点插入代码编写

const params1 = {
    domId: 'btn1', // 渲染位置的 fieldId
    id: '这里是对应的项目appid', // appid
    name: 'CustomComponent', // 调用的组件名称，在 setCom 中定义的
    cb: function () {
        // 渲染完成后的回调
    },
    noCss: true,
    props: { renderButton: 'btn1' }
};

const params2 = {
    domId: 'btn2', // 渲染位置的 fieldId
    id: '这里是对应的项目appid', // appid
    name: 'CustomComponent', // 调用的组件名称，在 setCom 中定义的
    cb: function () {
        // 渲染完成后的回调
    },
    noCss: true,
    props: { renderButton: 'btn2' }
};

// 分别渲染两个组件
ecodeSDK.render(params1);
ecodeSDK.render(params2);

以上代码没有什么需要特别注意的，唯一需要注意的就是domId（单元格设置的id名称）、id（对应项目的appid）以及name（对应项目的index.js里面的注册组件名称）

在移动端

其中移动端和PC端展示的内容几乎是差不多的，这里就简单的介绍一下

代码编写

const { Tools, Flex, Icon, Table } = WeaverMobile;

const { callApi } = Tools;

class CustomerMobile extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        // 绑定事件处理函数
        this.getUpdate = this.getUpdate.bind(this);
       
    }

    componentDidMount() {
    }

    getUpdate() {
        
        var requestId = WfForm.getBaseInfo().requestid;
        var deptid = WfForm.getFieldValue(WfForm.convertFieldNameToId("shenqbm"));
        
        jQuery.ajax({
            type: "POST",
            url: "/workflow/request/GetSAPDataAjax.jsp",
            data: { 'id': requestId, 'deptid': deptid, 'name': "test1" },

            success: function (data) {
                window.location.reload();
                console.log(data);

            },
            error: function (data) {
                alert("系统出现问题，请联系管理员!");
            }
        });
    }


    render() {
        return (
            <div>
                {/* 原有的刷新按钮 */}
                <button className="custom-button" type="button" onClick={this.getUpdate}>
                    获取对应的数据
                </button>
              
            </div>
        );
    }
}

ecodeSDK.setCom('${appId}', 'CustomerMobile', CustomerMobile);

这里基本上框架搭好之后，对应的方法和render是和PC端一样的，对应着修改就好啦