From 33779d3da28f336fc439fdf68640a67ad0dd9209 Mon Sep 17 00:00:00 2001 From: YANG QIA <2013xile@gmail.com> Date: Fri, 15 Dec 2023 11:33:08 +0800 Subject: [PATCH] fix: fix T-2749 (#3194) --- .../src/client/filter/FilterItemDesigner.tsx | 20 +++++++++++++--- .../client/filter/FilterItemInitializers.tsx | 18 ++++++++++++-- .../src/client/hooks/filter.ts | 5 ++-- .../src/client/utils.ts | 24 +++++++++++++++++++ 4 files changed, 60 insertions(+), 7 deletions(-) diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx index 597a9062c..ab53de442 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemDesigner.tsx @@ -12,6 +12,7 @@ import { useCompile, useDesignable, SchemaSettingsSelectItem, + CollectionFieldOptions, } from '@nocobase/client'; import { useChartsTranslation } from '../locale'; import { Schema, useField, useFieldSchema } from '@formily/react'; @@ -22,6 +23,7 @@ import { getPropsSchemaByComponent, setDefaultValue } from './utils'; import { ChartFilterVariableInput } from './FilterVariableInput'; import { useChartFilter, useCollectionJoinFieldTitle } from '../hooks'; import { Typography } from 'antd'; +import { getFormulaInterface } from '../utils'; const { Text } = Typography; const EditTitle = () => { @@ -76,9 +78,19 @@ const EditOperator = () => { const { dn } = useDesignable(); const { setField } = useContext(ChartFilterContext); const { getInterface, getCollectionJoinField } = useCollectionManager(); + + const getOperators = (props: CollectionFieldOptions) => { + let fieldInterface = props?.interface; + if (fieldInterface === 'formula') { + fieldInterface = getFormulaInterface(props.dataType) || props.dataType; + } + const interfaceConfig = getInterface(fieldInterface); + const operatorList = interfaceConfig?.filterable?.operators || []; + return { operatorList, interfaceConfig }; + }; + let props = getCollectionJoinField(fieldName); - let interfaceConfig = getInterface(props?.interface); - let operatorList = interfaceConfig?.filterable?.operators || []; + let { operatorList, interfaceConfig } = getOperators(props); if (!operatorList.length) { const names = fieldName.split('.'); const name = names.pop(); @@ -86,7 +98,9 @@ const EditOperator = () => { if (!props) { return null; } - interfaceConfig = getInterface(props.interface); + const res = getOperators(props); + operatorList = res.operatorList; + interfaceConfig = res.interfaceConfig; if (!interfaceConfig) { return null; } diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx index f4381f6c5..eacbe22f5 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx @@ -20,11 +20,13 @@ import { useMemoizedFn } from 'ahooks'; import { FormLayout, FormItem } from '@formily/antd-v5'; import { uid } from '@formily/shared'; import { useChartData, useChartFilter, useChartFilterSourceFields, useFieldComponents } from '../hooks/filter'; -import { Alert } from 'antd'; +import { Alert, Typography } from 'antd'; import { getPropsSchemaByComponent } from './utils'; import { Field, onFieldValueChange } from '@formily/core'; import { css, cx } from '@emotion/css'; import { ConfigProvider } from 'antd'; +import { ErrorBoundary } from 'react-error-boundary'; +const { Paragraph, Text } = Typography; const FieldComponentProps: React.FC = observer((props) => { const form = useForm(); @@ -32,6 +34,16 @@ const FieldComponentProps: React.FC = observer((props) => { return schema ? : null; }); +const ErrorFallback = ({ error }) => { + return ( + + + {error.message} + + + ); +}; + export const ChartFilterFormItem = observer( (props: any) => { const field = useField(); @@ -68,7 +80,9 @@ export const ChartFilterFormItem = observer( return ( - + console.log(err)} FallbackComponent={ErrorFallback}> + + ); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts index f4717c685..e75c5199d 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts @@ -8,7 +8,7 @@ import { ChartFilterContext } from '../filter/FilterProvider'; import { useMemoizedFn } from 'ahooks'; import { parse } from '@nocobase/utils/client'; import lodash from 'lodash'; -import { getValuesByPath } from '../utils'; +import { getFormulaComponent, getValuesByPath } from '../utils'; import deepmerge from 'deepmerge'; export const useCustomFieldInterface = () => { @@ -88,9 +88,10 @@ export const useChartFilter = () => { }, }; if (field.interface === 'formula') { + const component = getFormulaComponent(field.dataType) || 'Input'; schema = { ...schema, - 'x-component': 'InputNumber', + 'x-component': component, }; } if (['oho', 'o2m'].includes(field.interface)) { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts index 0bdc9c8da..3e5abb5b6 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/utils.ts @@ -133,3 +133,27 @@ export const getValuesByPath = (values: any, path: string) => { } return result; }; + +export const getFormulaComponent = (type: string) => { + return { + boolean: 'Checkbox', + integer: 'InputNumber', + bigInt: 'InputNumber', + double: 'InputNumber', + decimal: 'InputNumber', + date: 'DatePicker', + string: 'Input', + }[type]; +}; + +export const getFormulaInterface = (type: string) => { + return { + boolean: 'boolean', + integer: 'integer', + bigInt: 'integer', + double: 'number', + decimal: 'number', + date: 'datetime', + string: 'input', + }[type]; +};