From b1e79c1e05a164c057a53ac9d895ae744bd1cb5a Mon Sep 17 00:00:00 2001 From: roymondchen Date: Fri, 12 Apr 2024 20:11:34 +0800 Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E5=9C=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95=E4=B8=AD?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=95=B0=E6=8D=AE=E6=BA=90=E6=96=B9=E6=B3=95?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E4=BF=9D=E5=AD=98=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/Editor.vue | 6 +++- packages/editor/src/fields/CodeSelectCol.vue | 23 +++++------- .../src/fields/DataSourceFieldSelect.vue | 19 +++------- .../src/fields/DataSourceMethodSelect.vue | 35 ++++++------------- packages/editor/src/fields/EventSelect.vue | 14 ++++---- .../sidebar/code-block/CodeBlockListPanel.vue | 7 +++- .../data-source/DataSourceListPanel.vue | 7 +++- packages/editor/src/type.ts | 14 ++++++++ 8 files changed, 62 insertions(+), 63 deletions(-) diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue index ac4f975e..2d28641e 100644 --- a/packages/editor/src/Editor.vue +++ b/packages/editor/src/Editor.vue @@ -110,6 +110,8 @@ diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue index 04c52bac..67cb5397 100644 --- a/packages/editor/src/fields/CodeSelectCol.vue +++ b/packages/editor/src/fields/CodeSelectCol.vue @@ -2,13 +2,13 @@
- + >
@@ -23,14 +23,6 @@ :params-config="paramsConfig" @change="onParamsChangeHandler" > - -
@@ -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('mForm'); const services = inject('services'); +const eventBus = inject('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); +}; diff --git a/packages/editor/src/fields/DataSourceFieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect.vue index ed71a196..d47f86d3 100644 --- a/packages/editor/src/fields/DataSourceFieldSelect.vue +++ b/packages/editor/src/fields/DataSourceFieldSelect.vue @@ -29,14 +29,6 @@ @click="showDataSourceFieldSelect = !showDataSourceFieldSelect" > - - @@ -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'); +const eventBus = inject('eventBus'); const emit = defineEmits(['change']); const props = withDefaults(defineProps>(), { @@ -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); +}; diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue index d4fe7f80..f0b6d174 100644 --- a/packages/editor/src/fields/DataSourceMethodSelect.vue +++ b/packages/editor/src/fields/DataSourceMethodSelect.vue @@ -1,12 +1,13 @@ @@ -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('mForm'); const services = inject('services'); +const eventBus = inject('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); }; diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index 0ea59f78..c61f2129 100644 --- a/packages/editor/src/fields/EventSelect.vue +++ b/packages/editor/src/fields/EventSelect.vue @@ -15,7 +15,7 @@ 添加事件 - - + @@ -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(() => ({ + type: 'panel', items: [ { type: 'group-list', diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue index 6303d364..59ebb1c9 100644 --- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue +++ b/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'); const { codeBlockService } = inject('services') || {}; const editable = computed(() => codeBlockService?.getEditStatus()); @@ -62,4 +63,8 @@ const codeBlockList = ref>(); const filterTextChangeHandler = (val: string) => { codeBlockList.value?.filter(val); }; + +eventBus?.on('edit-code', (id: string) => { + editCode(id); +}); diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue index 1b67035f..49c86167 100644 --- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue +++ b/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'); const { dataSourceService } = inject('services') || {}; const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = @@ -98,4 +99,8 @@ const dataSourceList = ref>(); const filterTextChangeHandler = (val: string) => { dataSourceList.value?.filter(val); }; + +eventBus?.on('edit-data-source', (id: string) => { + editHandler(id); +}); diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 15e5de1c..c045301a 100644 --- a/packages/editor/src/type.ts +++ b/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 any>, > = AddPrefixToObject>, 'before'> & AddPrefixToObject>, 'after'>; + +export interface EventBusEvent { + 'edit-data-source': [id: string]; + 'edit-code': [id: string]; +} + +export interface EventBus extends EventEmitter { + on( + eventName: Name, + listener: (...args: Param) => void, + ): this; + emit(eventName: Name, ...args: Param): boolean; +}