Merge pull request #8865 from igrowp/feat-sub-editor-variables

feat: 子编辑器公式输入框变量中加入宿主组件上下文变量的声明

packages/amis-editor-core/scss/control/_formItem-control.scss

@@ -15,6 +15,10 @@
       line-height: 32px;
       margin: 0;
       padding-top: 0;
+
+      > span {
+        display: inline;
+      }
     }
   }
 

packages/amis-editor-core/src/component/SubEditor.tsx

@@ -182,9 +182,10 @@ export class SubEditor extends React.Component<SubEditorProps> {
                       }
                       return;
                     }}
-                    getHostNodeDataSchema={() =>
-                      manager.getContextSchemas(manager.store.activeId)
-                    }
+                    getHostNodeDataSchema={async () => {
+                      await manager.getContextSchemas(manager.store.activeId);
+                      return manager.dataSchema;
+                    }}
                     getAvaiableContextFields={node =>
                       manager.getAvailableContextFields(node)
                     }

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

@@ -1206,10 +1206,9 @@ export function style2ThemeCss(data: any) {
 export async function resolveVariablesFromScope(node: any, manager: any) {
   await manager?.getContextSchemas(node);
   // 获取当前组件内相关变量，如表单、增删改查
-  const dataPropsAsOptions: VariableItem[] = updateComponentContext(
-    (await manager?.dataSchema?.getDataPropsAsOptions()) ?? []
-  );
 
+  let variableOptions =
+    (await manager?.dataSchema?.getDataPropsAsOptions()) ?? [];
   // 子编辑器内读取的host节点自定义变量，非数据域方式，如listSelect的选项值
   let hostNodeVaraibles = [];
   if (manager?.store?.isSubEditor) {
@@ -1217,7 +1216,40 @@ export async function resolveVariablesFromScope(node: any, manager: any) {
       manager.config?.hostNode?.info?.getSubEditorVariable?.(
         manager.config?.hostNode.schema
       ) || [];
+
+    // 获取父编辑器内组件上下文变量，与当前自编辑器进行拼接
+    const hostNodeDataSchema = await manager.config.getHostNodeDataSchema();
+    const hostContextVariables = (
+      hostNodeDataSchema?.getDataPropsAsOptions() || []
+    )
+      .filter((item: any) => item.label === '组件上下文')
+      .reduce((arr: any, item: any) => {
+        arr.push(...(item.children || []));
+        return arr;
+      }, []);
+    if (hostContextVariables?.length) {
+      let hasContextVariables = false;
+      variableOptions = variableOptions.map((item: any) => {
+        if (item.label === '组件上下文' && !hasContextVariables) {
+          hasContextVariables = true;
+          item.children = item.children.concat(hostContextVariables);
+        }
+        return item;
+      });
+
+      if (!hasContextVariables) {
+        variableOptions = [
+          {
+            label: '组件上下文',
+            children: hostContextVariables
+          },
+          ...variableOptions
+        ];
+      }
+    }
   }
+  const dataPropsAsOptions: VariableItem[] =
+    updateComponentContext(variableOptions);
 
   const variables: VariableItem[] =
     manager?.variableManager?.getVariableFormulaOptions() || [];

packages/amis-editor/src/plugin/Form/ListSelect.tsx

@@ -59,6 +59,8 @@ export class ListControlPlugin extends BasePlugin {
 
   panelTitle = '列表选择';
 
+  panelJustify = true;
+
   // 事件定义
   events: RendererPluginEvent[] = [
     {
@@ -149,7 +151,6 @@ export class ListControlPlugin extends BasePlugin {
                 ...(schema || {}),
                 itemSchema: null
               }),
-              mode: 'vertical',
               useSelectMode: true, // 改用 Select 设置模式
               visibleOn: 'this.options && this.options.length > 0'
             })

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

@@ -113,7 +113,7 @@ export default class ExpressionFormulaControl extends React.Component<
   handleClearExpression(e: React.MouseEvent<HTMLElement>) {
     e.stopPropagation();
     e.preventDefault();
-    this.props?.onChange?.('');
+    this.props?.onChange?.(undefined);
   }
 
   @autobind

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

@@ -170,6 +170,7 @@ setSchemaTpl('formItemInline', {
   label: '表单项内联',
   name: 'inline',
   visibleOn: 'data.mode != "inline"',
+  inputClassName: 'is-inline',
   pipeIn: defaultValue(false)
   // onChange: (value:any, origin:any, item:any, form:any) => form.getValueByName('size') === "full" && form.setValueByName('')
 });