# 案例：流程表单页面添加按钮

## 概述

通过 `regOvProps` 拦截 Title 组件的 props，向 buttons 数组中注入自定义按钮组件，实现在流程表单标题区域添加按钮。

![](files/Pasted%20image%2020260606114136.png)
## 核心原理

### 1. 创建按钮组件

```javascript
import { Button } from '@weapp/ui';

/**
 * 表单附件下载按钮组件
 * 根据配置文件中的附件字段列表，从表单数据中提取文件并依次下载
 * @param {{ formData: object }} props - formData 对应接口返回的 data 对象
 */
const downloadButton = ({ formData }) => {
    const formSdk = window.WeFormSDK?.getWeFormInstance();

    const handleClick = async () => {
        
    }
   
    return <Button onClick={handleClick}  >下载为PDF</Button>
}

export default downloadButton;
```

### 2. 创建配置文件

`config/config.js` 集中管理需要添加按钮的流程：

```javascript
const config = {
    workflows: [
        {
            formId: '1151612316977602563',              // 表单ID
            nodeIds: ['1168713682791309317'],            // 显示按钮的节点ID（可多个）
            fileFieldNames: ['fj_fltf', 'fj_4ch3']       // 附件字段名称（可多个）
        }
    ]
};
```

### 3. 添加按钮

通过 `regOvProps` 重写 `Title` 组件的 props 处理函数，将自定义按钮插入到 `props.buttons` 数组的**倒数第二个位置**：

```javascript
import { regOvProps } from '@weapp/utils';
import { Suspense, lazy } from 'react';

// 导入组件
const DownloadButton = lazy(() => asyncImport('${appId}', 'components/DownloadButton'));

regOvProps('weappUi', 'Title', (props) => {
    try {
        if (props.weId.endsWith('_6xdqsn') && location.href.includes('/sp/workflow/flowpage/view') && enable()) {
            const { buttons } = props;
            if (buttons && buttons.length > 0 && formData) {
                buttons.splice(buttons.length - 1, 0,
                    <Suspense fallback={<span></span>}>
                        <DownloadButton formData={formData} />
                    </Suspense>
                );
            }
        }
    } catch (e) {
        console.error('注入下载按钮出现异常', e);
    }
    return props;
}, 1);
```

**关键点：**
- `props.weId.endsWith('_6xdqsn')` — 通过 Title 组件的 weId 后缀定位到目标位置
- `buttons.splice(buttons.length - 1, 0, ...)` — 插入到倒数第二个位置，保留系统原有按钮
- `Suspense` + `lazy` — 组件懒加载，进行异步导入组件（entry.js 文件导入组件做法）
- 使用 `try-catch` 包裹，确保即使出错也不影响原有渲染

### 4. 判断当前流程和节点是否需要添加按钮

根据配置文件（config.js)，通过 enable 函数判断当前流程和节点是否需要显示按钮：

```javascript
function enable() {
    const formSdk = window.WeFormSDK?.getWeFormInstance();
    if (!formSdk) return false;
    const info = formSdk.getBaseInfo();
    const formId = info?.formId;
    const nodeId = info?.customParam?.nodeId;
    if (!formId || !nodeId) return false;
    return config.workflows.some(w => w.formId === formId && w.nodeIds.includes(nodeId));
}
```