fix(editor): 在组件属性配置表单中编辑数据源方法无法保存问题

packages/editor/src/Editor.vue

@@ -110,6 +110,8 @@
 </template>
 
 <script lang="ts" setup>
+import { EventEmitter } from 'events';
+
 import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
@@ -134,7 +136,7 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -203,5 +205,7 @@ provide('services', services);
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
 
+provide<EventBus>('eventBus', new EventEmitter());
+
 defineExpose(services);
 </script>

packages/editor/src/fields/CodeSelectCol.vue

@@ -2,13 +2,13 @@
   <div class="m-fields-code-select-col">
     <div class="code-select-container">
       <!-- 代码块下拉框 -->
-      <m-form-container
+      <MContainer
         class="select"
         :config="selectConfig"
         :model="model"
         :size="size"
         @change="onParamsChangeHandler"
-      ></m-form-container>
+      ></MContainer>
       <!-- 查看/编辑按钮 -->
       <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
@@ -23,14 +23,6 @@
       :params-config="paramsConfig"
       @change="onParamsChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +31,12 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
-import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
+import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsCodeSelectCol',
@@ -54,6 +44,7 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
@@ -127,5 +118,7 @@ const onParamsChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
+const editCode = (id: string) => {
+  eventBus?.emit('edit-code', id);
+};
 </script>

packages/editor/src/fields/DataSourceFieldSelect.vue

@@ -29,14 +29,6 @@
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
-
-    <DataSourceConfigPanel
-      ref="editDialog"
-      :disabled="!editable"
-      :values="dataSourceValues"
-      :title="dialogTitle"
-      @submit="submitDataSourceHandler"
-    ></DataSourceConfigPanel>
   </div>
 </template>
 
@@ -51,15 +43,14 @@ import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceFieldSelect',
 });
 
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
@@ -181,7 +172,7 @@ const onChangeHandler = (value: any) => {
   emit('change', value);
 };
 
-const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
-  services?.dataSourceService,
-);
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
-      <m-form-container
+      <MContainer
         class="select"
         :config="cascaderConfig"
         :model="model"
+        :size="size"
         @change="onChangeHandler"
-      ></m-form-container>
+      ></MContainer>
       <Icon
         v-if="model[name] && isCustomMethod"
         class="icon"
@@ -24,14 +25,6 @@
       :params-config="paramsConfig"
       @change="onChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +32,12 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
-import type { CodeBlockContent, Id } from '@tmagic/schema';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
@@ -54,6 +45,8 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+
 const emit = defineEmits(['change']);
 
 const dataSourceService = services?.dataSourceService;
@@ -139,21 +132,13 @@ const onChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
-
 const editCodeHandler = () => {
-  const [id, name] = props.model[props.name];
+  const [id] = props.model[props.name];
 
   const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 
-  editCode(dataSource, name);
-
-  setParamsConfig([id, name]);
-};
-
-const submitCodeBlockHandler = (value: CodeBlockContent) => {
-  submitCode(value);
+  eventBus?.emit('edit-data-source', id);
 };
 </script>

packages/editor/src/fields/EventSelect.vue

@@ -15,7 +15,7 @@
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
         >添加事件</TMagicButton
       >
-      <m-form-panel
+      <MPanel
         v-for="(cardItem, index) in model[name]"
         :key="index"
         :disabled="disabled"
@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <m-form-container
+          <MContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></m-form-container>
+          ></MContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -43,7 +43,7 @@
             @click="removeEvent(index)"
           ></TMagicButton>
         </template>
-      </m-form-panel>
+      </MPanel>
     </div>
   </div>
 </template>
@@ -55,7 +55,8 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer, MPanel } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
@@ -227,7 +228,8 @@ const tableConfig = computed(() => ({
 }));
 
 // 组件动作组表单配置
-const actionsConfig = computed(() => ({
+const actionsConfig = computed<PanelConfig>(() => ({
+  type: 'panel',
   items: [
     {
       type: 'group-list',

packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -36,7 +36,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -50,6 +50,7 @@ defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 
+const eventBus = inject<EventBus>('eventBus');
 const { codeBlockService } = inject<Services>('services') || {};
 
 const editable = computed(() => codeBlockService?.getEditStatus());
@@ -62,4 +63,8 @@ const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
 };
+
+eventBus?.on('edit-code', (id: string) => {
+  editCode(id);
+});
 </script>

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -46,7 +46,7 @@ import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import type { DataSourceListSlots, Services } from '@editor/type';
+import type { DataSourceListSlots, EventBus, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -57,6 +57,7 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+const eventBus = inject<EventBus>('eventBus');
 const { dataSourceService } = inject<Services>('services') || {};
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
@@ -98,4 +99,8 @@ const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 const filterTextChangeHandler = (val: string) => {
   dataSourceList.value?.filter(val);
 };
+
+eventBus?.on('edit-data-source', (id: string) => {
+  editHandler(id);
+});
 </script>

packages/editor/src/type.ts

@@ -17,6 +17,7 @@
  */
 
 import type { Component } from 'vue';
+import type EventEmitter from 'events';
 import type { PascalCasedProperties } from 'type-fest';
 
 import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
@@ -714,3 +715,16 @@ export type SyncHookPlugin<
   C extends Record<T[number], (...args: any) => any>,
 > = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> &
   AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;
+
+export interface EventBusEvent {
+  'edit-data-source': [id: string];
+  'edit-code': [id: string];
+}
+
+export interface EventBus extends EventEmitter {
+  on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void,
+  ): this;
+  emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
+}