#### ecode开发文档

[https://weapp.eteams.cn/sp/techdoc/view/716154026911416320/718945648229302272](https://weapp.eteams.cn/sp/techdoc/view/716154026911416320/718945648229302272)

## 1. 需求

ecode复写打印按钮

[图片附件未整合: _assets/197962764470190080/001-757629449d.png]

## 2. 开发步骤

### 2.1. 进入ecode二开平台

 **将当前环境的域名后面拼接/ecode 即进入ecode二开平台**

 例如 weapp.yunteams.cn/ecode

### 2.2. 新建项目

点击新建项目，可以新建个人项目，也可以搜索之前存在的项目，在老项目中新建应用子项目。

[图片附件未整合: _assets/197962764470190080/002-3d624835f4.png]

进入应用后，新建子项目，前端项目类型为**react**

[图片附件未整合: _assets/197962764470190080/003-95bcfe8e5b.png]

新建好后，会默认生成项目结构，可能会稍微慢点，耐心等待，**入口文件是entry.js**，其他两个系统目录无需过多关注

[图片附件未整合: _assets/197962764470190080/004-0b788de5d7.png]

### 2.3. 代码书写

本质上是通过劫持所有项目+名称匹配的组件

默认进入entry.js是空白，代码书写语法和用法可以参考【[ecode前端开发-组件参数复写](https://weapp.eteams.cn/sp/techdoc/view/716154026911416320/718945600867221504)】

如本需求需复写button，则参考[组件替换](https://weapp.eteams.cn/sp/techdoc/view/716154026911416320/718945648229302272)，修改entry.js，劫持'weappUi'的'Button'组件，并新建NewButton.js文件  
demo如下

```typescript
import React from 'react';
import { regOvComponent, request } from '@weapp/utils';
import { asyncImport } from '@weapp/ecodesdk';

const NewButton = React.lazy(() => asyncImport('${appId}', 'NewButton'));

const EsbActionId = 'xxxxxxx';//ESB事件ID

//通过链接获取打印的参数
function extractIdsFromUrl(url) {
  const regex = /\/sp\/print\/batchAggregationPrintPage\/([^/]+)\/([^/]+)\/([^/]+)\/([^/?]+)/;
  const matches = url.match(regex);

  if (matches && matches.length === 5) {
    const module = matches[1];
    const targetId = matches[2];
    const templateId = matches[3];
    const batchId = matches[4];

    return {
      module,
      targetId,
      templateId,
      batchId
    };
  }

  return null;
}

//执行打印动作后续的ESB接口，触发打印数据的状态修改
const runEsb = (dataIds: string) => {
  request({
    url: '/api/ebuilder/form/esb/runEsb',
    method: 'POST',//'POST'
    data: {
      esbActionIds: EsbActionId,//事件ID
      dataIds
    },
  }).then(res => {
    if (res) {
      console.log('修改成功')
    }
  })
}
//获取打印数据的id信息
const triggerPrintDataEsb = () => {
  const data = extractIdsFromUrl(window.location.href);
  request({
    url: '/api/ebuilder/form/aggregation/html/findPrintData',
    method: 'POST',//'POST'
    data,
  }).then(res => {
    const { batchPrintData = {} } = res?.data;
    const { fieldList = [] } = batchPrintData;
    const dataIds = fieldList.map((field: any) => field.dataId).join(',')
    if (dataIds) {
      runEsb(dataIds);
    }
  })
}
//定义详情复写事件
const ovEbPrintPageFn = (Com) => {
  return React.forwardRef((props, ref) => {
    const pathname = window.location?.pathname || '';
    //限定页面
    if (pathname.includes('/sp/print/batchAggregationPrintPage/ebuilderform/100003663022093487')) {
      const onPrint = (...args: any) => {
        props.onClick(...args);
        triggerPrintDataEsb();
      }
      //限定组件weId，也可以用props.Id等，可以限定的参数
      if (props.weId === '4658pe_khk1zz_s2m7d6') {
        return <React.Suspense fallback={() => { }}>
          <NewButton ref={ref} {...props} onClick={onPrint} OriginCom={Com} />
        </React.Suspense>
      }

    }
    //不涉及组件复写，直接返回原组件（必须返回或者复写）

    return <Com ref={ref} {...props} />;
  });
}

regOvComponent('weappUi', 'Button', ovEbPrintPageFn, 0);
```

```typescript
export default class NewButton extends React.Component {
  render() {
    const { OriginCom } = this.props;
    return (
      <span className="app-${appId}-newButton">
        <span className="app-${appId}-newButton-point" />
        <OriginCom {...this.props} />
      </span>
    )
  }
}
```

## 3. 发布应用

[图片附件未整合: _assets/197962764470190080/005-7d0f9d6123.png]

发布后，前台才会生效
