## 前言

     流程引擎切换服务模式对接，支持按场景加载插件信息，支持场景：流程详情、工作流列表、引导式创建、工作流管理

    对接文档： [技术文档-流程引擎切换服务模式对接 (eteams.cn)](https://weapp.eteams.cn/sp/techdoc/doc/910571983701753857)

## 1、工作流管理

```typescript
工作流编辑-框架
appName= "@weapp/ebdform"
compName = "EbFlowPathsetPlugin"
```

**前端实现的业务：**

### **1.1、流转设置节点列扩展，参考文档3.2**

[图片附件未整合: _assets/913133351801118721/001-a637192853.png]

### 1.**2、共享Card扩展Item** ，**参考文档3.3**

### 1.**3****、右上角按钮复写能力，参考文档 3.6**

```typescript
 bridgeTools.regOvProps(
      BridgeService.EBUILDER,
      BridgeWareKey.WfpPathFrameTopBtns,
      this.rewriteWfpPathFrameTopBtnsProps,
    );
//事件复写
 rewriteWfpPathFrameTopBtnsProps = (props: any) => {
    if (this.props.isRelateCard === 0) {
      return {
        ...props,
        openExcelDesign: this.clickExcelDesign,
        openChartDesign: this.openChartDesign,
      };
    }
    return { ...props, showFormDesign: true, openExcelDesign: this.clickEbFormExcelDesign };
  };
```

[图片附件未整合: _assets/913133351801118721/002-22eedcff91.png]

### 1.**4、sdk模式去掉打印更多设置**

```typescript
 initRegOvProps = () => {
    const { bridgeTools, isRelateCard } = this.props;
    if (isRelateCard === 0) {
      bridgeTools.regOvProps(
        BridgeService.EBUILDER,
        BridgeWareKey.WfpPrintTemplate,
        this.rewritePrintProps,
      );
    }
  };

  rewritePrintProps = (props: any) => {
    console.log('print', props);
    return { ...props, customInsertColumns: [] };
  };
```

[图片附件未整合: _assets/913133351801118721/003-9474616a8d.png]

[图片附件未整合: _assets/913133351801118721/004-fc533b9ce0.png]

### 1.5、公共复写WfCorsComponent

1、卡片模式下表单管理属性临时复写

```typescript
  /**
     * 公共部分复写
     */
    bridgeTools.regOvProps(
      BridgeService.EBUILDER,
      BridgeWareKey.WfCorsComponent,
      this.rewriteWfCorsComponentProps,
    );

rewriteWfCorsComponentProps = (props: any) => {
    console.log('WfCorsComponent', props);
    if (props.app === '@weapp/form') {
      return this.props.isRelateCard === 0
        ? {
          ...props,
          module: EbuilderWFModule,
          apiModule: wfsdkEbuilder,
        }
        : {
          ...props,
          module: EbuilderCard,
          apiModule: EbuilderCardModule,
        };
    }
    return props;
  };
```

### 1.6 复写表单【更换】配置

```typescript
  bridgeTools.regOvProps(
      BridgeService.EBUILDER,
      BridgeWareKey.WfppsChangeForm,
      this.rewriteWfppsChangeFormProps,
    );

 rewriteWfppsChangeFormProps = (props: any) => ({ ...props, hideChangeForm: true });
```

[图片附件未整合: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjkAAAHcCAYAAAA0irvBAAAgAElEQVR4Ae29W48cx5Xvywe/nIfzUF/ivJ7X/TEGHAgDjwc...]

## 2、流程详情eb流程组件

```typescript
流程详情：
appName= "@weapp/ebdfpage"
compName = "EbFlowFramePlugin"

export interface FlowPluginProps extends Attributes {
  bridgeTools: BridgeToolsType;
  isMobile?: boolean;
  onComplete: () => void;
  enableEcode: boolean;
}

//工作流详情
export interface FlowFramePluginProps extends FlowPluginProps {
  themeStore: any;
  FpSdk: any;
  baseStore: any;
  bridgeService: string; // "ebuilder"
  isCreate: boolean; // false
  isRelateCard: number; //0 sdk模式  1 卡片模式
  relateCardType: string; //"wea_form"  本地表单  wea_ebuilder  卡片模式，eb表单
  requestId: string;
  workflowId: string;
  onFormComplete?: Function;
}
```

### 2.1 具备能力

情况一：eb主动调用流程详情，详情内部加载插件

```typescript
isRelateCard === 0
```

情况二：流程页面内部加载eb插件（如：卡片模式单页），详情内部加载插件

```typescript
isRelateCard === 1
```

详情内部插件具有的能力（待BridgeWareKey颗粒化）：

#### 2.1.**1、MainTabLayout** 卡片body区域

```typescript
  bridgeTools.regOvComponent(
      BridgeService.EBUILDER,
      BridgeWareKey.WffpMainTabLayout,
      () => (props: any) => {
        // 审批详情content部分
        // blocks是Map结构，key为区块标示，value为渲染区块的函数；sdk模块可以自由组合生成想要的布局
        const { blocks, isSignInputBottom } = props;
        return (
          <div>
            {!isSignInputBottom && blocks.get(BlockType.SignInput)()}
            {blocks.get(BlockType.OperArea)()}
            {blocks.get(BlockType.Prompts)()}
            {blocks.get(BlockType.SystemField)()}
            {blocks.get(BlockType.RelateForm)()}
            <FlowCardContent
              weId={`${this.props.weId || ''}_h0fyi5`}
              otherParams={{
                isCreate,
                requestId,
                workflowId,
                folderId: this.state.docDirid,
              }}
              middleCom={isSignInputBottom && blocks.get(BlockType.SignInput)()}
            />
            {blocks.get(BlockType.SignComment)()}
          </div>
        );
      },
    );
```

#### 2.1.**2、WffpWeaForm** 流程表单区域

```typescript

```

## 3、工作流列表

```typescript
流程详情：
appName= "@weapp/ebdfpage"
compName = "EbFlowListPlugin"
```

> 流程列表区分服务模式进行指定复写

**前端实现的业务：**

### 3.**1、H5列表新建按钮复写**props

```typescript
 bridgeTools.regOvProps(
      BridgeService.EBUILDER,
      BridgeWareKey.WflMQuickMenu,
      this.rewriteWflMQuickMenuProps,
    );

 rewriteWflMQuickMenuProps = (props: any) => {
    console.log('rewriteWflMQuickMenuProps', props);
    return {
      ...props,
      getContainer: this.getContainer,
    };
  };

  getContainer = () => getSPContainer(`${mWflistClsPrefix}`);
```

[图片附件未整合: _assets/913133351801118721/006-c16974210f.png]

### 3.**2、H5流程列表顶部列表类型复写**(sdk模式需要去除)

```typescript
 bridgeTools.regOvProps(
        BridgeService.EBUILDER,
        BridgeWareKey.WflMPublicTabMenu,
        this.rewriteWflMPublicTabMenuProps,
      );

 rewriteWflMPublicTabMenuProps = (props: any) => ({
    ...props,
    data: props.data.filter((d: any) => d.id !== 'm_coming' && d.id !== 'm_comment'),
  });
```

[图片附件未整合: _assets/913133351801118721/007-d7fd5ce613.png]

### 3.**3、流程列表子流程状况-详情按钮复写打开事件  仅pc**

```typescript
    bridgeTools.regOvProps(
        BridgeService.EBUILDER,
        BridgeWareKey.WflSubProcess,
        this.rewriteWflSubProcessProps,
      );

 rewriteWflSubProcessProps = (props: any) => {
    const { data } = props;
    const onDetailClick = (e: any) => {
      e.stopPropagation();
      window.open(
        getSecondUrl(
          `/sp/ebdfpage/flowpage/subRequest/status?requestId=${data.requestId}&workflowId=${data.workflowId}`,
        ),
      );
    };
    return { ...props, onClick: onDetailClick };
  };
```

## 4、sdk模式单页地址添加 ?wfSdkModule={module}机制

目前已知针对两个场景：

#### 场景一：工作流配置单页

```typescript
地址： /sp/workflow/frame/pathset/921581419272724481/base?wfSdkModule=ebuilderworkflow 
921581419272724481 ： workflowId
ebuilderworkflow : sdk模式对接得module
```

[图片附件未整合: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABSIAAAGJCAYAAACevE0ZAAAgAElEQVR4Aey9d3QUx7qvvf84d52z7nfuPRcbB4y9HbY3jjg...]

#### 场景二： 流程详情单页访问

```typescript
地址： /sp/workflow/flowpage/fullView/923060885210200698?authType=10&editFormData=1&requestId=923060885210200698
&preLoadKey=923060885210200698_1698206802464&wfSdkModule=ebuilderworkflow

923060885210200698： requestId
ebuilderworkflow : sdk模式对接得module
```

[图片附件未整合: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB1YAAAE8CAYAAABzdVP8AAAgAElEQVR4Aey9ifdeV1X/33+hfwUppQU7l0FFBlkiIKIIrRa...]

## 5、公共复写类（WfCorsComponent）

```typescript
  this.props.bridgeTools.regOvProps(
      BridgeService.EBUILDER,
      BridgeWareKey.WfCorsComponent,
      this.rewriteWfCorsComponentProps,
    );

rewriteWfCorsComponentProps = (props: any) => {
    console.log('WfCorsComponent', props);
    if (props.app === '@weapp/form' || props.app === '@weapp/formbuilder') {
      return this.props.isRelateCard === 0
        ? {
          ...props,
          ovTopContextValue: {
            formComponentProps: {
              module: EbuilderWFModule,
              apiModule: wfsdkEbuilder,
            },
          },
        }
        : {
          ...props,
          ovTopContextValue: {
            formComponentProps: {
              module: EbuilderCard,
              apiModule: EbuilderCardModule,
            },
          },
        };
    }
    return props;
  };
```

## 6、流程详情-网页般打印

```typescript
appName= "@weapp/ebdfpage"
compName = "EbFlowPrintPlugin"
```

## 7、卡片挂载模式-表单设计器

```typescript
appName= "@weapp/ebdform"
compName = "EbFlowFormDesignPlugin"
```

## 8、流程图设计器

```typescript
appName= "@weapp/ebdform"
compName = "EbFlowChartDesignPlugin"
```
