test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:09:08 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[Feat] picker支持数据域 (#4052)

Browse Source
This commit is contained in:
yangwei9012 2022-04-14 19:12:06 +08:00 committed by GitHub
parent dd3649e8c3
commit 8bd421b3b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/zh-CN/components/form/picker.md
View File

@ -496,17 +496,17 @@ order: 35
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | ----------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
| multiple | `boolean` | | 是否为多选。 |
| delimiter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
| embed | `boolean` | `false` | 是否使用内嵌模式 |
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
| source | `string`或 [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
| multiple | `boolean` | | 是否为多选。 |
| delimiter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
| embed | `boolean` | `false` | 是否使用内嵌模式 |

10
src/renderers/CRUD.tsx
View File

@ -404,6 +404,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
control: any;
lastQuery: any;
lastData: any;
timer: ReturnType<typeof setTimeout>;
mounted: boolean;
constructor(props: CRUDProps) {
@ -571,15 +573,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
) {
dataInvalid = true;
} else if (!props.api && isPureVariable(props.source)) {
const prev = resolveVariableAndFilter(
prevProps.source,
prevProps.data,
'| raw'
);
const next = resolveVariableAndFilter(props.source, props.data, '| raw');
if (prev !== next) {
if (!this.lastData || this.lastData !== next) {
store.initFromScope(props.data, props.source);
this.lastData = next;
}
}

16
src/renderers/Form/Picker.tsx
View File

@ -22,7 +22,11 @@ import Html from '../../components/Html';
import {filter} from '../../utils/tpl';
import {Icon} from '../../components/icons';
import {isEmpty} from '../../utils/helper';
import {dataMapping} from '../../utils/tpl-builtin';
import {
dataMapping,
isPureVariable,
resolveVariableAndFilter
} from '../../utils/tpl-builtin';
import {SchemaCollection, SchemaTpl} from '../../Schema';
import {CRUDSchema} from '../CRUD';
import {isApiOutdated, isEffectiveApi} from '../../utils/api';
@ -162,13 +166,18 @@ export default class PickerControl extends React.PureComponent<
op: 'loadOptions'
});
isEffectiveApi(source, ctx) &&
if (isPureVariable(source)) {
formItem.setOptions(resolveVariableAndFilter(source, data, '| raw'));
} else if (isEffectiveApi(source, ctx)) {
formItem.loadOptions(source, ctx, {
autoAppend: true
});
}
}
buildSchema(props: PickerProps) {
const isScopeData = isPureVariable(props.source);
return {
checkOnItemClick: true,
...props.pickerSchema,
@ -176,7 +185,8 @@ export default class PickerControl extends React.PureComponent<
type: 'crud',
pickerMode: true,
syncLocation: false,
api: props.source,
api: isScopeData ? null : props.source,
source: isScopeData ? props.source : null,
keepItemSelectionOnPageChange: true,
valueField: props.valueField,
labelField: props.labelField,