# 签字意见列表二开能力说明

> 负责人：董孙建（前端）

## 一、标准功能能力简述
>签字列表目前已经支持一些个性化调整，请先确认标准功能是否无法满足需求，再考虑进行二次开发。

1. 意见多套风格设置，已内置16套个性模板供选择，并支持选择需要展示的区块以及操作按钮  （应用设置>意见及评论设置>流转意见及评论区显示设置）
2. 评论tab屏蔽请查看: 应用设置>意见及评论设置>评论默认设置, 与我相关、查阅、操作日志tab屏蔽请查看：应用设置>意见及评论设置>流转意见及评论区显示设置（预计weapp-workflow1.60.0后支持）




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



## 二、API参数说明

### 2.1、常见属性说明

| 参数    | 说明                  | 类型     | 是否必填 | 默认    |
| :---- | :------------------ | :----- | :--- | :---- |
| hideTabs  |隐藏tab| string[] | 否    |  -     |
| isHorizontal | 是否水平展示评论 | boolean | 否    | - |
| showEmpty | 评论为空时是否展示Empty组件 | boolean | 否    | true |
| showCommentSignMenu | 是否展示意见与评论tab | boolean | 否    | false |
| CommentProps | comment组件参数 | CommentType | 否    | - |

### 2.2、CommentProps属性说明
> CommentProps 常见参数说明，更多参考E10组件库中Comment组件说明

| 参数    | 说明                  | 类型     | 是否必填 | 默认    |
| :---- | :------------------ | :----- | :--- | :---- |
| optionConfig  |操作按钮控制| string[] | 否    |  -     |
| forbidSearch | 是否禁用高级搜索 | boolean | 否    | false |
| hasEdit | 是否显示评论输入框 | boolean | 否    | true |
| forbidAfterPageChangeScroll | pc端禁止切换分页后意见列表滚动到可视区 | boolean | 否    | false |
| enablePrintDarkColor | 打印是否开启深色打印 | boolean | 否    | true |

### 2.3、使用示例
>隐藏与我相关tab

```javascript
//屏蔽pc端意见列表 与我相关 查阅情况 操作日志tab
regOvProps('weappWorkflow', 'WFFPSignList', (props) => {
    props = {
        ...props,
       hideTabs:['related','view','operationLog']
  }
  return props;
}, 0);
```


## 三、自定义意见布局


### 3.1、自定义增加内容到指定位置
>规范：所有div中 name以`$comment_slot_*`开头的，都被会插入一个空的插槽组件。可借助空插槽组件能力，来自定义追加内容。
下面会以操作人右侧追加电话号码示例详细说明。

#### 3.1.1、方式一(前端易实现)
> 修改html模板串，加上name为 `$comment_slot_*`格式的div + 意见列表接口追加参数实现

**1. 查询模板串**：`select * from wfp_signstyle_template`


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

**2. 追加特点格式name**（修改pc端模板7为例）
> 追加`name`为`$comment_slot_customTel`的div，标准功能内部将会插入组件名为`WFFPSignListSlot`的空组件
 

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

**3.签字意见列表接口追加**`customTel`
>空插槽组件会默认截取$comment_slot_<span  style="color: red;">customTel</span>,中`customTel`,默认会取单条意见数据中的`customTel`，下面拦截接口为列

```javascript
//拦截意见列表接口 追加customTel:
axios.interceptors.response.use(function(res){ 
	if(res.config.url.endsWith("/core/common/comment/commentPage")) {
        let comments = res.data.data.page.result || [];
        comments = comments.map((item)=> {
            return {
                ...item,
                customTel:'19279232622'
            }
        })
        res.data.data.page.result = comments;
        return res;
    }
	return res; 
},function(error){ 
})
```

>效果图：


![](${appMdRes}/1728452222-image.png)
####  3.1.2、方式二(ecode复写插槽组件)
>方式一前端更简单，同时也有局限性，标准只会默认取对应key的文本到插槽中展示，如果需要追加一些有交互的、绑定事件非纯文本内容的区块需要通过ecode复写空插槽组件实现
1. 第一步、第二步与3.11一致
2. ecode复写空插槽组件
```javascript

import React from 'react';
import { regOvComponent } from '@weapp/utils';

regOvComponent('weappWorkflow', 'WFFPSignListSlot', (Com) => {
  return React.forwardRef((props, ref) => {

    if (props.slotType === '$comments_slot_customTel'){  //$comments_slot_customTel 插槽复写
         return (
            <React.Suspense fallback={() => {}}>
              <a href="tel:192795678123">拨打电话</a>
            </React.Suspense>
        )
    } else if (props.slotType === '$comments_slot_customText') { //$comments_slot_customText 插槽复写
      return (
            <React.Suspense fallback={() => {}}>
              <span>自定义内容</span>
            </React.Suspense>
        )
    }
    return <Com ref={ref} {...props} />;
    });
}, 1);
```
>空插槽组件props：
```javascript

interface CompProps extends RouteComponentProps{
    isMobile:boolean // 移动 pc标识
    slotType:string,  //插槽类型-即name $comment_slot_*，多个插槽根据slotType区分下
    data:any,  //单条意见数据
    baseParam:any,//流程详情基础参数
}
```

>效果图：

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


### 3.2、自定义调整模板布局
>标准功能预设16套个性化模板不满足需求的前提下，选择新增一套模板，又或对已有的一套模板进行微调

**说明**：不同name中标准都会依据下面表格中对应关系，插入对应区块，可自行调整dom串来实现自定义排版各区块位置，同时可以调整对应样式串来实现自定义风格的意见模板。

| name    | 说明                  |
| :---- | :------------------ |
| $comments_operateDate  |操作日期|
| $comments_operateTime | 操作时间|
| $comments_userName | 操作人员 |
| $comments_department | 操作人部门 |
| $comments_client | 意见来源 | 
| $comments_operateType | 操作类型 |
| $comments_avatar | 人员头像 |
| $comments_content | 意见内容 |
| $comments_operateOptions | 操作按钮区 |
| $comments_replyFloor | 评论回复区 |
| $comments_receiver | 接收人|
| $comments_timeLine | 时间轴|
### 3.3、自定义隐藏部分区块内容
>建议走标准功能，后台应用设置隐藏不显示，不建议删除后台模板串中dom处理。

## 四、前端二开案例


### 4.1、全局屏蔽流转意见列表指定tab

> 需求：屏蔽流转意见列表中部分页签，[下载链接](https://www.e-cology.com.cn/sp/doc/docShare/947534815732793388?tenantKey=t7akvdnf84)

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


//屏蔽pc端意见列表 与我相关 查阅情况 操作日志tab
regOvProps('weappWorkflow', 'WFFPSignList', (props) => {
    props = {
        ...props,
       hideTabs:['related','view','operationLog']
  }
  return props;
}, 0);

//屏蔽 移动端 端意见列表 与我相关 
regOvProps('weappWorkflow', 'MWFFPSignList', (props) => {
    props = {
        ...props,
       hideTabs:['related']
  }
  return props;
}, 0);

```

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

### 4.2、禁止意见列表中电子签图片预览
> 禁止意见列表中电子签图片点击事件

```css
.weapp-workflow-comment-list .flowpage-comment-signature,
.weapp-workflow-comment-list .m-flowpage-comment-list-signature,
.wfp-nodesign-view-signature img{// 意见放表单中电子签图片禁止点击放大
  pointer-events: none;
}
```

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