feat(editor): 事件关联数据源方法支持预置

packages/editor/src/editorProps.ts

@@ -50,6 +50,7 @@ export interface EditorProps {
   datasourceValues?: Record<string, Partial<DataSourceSchema>>;
   /** 数据源的属性配置表单的dsl */
   datasourceConfigs?: Record<string, FormConfig>;
+  datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
   /** 画布中组件选中框的移动范围 */
   moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   /** 编辑器初始化时默认选中的组件ID */

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -50,11 +50,13 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
+const dataSourceService = services?.dataSourceService;
+
 const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
   disabled: false,
 });
 
-const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+const dataSources = computed(() => dataSourceService?.get('dataSources'));
 
 const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
   if (!dataSourceId) return [];
@@ -85,28 +87,35 @@ const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) =>
   }
 };
 
-const cascaderConfig = {
+const methodsOptions = computed(
+  () =>
+    dataSources.value
+      ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: [
+          ...(dataSourceService?.getFormMethod(ds.type) || []),
+          ...(ds.methods || []).map((method) => ({
+            label: method.name,
+            value: method.name,
+          })),
+        ],
+      })) || [],
+);
+
+const cascaderConfig = computed(() => ({
   type: 'cascader',
   text: '数据源方法',
   name: props.name,
   labelWidth: '80px',
-  options: () =>
-    dataSources.value
-      ?.filter((ds) => ds.methods?.length)
-      ?.map((ds) => ({
-        label: ds.title || ds.id,
-        value: ds.id,
-        children: ds.methods?.map((method) => ({
-          label: method.name,
-          value: method.name,
-        })),
-      })) || [],
+  options: methodsOptions.value,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);
 
     return dataSourceMethod;
   },
-};
+}));
 
 /**
  * 参数值修改更新
@@ -121,7 +130,7 @@ const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMetho
 const editCodeHandler = () => {
   const [id, name] = props.model[props.name];
 
-  const dataSource = services?.dataSourceService.getDataSourceById(id);
+  const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 

packages/editor/src/fields/EventSelect.vue

@@ -69,6 +69,11 @@ const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
 
+const editorService = services?.editorService;
+const dataSourceService = services?.dataSourceService;
+const eventsService = services?.eventsService;
+const codeBlockService = services?.codeBlockService;
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
@@ -79,12 +84,12 @@ const eventNameConfig = computed(() => {
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] = [];
 
-      if (!services) return events;
+      if (!eventsService || !dataSourceService) return events;
 
       if (props.config.src === 'component') {
-        events = services.eventsService.getEvent(formValue.type);
+        events = eventsService.getEvent(formValue.type);
       } else if (props.config.src === 'datasource') {
-        events = services.dataSourceService.getFormEvent(formValue.type);
+        events = dataSourceService.getFormEvent(formValue.type);
       }
 
       return events.map((option) => ({
@@ -113,13 +118,15 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
-        disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
+        disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
       {
         text: '数据源',
         label: '数据源',
-        disabled: !services?.dataSourceService.get('dataSources')?.filter((ds) => ds.methods?.length).length,
+        disabled: !dataSourceService
+          ?.get('dataSources')
+          ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
         value: ActionType.DATA_SOURCE,
       },
     ],
@@ -148,10 +155,10 @@ const compActionConfig = computed(() => {
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
-      const node = services?.editorService.getNodeById(model.to);
+      const node = editorService?.getNodeById(model.to);
       if (!node?.type) return [];
 
-      return services?.eventsService.getMethod(node.type).map((option: any) => ({
+      return eventsService?.getMethod(node.type).map((option: any) => ({
         text: option.label,
         value: option.value,
       }));
@@ -166,7 +173,7 @@ const codeActionConfig = computed(() => {
     type: 'code-select-col',
     labelWidth: 0,
     name: 'codeId',
-    disabled: () => !services?.codeBlockService.getEditStatus(),
+    disabled: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -193,7 +200,7 @@ const tableConfig = computed(() => ({
       label: '事件名',
       type: eventNameConfig.value.type,
       options: (mForm: FormState, { formValue }: any) =>
-        services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+        eventsService?.getEvent(formValue.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         })),
@@ -208,10 +215,10 @@ const tableConfig = computed(() => ({
       label: '动作',
       type: compActionConfig.value.type,
       options: (mForm: FormState, { model }: any) => {
-        const node = services?.editorService.getNodeById(model.to);
+        const node = editorService?.getNodeById(model.to);
         if (!node?.type) return [];
 
-        return services?.eventsService.getMethod(node.type).map((option: any) => ({
+        return eventsService?.getMethod(node.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         }));

packages/editor/src/initService.ts

@@ -123,6 +123,30 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.datasourceEventMethodList,
+    (eventMethodList) => {
+      const eventsList: Record<string, EventOption[]> = {};
+      const methodsList: Record<string, EventOption[]> = {};
+
+      eventMethodList &&
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+      Object.entries(eventsList).forEach(([key, value]) => {
+        dataSourceService.setFormEvent(key, value);
+      });
+      Object.entries(methodsList).forEach(([key, value]) => {
+        dataSourceService.setFormMethod(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.defaultSelected,
     (defaultSelected) => defaultSelected && editorService.select(defaultSelected),

packages/editor/src/services/dataSource.ts

@@ -18,6 +18,7 @@ interface State {
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
   events: Record<string, EventOption[]>;
+  methods: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -29,6 +30,7 @@ class DataSource extends BaseService {
     configs: {},
     values: {},
     events: {},
+    methods: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -63,6 +65,14 @@ class DataSource extends BaseService {
     this.get('events')[type] = value;
   }
 
+  public getFormMethod(type = 'base') {
+    return this.get('methods')[type] || [];
+  }
+
+  public setFormMethod(type: string, value: EventOption[] = []) {
+    this.get('methods')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

playground/src/pages/Editor.vue

@@ -8,6 +8,7 @@
       :props-configs="propsConfigs"
       :props-values="propsValues"
       :event-method-list="eventMethodList"
+      :datasource-event-method-list="datasourceEventMethodList"
       :datasource-configs="datasourceConfigs"
       :datasource-values="datasourceValues"
       :component-group-list="componentGroupList"
@@ -73,6 +74,12 @@ const defaultSelected = ref(dsl.items[0].id);
 const propsValues = ref<Record<string, any>>({});
 const propsConfigs = ref<Record<string, any>>({});
 const eventMethodList = ref<Record<string, any>>({});
+const datasourceEventMethodList = ref<Record<string, any>>({
+  base: {
+    events: [],
+    methods: [],
+  },
+});
 const datasourceConfigs = ref<Record<string, any>>({});
 const datasourceValues = ref<Record<string, any>>({});
 const stageRect = ref({