BusinessSelect - 业务下拉

下拉组件是中后台系统中重度使用的组件, 并且下拉选项大部分是通过接口获取的. 当系统中的下拉组件使用的越来越多的时候, 就会出现一些问题, 比如:

有一部分下拉是需要分页的, 希望能对分页的下拉组件进行更通用的封装.
有的下拉会在多个页面中多次使用, 如何更好的复用他们.
当页面中有多个下拉组件时, 下拉选项的请求逻辑会让页面代码变得臃肿, 如何抽离这些代码.

与其让这些下拉分布在各个页面中, 不如把他们定义到一块, 由 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" />;

基本的使用方法

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`	`-`

BusinessSelect - 业务下拉

有一部分下拉是需要分页的, 希望能对分页的下拉组件进行更通用的封装.

有的下拉会在多个页面中多次使用, 如何更好的复用他们.

当页面中有多个下拉组件时, 下拉选项的请求逻辑会让页面代码变得臃肿, 如何抽离这些代码.

与其让这些下拉分布在各个页面中, 不如把他们定义到一块, 由 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" />;

基本的使用方法

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

属性名

描述

类型

默认值

apis

定义所有的业务下拉;

ApiType[]

[]

defaultProps

默认属性;

Omit<BusinessSelectProps<string>, "type">

{}

属性名

描述

类型

默认值

api

获取下拉数据的接口

(apiParamsType: ApiParamsType) => Promise<{ data: any; }>

-

type

下拉选择的名字

string

-

pagination

是否分页

boolean

false

defaultProps

默认属性, 优先级更高

Omit<BusinessSelectProps<string>, "type">

'-'

属性名

描述

类型

默认值

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

-

TABLE OF CONTENTS

BusinessSelect - 业务下拉

基本的使用方法

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

请求接口带查询参数 queryParams

分页下拉及其搜索

清除缓存

定义 labelKey 和 valueKey

onLoad 事件

API

BusinessSelectBuilder

ApiType

BusinessSelect

TABLE OF CONTENTS

BusinessSelect - 业务下拉

基本的使用方法

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

请求接口带查询参数 queryParams

分页下拉及其搜索

清除缓存

定义 labelKey 和 valueKey

onLoad 事件

API

BusinessSelectBuilder

ApiType

BusinessSelect