## 需求

在新建流程页面添加一个自定义的页签


![图片1](./files/html_img_0.png)


## 方法一：重写组件参数

1.这是一个WeaTab组件，我们需要重写WeaTab组件的参数

2.到组件库查看组件的参数，可以看到datas就是标签页的数据


![图片2](./files/html_img_1.png)


3.在ecode的register.js页面插入代码，先调试看看组件的datas数据是什么样的，发布ecode，注意register.js文件需要前置加载

```javascript
ecodeSDK.overwritePropsFnQueueMapSet('WeaTab',{
  fn:(newProps,name)=>{
    debugger
    
  },
  order:5,
  desc:'在新建流程页面添加一个页签'
});
```

4.在新建流程页面打开开发工具，并刷新页面，此时会进入到调试模式，此时datas是没有数据的，我们需要多运行几次，点击让代码恢复运行，如果datas还是没有数据再点恢复运行，知道datas有数据


![图片3](./files/html_img_2.png)



![图片4](./files/html_img_3.png)


5.我们看到datas有数据了，然后看一下数据的结构，可以看到有key还有title，重写组件参数时就按这个结构添加数据


![图片5](./files/html_img_4.png)



![图片6](./files/html_img_5.png)


6.往datas添加数据

添加数据时要注意datas有数组时才添加，而且要判断我们添加的数据是不是已经添加过了，因为进入页面时会多次运行重写组件参数的这个函数，可能会造成重复添加，导致报错


![图片7](./files/html_img_6.png)


## 方法二：复写钩子函数

1.和方法1差不多，方法二使用的是overwriteClassFnQueueMapSet函数，只要重写newProps参数就可以了


![图片8](./files/html_img_7.png)


## 源码

方法一：

```javascript
ecodeSDK.overwritePropsFnQueueMapSet('WeaTab',{
  fn:(newProps,name)=>{
    debugger
    const url = window.location.href;
    if(url.indexOf('main/workflow/add?')==-1){
      return;
    }
    const tabData = {
        title: "自定义页签",
        key: "3"
    }
    if(newProps.datas.length==0){
      return newProps;
    }
    let isAdded = false;
    newProps.datas.forEach( i =>{
      if(i.key =="3"){
        isAdded = true;
      }
    });
    if(!isAdded){
      newProps.datas.push(tabData);
    }
    return newProps;
  },
  order:5,
  desc:'在新建流程页面添加一个页签'
});
```

项目结构


![图片9](./files/html_img_8.png)


方法二：

```javascript
ecodeSDK.overwriteClassFnQueueMapSet('WeaTab',{
  fn:(Com,newProps)=>{
    const url = window.location.href;
    if(url.indexOf('main/workflow/add?')==-1){
      return;
    }
    const tabData = {
        title: "自定义页签",
        key: "3"
    }
    if(newProps.datas.length==0){
      return newProps;
    }
    let isAdded = false;
    newProps.datas.forEach( i =>{
      if(i.key =="3"){
        isAdded = true;
      }
    });
    if(!isAdded){
      newProps.datas.push(tabData);
    }
    return{Com,newProps}
  },
  order:3,
  desc:''
  }
);
```