From 58b62d18e4874b5a1214bc0717ebe090e4fbf489 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Thu, 29 Feb 2024 16:47:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BB=A3=E7=A0=81=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=EF=BC=8C=E6=95=B0=E6=8D=AE=E6=BA=90=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E9=80=89=E6=8B=A9=E6=96=B0=E5=A2=9E=E4=B8=8D=E5=8F=AF?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=B8=8Edisabled?= =?UTF-8?q?=E5=8C=BA=E5=88=86=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/fields/CodeSelect.vue | 27 ++++++++++++++++--- packages/editor/src/fields/CodeSelectCol.vue | 9 ++++--- .../src/fields/DataSourceMethodSelect.vue | 27 +++++++++++++++---- packages/editor/src/fields/EventSelect.vue | 3 ++- packages/editor/src/type.ts | 2 ++ 5 files changed, 56 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue index b994c2b2..a6f34a8c 100644 --- a/packages/editor/src/fields/CodeSelect.vue +++ b/packages/editor/src/fields/CodeSelect.vue @@ -42,6 +42,10 @@ const codeConfig = computed(() => ({ title: (mForm: FormState, { model, index }: any) => { if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) { if (Array.isArray(model.codeId)) { + if (model.codeId.length < 2) { + return index; + } + const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]); return `${ds?.title} / ${model.codeId[1]}`; } @@ -63,14 +67,31 @@ const codeConfig = computed(() => ({ { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' }, ], defaultValue: 'code', + onChange: (mForm: FormState, v: HookCodeType, { model }: any) => { + if (v === HookCodeType.DATA_SOURCE_METHOD) { + model.codeId = []; + } else { + model.codeId = ''; + } + + return v; + }, }, { - type: (mForm: FormState, { model }: any) => - model.codeType === HookCodeType.DATA_SOURCE_METHOD ? 'data-source-method-select' : 'code-select-col', + type: 'code-select-col', name: 'codeId', span: 16, labelWidth: 0, - disabled: () => !services?.codeBlockService.getEditStatus(), + display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD, + notEditable: () => !services?.codeBlockService.getEditStatus(), + }, + { + type: 'data-source-method-select', + name: 'codeId', + span: 16, + labelWidth: 0, + display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD, + notEditable: () => !services?.dataSourceService.get('editable'), }, ], }, diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue index a2572b64..6e404813 100644 --- a/packages/editor/src/fields/CodeSelectCol.vue +++ b/packages/editor/src/fields/CodeSelectCol.vue @@ -10,7 +10,7 @@ @change="onParamsChangeHandler" > - + @@ -27,7 +27,7 @@ @@ -39,7 +39,7 @@ import { computed, inject, ref, watch } from 'vue'; import { Edit, View } from '@element-plus/icons-vue'; import { isEmpty, map } from 'lodash-es'; -import { createValues, FieldProps } from '@tmagic/form'; +import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form'; import type { Id } from '@tmagic/schema'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; @@ -52,9 +52,11 @@ defineOptions({ name: 'MEditorCodeSelectCol', }); +const mForm = inject('mForm'); const services = inject('services'); const emit = defineEmits(['change']); +const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props)); const props = withDefaults(defineProps>(), { disabled: false, }); @@ -92,6 +94,7 @@ watch( const selectConfig = { type: 'select', name: props.name, + disable: props.disabled, options: () => { if (codeDsl.value) { return map(codeDsl.value, (value, key) => ({ diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue index db587651..64d4aebc 100644 --- a/packages/editor/src/fields/DataSourceMethodSelect.vue +++ b/packages/editor/src/fields/DataSourceMethodSelect.vue @@ -7,7 +7,12 @@ :model="model" @change="onChangeHandler" > - + @@ -34,7 +39,7 @@ import { computed, inject, ref } from 'vue'; import { Edit, View } from '@element-plus/icons-vue'; -import { createValues, FieldProps } from '@tmagic/form'; +import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form'; import type { CodeBlockContent, Id } from '@tmagic/schema'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; @@ -47,6 +52,7 @@ defineOptions({ name: 'MEditorDataSourceMethodSelect', }); +const mForm = inject('mForm'); const services = inject('services'); const emit = defineEmits(['change']); @@ -56,14 +62,24 @@ const props = withDefaults(defineProps> disabled: false, }); +const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props)); + const dataSources = computed(() => dataSourceService?.get('dataSources')); -const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => { +const isCustomMethod = computed(() => { + const [id, name] = props.model[props.name]; + + const dataSource = dataSourceService?.getDataSourceById(id); + + return Boolean(dataSource?.methods.find((method) => method.name === name)); +}); + +const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => { if (!dataSourceId) return []; const paramStatements = dataSources.value ?.find((item) => item.id === dataSourceId) - ?.methods?.find((item) => item.name === medthodName)?.params; + ?.methods?.find((item) => item.name === methodName)?.params; if (!paramStatements) return []; @@ -107,6 +123,7 @@ const cascaderConfig = computed(() => ({ type: 'cascader', name: props.name, options: methodsOptions.value, + disable: props.disabled, onChange: (formState: any, dataSourceMethod: [Id, string]) => { setParamsConfig(dataSourceMethod, formState); diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index 93d4794f..d7600215 100644 --- a/packages/editor/src/fields/EventSelect.vue +++ b/packages/editor/src/fields/EventSelect.vue @@ -171,7 +171,7 @@ const codeActionConfig = computed(() => { type: 'code-select-col', text: '代码块', name: 'codeId', - disabled: () => !codeBlockService?.getEditStatus(), + notEditable: () => !codeBlockService?.getEditStatus(), display: (mForm, { model }) => model.actionType === ActionType.CODE, }; return { ...defaultCodeActionConfig, ...props.config.codeActionConfig }; @@ -183,6 +183,7 @@ const dataSourceActionConfig = computed(() => { type: 'data-source-method-select', text: '数据源方法', name: 'dataSourceMethod', + notEditable: () => !services?.dataSourceService.get('editable'), display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE, }; return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig }; diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index e261209f..b76db567 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -600,6 +600,7 @@ export interface CodeSelectColConfig { text: string; labelWidth?: number | string; disabled?: boolean | FilterFunction; + notEditable?: boolean | FilterFunction; display?: boolean | FilterFunction; } @@ -618,6 +619,7 @@ export interface DataSourceMethodSelectConfig { text: string; labelWidth?: number | string; disabled?: boolean | FilterFunction; + notEditable?: boolean | FilterFunction; display?: boolean | FilterFunction; }