From 588ec68b2124cd997af1bae3ad7c8e9580959ad8 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Sat, 7 Oct 2023 20:10:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BA=8B=E4=BB=B6=E5=85=B3?= =?UTF-8?q?=E8=81=94=E6=95=B0=E6=8D=AE=E6=BA=90=E6=96=B9=E6=B3=95=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=A2=84=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/editorProps.ts | 1 + .../src/fields/DataSourceMethodSelect.vue | 39 ++++++++++++------- packages/editor/src/fields/EventSelect.vue | 29 ++++++++------ packages/editor/src/initService.ts | 24 ++++++++++++ packages/editor/src/services/dataSource.ts | 10 +++++ playground/src/pages/Editor.vue | 7 ++++ 6 files changed, 84 insertions(+), 26 deletions(-) diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts index a238fb6a..67b098ef 100644 --- a/packages/editor/src/editorProps.ts +++ b/packages/editor/src/editorProps.ts @@ -50,6 +50,7 @@ export interface EditorProps { datasourceValues?: Record>; /** 数据源的属性配置表单的dsl */ datasourceConfigs?: Record; + datasourceEventMethodList?: Record; /** 画布中组件选中框的移动范围 */ moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions); /** 编辑器初始化时默认选中的组件ID */ diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue index 6fca5209..aea26abc 100644 --- a/packages/editor/src/fields/DataSourceMethodSelect.vue +++ b/packages/editor/src/fields/DataSourceMethodSelect.vue @@ -50,11 +50,13 @@ defineOptions({ const services = inject('services'); const emit = defineEmits(['change']); +const dataSourceService = services?.dataSourceService; + const props = withDefaults(defineProps>(), { 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; diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index b17375d3..929ce222 100644 --- a/packages/editor/src/fields/EventSelect.vue +++ b/packages/editor/src/fields/EventSelect.vue @@ -69,6 +69,11 @@ const emit = defineEmits(['change']); const services = inject('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 }) => 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, })); diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts index b0516b30..0fb08827 100644 --- a/packages/editor/src/initService.ts +++ b/packages/editor/src/initService.ts @@ -123,6 +123,30 @@ export const initServiceState = ( }, ); + watch( + () => props.datasourceEventMethodList, + (eventMethodList) => { + const eventsList: Record = {}; + const methodsList: Record = {}; + + 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), diff --git a/packages/editor/src/services/dataSource.ts b/packages/editor/src/services/dataSource.ts index c1107127..3adbc197 100644 --- a/packages/editor/src/services/dataSource.ts +++ b/packages/editor/src/services/dataSource.ts @@ -18,6 +18,7 @@ interface State { configs: Record; values: Record>; events: Record; + methods: Record; } type StateKey = keyof State; @@ -29,6 +30,7 @@ class DataSource extends BaseService { configs: {}, values: {}, events: {}, + methods: {}, }); public set(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, diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue index db94e241..2a2ab567 100644 --- a/playground/src/pages/Editor.vue +++ b/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>({}); const propsConfigs = ref>({}); const eventMethodList = ref>({}); +const datasourceEventMethodList = ref>({ + base: { + events: [], + methods: [], + }, +}); const datasourceConfigs = ref>({}); const datasourceValues = ref>({}); const stageRect = ref({