Merge pull request #10426 from allenve/master

feat: 表达式变量展示优化

packages/amis-editor-core/src/util.ts

@@ -4,7 +4,12 @@
 import {hasIcon, mapObject, utils} from 'amis';
 import type {PlainObject, Schema, SchemaNode} from 'amis';
 import {getGlobalData} from 'amis-theme-editor-helper';
-import {mapTree, isExpression, resolveVariableAndFilter} from 'amis-core';
+import {
+  mapTree,
+  isExpression,
+  resolveVariableAndFilter,
+  filterTree
+} from 'amis-core';
 import type {VariableItem} from 'amis-ui';
 import {isObservable, reaction} from 'mobx';
 import DeepDiff, {Diff} from 'deep-diff';
@@ -1327,13 +1332,14 @@ export async function getVariables(that: any) {
   let variablesArr: any[] = [];
 
   const {variables, requiredDataPropsVariables} = that.props;
+  const selfName = that.props?.data?.name;
   if (!variables || requiredDataPropsVariables) {
     // 从amis数据域中取变量数据
     const {node, manager} = that.props.formProps || that.props;
     let vars = await resolveVariablesFromScope(node, manager);
     if (Array.isArray(vars)) {
       if (!that.isUnmount) {
-        variablesArr = filterVariablesOfScope(vars);
+        variablesArr = filterVariablesOfScope(vars, selfName);
       }
     }
   }
@@ -1362,7 +1368,7 @@ export async function getVariables(that: any) {
   return variablesArr;
 }
 
-function filterVariablesOfScope(options: any[]) {
+function filterVariablesOfScope(options: any[], selfName?: string) {
   const curOptions = options.find(i => i.label === '组件上下文');
   const arr = curOptions?.children || [];
   const variables = mapTree(arr, (item: any) => {
@@ -1380,10 +1386,20 @@ function filterVariablesOfScope(options: any[]) {
     }
     return item;
   });
-  return variables;
+  const finalVars = filterTree(variables, item => {
+    // 如果是子表 过滤掉当前自己 因为已经在当前层出现了
+    if (item.schemaType && item.type === 'array' && item.children) {
+      const idx = item.children.findIndex(
+        (i: any) => i.value === `${item.value}.${selfName}`
+      );
+      return !~idx;
+    }
+    return true;
+  });
+  return finalVars;
 }
 
-export async function getQuickVariables(that: any) {
+export async function getQuickVariables(that: any, filter?: Function) {
   const {node, manager} = that.props.formProps || that.props;
   const {quickVars, data} = that.props;
   const selfName = data?.name;
@@ -1391,8 +1407,7 @@ export async function getQuickVariables(that: any) {
   const options = await manager?.dataSchema?.getDataPropsAsOptions();
   if (Array.isArray(options)) {
     const curOptions = filterVariablesOfScope(options);
-    console.log(curOptions);
-    return resolveQuickVariables(curOptions, quickVars, selfName);
+    return resolveQuickVariables(curOptions, quickVars, selfName, filter);
   }
 
   return [];
@@ -1401,7 +1416,8 @@ export async function getQuickVariables(that: any) {
 export function resolveQuickVariables(
   options: any,
   quickVars?: VariableItem[],
-  selfName?: string
+  selfName?: string,
+  filter?: Function
 ) {
   if (!Array.isArray(options)) {
     return [];
@@ -1439,24 +1455,32 @@ export function resolveQuickVariables(
     finalVars.push(...variables);
   }
 
+  const filterVar = filter ? filter(finalVars) : finalVars;
+
   if (quickVars?.length) {
     const vars: VariableItem[] = [];
-    vars.push({
-      label: '快捷变量',
-      type: 'quickVars',
-      children: quickVars
-    });
-    if (finalVars.length) {
+
+    if (!filterVar.length) {
+      vars.push(...quickVars);
+    } else {
+      vars.push({
+        label: '快捷变量',
+        type: 'quickVars',
+        children: quickVars
+      });
+    }
+
+    if (filterVar.length) {
       vars.push({
         label: '表单变量',
-        children: finalVars
+        children: filterVar
       });
     }
 
     return vars;
   }
 
-  return finalVars;
+  return filterVar;
 }
 
 /**
@@ -1475,7 +1499,8 @@ export const updateComponentContext = (variables: any[]) => {
         label:
           index === 0
             ? `当前层${child.label ? '(' + child.label + ')' : ''}`
-            : `上${index}层${child.label ? '(' + child.label + ')' : ''}`
+            : child.title ||
+              `上${index}层${child.label ? '(' + child.label + ')' : ''}`
       }))
     });
   }

packages/amis-editor/src/renderer/FormulaControl.tsx

@@ -149,6 +149,11 @@ export interface FormulaControlProps extends FormControlProps {
    */
   customFormulaPicker?: React.FC<CustomFormulaPickerProps>;
 
+  /**
+   * 简化成员操作
+   */
+  simplifyMemberOprs?: boolean;
+
   /**
    * 是否支持快捷变量
    */
@@ -221,10 +226,13 @@ export default class FormulaControl extends React.Component<
     );
 
     const variables = await getVariables(this);
-    const quickVariables = await getQuickVariables(this);
+    const quickVariables = await getQuickVariables(
+      this,
+      this.filterQuickVariablesByType
+    );
     this.setState({
       variables,
-      quickVariables: this.filterQuickVariablesByType(quickVariables)
+      quickVariables
     });
   }
 
@@ -241,7 +249,9 @@ export default class FormulaControl extends React.Component<
 
   @autobind
   filterQuickVariablesByType(variables: any[]) {
-    const rendererSchema = this.getRendererSchemaFromProps();
+    const rendererSchema = FormulaControl.getRendererSchemaFromProps(
+      this.props
+    );
     const filterVars = variables
       .map(item => {
         if (item.children && item.type !== 'quickVars') {
@@ -270,8 +280,12 @@ export default class FormulaControl extends React.Component<
   @autobind
   handleEditorMounted(cm: any, editor: any) {
     const variables = this.state.variables;
+    const quickVariables = this.state.quickVariables;
     this.editorPlugin = new FormulaPlugin(editor, {
-      getProps: () => ({...this.props, variables}),
+      getProps: () => ({
+        ...this.props,
+        variables: [...variables, ...quickVariables]
+      }),
       showPopover: false,
       showClearIcon: true
     });
@@ -730,6 +744,7 @@ export default class FormulaControl extends React.Component<
       useExternalFormData = false,
       customFormulaPicker,
       clearable = true,
+      simplifyMemberOprs,
       render,
       ...rest
     } = this.props;
@@ -891,6 +906,7 @@ export default class FormulaControl extends React.Component<
             evalMode={true}
             onClose={this.closeFormulaPicker}
             onConfirm={this.handleConfirm}
+            simplifyMemberOprs={simplifyMemberOprs}
           />
         ) : null}
       </div>

packages/amis-editor/src/renderer/TplFormulaControl.tsx

@@ -51,6 +51,11 @@ export interface TplFormulaControlProps extends FormControlProps {
    */
   header: string;
 
+  /**
+   * 简化成员操作
+   */
+  simplifyMemberOprs?: boolean;
+
   /**
    * 支付支持快捷变量
    */
@@ -387,8 +392,12 @@ export class TplFormulaControl extends React.Component<
   @autobind
   handleEditorMounted(cm: any, editor: any) {
     const variables = this.state.variables;
+    const quickVariables = this.state.quickVariables;
     this.editorPlugin = new FormulaPlugin(editor, {
-      getProps: () => ({...this.props, variables}),
+      getProps: () => ({
+        ...this.props,
+        variables: [...variables, ...quickVariables]
+      }),
       onExpressionMouseEnter: this.onExpressionMouseEnter,
       showPopover: false,
       showClearIcon: true
@@ -558,6 +567,7 @@ export class TplFormulaControl extends React.Component<
       customFormulaPicker,
       clearable,
       quickVariables,
+      simplifyMemberOprs,
       ...rest
     } = this.props;
     const {

packages/amis-editor/src/renderer/textarea-formula/FormulaPicker.tsx

@@ -16,6 +16,7 @@ export interface FormulaPickerProps extends FormControlProps {
    * 弹窗顶部标题，默认为 "表达式"
    */
   header: string;
+  simplifyMemberOprs?: boolean;
 }
 
 export interface CustomFormulaPickerProps extends FormulaPickerProps {

packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx

@@ -118,6 +118,11 @@ export interface TextareaFormulaControlProps extends FormControlProps {
    */
   beforeFxConfirm?: (plugin: FormulaPlugin) => void;
 
+  /**
+   * 简化成员操作
+   */
+  simplifyMemberOprs?: boolean;
+
   /**
    * 支付支持快捷变量
    */
@@ -312,8 +317,12 @@ export class TextareaFormulaControl extends React.Component<
   @autobind
   handleEditorMounted(cm: any, editor: any) {
     const variables = this.state.variables || [];
+    const quickVariables = this.state.quickVariables || [];
     this.editorPlugin = new FormulaPlugin(editor, {
-      getProps: () => ({...this.props, variables}),
+      getProps: () => ({
+        ...this.props,
+        variables: [...variables, ...quickVariables]
+      }),
       onExpressionMouseEnter: this.onExpressionMouseEnter,
       customMarkText: this.props.customMarkText,
       onPluginInit: this.props.onPluginInit,

packages/amis-ui/src/components/formula/Editor.tsx

@@ -86,6 +86,8 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
   editorOptions?: any;
 
   enableRunPanel?: boolean;
+
+  simplifyMemberOprs?: boolean;
 }
 
 export interface FunctionsProps {
@@ -488,6 +490,7 @@ export class FormulaEditor extends React.Component<
       classPrefix,
       selfVariableName,
       evalMode,
+      simplifyMemberOprs,
       enableRunPanel = true
     } = this.props;
     const {
@@ -622,6 +625,7 @@ export class FormulaEditor extends React.Component<
                 data={variables!}
                 onSelect={this.handleVariableSelect}
                 selfVariableName={selfVariableName}
+                simplifyMemberOprs={simplifyMemberOprs}
               />
             </div>
           </div>