fix: fix T-2749 (#3194)

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;
     }

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 ? <SchemaComponent schema={schema} {...props} /> : null;
 });
 
+const ErrorFallback = ({ error }) => {
+  return (
+    <Paragraph copyable>
+      <Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center', padding: '5px' }}>
+        {error.message}
+      </Text>
+    </Paragraph>
+  );
+};
+
 export const ChartFilterFormItem = observer(
   (props: any) => {
     const field = useField<Field>();
@@ -68,7 +80,9 @@ export const ChartFilterFormItem = observer(
     return (
       <ACLCollectionFieldProvider>
         <BlockItem className={'nb-form-item'}>
-          <FormItem className={className} {...props} extra={extra} />
+          <ErrorBoundary onError={(err) => console.log(err)} FallbackComponent={ErrorFallback}>
+            <FormItem className={className} {...props} extra={extra} />
+          </ErrorBoundary>
         </BlockItem>
       </ACLCollectionFieldProvider>
     );

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)) {

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];
+};