feat(editor): 数据源事件配置

packages/editor/src/fields/EventSelect.vue

@@ -52,6 +52,7 @@ import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
@@ -75,11 +76,22 @@ const eventNameConfig = computed(() => {
     text: '事件',
     type: 'select',
     labelWidth: '40px',
-    options: (mForm: FormState, { formValue }: any) =>
-      services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+    options: (mForm: FormState, { formValue }: any) => {
+      let events: EventOption[] = [];
+
+      if (!services) return events;
+
+      if (props.config.src === 'component') {
+        events = services.eventsService.getEvent(formValue.type);
+      } else if (props.config.src === 'datasource') {
+        events = services.dataSourceService.getFormEvent(formValue.type);
+      }
+
+      return events.map((option) => ({
         text: option.label,
         value: option.value,
-      })),
+      }));
+    },
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
 });

packages/editor/src/services/dataSource.ts

@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
@@ -16,6 +17,7 @@ interface State {
   editable: boolean;
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
+  events: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -26,6 +28,7 @@ class DataSource extends BaseService {
     editable: true,
     configs: {},
     values: {},
+    events: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -52,6 +55,14 @@ class DataSource extends BaseService {
     this.get('values')[type] = value;
   }
 
+  public getFormEvent(type = 'base') {
+    return this.get('events')[type] || [];
+  }
+
+  public setFormEvent(type: string, value: EventOption[] = []) {
+    this.get('events')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

packages/editor/src/type.ts

@@ -418,6 +418,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
   name: string;
   type: 'event-select';
+  src: 'datasource' | 'component';
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */

packages/editor/src/utils/data-source/index.ts

@@ -29,6 +29,18 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '事件配置',
+    display: false,
+    items: [
+      {
+        name: 'events',
+        src: 'datasource',
+        type: 'event-select',
+      },
+    ],
+  },
 ];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {

packages/editor/src/utils/props.ts

@@ -205,6 +205,7 @@ export const eventTabConfig: TabPaneConfig = {
   items: [
     {
       name: 'events',
+      src: 'component',
       type: 'event-select',
     },
   ],