BusinessSelect - 业务下拉

下拉组件是中后台系统中频繁使用的一类组件, 而在这里我们讨论的是通过接口获取选项的下拉组件.

通常, 针对这类组件, 我们会在页面中请求接口, 然后拼接好选项数据, 最后再赋值给 Select 组件.

当页面中少量使用此类组件的时候, 这种做法并没有什么问题.

但是随着页面中此类组件的使用逐渐变多之后, 一些问题也逐渐浮出水面, 比如:

页面中针对此类组件的代码变得越来越多, 大多都是重复性的请求, 处理, 赋值.
有些下拉是需要分页的, 希望能对分页的下拉组件进行更通用的封装.
很多下拉组件会在多个页面中多次使用, 如何更好的复用他们.

与其让这些下拉组件分布在各个页面中, 不如把他们统一定义到一块, 由 type 区分, 并且为每种 type 指定相应的请求接口, 从而形成一个更为通用的下拉组件.

我们称这个组件为 BusinessSelect, 它是由 BusinessSelectBuilder 初始化而来:

import { BusinessSelectBuilder } from 'react-admin-kit';

// 定义 type 类型
type SelectType = 'color' | 'brand';

const BusinessSelect = BusinessSelectBiulder<SelectType>({
  apis: [
    {
      type: 'color',
      api: queryColorFunction,
    },
    {
      type: 'brand',
      api: queryBrandFunction,
      pagination: true,
    },
  ],
});

// 在页面上使用
<BusinessSelect type="color" />;
<BusinessSelect type="brand" />;

请求接口返回的格式必须为 {data: [], total: xx}, 对于非分页组件 total 可不返回.
其中 data 为一个对象数组, 组件默认读取 name 作为文本显示, id 作为下拉取值.
注意 antd Select 组件是使用的 label 和 value 作为文本和下拉取值字段. 本组件使用 name 和 id 来取值是因为后端返回的数据中这两个值更为通用. 当然你可以通过 labelKey 和 valueKey 这两个 api 来更改取值字段.

基本的使用方法

BusinessSelect是 antd Select 的封装, 可以透传 Select 的所有属性.

同一页面中多次引用只会请求一次接口

下拉数据默认会自动缓存

请求接口带查询参数 queryParams

有时我们需要给接口传递查询参数, 可以使用 queryParams.

比如有一个人员接口会根据 type 来区分不同的人员类型, 在 A 页面用的是 type=1, 在 B 页面用的是 type=2. 这种情况可以使用queryParams属性

// A页面
<BusinessSelect type="user" queryParams={{ type: 1 }} />

// B页面
<BusinessSelect type="user" queryParams={{ type: 2 }} />

当 queryParams 传入值时, 该下拉将不缓存数据

分页下拉及其搜索

当下拉数据量很大时, 将 ApiType 中的 pagination 设为 true, 组件即开启分页模式, 支持滚动到底部加载下一页和远程搜索

组件会给接口抛出 current, searchValue 两个查询参数

{
  api: ({ current, searchValue }) => request();
}

清除缓存

使用clearSelectCache(type: string)方法清除缓存. type 不传清除所有类型的缓存

定义 labelKey 和 valueKey

下拉的 label 默认取值是 name 字段, value 的默认取值是 id. 如果要更改取值字段, 可通过 labelKey 和 valueKey 来更改.

<BusinessSelect type="user" labelKey="userName" valueKey="userId" />

除了在 BusinessSelect 上设置以外, 还可以在 BusinessSelectBuilder 上设置

BusinessSelectBuilder({
  apis: [
    {
      type: 'user'
      defaultProps: {
        labelKey: 'userName',
        valueKey: 'userId'
      }
    }
  ]
})

onLoad 事件

当下拉数据加载完成后会触发 onLoad 事件. 这个事件对于某些场景非常有用, 例如可以用它实现默认选中第一条数据.

API

BusinessSelectBuilder

属性名	描述	类型	默认值
apis	定义所有的业务下拉;	`ApiType[]`	`[]`
defaultProps	默认属性;	`Omit<BusinessSelectProps<string>, "type">`	`{}`

ApiType

属性名	描述	类型	默认值
api	获取下拉数据的接口	`(apiParamsType: ApiParamsType) => Promise<{ data: any; }>`	`-`
type	下拉选择的名字	`string`	`-`
pagination	是否分页	`boolean`	`false`
defaultProps	默认属性, 优先级更高	`Omit<BusinessSelectProps<string>, "type">`	`'-'`

BusinessSelect

属性名	描述	类型	默认值
type	Builder中定义的下拉选择的名字	`string`	`-`
labelKey	label的读取字段. 优先级高于builder中的labelKey	`string`	`name`
valueKey	value的读取字段. 优先级高于builder中的valueKey	`string`	`id`
queryParams	查询接口的参数. 用法见示例	`Record<string, any>`	`--`
renderLabel	自定义文本显示	`(node: any) => any`	`-`
noCache	不缓存数据(优先级更高)	`boolean`	`false`
onLoad	下拉数据加载完成后的回调; 对于分页的下拉组件只在初次加载完成后触发	`(options: any, total?: number) => void`	`-`
searchDebounceValue	分页下拉组件搜索的 debounce 值.	`number`	`300`

‌
‌
‌
‌

BusinessSelect - 业务下拉

下拉组件是中后台系统中频繁使用的一类组件, 而在这里我们讨论的是通过接口获取选项的下拉组件.

通常, 针对这类组件, 我们会在页面中请求接口, 然后拼接好选项数据, 最后再赋值给 Select 组件.

当页面中少量使用此类组件的时候, 这种做法并没有什么问题.

但是随着页面中此类组件的使用逐渐变多之后, 一些问题也逐渐浮出水面, 比如:

页面中针对此类组件的代码变得越来越多, 大多都是重复性的请求, 处理, 赋值.
有些下拉是需要分页的, 希望能对分页的下拉组件进行更通用的封装.
很多下拉组件会在多个页面中多次使用, 如何更好的复用他们.

我们称这个组件为 BusinessSelect, 它是由 BusinessSelectBuilder 初始化而来:

import { BusinessSelectBuilder } from 'react-admin-kit';

// 定义 type 类型
type SelectType = 'color' | 'brand';

const BusinessSelect = BusinessSelectBiulder<SelectType>({
  apis: [
    {
      type: 'color',
      api: queryColorFunction,
    },
    {
      type: 'brand',
      api: queryBrandFunction,
      pagination: true,
    },
  ],
});

// 在页面上使用
<BusinessSelect type="color" />;
<BusinessSelect type="brand" />;

请求接口返回的格式必须为 {data: [], total: xx}, 对于非分页组件 total 可不返回.
其中 data 为一个对象数组, 组件默认读取 name 作为文本显示, id 作为下拉取值.
注意 antd Select 组件是使用的 label 和 value 作为文本和下拉取值字段. 本组件使用 name 和 id 来取值是因为后端返回的数据中这两个值更为通用. 当然你可以通过 labelKey 和 valueKey 这两个 api 来更改取值字段.

基本的使用方法

BusinessSelect是 antd Select 的封装, 可以透传 Select 的所有属性.

同一页面中多次引用只会请求一次接口

下拉数据默认会自动缓存

请求接口带查询参数 queryParams

有时我们需要给接口传递查询参数, 可以使用 queryParams.

比如有一个人员接口会根据 type 来区分不同的人员类型, 在 A 页面用的是 type=1, 在 B 页面用的是 type=2. 这种情况可以使用queryParams属性

// A页面
<BusinessSelect type="user" queryParams={{ type: 1 }} />

// B页面
<BusinessSelect type="user" queryParams={{ type: 2 }} />

当 queryParams 传入值时, 该下拉将不缓存数据

分页下拉及其搜索

当下拉数据量很大时, 将 ApiType 中的 pagination 设为 true, 组件即开启分页模式, 支持滚动到底部加载下一页和远程搜索

组件会给接口抛出 current, searchValue 两个查询参数

{
  api: ({ current, searchValue }) => request();
}

清除缓存

使用clearSelectCache(type: string)方法清除缓存. type 不传清除所有类型的缓存

定义 labelKey 和 valueKey

下拉的 label 默认取值是 name 字段, value 的默认取值是 id. 如果要更改取值字段, 可通过 labelKey 和 valueKey 来更改.

<BusinessSelect type="user" labelKey="userName" valueKey="userId" />

除了在 BusinessSelect 上设置以外, 还可以在 BusinessSelectBuilder 上设置

BusinessSelectBuilder({
  apis: [
    {
      type: 'user'
      defaultProps: {
        labelKey: 'userName',
        valueKey: 'userId'
      }
    }
  ]
})

onLoad 事件

当下拉数据加载完成后会触发 onLoad 事件. 这个事件对于某些场景非常有用, 例如可以用它实现默认选中第一条数据.

API

BusinessSelectBuilder

属性名	描述	类型	默认值
apis	定义所有的业务下拉;	`ApiType[]`	`[]`
defaultProps	默认属性;	`Omit<BusinessSelectProps<string>, "type">`	`{}`

ApiType

属性名	描述	类型	默认值
api	获取下拉数据的接口	`(apiParamsType: ApiParamsType) => Promise<{ data: any; }>`	`-`
type	下拉选择的名字	`string`	`-`
pagination	是否分页	`boolean`	`false`
defaultProps	默认属性, 优先级更高	`Omit<BusinessSelectProps<string>, "type">`	`'-'`

BusinessSelect

属性名	描述	类型	默认值
type	Builder中定义的下拉选择的名字	`string`	`-`
labelKey	label的读取字段. 优先级高于builder中的labelKey	`string`	`name`
valueKey	value的读取字段. 优先级高于builder中的valueKey	`string`	`id`
queryParams	查询接口的参数. 用法见示例	`Record<string, any>`	`--`
renderLabel	自定义文本显示	`(node: any) => any`	`-`
noCache	不缓存数据(优先级更高)	`boolean`	`false`
onLoad	下拉数据加载完成后的回调; 对于分页的下拉组件只在初次加载完成后触发	`(options: any, total?: number) => void`	`-`
searchDebounceValue	分页下拉组件搜索的 debounce 值.	`number`	`300`

TABLE OF CONTENTS

TABLE OF CONTENTS

BusinessSelect - 业务下拉

基本的使用方法

同一页面中多次引用只会请求一次接口

请求接口带查询参数 queryParams

分页下拉及其搜索

清除缓存

定义 labelKey 和 valueKey

onLoad 事件

API

BusinessSelectBuilder

ApiType

BusinessSelect

BusinessSelect - 业务下拉

基本的使用方法

同一页面中多次引用只会请求一次接口

请求接口带查询参数 queryParams

分页下拉及其搜索

清除缓存

定义 labelKey 和 valueKey

onLoad 事件

API

BusinessSelectBuilder

ApiType

BusinessSelect