## 流程列表前端二开口子【实时更新】

## 一、前端口子
### 1.1、流程标准列表props复写说明

- ecode拦截weappWorkflow
- 组件名称：待办`WfLTodo`，已办`WfLDono`，已办`WfLTodo`，我发起的`WfLMine`，草稿`WfLDraft`，关注`WfLAttention`，下属待办`WfLSubordinate`，全部流程`WfLAll`
- 以下props，上述列表通用
- <span style="color:red">最低支持版本：10.0.2311.01</span>

> props属性说明
  
| 属性名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| callerParams | 否 | any | 调用方参数封装，默认会将传递的callerParams值作为数据接口请求参数 |
| workflowId | 否 | string | 过滤只显示指定工作流下的数据 |
| commSearchId | 否 | string | 默认使用指定常用筛选查询 |
| onRowClick | 否 | (data: any, index: number, event?: React.MouseEvent) => void | 自定义行点击事件 |
| titleProps | 否 | any | 列表页面顶部title内容复写，可复写属性可参考公共组件的Title组件 |
| publicListComProps | 否 | any | 列表页面props复写 |

> publicListComProps属性说明
  
| 属性名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| customEmptyProps | 否 | any | 列表无数据页面属性复写，可复写属性可参考公共组件的Empty组件 |
| searchAdProps | 否 | any | 列表高级搜索属性复写，可复写属性可参考公共组件的Empty组件 |
| listViewProps | 否 | any | 数据列表组件复写，当列表视图为瀑布视图时，复写组件属性请参考公共组件的List组件，当列表视图非瀑布视图时，复写组件属性请参考公共组件的ListView组件 |
| showRightLayout | 否 | boolean | 是否显示列表右侧协同区组件，默认显示 |
| hideLeftTree | 否 | boolean | 是否隐藏列表左侧树组件，默认不应 |
| storeRef | 否 | (store: any) => void | 获取列表store |


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

regOvProps('weappWorkflow', 'WfLTodo', (props) => {
  props?.onRowClick = (data: any, index: number, event?: React.MouseEvent) => {
    window.open(`/sp/workflow/flowpage/fullView/${data.requestid}`);
  }
  return props;
}, 0);
```
### 1.2、流程列表右侧协同区内容不受控后台协同区配置
- ecode拦截weappWorkflow
- 组件名称：`WflPublicList`
- <span style="color:red">最低支持版本：10.0.2410.01</span>
> 复写示例（ecode）
```js
/**
 * 构建流程中心/流程表单应用列表，支持受控流程列表协同区设置控制
 */
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'WflPublicList', (props) => {
  props.showDefaultSynergy = true;
  return props;
}, 1)
``` 
### 1.3、流程列表左侧树默认展示类型控制
- ecode拦截weappWorkflow
- 组件名称：`WflPublicList`
- <span style="color:red">最低支持版本：10.0.2411.01</span>
> 复写示例（ecode）
```js
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'WflPublicList', (props) => {
  props.defaultLeftTreeDisplayType = 'queryType';  //默认查询类型
  //props.defaultLeftTreeDisplayType = 'workflowType';//默认工作流类型
  return props;
}, 1)
``` 

## 二、标准页面url参数

### url参数配置入口

>菜单设置>目标菜单>编辑菜单>设置参数  （<span style="color:red">仅标准流程页面支持</span>）

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

### 2.1、按页签维度过滤
- 参数key：`tabids`
- 参数value：指定页签id，多个以英文逗号分隔
- <span style="color:red">最低支持版本：10.0.2504.01</span>
- 传递示例：`/workflow/list/todo?tabids=1`
- `tabids`查询链接：[流程列表tab页签说明](https://weapp.eteams.cn/ecode/playground/doc/share/view/1222514191205122048)

> 效果展示：

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

### 2.2、按工作流维度过滤
- 参数key：`workflowId`,`workflowids`,`exWorkflowids`
- 参数value：指定工作流Id
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】、【流程督办列表】、【智能审批列表】、【即将到达流程列表】、【批量打印流程列表】、【批量存文档流程列表】、【流程回收站列表】、【流程监控列表】

| 参数key | 使用示例 | 说明 | 参数value | 最低支持版本 |
| --- | --- | --- | --- | --- |
| `workflowId` | `/workflow/list/todo?workflowId=979937818441662592` | 单个工作流范围限制，按指定单个工作流过滤数据 | 指定单个工作流Id | 10.0.2311.01 |
| `workflowids` | `/workflow/list/todo?workflowids=979937818441662592,979937818441662593` | 多个工作流包含筛选，展示指定多个工作流数据 | 多个工作流Id拼接字符串，以英文逗号分隔 | 10.0.2311.01 |
| `exWorkflowids` | `/workflow/list/todo?exWorkflowids=979937818441662592,979937818441662593` | 多个工作流排除筛选，反向隐藏指定多个工作流数据 | 多个工作流Id拼接字符串，以英文逗号分隔 | 10.0.2305.01 |

> 工作流id获取方式：

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


### 2.3、按工作流类型维度过滤
- 参数key：`workflowtypes`,`exWorkflowtypes`
- 参数value：指定工作流类型Id拼接的字符串，以英文逗号分隔
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】、【流程督办列表】、【智能审批列表】、【即将到达流程列表】、【批量打印流程列表】、【批量存文档流程列表】、【流程回收站列表】、【流程监控列表】
- ***注意事项：【其它】类型id固定为-999***

| 参数key | 使用示例 | 说明 | value | 最低支持版本 | 注意 |
| --- | --- | --- | --- | --- | --- |
| `workflowtypes` | `/workflow/list/todo?workflowtypes=979937818441662592` | 多个工作流类型包含筛选，按指定类型过滤数据 | 多个工作流类型Id拼接字符串，以英文逗号分隔 | 10.0.2311.01 | 【其它】类型id固定为-999 |
| `exWorkflowtypes` | `/workflow/list/todo?exWorkflowtypes=979937818441662592` | 多个工作流类型排除筛选，反向隐藏指定类型数据 | 多个工作流类型Id拼接字符串，以英文逗号分隔 | 10.0.2305.01 | 【其它】类型id固定为-999 |

> 工作流类型获取方式：

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


### 2.4、按表单维度过滤
- 参数key：`formIds`
- 参数value：指定表单Id拼接的字符串，以英文逗号分隔，过滤只显示使用指定表单的工作流下的数据。
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】、【流程督办列表】、【智能审批列表】、【即将到达流程列表】、【批量打印流程列表】、【批量存文档流程列表】、【流程回收站列表】、【流程监控列表】
- <span style="color:red">最低支持版本：10.0.2311.01</span>
- 传递示例：`/workflow/list/todo?formIds=979937818441662592`

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

### 2.5、过滤只显示指定身份下的数据
- 参数key：`isremarks`
- 参数value：指定身份标识拼接的字符串，以英文逗号分隔
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】
- <span style="color:red">最低支持版本：10.0.2306.01</span>

> isremark标识说明链接：
[isremark说明](https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/doc/cf87c3c9-8ada-4e5f-bc60-d6a6c48a12a9)


  #### 传递示例
> 1、待处理流程列表：/workflow/list/todo?isremarks=0,1,5,6,10,11<br>
  2、待阅流程列表：/workflow/list/todo?isremarks=20,21,30,31,40,41,50,51,60,61,70,71,80,81<br>
  3、已处理流程列表：/workflow/list/todo?isremarks=100,101,102,103,110,111,120,121,130,131,140,141,160,161,170,180,181,182,183,184,185<br>
  4、已阅流程列表：/workflow/list/todo?isremarks=150,151,152


### 2.6、流程列表设置默认页签
- 参数key：`defTab`
- 参数value：请查看/getListConfig中dimensionMenu页签对应的id
- <span style="color:red">最低支持版本：10.0.2510.01</span>
- 传递示例：`/workflow/list/todo?defTab=1`

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

### 2.7、流程列表页签范围控制
- 参数key：`showTabIds`
- 参数value：请查看/getListConfig中dimensionMenu页签对应的id
- <span style="color:red">最低支持版本：10.0.2601.01</span>
- 传递示例：`/workflow/list/todo?showTabIds=0,1,2`

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

### 2.8、流程列表右侧协同区内容不受控后台协同区配置
- 参数key：`showDefaultSynergy`
- 参数value：true或者false
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】
- <span style="color:red">最低支持版本：10.0.2410.01</span>
- 传递示例：`/workflow/list/todo?showDefaultSynergy=true`

![](${appMdRes}/1767619544-image.png)
  
### 2.9、流程列表左侧树默认展示类型控制
- 参数key：`defaultLeftTreeDisplayType` 
- 参数value：`queryType`或者`workflowType`
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】、
- <span style="color:red">最低支持版本：10.0.2404.01</span>
- 传递示例：`/workflow/list/todo?defaultLeftTreeDisplayType=queryType`
  

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

![](${appMdRes}/1767619578-image.png)
  
### 2.10、流程列表左侧树隐藏

- 参数key：`hideLeftTree`
- 参数value：1=隐藏
- <span style="color:red">最低支持版本：10.0.2601.01</span>
- 传递示例：`/workflow/list/todo?hideLeftTree=1`

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

### 2.11、流程列表隐藏提交申请按钮
- 参数key：`disableNewFlow`
- 参数value：1表示隐藏，其余值表示不做任何处理
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】
- <span style="color:red">最低支持版本：10.0.2504.01</span>
- 传递示例：`/workflow/list/todo?disableNewFlow=1`
 

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

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

![](${appMdRes}/1767619723-image.png)
  
### 2.12、流程列表数据工作流状态控制
- 参数key：`workflowStatus`
- 参数value：1表示列表数据/左侧树及数量统计只显示活动版本工作流状态为“启用”状态的数据，5表示列表数据/左侧树及数量统计只显示活动版本工作流状态为“停用”状态的数据
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】、【流程督办列表】、【智能审批列表】、【批量打印流程列表】、【批量存文档流程列表】、【流程监控列表】
- <span style="color:red">最低支持版本：10.0.2504.01</span>
- 传递示例：`/workflow/list/todo?workflowStatus=1`


### 2.13、流程列表左侧树隐藏

- 参数key：`hideLeftTree`
- 参数value：1=隐藏
- <span style="color:red">最低支持版本：10.0.2601.01</span>
- 传递示例：`/workflow/list/todo?hideLeftTree=1`

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

### 2.14、全部流程列表二级维度页签控制
**使用说明：** 以下两个参数用于控制全部流程列表子维度页签的展示范围与默认选中项，支持独立使用或组合使用。
- <span style="color:red">最低支持版本：10.0.2601.01</span>
- 传递示例：`/workflow/list/all?subDimension=all&showSubDimensionIds=all,dirParticipant `

**参数说明**：

| 参数名 | 含义 | 枚举值| 枚举值含义|
| --- | --- |---|---|
| `subDimension` | 控制子维度默认选中的页签 | `all`、`dirParticipant`、`share`、`watch` | all = 全部 <br>dirParticipant = 我直接参与的<br>share = 共享给我的 <br>watch = 我关注的
| `showSubDimensionIds` | 控制展示的页签范围，多个逗号拼接 | `all`、`dirParticipant`、`share`、`watch` | 同上|


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

### 2.15、流程列表无数据时一直显示列头效果
- 参数key：`alwaysShowList`
- 参数value：1或true
- 支持列表：【待办流程列表】、【已办流程列表】、【草稿流程列表】、【下属待办流程列表】、【我发起的流程列表】、【共享流程列表】、【关注流程列表】、【全部流程列表】
- <span style="color:red">最低支持版本：10.0.2305.01</span>
- ***注意事项：仅当列表显示类型为【列表视图】、【表格视图】时，此参数才会生效***
- 传递示例：`/workflow/list/todo?alwaysShowList=1`

### 2.16、移动端列表页签平铺
 
- <span style="color:red">最低支持版本：10.0.2604.01</span>
- 传递示例：`/mobile/workflow/list/todo?listTabType=tab`
 
 ![](${appMdRes}/1767618434-image.png)

> 参数说明（下列参数可以单独分开使用）

| 参数 | 参数说明| 默认值 
| --- | --- | ---|
| listTabType | 控制菜单展示模式：默认为 “menu”，对应标准多级下拉模式；为 “tab”，则切换为平铺模式（**注：tab 平铺模式下仅保留一级页签**）|"menu"
| tabExpandToMoreSpace| 控制是否为页签分配更多展示空间：开启后会调整按钮布局以腾出页签空间 | 默认为 false；设为 true 时，免打扰按钮移入「**更多**」按钮内，快捷按钮移回「**批量操作按钮组**」
| listHideTotal| 控制是否隐藏页签下方对应的流程数量|false|
  

## 三、组件暴露
### 3.1、流程列表行操作组
<span style="color:red">最低支持版本：10.0.2512.01</span>
> 组件效果展示



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

> 示例代码
```javascript
const ListOperateModalDemo: React.FC<ModalComponentProps> = (props) => {

  const modalGroupRef = useRef<any>(null);
  
  /**
   * 打开干预弹框为例
   */
  const handleOpenInterveneModal = () => {
    
    modalGroupRef.current?.open('interve', {
      data: rowData, // 行操作数据
      onClose: () => {
        console.log('干预操作弹框 - 关闭回调');
      },
      onSuccess: () => {
        console.log('干预操作弹框 - 操作成功回调');
      }
    });
  };

  const renderModalGroup = (app) => {
    const { Comp } = app;
    const WflOperateModalGroup = Comp?.WflOperateModalGroup;
    
    if (!WflOperateModalGroup) return null;

    return (
      <WflOperateModalGroup
        ref={modalGroupRef}
      />
    );
  };

  return (
    <>
      <Button onClick={handleOpenInterveneModal}>打开干预弹框</Button>
      <CorsComponent
        app="@weapp/workflow"
        customRender={renderModalGroup}
      />
    </>
  );
};
```
> 组件使用

1. **核心调用方式** ：通过`ref`触发对应操作，格式为`ref.current?.open(compKey, options)`


2. **参数说明**：

  | 参数名    | 类型   | 必传 | 说明                                                                 |
|-----------|--------|------|----------------------------------------------------------------------|
| `compKey` | string | 是   | 操作类型标识，用于指定打开的行操作：<br/>- `interve`：**干预操作弹框**<br/>- `editSign`：**修改意见弹框** <br/>（后续扩展其他操作会补充对应标识） |
| `options` | object | 是   | 配置项，具体属性如下                                        |

 `options` 属性说明
| 属性    | 类型     | 必传 | 说明                                                                 |
|-----------|----------|------|----------------------------------------------------------------------|
| `data`    |  object| 是   | **流程列表单行数据**              |
| `onClose` | `()=> void`     | 否   | **弹框关闭回调**        |
| `onSuccess` | `(res?:object)=>void`   | 否   | **弹框操作成功回调**，自定义处理刷新，提示等业务|

### 3.2、批量操作弹框组件
> 组件效果展示


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

> 示例代码
```javascript
const OperateModalDemo: React.FC<ModalComponentProps> = (props) => {
  const [batchOptVisable, setBatchOptVisable] = useState<boolean>(false);

  const handleOpenModal = () => {
    setBatchOptVisable(true);
  };

  const renderOperateComp = (app: any) => {
    const { Comp } = app;
    const WfCLBatchOptDialog = Comp?.WfCLBatchOptDialog;
    
    if (!WfCLBatchOptDialog) return null;

    return (
      <WfCLBatchOptDialog
        batchOptVisable={batchOptVisable}
        onBatchOptClose={() => setBatchOptVisable(false)}
        batchType='batchSubmit'
        batchName='批量提交自定义名称'
        dimension='todo'
        queryParams={{
          dimension:'todo',//维度
          tabid:''// 页签id详细参考下面说明
        }}
      />
    );
  };

  return (
    <>
      <Button onClick={handleOpenModal}>打开批量提交弹框</Button>
      <CorsComponent
        app="@weapp/workflow"
        customRender={renderOperateComp}
      />
    </>
  );
};

export default OperateModalDemo;
```
> 组件使用

1. **核心调用方式** ：通过`batchOptVisable`触发批量弹框打开，设置`batchType`指定批量操作类型


2. **参数说明**：

  | 参数名    | 类型   | 必传 | 说明                                                                 |
|-----------|--------|------|----------------------------------------------------------------------|
| `batchOptVisable` | boolean | 是   | 打开批量弹框|
| `batchType` | string | 是   | 操作类型|
| `batchName` | string | 否   | 批量操作自定义名称|
| `dimension` | string | 否   | 维度，默认待办维度|
| `showUnoperator` | boolean | 否   | 是否直接展示未操作者 |
| `batchCanSubmitOpinion` | boolean | 否   | 批量提交是否支持输入意见|
| `queryParams ` | anyObj | 否   | 批量操作过滤参数|
|`initSearchParams` |`{ formDatas: AnyObj; quickSearchDatas: QuickSearchDatas; type: SelectValueType; }` |否|默认高级搜索过滤条件
|`batchOptCallBack` |`(batchType: string, batchOptDatas: any[]) => void` |否|批量操作成功回调


`batchType` 属性说明
| 属性                 | 说明         |
|----------------------|--------------|
| `batchSubmit`        | **批量提交** |
| `batchForward`       | **批量转发** |
| `batchAgent`         | **批量委托** |
| `batchUrge`          | **批量催办** |
| `batchShare`         | **批量共享** |
| `batchTurnTodo`      | **批量转办** |
| `batchAskad`         | **批量征询** |
| `batchReject`        | **批量退回** |

`queryParams.tabid` 说明参考：[流程列表页签说明](https://weapp.eteams.cn/ecode/playground/doc/share/view/1222514191205122048)

## 四、常见ecode案例
### 4.1、隐藏所有待办流程页面协同区内容
> 
```js
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'WfLPublic', (props) => {
  if (props?.dimension == 'todo') {
    return {...props, showRightLayout: false};
  } else {
    return props;
  }
}, 0);
```

### 4.2、隐藏流程列表无数据时，提交申请按钮
> 
```js
import { regOvProps } from '@weapp/utils';

// PC：
regOvProps('weappWorkflow', 'WfLPublic', (props) => {
  return {...props, customEmptyProps: {...props?.customEmptyProps, renderFooter: undefined}}
}, 1);

// 移动端：
regOvProps('weappWorkflow', 'MWfclUiList', (props) => {
  return {...props, renderEmptyFooter:null}
}, 1);
```
  

![](${appMdRes}/1767618335-image.png)
  
### 4.3、隐藏流程列表快捷栏提交申请按钮
> 
```js
使用axios拦截接口返回值实现
  
  axios.interceptors.response.use((response) => {
  const { config, data } = response;
  
  if (config?.url?.indexOf('/api/workflow/list/button/getRequestListButton') >= 0) {
    response.data.data.quickButton = [];
  }

  return response;
}, function (error) {
  console.info('接口请求出错啦', error);
  return Promise.reject(error);
});
```
  

![](${appMdRes}/1767618304-image.png)
  
### 4.4、流程监控列表增加自定义行操作
> 
```js
/**
 * @desc    : 流程监控列表增加自定义行操作
 */
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'WflOperateMenu', (props) => {
  // 复写行操作组件props，增加自定义行操作点击效果
  if (window.TEAMS?.currentUser?.tenantKey4Im == 'td0wfi5h0e' && !props.regOvOperateClick) {
    console.log('监控props拦截--', props);
    const {rowData = {}, rowIndex, onOperateClick} = props;
    props.onOperateClick = (item: any, rowData: any, pos: any) => {
      if (item.key == 'cusOpt') {
        alert('自定义监控行操作--' + JSON.stringify(rowData))
      } else {
        onOperateClick?.(item, rowData, pos);
      }
    }
    props.regOvOperateClick = true;
  }

  return props;
}, 1)

axios.interceptors.response.use((response) => {
  // 拦截监控行操作事件，追加自定义行操作
  if (window.TEAMS?.currentUser?.tenantKey4Im == 'td0wfi5h0e' && response?.config?.url == '/api/workflow/list/check/getMonitorListCheck'
        && response.data && response.data.data && response.data.data.operates && response.data.data.operatesPermission) {
    let operates = response.data.data.operates || [];
    let operatesPermission = response.data.data.operatesPermission[0] || [];
    // 追加行操作
    operates.push({index: 16, key: 'cusOpt', onlyIcon: false, outer: false, text: '自定义行操作', visible: true});
    // 追加权限
    operatesPermission.push({disable: false, visible: true});
    response.data.data.operates = operates;
    response.data.data.operatesPermission[0] = operatesPermission;
  }
  return response;
})
```
### 4.5、屏蔽移动端流程列表批量操作按钮


![](${appMdRes}/1767618377-image.png)
  
 >  推荐方案一：最低支持版本：10.0.2508.01
  
```js
import { regOvProps } from '@weapp/utils';

const HIDE_BATCH_BTNS = [
  'batchIntoNoDisturb', 
  'batchAttention'
];
//复写menuData
regOvProps('weappWorkflow', 'MWfListBatchMenu', (props) => {
  const newProps = {
    ...props,
    menuData:(props?.menuData || []).filter(
        btn => !HIDE_BATCH_BTNS.includes(btn?.id)
    )
  }
  return newProps;
}, 0);

```
 >  方案二：接口拦截
  
```js
//隐藏的批量操作按钮id
const HIDE_BATCH_BTNS = [
  'batchIntoNoDisturb', 
  'batchAttention'
];

const TARGET_API_PATH = '/api/workflow/list/button/getMobileListButton';

axios.interceptors.response.use((response) => {
  const { config, data } = response || {};

  if (config?.url?.includes(TARGET_API_PATH)) {
    const batchMenu = data?.data?.batchMenu;

    if (Array.isArray(batchMenu?.data)) {
      response.data.data.batchMenu.data = batchMenu.data.filter(
        btn => !HIDE_BATCH_BTNS.includes(btn?.id)
      );
    }
  }
  
  return response;
}, (error) => {
  return Promise.reject(error);
});

```
 > 按钮id-名称对应关系
  
 | id | 按钮名称| 
| --- | --- | 
| batchSubmit| 批量提交| 
| batchAttention| 批量关注|
| batchAgent| 批量委托|
| batchUrge| 批量催办|
| batchShare| 批量共享|
| batchForward|批量转发|
| batchTurnTodo| 批量转办|
| batchAskad| 批量征询|
| allRead| 全部已读|
| batchDelete| 批量删除|
| batchIntoNoDisturb| 批量移入免打扰|
  
  
### 4.6、屏蔽移动端待办列表分类数量
  

![](${appMdRes}/1767618401-image.png)
  
 > 屏蔽方式：ecode新建项目entry.js粘贴下面内容发布即可，最低支持版本：10.0.2509.01
  
 ```js
import { regHook } from '@weapp/utils';

regHook('weappWorkflow', 'libReady', ()=>{
	window.weappWorkflow?.writeConfig?.('MLIST_Dimension_Count_Hide', true);
});
```
### 4.7、屏蔽移动端流程列表快捷新建流程按钮
 

![](${appMdRes}/1767618419-image.png)
   > 屏蔽方式：ecode新建项目entry.js粘贴下面内容发布即可
  
 ```js
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'MWfclPublicList', (props) => {
   return {...props, showQuickButton: false};
}, 0);
 ```
### 4.8、移动端列表页签平铺
 


![](${appMdRes}/1767618434-image.png)
   > ecode新建项目entry.js粘贴下面内容发布即可（最低支持版本：10.0.2510.01）
 
 
 ```js
import { regHook } from '@weapp/utils';

regHook('weappWorkflow', 'libReady', () => {
   window.weappWorkflow?.writeConfig?.('MLIST_TabMenu_Config', {
      type:'tab', //  tab模式只保留一级页签平铺  不传默认走menu模式 标准当前多级页签效果
      tabExpandToMoreSpace:true, // 是否把免打扰、快捷按钮都移动到更多按钮中，给页签释放更多空间
      hideTotal:false, // 是否去除页签后面流程数
   });
});
 ```
> 参数说明（下列参数可以单独分开使用）

| 参数 | 参数说明| 默认值 
| --- | --- | ---|
| type | 控制菜单展示模式：默认为 “menu”，对应标准多级下拉模式；为 “tab”，则切换为平铺模式（**注：tab 平铺模式下仅保留一级页签**）|"menu"
| tabExpandToMoreSpace| 控制是否为页签分配更多展示空间：开启后会调整按钮布局以腾出页签空间 | 默认为 false；设为 true 时，免打扰按钮移入「**更多**」按钮内，快捷按钮移回「**批量操作按钮组**」
| hideTotal| 控制是否隐藏页签下方对应的流程数量| |
  
### 4.9、流程列表增加自定义行操作
- ecode拦截weappWorkflow
- 组件名称：`WflOperateMenu`
- <span style="color:red">最低支持版本：10.0.2404.02</span> 

> 复写示例（ecode）
```js
/**
 * @desc    : 流程监控列表增加自定义行操作
 */
import { regOvProps } from '@weapp/utils';

regOvProps('weappWorkflow', 'WflOperateMenu', (props) => {
  // 复写行操作组件props，增加自定义行操作点击效果
  if (window.TEAMS?.currentUser?.tenantKey4Im == 'td0wfi5h0e' && !props.regOvOperateClick) {
    console.log('监控props拦截--', props);
    const {rowData = {}, rowIndex, onOperateClick} = props;
    props.onOperateClick = (item: any, rowData: any, pos: any) => {
      if (item.key == 'cusOpt') {
        alert('自定义监控行操作--' + JSON.stringify(rowData))
      } else {
        onOperateClick?.(item, rowData, pos);
      }
    }
    props.regOvOperateClick = true;
  }

  return props;
}, 1)

axios.interceptors.response.use((response) => {
  // 拦截监控行操作事件，追加自定义行操作
  if (window.TEAMS?.currentUser?.tenantKey4Im == 'td0wfi5h0e' && response?.config?.url == '/api/workflow/list/check/getMonitorListCheck'
        && response.data && response.data.data && response.data.data.operates && response.data.data.operatesPermission) {
    let operates = response.data.data.operates || [];
    let operatesPermission = response.data.data.operatesPermission[0] || [];
    // 追加行操作
    operates.push({index: 16, key: 'cusOpt', onlyIcon: false, outer: false, text: '自定义行操作', visible: true});
    // 追加权限
    operatesPermission.push({disable: false, visible: true});
    response.data.data.operates = operates;
    response.data.data.operatesPermission[0] = operatesPermission;
  }
  return response;
})
```
> 效果预览
  

![](${appMdRes}/1767615889-image.png)
  
### 4.10、流程待办移动端免打扰列表批量操作复写
- ecode拦截weappWorkflow
- 组件名称：`MWfclDisturbDialog`
- <span style="color:red">最低支持版本：10.0.2412.01</span>
> 复写示例（ecode）
```js
/**
 * @desc    : 流程待办移动端免打扰列表批量操作复写
 */
import { regOvProps } from '@weapp/utils';

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

  
  //1.免打扰列表底部弹出批量操作具体类型点击自定义事件
  props.customBatchMenuClick = {
  'batchSubmit': () => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': () => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  }
  
  
  //2.免打扰列表下拉点击批量操作具体类型点击自定义事件
  props.customBatchDropClick = {
  'batchSubmit': () => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': () => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  }
  
  //3.免打扰列表批量操作列表批量操作确定按钮点击自定义事件
  props.customBatchConfirmClick = {
  'batchSubmit': (selectedRowKeys, doBatchOptCallBack, updateSpinning) => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': (selectedRowKeys, doBatchOptCallBack, updateSpinning) => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  
  
  //该自定义处理会传递三个参数
  //selectedRowKeys勾选的数据的requestid集合 数组解构
  //doBatchOptCallBack原始批量操作成功后的回调事件  自定义处理可以看情况调用 用于回刷免打扰列表以及取消勾选等操作
  //updateSpinning用来设置批量操作列表的loading效果 可以按需使用
  }
  
  //4.免打扰列表行操作按钮点击自定义事件
  props.customRowOperateClick = {
  'markTag': (operateRowData, closeOperateFooter) => {//里面进行行操作标记标签点击事件复写}
  'markRead': (operateRowData, closeOperateFooter) => {//里面进行行操作标记已读点击事件复写}
  'moveTodo': (operateRowData, closeOperateFooter) => {//里面进行行操作移至待办点击事件复写}
  }
  
  //参数closeOperateFooter是关闭行操作底部弹窗界面的方法 可视情况自行调用
  //参数operateRowData是当前行数据对象

  return props;
}, 1)
``` 


上述ecode示例四种自定义处理事件对应的实际截图如下
  

  
1.免打扰列表底部弹出批量操作具体类型点击自定义事件
  

![](${appMdRes}/1767616686-image.png)
  
2.免打扰列表下拉点击批量操作具体类型点击自定义事件
  

![](${appMdRes}/1767616701-image.png)
  
3.免打扰列表批量操作列表批量操作确定按钮点击自定义事件
  

![](${appMdRes}/1767616714-image.png)
  
4.免打扰列表行操作按钮点击自定义事件 
 

![](${appMdRes}/1767616725-image.png)
  
### 4.11、流程待办列表批量操作复写
- ecode拦截weappWorkflow
- 组件名称：`MWfclPublicList`
- <span style="color:red">最低支持版本：10.0.2412.01</span>
> 复写示例（ecode）
```js
/**
 * @desc    : 流程待办列表批量操作复写
 */
import { regOvProps } from '@weapp/utils';

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

  
  //1.待办列表底部弹出批量操作具体类型点击自定义事件
  props.customBatchMenuClick = {
  'batchSubmit': () => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': () => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  }
  
  
  //2.待办列表下拉点击批量操作具体类型点击自定义事件
  props.customBatchDropClick = {
  'batchSubmit': () => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': () => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  }
  
  //3.待办列表批量操作列表批量操作确定按钮点击自定义事件
  props.customBatchConfirmClick = {
  'batchSubmit': (selectedRowKeys, doBatchOptCallBack, updateSpinning) => {//里面进行批量提交按钮点击的自定义事件处理}
  'batchForward': (selectedRowKeys, doBatchOptCallBack, updateSpinning) => {//里面进行批量转发按钮点击的自定义事件处理}
  //其他的批量操作按钮点击也是类似的  如果传递了 就走自定义处理 未传递 就走默认的点击事件 
  //所有的批量操作以及对应的id映射可以通过该接口获取 getMobileListButton  直接network里面搜索下该接口即可
  
  
  //该自定义处理会传递三个参数
  //selectedRowKeys勾选的数据的requestid集合 数组解构
  //doBatchOptCallBack原始批量操作成功后的回调事件  自定义处理可以看情况调用 用于回刷免打扰列表以及取消勾选等操作
  //updateSpinning用来设置批量操作列表的loading效果 可以按需使用
  }
  
  //4.待办列表行操作按钮点击自定义事件
  props.customRowOperateClick = {
  'markTag': (operateRowData, closeOperateFooter) => {//里面进行行操作标记标签点击事件复写}
  'markRead': (operateRowData, closeOperateFooter) => {//里面进行行操作标记已读点击事件复写}
  'supervise': (operateRowData, closeOperateFooter) => {//里面进行行操作督办点击事件复写}
  'urge': (operateRowData, closeOperateFooter) => {//里面进行行操作催办点击事件复写}
  'moveToDisturb': (operateRowData, closeOperateFooter) => {//里面进行行操作移至免打扰点击事件复写}
  }
  
  //参数closeOperateFooter是关闭行操作底部弹窗界面的方法 可视情况自行调用
  //参数operateRowData是当前行数据对象

  return props;
}, 1)
``` 


上述ecode示例四种自定义处理事件对应的实际截图如下
  

  
1.待办列表底部弹出批量操作具体类型点击自定义事件
  

![](${appMdRes}/1767616900-image.png)
  
2.待办列表下拉点击批量操作具体类型点击自定义事件
  

![](${appMdRes}/1767616917-image.png)
  
3.待办列表批量操作列表批量操作确定按钮点击自定义事件


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

  
4.待办列表行操作按钮点击自定义事件 


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

### 4.12、流程待办、已办、我发起的、草稿、全部流程标准列表，外部控制是否返回异构系统数据
- 复写接口地址：`/api/workflow/list/data/getTodoListData`（已办等其他列表，复写方式相同，更改接口路径即可，接口路径可network中抓取）
- 复写参数：`moduleDataType`（传1表示接口不返回异构系统数据）
- <span style="color:red">最低支持版本：10.0.2412.01</span>

> 复写示例（ecode）
```js
/**
 * @desc    : 屏蔽我发起的列表中异构系统流程数据
 */
axios.interceptors.request.use((request) => {
    try {
        const {url = '', data = ''} = request;
        if (url == '/api/workflow/list/data/getMineListData') {
          // 复写发起流程列表数据接口
            request.data = {...data, moduleDataType: '1'};
        } else if (url == '/api/workflow/list/total/getMineListTotal') {
          // 复写发起流程列表总数量接口
            request.data = {...data, moduleDataType: '1'};
        } else if (url == '/api/workflow/list/tree/getMineListTree') {
          // 复写发起流程列表左侧树数据接口
            request.data = {...data, moduleDataType: '1'};
        } else if (url == '/api/workflow/list/count/getMineListCount') {
          // 复写发起流程列表左侧树数量统计接口
            request.data = {...data, moduleDataType: '1'};
        }
    } catch (e) {
        console.log('接口参数复写异常', e);
    }

    return request;
}, function (error) {
    console.info('接口参数复写异常111', error);
    return Promise.reject(error);
});
``` 

### 4.13、屏蔽流程列表指定行操作

>效果展示

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

**1、推荐写法（基线 2510 及以后）**

```javascript
import { regOvProps } from '@weapp/utils'

// PC 2510基线后 建议复写hideLineBtns，隐藏流程列表指定行操作按钮
regOvProps('weappWorkflow', 'WflOperateMenu', (props) => {
  return {
    ...props,
    hideLineBtns: [
       ...(props.hideLineBtns || []),
      'urge',         // 隐藏【催办】按钮
    ]
  }
}, 1);
```

**2、兼容写法（基线 2510 之前）**

```javascript
// PC 2510基线前

regOvProps('weappUi', 'Menu', (props) => {
  if (props.weId && props.weId.endsWith('_d990yc')) {
    const filteredData = props.data?.filter(item => {
      return !['urge'].includes(item.key);
    }) || [];

    return {
      ...props,
      data: filteredData
    };
  }
  return props;
}, 1);
```
 > 按钮id-名称对应关系
  
| key | 操作名称| 
| --- | --- | 
| markRead| 标记为已读| 
| forward| 转发|
| attention| 关注|
| markTag| 标记标签|
| cancelAttention| 取消关注|
| print|打印|
| share| 共享|
| urge| 催办|
| deleteNormal| 删除|
| supervise| 督办|
| makeTodoItem| 设为待办事项|
| noDistrubInto| 设为待办事项|
| makeTodoItem| 移入免打扰|
| noDistrubOut| 移至待办|

注意：移动端不支持上述方式屏蔽，可以直接ecode添加css隐藏即可。

### 4.14、移动端列表卡片自定义布局
 <span style="color:red">最低支持版本：10.0.2604.01</span>

> 布局调整效果展示

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

> 示例代码

```javascript
import { regOvProps } from '@weapp/utils'

/**
 * 注册自定义卡片渲染逻辑
 * 功能：调整原有卡片布局，修改区块顺序 + 增删内容
 */
regOvProps('weappWorkflow', 'MWfListCard', (props) => {
  return {
    ...props,
    customRender: ({ listData, renderDefaultComp, blocks }) => {
      // 原有的渲染区块
      const { titleArea, digestArea, requestInfoArea, tagArea, flowStatusArea } = blocks;
    
      return (
        <div>

          {/* 1. 自定义：新增一行自定义文本 */}
          <div style={{ color: '#666', fontSize: '12px', marginBottom: '8px' }}>
            自定义提示
          </div>

          {/* 2. 自定义调整内容顺序 */}
           {requestInfoArea()}
          {titleArea()}
          {flowStatusArea()}
          {digestArea()}
          {tagArea()}
          {/* 3. 渲染标准的完整组件 */}
          {/* {renderDefaultComp()} */}
        </div>
      );
    },
  };
}, 1);
```

> customRender参数说明：

  | 参数名    | 类型   | 说明                                                                 |
|-----------|--------| ----------------------------------------------------------------------|
| `listData` | object |  打开批量弹框|
| `renderDefaultComp` | () => ReactNode |  渲染原默认卡片组件 |
| `blocks.titleArea` | () => ReactNode |  流程标题区域渲染函数|
| `blocks.digestArea` | () => ReactNode |  摘要内容渲染函数|
| `blocks.requestInfoArea` | () => ReactNode |  流程信息（发起人、发起时间等）渲染函数 |
| `blocks.tagArea` | () => ReactNode |标签渲染函数|
| `blocks.flowStatusArea` | () => ReactNode |流程状态渲染函数|

### 4.15、移动端更多设置屏蔽部分设置项
 <span style="color:red">最低支持版本：10.0.2605.01</span>
 
 > 屏蔽后效果展示
 
![](${appMdRes}/1777274415-image.png)

> 示例代码
```javascript
import { regOvProps } from '@weapp/utils'

// 对应设置id参考下面列表
const BLOCK_ITEMS = [
  'smartProcess', // 智能审批
];


regOvProps('weappWorkflow', 'MWfRootSettingGroup', (props) => {
  const filterMenu = (menuList) => {
    return menuList.map(item => {
      if (item.child) item.child = filterMenu(item.child);
      if (item.menuList) item.menuList = filterMenu(item.menuList);
      return item;
    }).filter(item => !BLOCK_ITEMS.includes(item.id));
  };

  if (props.group) {
    props.group = filterMenu([props.group])[0];
  }
  
  return props;
}, 1);
```

id & 对应设置项查看下面列表：

| id              | 对应设置项                  |
|-------------------|----------------------|
| smartProcess      | 智能审批             |
| DelegationSettings| 流程委托             |
| ApprovalSupervise | 流程督办             |
| ApprovalIntervention | 流程监控          |
| RecycleBin        | 回收站               |
| personalSet       | 个人设置             |
| quickBtn          | 个人设置-快捷按钮设置 |
| cusMenuSet        | 个人设置-自定义菜单设置 |
| batchSubmitSet    | 个人设置-批量提交设置 |
| continuousHandleSet | 个人设置-连续处理设置 |

## 五、JS-SDK

### 前置条件
> 所有列表 SDK 调用前，需先获取当前列表页面 SDK，所有操作均基于该实例执行，<span style="color:red">最低支持基线：10.0.2605.01</span>。

**方式一**
>通过ecode注册列表即将挂载钩子，列表内部注js-sdk实例，无需手动获取。


```javascript
import { regHook } from '@weapp/utils';

regHook('weappWorkflow', 'WFListWillMount',({params})=> {
  const {
    dimension, // 维度
    isMobile, // 是否移动列表
    listSdk, // 自动注入的列表 js-sdk
  } = params;

  // 直接使用 sdk
  listSdk.registerHookEvent('AfterLoadDataHook',()=> {
    // 获取列表展示数据
    const displayDatas = listSdk.getDispalyData();
    console.log('列表加载完成数据：', displayDatas);
  })
});
```

**方式二**
> 通过getListPageSdk 手动获取列表js-sdk  

**使用示例：**
`weappWorkflow.getListPageSdk(isMobile, isAsync)`

 | 参数名 | 类型|  默认值| 说明|
| --- | --- | --- | --- |
| `isMobile`| booean| false | 是否移动端列表|
| `isAsync`| boolean| false | 是否异步获取sdk|

```javascript

// 1. 同步获取（PC 端，必须在列表挂载后调用）
const listSdk = weappWorkflow.getListPageSdk();

// 2. 同步获取（移动端）
const listSdk = getListPageSdk(true);

// 3. 异步获取（不依赖初始化时机）
weappWorkflow.getListPageSdk(false, true).then(sdk => {
  const displayDatas = sdk.getDispalyData();
});
```

### 5.1、注册钩子事件


目前支持的钩子类型

| 类型             | 参数描述         | 最低基线要求 |
|------------------|-----------------|------------|
| `AfterLoadDataHook` | 列表数据加载完成事件 | 2605       |
| `RefreshListHook`   | 列表刷新完成事件   | 2605       |

**使用示例**

```javascript
// 注册列表数据加载完成钩子
listSdk.registerHookEvent('AfterLoadDataHook', () => {
  const displayDatas = listSdk.getDisplayData();
  console.log('列表数据加载完成，当前展示数据：', displayDatas);
});

// 注册列表刷新完成钩子
listSdk.registerHookEvent('RefreshListHook', () => {
  console.log('列表刷新完成');
});

```

### 5.2、清空钩子事件

> 清空已注册的列表钩子事件

**使用示例**

```javascript
// 清空指定钩子事件
listSdk.clearHookEvent('AfterLoadDataHook');
```

### 5.3、触发列表刷新


**使用示例**

```javascript
// 默认刷新列表
listSdk.refresh();
```

### 5.4、获取列表当前展示数据

**使用示例**

```javascript
const displayDatas = listSdk.getDisplayData();
console.log('当前列表展示数据：', displayDatas);
```
### 5.5、获取列表左侧树树数据

**使用示例**

```javascript
const treeData = listSdk.getTreeData();
console.log('左侧树数据：', treeData);
```

### 5.6、选中PC流程列表左侧树节点

**使用示例**

```javascript
// 主动触发左侧树节点选中，这里选中第一个树节点为例

const treeData = listSdk.getTreeData();
listSdk.onTreeSelect({selectItem:treeData[0]?.children[0] })
```

### 5.7、切换顶部维度页签

>主动切换列表顶部维度 / 分类页签，如切换到未读页签下。[tabId查询链接](https://weapp.eteams.cn/ecode/playground/doc/share/view/1222514191205122048)

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

```javascript
// 切换到指定 tabId 页签
listSdk.onTabChange({ tabId: '1' });
```
### 5.8、触发列表批量操作

>主动触发列表顶部批量操作按钮事件

```javascript
// 触发批量删除操作
listSdk.onTriggerBatchOperate({
  batchType: 'batchSubmit'
});
```
> batchType & 操作对应关系

 | batchType | 按钮名称| 
| --- | --- | 
| batchSubmit| 批量提交| 
| batchAttention| 批量关注|
| batchAgent| 批量委托|
| batchUrge| 批量催办|
| batchShare| 批量共享|
| batchForward|批量转发|
| batchTurnTodo| 批量转办|
| batchAskad| 批量征询|
| allRead| 全部已读|
| batchDelete| 批量删除|
| batchIntoNoDisturb| 批量移入免打扰|

