fix: ConditionBuilder使用公式编辑器切换类型异常问题

baidu · Dec 20, 2023 · a02a2e3 · a02a2e3
1 parent f210a93
commit a02a2e3
Show file tree

Hide file tree

Showing 4 changed files with 444 additions and 26 deletions.
diff --git a/packages/amis-ui/src/components/condition-builder/Item.tsx b/packages/amis-ui/src/components/condition-builder/Item.tsx
@@ -96,15 +96,20 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
 
   @autobind
   handleOperatorChange(op: OperatorType) {
-    const {fields, value, index, onChange} = this.props;
+    const {fields, value, index, onChange, formula} = this.props;
+    const useFormulaInput =
+      formula?.mode === 'input-group' && formula?.inputSettings;
     const leftFieldSchema: FieldSimple = findTree(
       fields,
       (i: FieldSimple) => i.name === (value?.left as ExpressionField)?.field
     ) as FieldSimple;
     const result = {
       ...value,
       op: op,
-      right: value.right ?? leftFieldSchema?.defaultValue
+      /** 使用公式编辑器模式时，因为不同条件下值格式不一致（比如select类型下包含和等于对应的multiple会变化），所以变化条件时需要清空right值 */
+      right: useFormulaInput
+        ? leftFieldSchema?.defaultValue
+        : value.right ?? leftFieldSchema?.defaultValue
     };
 
     onChange(result, index);

diff --git a/packages/amis-ui/src/components/formula/Editor.tsx b/packages/amis-ui/src/components/formula/Editor.tsx
@@ -191,6 +191,15 @@ export class FormulaEditor extends React.Component<
       return;
     }
 
+    if (typeof value !== 'string') {
+      try {
+        value = JSON.stringify(value);
+      } catch (error) {
+        console.error('[amis][formula] given value is not a string');
+        value = '';
+      }
+    }
+
     const varMap: {
       [propname: string]: string;
     } = {};

diff --git a/packages/amis-ui/src/components/formula/Input.tsx b/packages/amis-ui/src/components/formula/Input.tsx
@@ -9,7 +9,8 @@ import {
   LocaleProps,
   uncontrollable,
   findTree,
-  isExpression
+  isExpression,
+  isObject
 } from 'amis-core';
 
 import {FormulaEditor, VariableItem} from './Editor';
@@ -96,9 +97,35 @@ const FormulaInput: React.FC<FormulaInputProps> = props => {
       if (schemaType === 'boolean') {
         result = origin.value;
       } else if (schemaType === 'select') {
-        result = Array.isArray(origin)
-          ? origin.map(item => item.value)
-          : origin.value;
+        const {
+          joinValues,
+          extractValue,
+          delimiter,
+          multiple,
+          valueField = 'value'
+        } = inputSettings;
+
+        if (joinValues) {
+          if (multiple) {
+            result = Array.isArray(origin)
+              ? (origin.map(item => item[valueField]).join(delimiter) as string)
+              : origin
+              ? origin[valueField]
+              : '';
+          } else {
+            result = origin ? origin[valueField] : '';
+          }
+        } else if (extractValue) {
+          if (multiple) {
+            result = Array.isArray(origin)
+              ? origin.map(item => item[valueField])
+              : origin
+              ? [origin[valueField || 'value']]
+              : [];
+          } else {
+            result = origin ? origin[valueField] : '';
+          }
+        }
       }
       onChange?.(result);
     },
@@ -123,26 +150,58 @@ const FormulaInput: React.FC<FormulaInputProps> = props => {
             : cmptValue === item?.value;
         })
       : null;
+  let useVariable = !!(isExpression(cmptValue) || targetVariable);
+
+  /** 判断value是否为变量，如果是变量，使用ResultBox渲染 */
+  if (!useVariable) {
+    if (schemaType === 'number') {
+      useVariable = cmptValue != null && typeof cmptValue !== 'number';
+    } else if (['date', 'time', 'datetime'].includes(schemaType)) {
+      useVariable = !moment(cmptValue).isValid();
+    } else if (schemaType === 'select') {
+      const {
+        options,
+        joinValues,
+        extractValue,
+        delimiter,
+        multiple,
+        valueField = 'value'
+      } = inputSettings;
+      let selctedValue: any[] = [];
+
+      if (multiple) {
+        if (joinValues) {
+          selctedValue =
+            typeof cmptValue === 'string' ? cmptValue.split(delimiter) : [];
+        } else {
+          selctedValue = Array.isArray(cmptValue)
+            ? extractValue
+              ? cmptValue
+              : cmptValue.map(i => i?.[valueField])
+            : [];
+        }
+      } else {
+        if (joinValues) {
+          selctedValue = typeof cmptValue === 'string' ? [cmptValue] : [];
+        } else {
+          selctedValue = isObject(cmptValue) ? [cmptValue?.[valueField]] : [];
+        }
+      }
+
+      /** 选项类型清空后是空字符串， */
+      useVariable =
+        cmptValue &&
+        !(options ?? []).some((item: any) =>
+          selctedValue.includes(item?.value)
+        );
+    } else if (schemaType === 'boolean') {
+      useVariable = cmptValue != null && typeof cmptValue !== 'boolean';
+    }
+  }
 
-  if (
-    isExpression(cmptValue) ||
-    targetVariable ||
-    (schemaType === 'number' &&
-      cmptValue != null &&
-      typeof cmptValue !== 'number') ||
-    (['date', 'time', 'datetime'].includes(schemaType) &&
-      !moment(cmptValue).isValid()) ||
-    (schemaType === 'select' &&
-      cmptValue != null &&
-      !(inputSettings?.options ?? []).some(
-        (item: any) => item?.value === cmptValue
-      )) ||
-    (schemaType === 'boolean' &&
-      cmptValue != null &&
-      typeof cmptValue !== 'boolean')
-  ) {
+  if (useVariable) {
     const varName =
-      cmptValue && mixedMode
+      typeof cmptValue === 'string' && cmptValue && mixedMode
         ? cmptValue.replace(/^\$\{/, '').replace(/\}$/, '')
         : cmptValue;
     const resultValue = targetVariable?.value ?? varName;