前端-案例-新建流程页面添加页签（复写组件参数）

需求

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

方法一：重写组件参数

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

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

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

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

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

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

6.往datas添加数据

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

方法二：复写钩子函数

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

源码

方法一：

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:'在新建流程页面添加一个页签'
});

项目结构

方法二：

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:''
  }
);