# 标签预览组件

## 组件效果图
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=63bf17378d3e62baaa97b73d0b388452)
## DEMO

CorsComponent 组件方式

```js

state={
    wtags: [{ "id": "777599641533816833", "content": "1113sss", "type": '1', "color": "#E9F7FF", }]
}

render() {
    return <>
            <CorsComponent
                app='@weapp/my'
                compName='PureEntityTag'
                module='group'
                data={{ key: '1' }}
                tags={this.state.wtags as any}
                onChange={this.onChangeTag}
                isTree
                isSticky
                disabledIds={['855239005193142272']}
                onLoadRecommend={this.loadRecommend}
				scopeInfo={{
                    module: 'doc',
                    type: 'folder'
                }}
                customData={{
                    businessId: '933516381803511808',
                    businessModule: 'ebuilder',
                    objId: '930609771377533040'
                }}
            />
    </>
}
onChangeTag = (value: any) => {
    this.setState({ tags: value })
    console.log('on change tag', value)
}

loadRecommend = async () => {
    return [{id:'854843477312061440', name:'虚拟标签'}]
}
```

### 参数说明

| 参数            | 说明                                                                                                         | 类型                      | 是否必填 | 默认值 |
|:----------------|:-------------------------------------------------------------------------------------------------------------|:--------------------------|:---------|:-------|
| module          | 事项所属模块                                                                                                 | string                    | 是       | -      |
| entityId        | 事项 id                                                                                                      | string                    | 否       | -      |
| objectId        | 事项 id，兼容字段，同 entityId                                                                               | string                    | 否       | -      |
| entityIds       | 事项 id（支持批量时传入）                                                                                    | string[]                  | 否       | -      |
| employeeId | 关联标签的用户id，单个事项标签关联时使用，一般用于主次账号的场景            | string                  | 否       | -      |
| batchDatas | 批量关联的数据, 例如：[{employeeId: 'xxx', entityId: 'xxx', module: 'xx'}]            | BatchData[]                  | 否       | -      |
| type            | 标签类型 0 公共标签 1，个人标签，3模块标签                                                                              | enum                      | 否       | 1      |
| value           | 已选中标签，传值组件将受控展示                                                                               | TagData[]                 | 否       |        |
| tags            | 已选中标签，兼容字段，同 value                                                                                | TagData[]                 | 否       |        |
| defaultTags            | 初始时选中的标签，注意，该属性仅需传 id，name，设置该属性，组件将根据传过来的标签id，内部获取标签相关完整数据，例如：[{ id: '949778519416176641', name: '任意测试1' }]                                                                                | TagData[]                 | 否       |        |
| isSticky        | 是否开启固定显示，开启后所选标签不再换行，作单行固定显示，超出则滚动查看                                     | boolean                   | 否       | false  |
| data            | 自定义传参                                                                                                   | Object                    | 否       | -      |
| customData            | 自定义传参（新），对接模块标签可使用该字段传特定字段                                                                                                   | Object                    | 否       | -      |
| disabledIds     | 需要屏蔽的标签 id                                                                                            | string[]                  | 否       | -      |
| enableSelectedCount     | 是否显示已选标签数  （仅H5模式下生效）                                                                                          | boolean                  | 否       | true      |
| maxRecommend     | 最大推荐标签数，默认 10 个，传入 -1 则表示无限制                                                                                          | number                  | 否       | 10      |
| placeholder     | 占位提示文本，传空字符串将不显示默认提示                                                                                          | string                  | 否       | 请选择      |
| disableAutoSave     | 是否禁用关联标签时的自动保存，禁用后，组件内部不再保存事项的关联关系                                                                                          | boolean                  | 否       | false      |
| fullDisplay     | 是否完整显示已选标签的全部内容（默认单行超出，省略显示）                                                                                          | boolean                  | 否       | false      |
| disableCreate     | 是否禁用标签创建                                                                                       | boolean                  | 否       | false      |
| disableDel     | 是否禁用标签删除                                                                                       | boolean                  | 否       | false      |
| disableAdd     | 是否禁用标签的添加关联                                                                                       | boolean                  | 否       | false      |
| disableRemove     | 是否禁用标签关联的移除                                                                                       | boolean                  | 否       | false      |
| scopeInfo     | 标签数据范围，对应公共浏览组件的 module、type，例如: {module: 'doc', type: 'folder'}                                                                                     | TagScopeInfo                  | 否       | -      |
| readOnly     | 是否只读                                                                                       | boolean                  | 否       | false      |
| formItemDisplay     | 是否以表单项的方式显示，H5模式下会有个 44px 的行高，默认没有，使用该设置，可按照标准H5表单的方式显示                                                                                | boolean                  | 否       | false      |
| adaptiveInput     | 是否自适应 input 宽度显示                                                                                | boolean                  | 否       | false      |
| browserAssociativeProps     | 浏览组件属性，由于标签选择组件与标准浏览组件类似，所以提供部分标准浏览组件的属性设置的支持                                                                                         | BrowserAssociativeProps                  | 否       | -      |
| formItemProps     | 表单项设置属性，目前支持的有：FormItemItemProps.isHoldRight                                                                                         | FormItemItemProps                  | 否       | -      |
| onChange        | 标签选择时的回调                                                                                             | (tags: TagData[]) => void | 否       | -      |
| onChangeTag     | 标签选择时的回调，兼容字段，同 onChange                                                                      | (tags: TagData[]) => void | 否       | -      |
| onLoadRecommend | 加载推荐标签，异步返回推荐标签列表列表，比如：[{id:'xx', name: 'xx'}]）                                      | () =>  Promise<TagData[]> | 否       | -      |
| onLoad        | 标签初始化时的回调                                                                                             | (tags: TagData[]) => void | 否       | -      |

#### browserAssociativeProps 参数说明

目支持的有：


* BrowserAssociativeProps.wrapDisplay 已选标签是否换行显示
* BrowserAssociativeProps.displayInput 是否默认展示输入框
* BrowserAssociativeProps.fetchData 自定义请求数据


##### fetchData


fetchData: (options: RequestOptionConfig, (params: any, options: RequestOptionConfig)=> RequestPromise) => RequestPromise


注意点：


1. fetchData 需返回标签特定格式数据，示例如下：


``` json
{
    "code":200,
    "msg":"接口返回成功",
    "status":true,
    "fail":false,
    "data":{
        "total":19,
        "pageNo":1,
        "totalPage":1,
        "pageSize":20,
        "data":[
            {
                "creator":"4258568619558548534"
                "color":"#E9F7FF","searchType":1
                "tagId":"920548737220493314"
                "createTime":1697531956,"childrenNum":0
                "groupId":"1","name":"我的测试群组标签"
                "businessId":0,
                "type":1
            }
        ]
    }
}
```


2. 为满足复用标签接口，只修改入参的场景， fetchData 新增了第二个参数 req，示例代码如下:


``` js
fetchData: async (reqOpts: RequestOptionConfig, req: (params: any, options: RequestOptionConfig)=> RequestPromise) => {
    const { params, ...restOpts } = reqOpts
    return await req({ test: 'xx', ...params }, restOpts)
}
```
很多时候，业务模块需要使用自身业务场景下的标签，比如：发票云的发票模块，仅需要使用发票相关的标签（如已报销、待查验等），这时候业务模块就需要对接使用模块内标签了。


业务模块开发人对接使用模块标签具体如下


## 设置应用模块


标签创建和修改时设置标签所属模块，标签所属模块为空时，标签为全局标签，可以被所有模块使用。

# 标签预览组件

## 组件效果图
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=63bf17378d3e62baaa97b73d0b388452)
## DEMO

CorsComponent 组件方式

```js

state={
    wtags: [{ "id": "777599641533816833", "content": "1113sss", "type": '1', "color": "#E9F7FF", }]
}

render() {
    return <>
            <CorsComponent
                app='@weapp/my'
                compName='PureEntityTag'
                module='group'
                data={{ key: '1' }}
                tags={this.state.wtags as any}
                onChange={this.onChangeTag}
                isTree
                isSticky
                disabledIds={['855239005193142272']}
                onLoadRecommend={this.loadRecommend}
				scopeInfo={{
                    module: 'ebuilder/form',
                    type: 'ebuilderForm'，
					businessId: '933516381803511808',
                    businessModule: 'ebuilder',
                }}
                customData={{
                    businessId: '933516381803511808',
                    businessModule: 'ebuilder',
                    objId: '930609771377533040'
                }}
            />
    </>
}
onChangeTag = (value: any) => {
    this.setState({ tags: value })
    console.log('on change tag', value)
}

loadRecommend = async () => {
    return [{id:'854843477312061440', name:'虚拟标签'}]
}
```

### 参数说明

| 参数            | 说明                                                                                                         | 类型                      | 是否必填 | 默认值 |
|:----------------|:-------------------------------------------------------------------------------------------------------------|:--------------------------|:---------|:-------|
| module          | 事项所属模块                                                                                                 | string                    | 是       | -      |
| entityId        | 事项 id                                                                                                      | string                    | 否       | -      |
| objectId        | 事项 id，兼容字段，同 entityId                                                                               | string                    | 否       | -      |
| entityIds       | 事项 id（支持批量时传入）                                                                                    | string[]                  | 否       | -      |
| employeeId | 关联标签的用户id，单个事项标签关联时使用，一般用于主次账号的场景            | string                  | 否       | -      |
| batchDatas | 批量关联的数据, 例如：[{employeeId: 'xxx', entityId: 'xxx', module: 'xx'}]            | BatchData[]                  | 否       | -      |
| type            | 标签类型 0 公共标签 1，个人标签，3模块标签                                                                              | enum                      | 否       | 1      |
| value           | 已选中标签，传值组件将受控展示                                                                               | TagData[]                 | 否       |        |
| tags            | 已选中标签，兼容字段，同 value                                                                                | TagData[]                 | 否       |        |
| defaultTags            | 初始时选中的标签，注意，该属性仅需传 id，name，设置该属性，组件将根据传过来的标签id，内部获取标签相关完整数据，例如：[{ id: '949778519416176641', name: '任意测试1' }]                                                                                | TagData[]                 | 否       |        |
| isSticky        | 是否开启固定显示，开启后所选标签不再换行，作单行固定显示，超出则滚动查看                                     | boolean                   | 否       | false  |
| data            | 自定义传参                                                                                                   | Object                    | 否       | -      |
| customData            | 自定义传参（新），对接模块标签可使用该字段传特定字段                                                                                                   | Object                    | 否       | -      |
| disabledIds     | 需要屏蔽的标签 id                                                                                            | string[]                  | 否       | -      |
| enableSelectedCount     | 是否显示已选标签数  （仅H5模式下生效）                                                                                          | boolean                  | 否       | true      |
| maxRecommend     | 最大推荐标签数，默认 10 个，传入 -1 则表示无限制                                                                                          | number                  | 否       | 10      |
| placeholder     | 占位提示文本，传空字符串将不显示默认提示                                                                                          | string                  | 否       | 请选择      |
| disableAutoSave     | 是否禁用关联标签时的自动保存，禁用后，组件内部不再保存事项的关联关系                                                                                          | boolean                  | 否       | false      |
| fullDisplay     | 是否完整显示已选标签的全部内容（默认单行超出，省略显示）                                                                                          | boolean                  | 否       | false      |
| disableCreate     | 是否禁用标签创建                                                                                       | boolean                  | 否       | false      |
| disableDel     | 是否禁用标签删除                                                                                       | boolean                  | 否       | false      |
| disableAdd     | 是否禁用标签的添加关联                                                                                       | boolean                  | 否       | false      |
| disableRemove     | 是否禁用标签关联的移除                                                                                       | boolean                  | 否       | false      |
| scopeInfo     | 标签数据范围，对应公共浏览组件的 module、type，例如: {module: 'doc', type: 'folder'}                                                                                     | TagScopeInfo                  | 否       | -      |
| readOnly     | 是否只读                                                                                       | boolean                  | 否       | false      |
| formItemDisplay     | 是否以表单项的方式显示，H5模式下会有个 44px 的行高，默认没有，使用该设置，可按照标准H5表单的方式显示                                                                                | boolean                  | 否       | false      |
| adaptiveInput     | 是否自适应 input 宽度显示                                                                                | boolean                  | 否       | false      |
| browserAssociativeProps     | 浏览组件属性，由于标签选择组件与标准浏览组件类似，所以提供部分标准浏览组件的属性设置的支持                                                                                         | BrowserAssociativeProps                  | 否       | -      |
| formItemProps     | 表单项设置属性，目前支持的有：FormItemItemProps.isHoldRight                                                                                         | FormItemItemProps                  | 否       | -      |
| onChange        | 标签选择时的回调                                                                                             | (tags: TagData[]) => void | 否       | -      |
| onChangeTag     | 标签选择时的回调，兼容字段，同 onChange                                                                      | (tags: TagData[]) => void | 否       | -      |
| onLoadRecommend | 加载推荐标签，异步返回推荐标签列表列表，比如：[{id:'xx', name: 'xx'}]）                                      | () =>  Promise<TagData[]> | 否       | -      |
| onLoad        | 标签初始化时的回调                                                                                             | (tags: TagData[]) => void | 否       | -      |

#### browserAssociativeProps 参数说明

目支持的有：


* BrowserAssociativeProps.wrapDisplay 已选标签是否换行显示
* BrowserAssociativeProps.displayInput 是否默认展示输入框
* BrowserAssociativeProps.fetchData 自定义请求数据


##### fetchData


fetchData: (options: RequestOptionConfig, (params: any, options: RequestOptionConfig)=> RequestPromise) => RequestPromise


注意点：


1. fetchData 需返回标签特定格式数据，示例如下：


``` json
{
    "code":200,
    "msg":"接口返回成功",
    "status":true,
    "fail":false,
    "data":{
        "total":19,
        "pageNo":1,
        "totalPage":1,
        "pageSize":20,
        "data":[
            {
                "creator":"4258568619558548534"
                "color":"#E9F7FF","searchType":1
                "tagId":"920548737220493314"
                "createTime":1697531956,"childrenNum":0
                "groupId":"1","name":"我的测试群组标签"
                "businessId":0,
                "type":1
            }
        ]
    }
}
```


2. 为满足复用标签接口，只修改入参的场景， fetchData 新增了第二个参数 req，示例代码如下:


``` js
fetchData: async (reqOpts: RequestOptionConfig, req: (params: any, options: RequestOptionConfig)=> RequestPromise) => {
    const { params, ...restOpts } = reqOpts
    return await req({ test: 'xx', ...params }, restOpts)
}
```
![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=f05da94b5e0bba0f560a98b1c3926e7d)



## 管理模块标签


业务模块需要管理本模块下的标签时，可对接标签提供的标签管理组件，使用组件管理标签。


![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=3fe8514e13a1b74c85b830c032b23d3e)


对接文档地址 https://im.weaver.com.cn/web/#/26/7575


## 使用模块标签


业务模块使用标签预览组件时，只需要传入业务模块标识，即可使用本模块所属标签了


![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=240255cfb6745d9dd711fd4b5215e661)


标签预览组件对接文档地址 https://im.weaver.com.cn/web/#/26/5468



此时，模块标签就愉快地已经对接完了，您也可以到标签主页继续查看管理您的所有标签，此时，您所设置的模块标签当然也就理所当然的统一管理了


![](https://im.weaver.com.cn/server/index.php?s=/api/attachment/visitFile&sign=3c852cd2d1afb6a8802e2598e239e7f8)
