From 8bd421b3b18be0d330761ebf0f3ab6537d0cf149 Mon Sep 17 00:00:00 2001 From: yangwei9012 Date: Thu, 14 Apr 2022 19:12:06 +0800 Subject: [PATCH] =?UTF-8?q?[Feat]=20picker=E6=94=AF=E6=8C=81=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=9F=9F=20(#4052)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/picker.md | 28 ++++++++++++++-------------- src/renderers/CRUD.tsx | 10 ++++------ src/renderers/Form/Picker.tsx | 16 +++++++++++++--- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/docs/zh-CN/components/form/picker.md b/docs/zh-CN/components/form/picker.md index bfded2504..5b3f76152 100755 --- a/docs/zh-CN/components/form/picker.md +++ b/docs/zh-CN/components/form/picker.md @@ -496,17 +496,17 @@ order: 35 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------ | ----------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | -| options | `Array`或`Array` | | [选项组](./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`或`Array` | | [选项组](./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` | 是否使用内嵌模式 | diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index ce0384fee..ca0f0aabe 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -404,6 +404,8 @@ export default class CRUD extends React.Component { control: any; lastQuery: any; + lastData: any; + timer: ReturnType; mounted: boolean; constructor(props: CRUDProps) { @@ -571,15 +573,11 @@ export default class CRUD extends React.Component { ) { 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; } } diff --git a/src/renderers/Form/Picker.tsx b/src/renderers/Form/Picker.tsx index d35b150a0..2d8cd325d 100644 --- a/src/renderers/Form/Picker.tsx +++ b/src/renderers/Form/Picker.tsx @@ -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,