diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue index 179b0513..4f075c3f 100644 --- a/packages/editor/src/fields/CodeSelectCol.vue +++ b/packages/editor/src/fields/CodeSelectCol.vue @@ -2,13 +2,15 @@
- + > @@ -48,7 +51,8 @@ import { type FieldProps, filterFunction, type FormState, - MContainer, + MSelect, + type SelectConfig, } from '@tmagic/form'; import CodeParams from '@editor/components/CodeParams.vue'; @@ -108,7 +112,7 @@ watch( }, ); -const selectConfig = { +const selectConfig: SelectConfig = { type: 'select', name: props.name, disable: props.disabled, @@ -122,33 +126,26 @@ const selectConfig = { } return []; }, - onChange: (formState: any, codeId: Id, { setModel, model }: any) => { - // 通过下拉框选择的codeId变化后修正model的值,避免写入其他codeId的params - paramsConfig.value = getParamItemsConfig(codeId); - - if (paramsConfig.value.length) { - setModel('params', createValues(formState, paramsConfig.value, {}, model.params)); - } else { - setModel('params', {}); - } - - return codeId; - }, }; -const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) => { - props.model.params = value.params; +const onCodeIdChangeHandler = (value: any) => { + // 通过下拉框选择的codeId变化后修正model的值,避免写入其他codeId的params + paramsConfig.value = getParamItemsConfig(value); - emit('change', props.model, { - changeRecords: eventData.changeRecords?.map((item) => ({ - prop: `${props.prop.replace(props.name, '')}${item.propPath}`, - value: item.value, - })) || [ - { - propPath: props.prop, - value: value[props.name], - }, - ], + const changeRecords = [ + { + propPath: props.prop, + value, + }, + ]; + + changeRecords.push({ + propPath: props.prop.replace(`${props.name}`, 'params'), + value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {}, + }); + + emit('change', value, { + changeRecords, }); }; @@ -156,14 +153,10 @@ const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) * 参数值修改更新 */ const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => { - props.model.params = value.params; - emit('change', props.model, { - ...eventData, - changeRecords: (eventData.changeRecords || []).map((item) => ({ - prop: `${props.prop.replace(props.name, '')}${item.propPath}`, - value: item.value, - })), + eventData.changeRecords?.forEach((record) => { + record.propPath = `${props.prop.replace(`${props.name}`, '')}${record.propPath}`; }); + emit('change', props.model[props.name], eventData); }; const editCode = (id: string) => { diff --git a/packages/editor/src/fields/CondOpSelect.vue b/packages/editor/src/fields/CondOpSelect.vue index 6ad2ae46..bb7585bf 100644 --- a/packages/editor/src/fields/CondOpSelect.vue +++ b/packages/editor/src/fields/CondOpSelect.vue @@ -1,6 +1,6 @@ @@ -38,13 +42,14 @@ import { Edit, View } from '@element-plus/icons-vue'; import type { Id } from '@tmagic/core'; import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import { + type CascaderConfig, + type ContainerChangeEventData, createValues, type DataSourceMethodSelectConfig, type FieldProps, filterFunction, type FormState, - MContainer, - type OnChangeHandlerData, + MCascader, } from '@tmagic/form'; import CodeParams from '@editor/components/CodeParams.vue'; @@ -100,21 +105,6 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', ''] const paramsConfig = ref(getParamItemsConfig(props.model[props.name || 'dataSourceMethod'])); -const setParamsConfig = ( - dataSourceMethod: [Id, string], - formState: any = {}, - setModel: OnChangeHandlerData['setModel'], -) => { - // 通过下拉框选择的codeId变化后修正model的值,避免写入其他codeId的params - paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : []; - - if (paramsConfig.value.length) { - setModel('params', createValues(formState, paramsConfig.value, {}, props.model.params)); - } else { - setModel('params', {}); - } -}; - const methodsOptions = computed( () => dataSources.value @@ -132,24 +122,42 @@ const methodsOptions = computed( })) || [], ); -const cascaderConfig = computed(() => ({ +const cascaderConfig = computed(() => ({ type: 'cascader', - name: props.name, options: methodsOptions.value, - disable: props.disabled, - onChange: (formState: any, dataSourceMethod: [Id, string], { setModel }: OnChangeHandlerData) => { - setParamsConfig(dataSourceMethod, formState, setModel); - - return dataSourceMethod; - }, })); /** * 参数值修改更新 */ const onChangeHandler = (value: any) => { - props.model.params = value.params; - emit('change', props.model); + paramsConfig.value = getParamItemsConfig(value); + + const changeRecords = [ + { + propPath: props.prop, + value, + }, + ]; + + changeRecords.push({ + propPath: props.prop.replace(`${props.name}`, 'params'), + value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {}, + }); + + emit('change', value, { + changeRecords, + }); +}; + +/** + * 参数值修改更新 + */ +const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => { + eventData.changeRecords?.forEach((record) => { + record.propPath = `${props.prop.replace(`${props.name}`, '')}${record.propPath}`; + }); + emit('change', props.model[props.name], eventData); }; const editCodeHandler = () => { diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue index d259d5df..29ccb386 100644 --- a/packages/editor/src/fields/EventSelect.vue +++ b/packages/editor/src/fields/EventSelect.vue @@ -219,7 +219,6 @@ const targetCompConfig = computed(() => { display: (mForm: FormState, { model }: { model: Record }) => model.actionType === ActionType.COMP, onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => { setModel('method', ''); - return v; }, }; return { ...defaultTargetCompConfig, ...props.config.targetCompConfig }; diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue index 6247a3fb..a3efbded 100644 --- a/packages/editor/src/fields/PageFragmentSelect.vue +++ b/packages/editor/src/fields/PageFragmentSelect.vue @@ -2,13 +2,16 @@
- + >
@@ -20,7 +23,7 @@ import { computed } from 'vue'; import { Edit } from '@element-plus/icons-vue'; import { Id, NodeType } from '@tmagic/core'; -import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form'; +import { FieldProps, MSelect, type PageFragmentSelectConfig, type SelectConfig } from '@tmagic/form'; import Icon from '@editor/components/Icon.vue'; import { useServices } from '@editor/hooks/use-services'; @@ -32,16 +35,16 @@ defineOptions({ const { editorService } = useServices(); const emit = defineEmits(['change']); -const props = withDefaults(defineProps>(), { +withDefaults(defineProps>(), { disabled: false, }); + const pageList = computed(() => editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT), ); -const selectConfig = { +const selectConfig: SelectConfig = { type: 'select', - name: props.name, options: () => { if (pageList.value) { return pageList.value.map((item) => ({ @@ -53,8 +56,8 @@ const selectConfig = { return []; }, }; -const changeHandler = async () => { - emit('change', props.model[props.name]); +const changeHandler = (v: Id) => { + emit('change', v); }; const editPageFragment = (id: Id) => { diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue index 6dae68d6..bcb75dad 100644 --- a/packages/editor/src/fields/UISelect.vue +++ b/packages/editor/src/fields/UISelect.vue @@ -79,7 +79,6 @@ const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => { id = getIdFromEl()(detail as HTMLElement) || id; } if (id) { - props.model[props.name] = id; emit('change', id); mForm?.$emit('field-change', props.prop, id); } @@ -102,7 +101,6 @@ const startSelect = () => { const deleteHandler = () => { if (props.model) { - props.model[props.name] = ''; emit('change', ''); mForm?.$emit('field-change', props.prop, ''); }