# 提交申请/流程新建二开口子


# 一、后端-可发起工作流列表openapi接口

<font color="#FF0000">最低版本支持：weaver-workflow-list 1.69.0-hotfix2</font>


## 1.1、概述及说明

项目使用可发起工作流列表openapi接口，获取到指定用户的可发起工作流列表显示出来供用户新建流程用。用户存在兼岗，接口需支持合并查询出兼岗可新建的工作流。


## 1.2、注意事项

开发平台-前台可发起工作流列表openapi接口文档，2506基线才会更新,2506基线及之后可忽略本次接口说明。

## 1.3、接口说明

**前台可发起工作流列表openapi接口**

请求URL：/api/workflow/list/paService/v1/getCreateWorkflowList

原接口文档：https://weapp.eteams.cn/sp/opendoc/freepass/10.0.2504.01/zh_cn/840714112855539713


![](${appMdRes}/1749111029-image.png)


原接口基础上增加参数：

| **参数名**             | **必选**        | **类型**      | **说明**              |
| :-------------        | :-------------  | :------------ | :--------------------|
| mergeShow             | 否              |    Int        |   主次账号是否统一显示"mergeShow":1/0（参数传递为1，才会读取用户个人设置-偏好设置-其他设置：多身份数据显示 设置，否则默认不包含次账号数据 ）                   |
| inCludePTJob          | 否              |    Int        |   是否包含兼职岗位数据，0：否 1：是    |
| loadOfsFlow           | 否              |    Int        |   是否加载异构流程数据，0：否 1：是，2509基线hotfix增加    |


参数如图：

![](${appMdRes}/1749111087-image.png)



原接口基础上增加返回参数：

| **参数名**             | **类型**      | **说明**              |
| :-------------        | :------------ | :--------------------|
| curAccountCreateAble  |    boolean    |   当前账号是否可创建（当传入参数mergeShow=1或inCludePTJob=1才会有此属性）  |
| identityList          |    list       |   可创建流程的身份列表（当传入参数mergeShow=1或inCludePTJob=1才会有此属性） |
| datasrc               |    string     |   数据来源,异构系统数据为3，2509基线hotfix增加   |
| pcUrl                 |    string     |   自定义pc打开链接，2509基线hotfix增加  |
| mUrl                  |    string     |   自定义mobile打开链接，2509基线hotfix增加  |
| sysCode               |    string     |   统一待办数据系统标识，2509基线hotfix增加   |
| letter                |    string     |   统一待办数据流程名称首字母，2509基线hotfix增加   |


返回参数如图：

![](${appMdRes}/1749111413-image.png)


# 二、前端口子

## 2.1、组件props复写

### 2.1.1、提交申请组件props复写说明

- ecode拦截weappWorkflow
- 组件名称：侧滑提交申请组件NewFlowDialog，居中弹窗提交申请组件NewFlowVisibleDialog，提交申请组件内容NewFlow
- 最低支持版本：10.0.2311.01

> NewFlowDialog、NewFlowVisibleDialog组件props属性说明
  
| 属性名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| callerParams | 否 | any | 调用方参数封装，默认会将传递的callerParams值作为数据接口请求参数 |
| canManagerWf | 否 | boolean | 有工作流管理权限，可新建流程少于6个时，提交申请页面会显示【新建工作流】按钮，canManagerWf传false可屏蔽此按钮 |
| onRowClick | 否 | (newFlowData: any, identity?: any, importReqId?: string) => void | 自定义行点击事件 |
| dialogProps | 否 | any | 弹窗组件props复写，可复写属性可参考公共组件的Dialog组件 |
| wfpRouteParam | 否 | any | 扩展打开详情自定义参数 |


> NewFlow组件props属性说明
  
| 属性名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| callerParams | 否 | any | 调用方参数封装，默认会将传递的callerParams值作为数据接口请求参数 |
| canManagerWf | 否 | boolean | 有工作流管理权限，可新建流程少于6个时，提交申请页面会显示【新建工作流】按钮，canManagerWf传false可屏蔽此按钮 |
| onRowClick | 否 | (newFlowData: any, identity?: any, importReqId?: string) => void | 自定义行点击事件 |
| wfpRouteParam | 否 | any | 扩展打开详情自定义参数 |
| needFlowPageCom | 否 | any | 是否需要加载提交申请内详情组件，当外部已经加载详情组件时，可屏蔽内部的，使用外部的，避免引多个详情组件引发路由冲突 |
| emptyProps | 否 | any | 提交申请无数据页面复写，可复写属性可参考公共组件的Empty组件 |


> PC复写示例（ecode）
```js
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'NewFlowDialog', (props) => {
  props['callerParams'] = {...props?.callerParams,workflowids: '871522583393607695,887505513878249472'};
  return props;
}, 0);
```

> NewFlowDialog组件效果预览

![](/api/ecode/resource/view/${appRes}/1705241836-image.png)

> NewFlowVisibleDialog组件效果预览

![](/api/ecode/resource/view/${appRes}/1705241940-image.png)


### 2.1.2、流程列表Pc端提交申请功能（侧滑Dailog，居中Dialog，单页）支持自定义过滤数据显示方法
- ecode拦截weappWorkflow
- 组件名称：侧滑提交申请组件NewFlowDialog，居中弹窗提交申请组件NewFlowVisibleDialog，单页提交申请组件WflSpNewFlow
- 最低支持版本：10.0.2408.01
> PC复写示例（ecode）
```js
/**
 * @desc    : 流程列表Pc端提交申请功能（侧滑Dailog，居中Dialog，单页）支持自定义过滤数据显示方法
 */
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'NewFlowDialog', (props) => {
  props?.customFilterData = (data, id) => {
    // id是提交申请组件当前定位的tab页签id，data是可新建流程对象信息，可通过自定义逻辑判断，控制返回false时，表示指定tab下不需要显示此数据
    if(xxx) {
        //需要显示的场景
        return true;
    } else {
        //不需要显示的场景
        return false;
    }
  }

  return props;
}, 1)
``` 

### 2.1.3、提交申请页面去除底部给消息卡片预留的高度
> PC复写示例（ecode）
```css
/**
 * @desc    : 提交申请页面样式复写
 */

.wfl-sp-newflow .weapp-workflow-lnewflow-newflow-content {
  
  height: calc(100% - var(--hd)* 47)!important;
}


.weapp-workflow-lnewflow-newflow-content {
  height: 100%!important;
}
``` 


### 2.1.4、新建流程支持url参数控制显示主次账号

- ecode拦截weappWorkflow
- 组件名称：提交申请组件内容NewFlow
- 最低支持版本：	10.0.2507.01

> PC复写示例（ecode）
```js
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'NewFlow', (props) => {

  /**
   * identityTypes 为身份类型，多个身份用英文半角逗号分隔。默认为空，不影响已有功能。
   * 
   * 身份类型：
   * 0 - 当前登录用户
   * 1 - 兼岗身份
   * 2 - 委托
   * 4 - 次身份
   */
  props['callerParams'] = {...props?.callerParams, identityTypes:'1'};
  return props;
}, 0);
``` 

### 2.1.5、流程标题自定义点击事件

- ecode拦截weappWorkflow
- 组件名称：提交申请组件内容NewFlow
- 最低支持版本：	10.0.2511.01

> PC复写示例（ecode）
```js
import React from "react";
import { regOvProps } from '@weapp/utils';
import {ListData} from "@weapp/ui";

regOvProps('weappWorkflow', 'NewFlow', (props) => {
  const onRowClick_new = (newFlowData: ListData, identity?: any, importReqId?: string, event?: React.MouseEvent,originalRowClick?:Function) =>{
    const {workflowid = ''} = newFlowData;
    if(workflowid == '871522583393607695'){
      //自定义事件
      console.log('newFlowData',newFlowData);
    }else{
    	originalRowClick && originalRowClick();
    }
  }  
  props.onRowClick = onRowClick_new;
  return props;
}, 0);
``` 


> 移动端复写示例（ecode）
```js
/**
 * 复写流程标题点击事件-移动端
 */
regOvProps('weappWorkflow', 'MWfclNewFlowList', (props) => {
  const onRowClick_new = (itemData: MListData, identity?: any, importReqId?: string,originalRowClick?:Function) =>{
    const {workflowid = ''} = itemData;
    if(workflowid == '871522583393607695' || workflowid == '1120951499162099721'){
      //自定义事件
      console.log('itemData',itemData);
    }else{
    	originalRowClick && originalRowClick();
    }
  }
  const newProps = {
    ...props,
    onRowClick: onRowClick_new,
  };
  return newProps;
}, 0);
``` 

### 2.1.6、流程标题复写样式

- ecode拦截weappWorkflow
- 组件名称：流程标题card组件 NewFlowCardItem、标题显示组件NewFlowWaterfallCard
- 最低支持版本：	10.0.2512.01


> 效果

![](${appMdRes}/1763522856-image.png)

> PC复写示例（ecode）

```js
regOvProps('weappWorkflow', 'NewFlowCardItem', (props) => {
  const {item,classType,className,newFlowStore,customPrevRender,index} = props;
  const {randomKey,urlParams} = newFlowStore;
  if(urlParams?.fromDev == '1' && item?.usedtodo == true){    
    let newProps = {...props};
    //console.log('-----------props--',props);
    newProps.getCustomLayout = (blocks:Map<string,ReactNode>,otherParam)=>{   
      const {operateNumber} = otherParam;
      return <li className={`${classType}-ul-li ${className}`}>    
        {customPrevRender}
        {classType === 'weapp-workflow-lnewflow-watefallList' && <div className={`${classType}-ul-li-line`}></div>}
        <div className={`${classType}-ul-li-container`}>   
          <div className={`${classType}-div ${classType}-div-${operateNumber}`} id={`workflow-${randomKey}-${item.workflowid}-${item.type || ""}`}>
            {blocks.get('waterfallCard')} {/**显示标题 */}
            {blocks.get('identityIdOps')} {/**多身份 */}
          </div>
          <div className={`${classType}-ul-li-operate`} id={`icon-${randomKey}-${item.workflowid}-${item.type || ""}`}>
            {blocks.get('importWfOps')} {/**导入 */  }
            {blocks.get('collectedOps')} {/**加入/取消收藏 */}
          </div>
        </div>
      </li>
    }
    return newProps;
  }  
  return props;
}, 0);

/**
 * 复写流程标题显示
 */
regOvProps('weappWorkflow', 'NewFlowWaterfallCard', (props) => {
  const {onClick,item,name,urlParams={}} = props;
  if(item?.usedtodo == true && urlParams?.fromDev == '1'){
    let newProps = {...props};
    //console.log('-----------props--',props);
    newProps.customRenderContent = (pps)=>{
      return <span onClick={onClick}>复写-{name}</span>
    }
    return newProps;
  }  
  return props;
}, 0);
``` 


### 2.1.7、移动端提交申请页面的参数带入到流程详情

- ecode拦截weappWorkflow
- 组件名称：提交申请组件 MWfclNewFlowList
- 最低支持版本：	10.0.2503.01


> 效果


![](${appMdRes}/1765264702-image.png)

> 移动端复写示例（ecode）


~~~js
import { regOvProps } from '@weapp/utils';

function parseSearchToParams(search) {
    // 去掉开头的 '?'（如果存在）
    const queryString = search.startsWith('?') ? search.slice(1) : search;    
    // 如果为空，直接返回空对象
    if (!queryString) {
        return {};
    }
    const params = {};
    const pairs = queryString.split('&');
    for (const pair of pairs) {
        const [key, value] = pair.split('=');
        // 解码 URI 组件（处理编码过的字符，如 %20）
        const decodedKey = decodeURIComponent(key);
        const decodedValue = decodeURIComponent(value || '');
        params[decodedKey] = decodedValue;
    }
    return params;
}

regOvProps('weappWorkflow', 'MWfclNewFlowList', (props) => {  
  const {location={},wfpRouteParam={}} = props;
  const {search=''} = location;
  if(search.indexOf('noConvertPath')>-1){
    const param = parseSearchToParams(search);
    const newWfpRouteParam = {...wfpRouteParam,...param};
    props.wfpRouteParam = newWfpRouteParam;
  }
  return props;
}, 0);

~~~


# 三、标准页面url参数

## 3.1、提交申请列表url参数
  
### 3.1.1、流程列表提交申请功能（PC+移动）支持url参数过滤数据
- 参数key：workflowids或workflowtypes
- 参数value：具体想要过滤的工作流id或工作流类型的值
- 支持列表：PC提交申请列表（单页+侧滑Dialog+居中Dialog）和移动提交申请列表
- 最低支持版本：10.0.2305.01
- 传递示例：/newflow?workflowtypes=830428705524015105,925278801890770945

![](/api/ecode/resource/view/${appRes}/1715593087-image.png)
- 传递示例：/newflow?workflowids=972871871583379457&workflowtypes=830428705524015105,925278801890770945
![](/api/ecode/resource/view/${appRes}/1715593185-image.png)

### 3.1.2、流程提交申请（移动）页面类型分组支持url参数控制默认全部收起
- 参数key：collapseTree
- 参数value：不传递时类型分组默认展开，1表示改为默认收起
- 支持列表：移动提交申请列表
- 最低支持版本：10.0.2504.01
- 传递示例：/mobile/workflow/newflow?collapseTree=1


![](${appMdRes}/1746609184-image.png)
  