feat(core,editor,form): 页面片容器支持配置容器内组件的事件

packages/editor/src/fields/EventSelect.vue

@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <MContainer
+          <MFormContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></MContainer>
+          ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -55,13 +55,13 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, FieldProps, FormState, PanelConfig } from '@tmagic/form';
-import { MContainer, MPanel } from '@tmagic/form';
-import { ActionType } from '@tmagic/schema';
+import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields } from '@editor/utils';
+import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -80,13 +80,20 @@ const codeBlockService = services?.codeBlockService;
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
-  const fieldType = props.config.src === 'component' ? 'select' : 'cascader';
-  const defaultEventNameConfig = {
+  const defaultEventNameConfig: ChildConfig = {
     name: 'name',
     text: '事件',
-    type: fieldType,
+    type: (mForm, { formValue }: any) => {
+      if (
+        props.config.src !== 'component' ||
+        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
+      ) {
+        return 'cascader';
+      }
+      return 'select';
+    },
     labelWidth: '40px',
-    checkStrictly: true,
+    checkStrictly: () => props.config.src !== 'component',
     valueSeparator: '.',
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] | CascaderOption[] = [];
@@ -95,11 +102,39 @@ const eventNameConfig = computed(() => {
 
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
+
+        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+          if (pageFragment) {
+            events = [
+              {
+                label: pageFragment.name || '迭代器容器',
+                value: pageFragment.id,
+                children: events,
+              },
+            ];
+            pageFragment.items.forEach((node) => {
+              traverseNode<MComponent | MContainer>(node, (node) => {
+                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
+
+                events.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeEvents,
+                });
+              });
+            });
+
+            return events;
+          }
+        }
+
         return events.map((option) => ({
           text: option.label,
           value: option.value,
         }));
       }
+
       if (props.config.src === 'datasource') {
         // 从数据源类型中获取到相关事件
         events = dataSourceService.getFormEvent(formValue.type);
@@ -163,24 +198,63 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    onChange: (MForm: FormState, v: string, { model }: any) => {
+      model.method = '';
+      return v;
+    },
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
 });
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig = {
+  const defaultCompActionConfig: ChildConfig = {
     name: 'method',
     text: '动作',
-    type: 'select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    type: (mForm, { model }: any) => {
+      const to = editorService?.getNodeById(model.to);
+
+      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
+        return 'cascader';
+      }
+
+      return 'select';
+    },
+    checkStrictly: () => props.config.src !== 'component',
+    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
       const node = editorService?.getNodeById(model.to);
       if (!node?.type) return [];
 
-      return eventsService?.getMethod(node.type).map((option: any) => ({
-        text: option.label,
-        value: option.value,
+      let methods: EventOption[] | CascaderOption[] = [];
+
+      methods = eventsService?.getMethod(node.type) || [];
+
+      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+        if (pageFragment) {
+          methods = [];
+          pageFragment.items.forEach((node: MComponent | MContainer) => {
+            traverseNode<MComponent | MContainer>(node, (node) => {
+              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
+
+              if (nodeMethods.length) {
+                methods.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeMethods,
+                });
+              }
+            });
+          });
+
+          return methods;
+        }
+      }
+
+      return methods.map((method) => ({
+        text: method.label,
+        value: method.value,
       }));
     },
   };