amis-saas-6892 [Feature] 编辑器fx 交互优化

Change-Id: I7df9e9895136678df0eae3bb762c265c9a4a1e4e

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

@@ -598,7 +598,7 @@ export default class FormulaControl extends React.Component<
                 allowInput={false}
                 clearable={true}
                 value={value}
-                result={{html: '已配置'}}
+                result={{html: '已配置表达式'}}
                 itemRender={this.renderFormulaValue}
                 onChange={this.handleInputChange}
                 onResultChange={() => {

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

@@ -174,7 +174,12 @@ export class TextareaFormulaControl extends React.Component<
       isFullscreen
     } = this.state;
 
-    const variables = rest.variables || this.state.variables || [];
+    let variables = [];
+    if (typeof rest?.variables === 'function') {
+      variables = rest.variables();
+    } else {
+      variables = rest?.variables || this.state.variables || [];
+    }
 
     // 输入框样式
     let resultBoxStyle: {[key in string]: string} = {};

packages/amis-editor/src/tpl/common.tsx

@@ -4,11 +4,14 @@ import {
   defaultValue,
   isObject,
   tipedLabel,
-  DSField
+  DSField,
+  BaseEventContext,
+  BasePlugin
 } from 'amis-editor-core';
 import {remarkTpl} from '../component/BaseControl';
 import {SchemaObject} from 'amis/lib/Schema';
 import flatten from 'lodash/flatten';
+import _ from 'lodash';
 import {InputComponentName} from '../component/InputComponentName';
 import {FormulaDateType} from '../renderer/FormulaControl';
 import {VariableItem} from 'amis-ui/lib/components/formula/Editor';
@@ -490,6 +493,78 @@ setSchemaTpl('selectDateRangeType', {
   ]
 });
 
+setSchemaTpl(
+  'optionsMenuTpl',
+  (config: {
+    that: BasePlugin; // 当前组件 this 对象
+    context: BaseEventContext; // 事件上下文数据
+  }) => {
+    function getVariable() {
+      let rawVariables =
+        config.that.manager.dataSchema?.getDataPropsAsOptions();
+      let schema = config.context.schema;
+      window._ = _;
+
+      let children = [];
+
+      if (schema.labelField) {
+        children.push({
+          label: '选项文本',
+          value: schema.labelField,
+          tag: typeof schema.labelField
+        });
+      }
+
+      if (schema.valueField) {
+        children.push({
+          label: '选项值',
+          value: schema.valueField,
+          tag: typeof schema.valueField
+        });
+      }
+
+      if (schema.options) {
+        let optionItem = _.reduce(
+          schema.options,
+          function (result, item) {
+            console.log('item', item);
+            return {...result, ...item};
+          },
+          {}
+        );
+        delete optionItem?.$$id;
+        optionItem = _.omit(
+          optionItem,
+          _.map(children, item => item?.label)
+        );
+        let otherItem = _.map(_.keys(optionItem), item => ({
+          label:
+            item === 'label' ? '选项文本' : item === 'value' ? '选项值' : item,
+          value: item,
+          tag: typeof optionItem[item]
+        }));
+        children.push(...otherItem);
+      }
+
+      let variablesArr = [
+        {
+          label: '选项字段',
+          children
+        }
+      ];
+      return [...variablesArr, ...rawVariables];
+    }
+
+    return {
+      type: 'ae-textareaFormulaControl',
+      mode: 'normal',
+      label: tipedLabel('模板', '选项渲染模板，支持JSX，变量使用\\${xx}'),
+      name: 'menuTpl',
+      variables: getVariable
+    };
+  }
+);
+
 setSchemaTpl('menuTpl', {
   type: 'ae-formulaControl',
   label: tipedLabel('模板', '选项渲染模板，支持JSX，变量使用\\${xx}'),