@xfe-repo/web-components 1.8.0 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +34 -18
- package/dist/index.d.mts +41 -47
- package/dist/index.d.ts +41 -47
- package/dist/index.js +508 -400
- package/dist/index.mjs +465 -341
- package/package.json +1 -1
- package/skills/xfe-web-components/GUIDE.md +2 -2
- package/skills/xfe-web-components/SKILL.md +2 -2
- package/skills/xfe-web-components/references/EffectMerchantSelect.md +13 -28
- package/skills/xfe-web-components/references/EffectSearchSelect.md +260 -0
- package/skills/xfe-web-components/references/EffectStaffSelect.md +4 -4
- package/skills/xfe-web-components/references/commonFn.md +0 -82
- package/skills/xfe-web-components/references/EffectLabelSelect.md +0 -222
package/package.json
CHANGED
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
| EffectBrandTransfer | | ✅ TransferValueType | ✅ useBrandOptions | ✅ categoryId | | | ✅ | |
|
|
14
14
|
| EffectCategoryCascade | ✅ 多选/获取原始数据 | ✅ TreeValueType 等6个 | ✅ useCategoryTree | | | | ✅ | ✅ 级联起点 |
|
|
15
15
|
| EffectFileUpload | ✅ 自动上传/手动上传 | ✅ SimpleFileData, UploadResult | ✅ uploadUploadFile | | ✅ handleUpload等 | ✅ Group | ✅ | ✅ WithFilePanel |
|
|
16
|
-
| EffectLabelSelect | ✅ 自定义数据源 | ✅ SelectOptionItem, LabelDic | ✅ 可自定义 | | | | ✅ | |
|
|
17
16
|
| EffectMerchantSelect | ✅ 搜索源切换 | ✅ MerchantOptions | ✅ useMerchantOptions | | | | ✅ | |
|
|
18
17
|
| EffectReservoirSelect | | | ✅ reservoirList | ✅ warehouseId | | | ✅ | ✅ WarehouseSelect |
|
|
18
|
+
| EffectSearchSelect | ✅ 自定义接口/搜索源 | ✅ EffectSearchSelectProps | ✅ useSWRImmutable | | | | ✅ | ✅ Label/Merchant |
|
|
19
19
|
| EffectScopeSelect | ✅ scopeLevel控制 | ✅ ScopeSelectValueType, ScopeLevelEnum | | | | ✅ 内含5个Effect | ✅ | |
|
|
20
20
|
| EffectSeriesSelect | | | ✅ useSeriesOptions | ✅ categoryId, brandId | | | ✅ | ✅ 级联链 |
|
|
21
21
|
| EffectSeriesSelectV2 | | | ✅ seriesList | ✅ categoryId, brandId | | | ✅ | ✅ 级联链 |
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
## 维护优先级
|
|
57
57
|
|
|
58
|
-
> 全部
|
|
58
|
+
> 全部 41 个组件文档已完成编写，并经过 platform + dashboard + erp 三项目业务用法审计。
|
|
59
59
|
> 以下优先级适用于后续组件新增或文档维护场景。
|
|
60
60
|
|
|
61
61
|
### 高优先级维护（业务使用频率最高、Agent 出错影响最大）
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: xfe-web-components
|
|
3
3
|
description: >-
|
|
4
|
-
@xfe-repo/web-components 组件库的完整使用指南。包含
|
|
4
|
+
@xfe-repo/web-components 组件库的完整使用指南。包含 41 个 React 组件的 Props 类型定义、
|
|
5
5
|
代码示例、常见陷阱和组件间联动关系。当使用 EffectBrandSelect、EffectCategoryCascade、
|
|
6
6
|
WithModal、EffectFileUpload、EffectScopeSelect、CTable、SearchForm、OSSImage、
|
|
7
7
|
CInput、SearchList、Currency、Loading 等组件时自动激活。
|
|
@@ -36,9 +36,9 @@ description: >-
|
|
|
36
36
|
| EffectScopeSelect | `references/EffectScopeSelect.md` | 商品范围选择（复合组件） |
|
|
37
37
|
| EffectAddressCascade | `references/EffectAddressCascade.md` | 地址级联选择 |
|
|
38
38
|
| EffectBrandTransfer | `references/EffectBrandTransfer.md` | 品牌穿梭框 |
|
|
39
|
-
| EffectLabelSelect | `references/EffectLabelSelect.md` | 标签维度双选择器 |
|
|
40
39
|
| EffectMerchantSelect | `references/EffectMerchantSelect.md` | 商户选择器 |
|
|
41
40
|
| EffectReservoirSelect | `references/EffectReservoirSelect.md` | 库区选择器 |
|
|
41
|
+
| EffectSearchSelect | `references/EffectSearchSelect.md` | 搜索源联想选择器 |
|
|
42
42
|
| EffectSeriesSelect | `references/EffectSeriesSelect.md` | 系列选择器 |
|
|
43
43
|
| EffectSeriesSelectV2 | `references/EffectSeriesSelectV2.md` | 系列多选器 V2 |
|
|
44
44
|
| EffectSkuRecognize | `references/EffectSkuRecognize.md` | SKU 图片识别 |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# EffectMerchantSelect
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> 商户下拉选择器，支持按商户号、平台名、商户名、手机号四种搜索源切换查询，选项标签根据当前搜索源自动展示对应字段，数据通过 `apiService.merchantList` 自动获取。
|
|
4
4
|
|
|
5
5
|
## 导入
|
|
6
6
|
|
|
@@ -39,7 +39,7 @@ function MyForm() {
|
|
|
39
39
|
|
|
40
40
|
```tsx
|
|
41
41
|
<EffectMerchantSelect
|
|
42
|
-
source="platformName" //
|
|
42
|
+
source="platformName" // 初始按平台名搜索
|
|
43
43
|
value={merchantNo}
|
|
44
44
|
onChange={(value, name) => {
|
|
45
45
|
setMerchantNo(value)
|
|
@@ -48,13 +48,6 @@ function MyForm() {
|
|
|
48
48
|
/>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
### 自定义标签展示模式
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
// 选项标签展示为 "商户平台名 - 企业编号" 格式
|
|
55
|
-
<EffectMerchantSelect labelDisplayMode="platformName-enterpriseNo" value={merchantNo} onChange={(value) => setMerchantNo(value)} />
|
|
56
|
-
```
|
|
57
|
-
|
|
58
51
|
### onChange 同步商户名称
|
|
59
52
|
|
|
60
53
|
Form 管理 enterpriseNo，但 enterpriseName 需要 useState 单独保存：
|
|
@@ -75,37 +68,34 @@ const [merchantName, setMerchantName] = useState('')
|
|
|
75
68
|
|
|
76
69
|
```tsx
|
|
77
70
|
<Form.Item name="enterpriseNo" label="商户">
|
|
78
|
-
<EffectMerchantSelect source="phone"
|
|
71
|
+
<EffectMerchantSelect source="phone" />
|
|
79
72
|
</Form.Item>
|
|
80
73
|
```
|
|
81
74
|
|
|
82
|
-
>
|
|
75
|
+
> `source` 可选值：`"enterpriseNo"`（默认，按商户号）、`"platformName"`（按平台名）、`"name"`（按商户名）、`"phone"`（按手机号）。选项标签会根据当前搜索源自动展示对应字段。
|
|
83
76
|
|
|
84
77
|
## Props
|
|
85
78
|
|
|
86
79
|
```typescript
|
|
87
|
-
type
|
|
80
|
+
type DefaultMerchantSourceValue = 'enterpriseNo' | 'platformName' | 'name' | 'phone'
|
|
88
81
|
|
|
89
82
|
interface EffectMerchantSelectProps {
|
|
90
83
|
className?: string
|
|
91
84
|
onChange?: (value?: string, name?: string) => void
|
|
92
85
|
value?: string
|
|
93
86
|
/** 搜索字段来源 */
|
|
94
|
-
source?:
|
|
87
|
+
source?: DefaultMerchantSourceValue
|
|
95
88
|
disabled?: boolean
|
|
96
|
-
/** 选项标签展示模式 */
|
|
97
|
-
labelDisplayMode?: LabelDisplayMode
|
|
98
89
|
}
|
|
99
90
|
```
|
|
100
91
|
|
|
101
|
-
| 属性
|
|
102
|
-
|
|
|
103
|
-
| value
|
|
104
|
-
| onChange
|
|
105
|
-
| source
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
| className | `string` | 否 | - | 自定义样式类名 |
|
|
92
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
93
|
+
| --------- | ------------------------------------------------------- | ---- | ---------------- | ------------------------------------------- |
|
|
94
|
+
| value | `string` | 否 | - | 受控值（企业编号 enterpriseNo） |
|
|
95
|
+
| onChange | `(value?: string, name?: string) => void` | 否 | - | 值变化回调，第二个参数为商户的 platformName |
|
|
96
|
+
| source | `'enterpriseNo' \| 'platformName' \| 'name' \| 'phone'` | 否 | `'enterpriseNo'` | 初始搜索字段来源，同时决定选项标签展示内容 |
|
|
97
|
+
| disabled | `boolean` | 否 | - | 禁用状态 |
|
|
98
|
+
| className | `string` | 否 | - | 自定义样式类名 |
|
|
109
99
|
|
|
110
100
|
## 导出类型
|
|
111
101
|
|
|
@@ -117,13 +107,8 @@ export type MerchantOptions = {
|
|
|
117
107
|
originalName: string
|
|
118
108
|
data?: MerchantListBus
|
|
119
109
|
}[]
|
|
120
|
-
|
|
121
|
-
// 标签展示模式
|
|
122
|
-
export type LabelDisplayMode = 'platformName' | 'platformName-enterpriseNo'
|
|
123
110
|
```
|
|
124
111
|
|
|
125
|
-
> **注意**：`LabelDisplayMode` 定义在内部 `useMerchantOptions` 模块中，未从包入口直接导出。使用时直接传字面量 `'platformName'` 或 `'platformName-enterpriseNo'` 即可。
|
|
126
|
-
|
|
127
112
|
## API 数据源
|
|
128
113
|
|
|
129
114
|
- **内部 Hook**：`useMerchantOptions`（使用 SWR 缓存，`revalidateOnMount: false`）
|
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
# EffectSearchSelect
|
|
2
|
+
|
|
3
|
+
> 带默认副作用接口的搜索联想选择器。左侧选择搜索源，右侧远程搜索并选择结果；默认用于商户搜索，内部调用 `apiService.merchantList`，也支持传入自定义接口、搜索源和数据转换函数。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { EffectSearchSelect } from '@xfe-repo/web-components'
|
|
9
|
+
import type { EffectSearchSelectProps } from '@xfe-repo/web-components'
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## 基本用法
|
|
13
|
+
|
|
14
|
+
### Form.Item 集成（最常用）
|
|
15
|
+
|
|
16
|
+
默认按商户信息搜索，value 为商户 `enterpriseNo`：
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
<Form.Item name="enterpriseNo" label="商户" rules={[{ required: true, message: '请选择商户' }]}>
|
|
20
|
+
<EffectSearchSelect />
|
|
21
|
+
</Form.Item>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
默认左侧搜索源：
|
|
25
|
+
|
|
26
|
+
| 文案 | value | 说明 |
|
|
27
|
+
| ------ | -------------- | --------------------- |
|
|
28
|
+
| 商户号 | `enterpriseNo` | 按商户号/企业编号搜索 |
|
|
29
|
+
| 平台名 | `platformName` | 按商户平台名搜索 |
|
|
30
|
+
| 商户名 | `name` | 按商户名搜索 |
|
|
31
|
+
| 手机号 | `phone` | 按手机号搜索 |
|
|
32
|
+
|
|
33
|
+
### 独立受控模式
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
const [enterpriseNo, setEnterpriseNo] = useState<string>()
|
|
37
|
+
|
|
38
|
+
<EffectSearchSelect
|
|
39
|
+
value={enterpriseNo}
|
|
40
|
+
onChange={(value, option) => {
|
|
41
|
+
setEnterpriseNo(value)
|
|
42
|
+
console.log('选中项原始数据：', option?.raw)
|
|
43
|
+
}}
|
|
44
|
+
/>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 进阶用法
|
|
48
|
+
|
|
49
|
+
### 自定义左侧搜索源
|
|
50
|
+
|
|
51
|
+
`sources` 只需要传 `{ label, value }[]`。默认情况下，`value` 会作为请求字段名：
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<EffectSearchSelect
|
|
55
|
+
sources={[
|
|
56
|
+
{ label: '平台名', value: 'platformName' },
|
|
57
|
+
{ label: '商户名', value: 'name' },
|
|
58
|
+
]}
|
|
59
|
+
defaultSourceValue="platformName"
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 切换搜索源不触发表单校验
|
|
64
|
+
|
|
65
|
+
组件默认行为是：切换左侧搜索源时清空内部搜索态，但不触发右侧字段 `onChange`，避免 `Form.Item` 因 `validateTrigger="onChange"` 立即校验。
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<Form.Item name="enterpriseNo" label="商户" rules={[{ required: true, message: '请选择商户' }]}>
|
|
69
|
+
<EffectSearchSelect />
|
|
70
|
+
</Form.Item>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### 自定义接口和数据转换
|
|
74
|
+
|
|
75
|
+
用于复用“左侧搜索源 + 右侧远程联想选择”的整体交互：
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
type StaffParams = {
|
|
79
|
+
name?: string
|
|
80
|
+
phone?: string
|
|
81
|
+
page: number
|
|
82
|
+
pageSize: number
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
type StaffResponse = {
|
|
86
|
+
list: { user_id: number; name: string; phone: string }[]
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
type StaffItem = StaffResponse['list'][number]
|
|
90
|
+
;<EffectSearchSelect<StaffParams, StaffResponse, StaffItem, number, 'name' | 'phone'>
|
|
91
|
+
sources={[
|
|
92
|
+
{ label: '员工名', value: 'name' },
|
|
93
|
+
{ label: '手机号', value: 'phone' },
|
|
94
|
+
]}
|
|
95
|
+
request={myStaffSearchApi}
|
|
96
|
+
transformOptions={(data) =>
|
|
97
|
+
data.list.map((item) => ({
|
|
98
|
+
label: item.name,
|
|
99
|
+
value: item.user_id,
|
|
100
|
+
raw: item,
|
|
101
|
+
}))
|
|
102
|
+
}
|
|
103
|
+
/>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### 自定义请求参数构建
|
|
107
|
+
|
|
108
|
+
当左侧 `source.value` 不能直接作为接口字段名，或接口需要复杂参数时，使用 `buildParams`：
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
<EffectSearchSelect<MyParams, MyResponse, MyItem, string, 'keyword'>
|
|
112
|
+
sources={[{ label: '关键字', value: 'keyword' }]}
|
|
113
|
+
request={mySearchApi}
|
|
114
|
+
buildParams={(keyword, source, baseParams) => ({
|
|
115
|
+
...baseParams,
|
|
116
|
+
page: 1,
|
|
117
|
+
pageSize: 20,
|
|
118
|
+
query: {
|
|
119
|
+
field: source.value,
|
|
120
|
+
keyword,
|
|
121
|
+
},
|
|
122
|
+
})}
|
|
123
|
+
transformOptions={(data) =>
|
|
124
|
+
data.list.map((item) => ({
|
|
125
|
+
label: item.name,
|
|
126
|
+
value: item.id,
|
|
127
|
+
raw: item,
|
|
128
|
+
}))
|
|
129
|
+
}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Props
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
type SelectValue = string | number
|
|
137
|
+
|
|
138
|
+
type EffectSearchSource<SourceValue extends string = string> = {
|
|
139
|
+
label: string
|
|
140
|
+
value: SourceValue
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
type EffectSearchOption<Value extends SelectValue = string, Raw = unknown> = {
|
|
144
|
+
label: React.ReactNode
|
|
145
|
+
value: Value
|
|
146
|
+
disabled?: boolean
|
|
147
|
+
raw?: Raw
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
type EffectSearchRequest<Params extends object, ResponseData> = (
|
|
151
|
+
params: Params,
|
|
152
|
+
config?: BFFRequestConfig,
|
|
153
|
+
) => Promise<BffDataType<ResponseData>>
|
|
154
|
+
|
|
155
|
+
interface EffectSearchSelectProps<
|
|
156
|
+
Params extends object = InMerchantListBusDto,
|
|
157
|
+
ResponseData = OutMerchantListBusDto,
|
|
158
|
+
Raw = MerchantListBus,
|
|
159
|
+
Value extends SelectValue = string,
|
|
160
|
+
SourceValue extends string = DefaultMerchantSearchSourceValue,
|
|
161
|
+
> extends Omit<SelectProps<Value>, 'mode' | 'options' | 'onChange' | 'onSearch'> {
|
|
162
|
+
sources?: readonly EffectSearchSource<SourceValue>[]
|
|
163
|
+
defaultSourceValue?: SourceValue
|
|
164
|
+
fetchParams?: Partial<Params>
|
|
165
|
+
pageSize?: number
|
|
166
|
+
buildParams?: (keyword: string, source: EffectSearchSource<SourceValue>, baseParams: Partial<Params>) => Params
|
|
167
|
+
onChange?: (value?: Value, option?: EffectSearchOption<Value, Raw>) => void
|
|
168
|
+
request?: EffectSearchRequest<Params, ResponseData>
|
|
169
|
+
transformOptions?: (
|
|
170
|
+
data: ResponseData,
|
|
171
|
+
context: { source: EffectSearchSource<SourceValue>; keyword: string },
|
|
172
|
+
) => EffectSearchOption<Value, Raw>[]
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|
|
177
|
+
| ------------------ | ----------------------------------------- | ---- | ---------------------------- | ------------------------------------------ |
|
|
178
|
+
| value | `Value` | 否 | - | 受控值，默认商户场景为 `enterpriseNo` |
|
|
179
|
+
| onChange | `(value?, option?) => void` | 否 | - | 右侧选择值变化回调 |
|
|
180
|
+
| sources | `EffectSearchSource[]` | 否 | 默认商户搜索源 | 左侧搜索源配置，`value` 默认作为请求字段名 |
|
|
181
|
+
| defaultSourceValue | `SourceValue` | 否 | `enterpriseNo` | 默认搜索源 |
|
|
182
|
+
| fetchParams | `Partial<Params>` | 否 | `{}` | 额外请求参数 |
|
|
183
|
+
| pageSize | `number` | 否 | `20` | 默认请求分页大小 |
|
|
184
|
+
| buildParams | `(keyword, source, baseParams) => Params` | 否 | 内置按 `[source.value]` 构建 | 自定义请求参数构建 |
|
|
185
|
+
| request | `EffectSearchRequest` | 否 | `apiService.merchantList` | 自定义请求函数 |
|
|
186
|
+
| transformOptions | `(data, context) => EffectSearchOption[]` | 否 | 默认商户转换 | 将接口响应转换成右侧 Select options |
|
|
187
|
+
|
|
188
|
+
## 导出类型
|
|
189
|
+
|
|
190
|
+
当前包入口主要导出：
|
|
191
|
+
|
|
192
|
+
```typescript
|
|
193
|
+
export type EffectSearchSelectProps
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
源码中还定义了 `EffectSearchSource`、`EffectSearchOption`、`EffectSearchRequest`、`EffectSearchBuildParams` 等类型；如需对外使用，优先检查包入口是否已导出。
|
|
197
|
+
|
|
198
|
+
## API 数据源
|
|
199
|
+
|
|
200
|
+
- **内部 Hook**：`useEffectSearchOptions`
|
|
201
|
+
- **缓存方案**：`useSWRImmutable`
|
|
202
|
+
- **默认接口**：`apiService.merchantList`
|
|
203
|
+
- **默认请求参数**：`{ page: 1, pageSize: 20, ...fetchParams, [source.value]: keyword }`
|
|
204
|
+
- **可覆盖**：通过 `request` 传入自定义接口，或通过 `<ConfigProvider apiService={{ merchantList: customFn }}>` 替换默认商户接口
|
|
205
|
+
|
|
206
|
+
### 默认商户选项展示
|
|
207
|
+
|
|
208
|
+
默认商户场景下，右侧联想项会根据左侧搜索源展示对应字段：
|
|
209
|
+
|
|
210
|
+
| source.value | 右侧 label 来源 |
|
|
211
|
+
| -------------- | ---------------------------------------- |
|
|
212
|
+
| `enterpriseNo` | `item.enterpriseNo` |
|
|
213
|
+
| `platformName` | `item.platformName` |
|
|
214
|
+
| `name` | `item.name` |
|
|
215
|
+
| `phone` | 当前接口暂无手机号字段，回退展示组合信息 |
|
|
216
|
+
|
|
217
|
+
右侧选中值仍为 `item.enterpriseNo`。
|
|
218
|
+
|
|
219
|
+
## 常见陷阱
|
|
220
|
+
|
|
221
|
+
- ❌ 期望切换左侧搜索源时自动触发表单校验：
|
|
222
|
+
```tsx
|
|
223
|
+
// 默认不会触发字段 onChange，避免 Form.Item 立刻出现必填校验
|
|
224
|
+
<EffectSearchSelect />
|
|
225
|
+
```
|
|
226
|
+
- ✅ 切换左侧搜索源只是内部交互，会清空右侧搜索态并等待用户重新输入。
|
|
227
|
+
|
|
228
|
+
- ❌ 自定义接口时只传 `request`，没有传 `transformOptions`：
|
|
229
|
+
```tsx
|
|
230
|
+
<EffectSearchSelect request={myApi} />
|
|
231
|
+
```
|
|
232
|
+
- ✅ 自定义接口应同时传入 `transformOptions`，确保返回 `{ label, value, raw }`：
|
|
233
|
+
|
|
234
|
+
```tsx
|
|
235
|
+
<EffectSearchSelect
|
|
236
|
+
request={myApi}
|
|
237
|
+
transformOptions={(data) => data.list.map((item) => ({ label: item.name, value: item.id, raw: item }))}
|
|
238
|
+
/>
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
- ❌ 认为 `sources.value` 是提交值：
|
|
242
|
+
```tsx
|
|
243
|
+
// sources.value 是搜索字段名，不是 Form.Item 的提交值
|
|
244
|
+
sources={[{ label: '商户名', value: 'name' }]}
|
|
245
|
+
```
|
|
246
|
+
- ✅ Form.Item 的提交值来自右侧选项的 `option.value`，默认商户场景为 `enterpriseNo`。
|
|
247
|
+
|
|
248
|
+
- ❌ 未输入关键字时期待接口立即请求：
|
|
249
|
+
```tsx
|
|
250
|
+
// 空输入不请求
|
|
251
|
+
```
|
|
252
|
+
- ✅ 输入关键字后才触发远程搜索。
|
|
253
|
+
|
|
254
|
+
## 相关组件
|
|
255
|
+
|
|
256
|
+
| 场景 | 组件 | 说明 |
|
|
257
|
+
| -------------- | ---------------------- | ------------------------------------------------ |
|
|
258
|
+
| 旧版商户选择 | `EffectMerchantSelect` | 固定商户搜索源的旧组件 |
|
|
259
|
+
| API 配置 | `ConfigProvider` | 提供 `apiService.merchantList` 或其他 Effect API |
|
|
260
|
+
| 搜索表单中使用 | `SearchForm` | 常与 Form.Item 搜索条件一起使用 |
|
|
@@ -144,7 +144,7 @@ type EffectStaffSelectProps = {
|
|
|
144
144
|
|
|
145
145
|
## 相关组件
|
|
146
146
|
|
|
147
|
-
| 场景 | 组件
|
|
148
|
-
| ---------- |
|
|
149
|
-
| 多维度搜索 | `
|
|
150
|
-
| API 配置 | `ConfigProvider`
|
|
147
|
+
| 场景 | 组件 | 说明 |
|
|
148
|
+
| ---------- | -------------------- | --------------------------------------- |
|
|
149
|
+
| 多维度搜索 | `EffectSearchSelect` | 支持切换搜索维度的通用选择器 |
|
|
150
|
+
| API 配置 | `ConfigProvider` | 提供 `apiService.businessList` 接口实现 |
|
|
@@ -170,85 +170,3 @@ export const commonDateRangePickerGetValueProps: (dateStrs: string[] | null) =>
|
|
|
170
170
|
```
|
|
171
171
|
|
|
172
172
|
> 日期格式默认为 `'YYYY-MM-DD HH:mm:ss'`。
|
|
173
|
-
|
|
174
|
-
---
|
|
175
|
-
|
|
176
|
-
### getSelectValue / getStrValue 系列
|
|
177
|
-
|
|
178
|
-
配合 `EffectLabelSelect` 的 `customLabelInValue` 模式使用的解析函数组。当 EffectLabelSelect 设置了 `customLabelInValue` 后，value 不再是简单的 ID，而是一个分号分隔的组合字符串。
|
|
179
|
-
|
|
180
|
-
导入：
|
|
181
|
-
|
|
182
|
-
```tsx
|
|
183
|
-
import { getSelectValue, getStrValue, getInitialValue, getFirstValue, getSecondValue } from '@xfe-repo/web-components'
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
#### getStrValue
|
|
187
|
-
|
|
188
|
-
生成分号分隔的组合字符串，由 EffectLabelSelect 内部调用。
|
|
189
|
-
|
|
190
|
-
```typescript
|
|
191
|
-
export const getStrValue: (displayType: 'label' | 'value', value?: string, label?: string, labelDicKey?: string) => string | undefined
|
|
192
|
-
|
|
193
|
-
// 示例
|
|
194
|
-
getStrValue('label', '123', '张三', 'phone')
|
|
195
|
-
// => 'label;123;张三;phone'
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
#### getSelectValue
|
|
199
|
-
|
|
200
|
-
从分号分隔字符串中解析指定字段。
|
|
201
|
-
|
|
202
|
-
```typescript
|
|
203
|
-
type ReturnType = 'label' | 'value' | 'labelDicKey' | 'labelAndValue'
|
|
204
|
-
|
|
205
|
-
export const getSelectValue: (str?: string | null | number, returnType?: ReturnType) => string | undefined
|
|
206
|
-
|
|
207
|
-
// 示例
|
|
208
|
-
const str = 'label;123;张三;phone'
|
|
209
|
-
getSelectValue(str, 'value') // => '123'
|
|
210
|
-
getSelectValue(str, 'label') // => '张三'
|
|
211
|
-
getSelectValue(str, 'labelDicKey') // => 'phone'
|
|
212
|
-
getSelectValue(str, 'labelAndValue') // => '123 - 张三'
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
#### getInitialValue
|
|
216
|
-
|
|
217
|
-
拼接 `value - label` 展示格式。
|
|
218
|
-
|
|
219
|
-
```typescript
|
|
220
|
-
export const getInitialValue: (label?: string, value?: string) => string
|
|
221
|
-
// getInitialValue('张三', '123') => '123 - 张三'
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
#### getFirstValue / getSecondValue
|
|
225
|
-
|
|
226
|
-
从 `value - label` 格式中提取各部分。
|
|
227
|
-
|
|
228
|
-
```typescript
|
|
229
|
-
export const getFirstValue: (str?: string) => string // 提取 value
|
|
230
|
-
export const getSecondValue: (str?: string) => string // 提取 label
|
|
231
|
-
|
|
232
|
-
// getFirstValue('123 - 张三') => '123'
|
|
233
|
-
// getSecondValue('123 - 张三') => '张三'
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
#### 典型业务使用
|
|
237
|
-
|
|
238
|
-
配合 EffectLabelSelect 的 customLabelInValue 模式：
|
|
239
|
-
|
|
240
|
-
```tsx
|
|
241
|
-
// 搜索表单中使用 EffectLabelSelect
|
|
242
|
-
;<Form.Item name="merchantStr" noStyle>
|
|
243
|
-
<EffectLabelSelect customLabelInValue optionsDisplayType="labelAndValue" labelDic={{ phone: '手机号', name: '商户名' }} />
|
|
244
|
-
</Form.Item>
|
|
245
|
-
|
|
246
|
-
// 提交时解析值
|
|
247
|
-
const handleSubmit = (values) => {
|
|
248
|
-
const params = {
|
|
249
|
-
merchantId: getSelectValue(values.merchantStr, 'value'),
|
|
250
|
-
merchantName: getSelectValue(values.merchantStr, 'label'),
|
|
251
|
-
}
|
|
252
|
-
dispatch(fetchList(params))
|
|
253
|
-
}
|
|
254
|
-
```
|