fix: CURD组件设置查询字段数据域二次同步导致渲染错误问题 (#8324)

This commit is contained in:
RUNZE LU 2023-10-09 17:07:15 +08:00 committed by GitHub
parent a074593a92
commit bdf5985b53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 5 deletions

View File

@ -2795,6 +2795,9 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
> 本文中的例子为了不相互影响都关闭了这个功能。 > 本文中的例子为了不相互影响都关闭了这个功能。
> 另外如果需要使用接口联动,需要设置`syncLocation: false` > 另外如果需要使用接口联动,需要设置`syncLocation: false`
`syncLocation`开启后数据域经过地址栏同步后原始值被转化为字符串同步回数据域但布尔值boolean同步后不符合预期数据结构导致组件渲染出错。比如查询条件表单中包含[Checkbox](./form/checkbox)组件,此时可以设置`{"trueValue": "1", "falseValue": "0"}`,将真值和假值设置为字符串格式规避。
## 前端一次性加载 ## 前端一次性加载
如果你的数据并不是很大,而且后端不方便做分页和条件过滤操作,那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。 如果你的数据并不是很大,而且后端不方便做分页和条件过滤操作,那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。

View File

@ -15,7 +15,7 @@ export interface AutoFilterFormProps extends RendererProps {
activedSearchableColumns: Array<IColumn>; activedSearchableColumns: Array<IColumn>;
searchableColumns: Array<IColumn>; searchableColumns: Array<IColumn>;
columnsNum: number; columnsNum: number;
onItemToggleExpanded?: (column: IColumn, value: any) => void; onItemToggleExpanded?: (column: IColumn, value: boolean) => void;
onToggleExpanded?: () => void; onToggleExpanded?: () => void;
query?: any; query?: any;
@ -122,15 +122,24 @@ export function AutoFilterForm({
column.searchable.strategy === 'jsonql' ? '' : '__search_' column.searchable.strategy === 'jsonql' ? '' : '__search_'
}${column.searchable?.name ?? column.name}`, }${column.searchable?.name ?? column.name}`,
option: column.searchable?.label ?? column.label, option: column.searchable?.label ?? column.label,
value: column.enableSearch, /**
* syncLocation开启后Query中二次同步到数据域中(boolean)
* eg:
* true ==> "true"
* false ==> "false"
*
*/
trueValue: '1',
falseValue: '0',
value: !!column.enableSearch ? '1' : '0',
badge: { badge: {
offset: [-10, 5], offset: [-10, 5],
visibleOn: `${ visibleOn: `${
column.toggable && !column.toggled && column.enableSearch column.toggable && !column.toggled && column.enableSearch
}` }`
}, },
onChange: (value: boolean) => onChange: (value: '1' | '0') =>
onItemToggleExpanded?.(column, value) onItemToggleExpanded?.(column, value === '1' ? true : false)
}; };
}) })
}, },
@ -216,7 +225,7 @@ export default observer(
query: any; query: any;
}) => { }) => {
const onItemToggleExpanded = React.useCallback( const onItemToggleExpanded = React.useCallback(
(column: IColumn, value: any) => { (column: IColumn, value: boolean) => {
column.setEnableSearch(value); column.setEnableSearch(value);
store.setSearchFormExpanded(true); store.setSearchFormExpanded(true);
}, },