# BrowserType 浏览类型按钮

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/browser-type/freepass)
- 平台：PC
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[BrowserType]

## 代码演示

### 基本使用

通过接口获取浏览类型按钮,browserBeanSearch

```jsx
import React, { Component } from "react";
import {
  constants,
  BrowserType,
  BrowserValueType,
} from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`;

class TypesBrowserDemo extends Component {
  state = {
    value: [] as BrowserValueType,
  }

  handleChange = (data: BrowserValueType) => {
    this.setState({ value: data });
  }

  render() {
    return (
      <div className={prefixCls}>
        <BrowserType
         
          value={this.state.value}
          placeholder="请选择"
          onChange={this.handleChange}
          panelClassName='browserType-demo-1'
        />
      </div>
    );
  }
}

export default TypesBrowserDemo;
```

### 其它使用

readOnly, disabled, placeholder, value, allowClear, inputIcon, loginFree使用

```jsx
import React, { Component } from 'react'
import { constants, BrowserType, BrowserValueType, Icon } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`

class TypesBrowserDemo extends Component {
  state = {
    value: [] as BrowserValueType,
  }

  handleChange = (data: BrowserValueType) => {
    this.setState({ value: data })
  }

  onPanelSearchChange = (value: string) => {
    console.log(value)
  }

  renderPanelSearchResult = (value: string, groupData: any, groupId: string) => {
    if (value === 'test') {
      let newGroupData = groupData.filter((item: any) => item.id !== "8574699142778669115")
      return {
        groupData: newGroupData
      }
    }
    return {
      groupId: groupId, // 不传则页签默认选中全部类型
      groupData: groupData
    }
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>非受控</h4>
        <BrowserType
         
          placeholder='请选择'
        />

        <h4>受控(未注册onChange事件,选择失效)</h4>
        <BrowserType
         
          placeholder='请选择'
          value={this.state.value}
        />

        <h4>受控(注册onChange事件,选择生效)</h4>
        <BrowserType
         
          value={this.state.value}
          placeholder='请选择'
          onChange={this.handleChange}
        />

        <h4>只读</h4>
        <BrowserType
         
          value={this.state.value}
          placeholder='请选择'
          readOnly
          onChange={this.handleChange}
        />
        <h4>禁用</h4>
        <BrowserType
         
          value={this.state.value}
          placeholder='请选择'
          disabled
          onChange={this.handleChange}
        />
        <h4>允许清空</h4>
        <BrowserType
         
          value={this.state.value}
          placeholder='请选择'
          allowClear
          onChange={this.handleChange}
        />

        <h4>自定义Input框右边icon</h4>
        <BrowserType
         
          placeholder='请选择'
          inputIcon={<Icon name="Icon-Ali-nail" ></Icon>}
        />

        <h4>登录选项(设置loginFree,接口前缀api调整为papi)</h4>
        <BrowserType
         
          placeholder='请选择'
          loginFree
        />
        <h4>隐藏面板搜索</h4>
        <BrowserType
         
          placeholder='请选择'
          showPanelSearch={false}
          onPanelSearchChange={this.onPanelSearchChange}
        />
        <h4>自定义渲染搜索结果</h4>
        <BrowserType
         
          placeholder='请选择'
          renderPanelSearchResult={this.renderPanelSearchResult}
        />
      </div>
    )
  }
}

export default TypesBrowserDemo
```

### 接口参数

使用commonParams修改接口默认参数(需对查询接口参数进行调整可以使用该参数)

```jsx
import React, { Component } from 'react'
import { constants, BrowserType, BrowserValueType } from '@weapp/ui'

const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`

class TypesBrowserDemo extends Component {
  state = {
    value: [] as BrowserValueType,
    params: {
      type: 'test',
    },
  }

  handleChange = (data: BrowserValueType) => {
    this.setState({ value: data })
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>接口参数补充commonParams</h4>
        <BrowserType
         
          value={this.state.value}
          placeholder='请选择'
          onChange={this.handleChange}
          commonParams={this.state.params}
        />
      </div>
    )
  }
}

export default TypesBrowserDemo
```

### 单独面板

BrowserType子组件BrowserTypePanel单独抽离面板模式

```jsx
import React, { Component } from 'react';
import { constants, BrowserType, BrowserValueType, Button } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`;

const { BrowserTypePanel } = BrowserType;
class TypesBrowserDemo extends Component {
  state = {
    value: [
      {
        "id": "1050020208579067904",
        "createTime": 1727676882000,
        "updateTime": 1727676882000,
        "creator": "3576607395561852902",
        "tenantKey": "tog31zexw7",
        "deleteType": 0,
        "dataId": "1050020208579067904",
        "labelId": "-1",
        "disable": 0,
        "systemDefault": 0,
        "ebuliderDataBrowser": true,
        "sourceId": "954303950520819712",
        "name": "表格浏览按钮",
        "module": "bcw",
        "type": "customBrowser_bhl123",
        "groupId": "800676625348591637"
    }
    ] as BrowserValueType,
  };

  handleChange = (data: BrowserValueType) => {
    this.setState({ value: data });
  };

  render() {
    return (
      <div className={prefixCls}>
        <h4>基本使用-未选中值情况</h4>
        <BrowserTypePanel
         
        />
        <h4>基本使用-已选值情况</h4>
        <BrowserTypePanel
         
          value={this.state.value}
          onChange={this.handleChange}
          panelClassName='browserType-demo-4'
        />
      </div>
    );
  }
}

export default TypesBrowserDemo;
```

## API

### 参数说明如下：

BrowserType 继承 BaseProps, FormProps 所有属性

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| readOnly | 只读 | boolean | F | - |
| disabled | 禁用 | boolean | F | - |
| placeholder | 输入框占位符 | string | F | - |
| value | 受控值，已选数据 | BrowserValueType | F | - |
| dataURL | 自定义请求数据的 url | string | F | `/api/bcw/relevanceBrowser/getBrowserBean` |
| completeURL | 自定义请求联想搜索结果的 url | string | F | `/api/bcw/relevanceBrowser/browserBeanSearch` |
| dataParams | dataURL 默认参数 · | object | F | - |
| completeParams | completeURL 默认参数 | object | F | - |
| commonParams | 所有接口的默认参数 | object | F | - |
| allowClear | 允许清空已选数据 | boolean | F | - |
| onChange | 数据修改回调 | (value: BrowserValueType) => void | F | - |
| fetchData | 自定义请求数据 | (options: RequestOptionConfig) => RequestPromise | F | - |
| multiple | 是否多选 | boolean | F | - |
| loginFree | 是否是未登录状态(处理接口地址) | boolean | F | - |
| showSearch | 显示搜索 | boolean | F | - |
| inputIcon | 自定义输入框图标 | ReactNode | F | - |
| dropdownClassName | 下拉列表类名 | string | F | - |
| onPanelSearchChange | 数据面板搜索回调 | (value: string) => void | F | - |
| showPanelSearch | 显示面板搜索 | boolean | F | true |
| renderPanelSearchResult | 自定义渲染面板搜索结果 | (value: string, groupData: AnyObj[], groupId: string) =>  AnyObj | F | - |
| panelClassName | 面板类名 | string | F | - |
## 子组件

### BrowserType.BrowserTypePanel

#### BrowserTypePanel 参数说明如下

子组件BrowserTypePanel的参数继承自基础BrowserType组件BrowserTypeProps

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 受控值，已选数据 | BrowserValueType | F | - |
| dataURL | 自定义请求数据的 url | string | F | `/api/bcw/relevanceBrowser/getBrowserBean` |
| completeURL | 自定义请求联想搜索结果的 url | string | F | `/api/bcw/relevanceBrowser/browserBeanSearch` |
| dataParams | dataURL 默认参数 · | object | F | - |
| completeParams | completeURL 默认参数 | object | F | - |
| commonParams | 所有接口的默认参数 | object | F | - |
| onChange | 数据修改回调 | (value: BrowserValueType) => void | F | - |
| fetchData | 自定义请求数据 | (options: RequestOptionConfig) => RequestPromise | F | - |
| multiple | 是否多选 | boolean | F | - |
| loginFree | 是否是未登录状态(处理接口地址) | boolean | F | - |
| dropdownClassName | 下拉列表类名 | string | F | - |
| onPanelSearchChange | 数据面板搜索回调 | (value: string) => void | F | - |
| showPanelSearch | 显示面板搜索 | boolean | F | true |
| renderPanelSearchResult | 自定义渲染面板搜索结果 | (value: string, groupData: AnyObj[], groupId: string) =>  AnyObj | F | - |
| panelClassName | 面板类名 | string | F | - |
