diff --git a/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/method-list.component.tsx b/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/method-list.component.tsx index 4de830c7ca3af8033df1c6e54a1f4f5f8b27935f..253e06fde2fdca965d52e62d5a3e25168bbdab45 100644 --- a/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/method-list.component.tsx +++ b/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/method-list.component.tsx @@ -11,7 +11,7 @@ import { UseFormSchema } from "../../../../../types"; import { useEventParameterData } from "../../../../../composition/use-event-parameter-data"; import { useParameterEditorData } from "../../../../../composition/use-parameter-editor-data"; import { DesignerMode, UseDesignerContext } from "../../../../../types/designer-context"; -import { useComponentProvider } from "../../../../../composition/use-component-provider"; +import { CallbackFn, useComponentProvider } from "../../../../../composition/use-component-provider"; import { useEventMapping } from "../../../../../composition/schema-repository/controller/use-event-mapping"; import './method-list.scss'; @@ -25,6 +25,7 @@ export default defineComponent({ const useFormStateMachineComposition: any = inject('useFormStateMachine', null); const designViewModelUtils: any = inject('designViewModelUtils', null); const schemaService: any = inject('schemaService', null); + const messageService: any = inject('FMessageBoxService', null); const { getFormFields, getHelpFields } = useEventMapping(designViewModelUtils, schemaService); /** 树表格实例 */ const treeGridRef = ref(); @@ -101,14 +102,24 @@ export default defineComponent({ result.push(externalComponent); } }); - return result; } - function getFieldMappingEditor(selectedData: any) { + function getFieldMappingEditor(parameter: any, selectedData: any) { const ExternalEventParameterComponent = externalComponents['fieldMapping']; + const onChangeValue = () => { + commandsData.value[selectTreeNodeIndex.value] = selectedTreeNode.value; + updateViewModel(commandsData.value); + }; const beforeOpen = async ({ fromDataSource, toDataSource, gridColumns }) => { + const lookupIdParam = selectedData.params.find((param: any) => { + return param.name === 'lookupId'; + }); + if (lookupIdParam && !lookupIdParam.value) { + messageService?.warning('请先选择参照帮助'); + return false; + } const foundParam = selectedData.params.find((paramItem: any) => paramItem?.controlSource?.type === 'Select'); const foundLookup = buildLookups().find((lookup: any) => lookup.id === foundParam.value); const { helpId } = foundLookup; @@ -125,7 +136,11 @@ export default defineComponent({ type: externalParamterEditor['fieldMapping'], customRender: ExternalEventParameterComponent ? () => : null @@ -307,7 +322,8 @@ export default defineComponent({
{paramsData.value.map((paramData: ParamConfig, index: number) => { - const editor = paramData?.controlSource?.type === 'MappingFieldsEditor' ? getFieldMappingEditor(selectedData) : + const editor = paramData?.controlSource?.type === 'MappingFieldsEditor' ? + getFieldMappingEditor(paramData, selectedData) : getParameterEditorByCommand(paramData); const data = reactive(getEventParameterData(paramData.controlSource?.context?.data?.value) || []); const customStatus = (visualData: VisualData) => { @@ -369,6 +385,15 @@ export default defineComponent({ updateViewModel(commandsData.value); }} onValueChange={() => { + // 隐藏帮助命令下，切换帮助后，字段映射值清空 + if (paramData.name === 'lookupId') { + const fieldMappingParam = selectedTreeNode.value.data.params.find((param: any) => { + return param.name === 'mappingFields'; + }); + if (fieldMappingParam && fieldMappingParam.value) { + fieldMappingParam.value = ''; + } + } commandsData.value[selectTreeNodeIndex.value] = selectedTreeNode.value; updateViewModel(commandsData.value); }} diff --git a/packages/designer/src/components/composition/command.service.tsx b/packages/designer/src/components/composition/command.service.tsx index e98a1d7cd18963c8fc912b12207c90868a2051f6..77eca927cfb276542c81f45ac6678b8905db1e25 100644 --- a/packages/designer/src/components/composition/command.service.tsx +++ b/packages/designer/src/components/composition/command.service.tsx @@ -1,12 +1,12 @@ /* eslint-disable prefer-destructuring */ /* eslint-disable complexity */ /* eslint-disable no-use-before-define */ -import { ref } from 'vue'; +import { inject, ref } from 'vue'; import { clone, cloneDeep } from "lodash-es"; import axios, { AxiosResponse } from 'axios'; import { FLoadingService, FMessageBoxService, schemaMap } from "@farris/ui-vue/components"; import { MetadataService } from "./metadata.service"; -import { FormWebCmd, UseFormSchema, UseFormStateMachine } from "../types"; +import { FormViewModel, FormWebCmd, UseDesignViewModel, UseFormSchema, UseFormStateMachine, UseSchemaService } from "../types"; import { CommandMetadataConvertor } from "./command/command-metadata"; import { UseCommandBuilderService, UseFormCommandService } from "../types/command"; import { IdService } from "../components/view-model-designer/method-manager/service/id.service"; @@ -17,8 +17,17 @@ import { ParamConfig } from "../components/view-model-designer/method-manager/en import { CallbackFn, useComponentProvider } from './use-component-provider'; import { DesignerMode } from "../types/designer-context"; +import { useEventMapping } from './schema-repository/controller/use-event-mapping'; -export function useFormCommandService(formSchemaService: UseFormSchema, useFormStateMachineComposition: UseFormStateMachine, loadingService: FLoadingService, webCmpBuilderService: UseCommandBuilderService): UseFormCommandService { +export function useFormCommandService( + formSchemaService: UseFormSchema, + useFormStateMachineComposition: UseFormStateMachine, + loadingService: FLoadingService, + webCmpBuilderService: UseCommandBuilderService, + designViewModelUtils: UseDesignViewModel, + schemaService: UseSchemaService +): UseFormCommandService { + const { getFormFields, getHelpFields } = useEventMapping(designViewModelUtils, schemaService); const { externalComponentProps, externalComponents, externalParamterEditor } = useComponentProvider(); const metadataService = new MetadataService(); const messageService: any = FMessageBoxService; @@ -215,6 +224,62 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS }); } + function buildLookups() { + const externalComponents = formSchemaService.getExternalComponents(); + const result: any[] = []; + externalComponents.forEach((externalComponent) => { + if (externalComponent.type === 'lookup') { + // const lookupItem = { id: externalComponent.id, label: externalComponent.name }; + result.push(externalComponent); + } + }); + + return result; + } + + function getFieldMappingEditor( + modelValue: string, + parameter: any, + currentCommand: any, + viewModelId: string, + onChangeValue: CallbackFn + ) { + const ExternalEventParameterComponent = externalComponents['fieldMapping']; + const beforeOpen = async ({ fromDataSource, toDataSource, gridColumns }) => { + const lookupIdParam = currentCommand.params.find((param: any) => { + return param.name === 'lookupId'; + }); + if (lookupIdParam && !lookupIdParam.value) { + messageService?.warning('请先选择参照帮助'); + return false; + } + const foundParam = currentCommand.params.find((paramItem: any) => paramItem.name === 'lookupId'); + const foundLookup = buildLookups().find((lookup: any) => lookup.id === foundParam.value); + const { helpId } = foundLookup; + // 缺一个视图模型id + if (helpId && viewModelId) { + fromDataSource.value = await getHelpFields(helpId); + toDataSource.value = await getFormFields(viewModelId); + gridColumns[1].editor.data = toDataSource.value; + return true; + } + return false; + }; + return { + type: externalParamterEditor['fieldMapping'], + customRender: ExternalEventParameterComponent ? () => + + : null + }; + } + function getParameterEditorByCommand(parameter: any, controlName: string, controlType: string, onChangeValue: any) { const name = controlName || parameter.name; const ExternalEventParameterComponent = externalComponents[name]; @@ -274,12 +339,25 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS assembleSchemaFieldsByComponent, assembleStateVariables, assembleSchemaFieldsUnderBoundEntity, - getEditor: (propertyItem: any, onChangeValue: CallbackFn) => - getParameterEditorByCommand( - propertyItem, - params.Code, - cloneParams.controlSource?.type || 'Default', - onChangeValue), + getEditor: ( + modelValue: string, + propertyItem: any, + currentCommand: any, + viewModelId: string, + onChangeValue: CallbackFn) => + params.controlSource?.type === 'MappingFieldsEditor' ? + getFieldMappingEditor( + modelValue, + propertyItem, + currentCommand, + viewModelId, + onChangeValue + ) : + getParameterEditorByCommand( + propertyItem, + params.Code, + cloneParams.controlSource?.type || 'Default', + onChangeValue), }, // 回调方法或状态机动作或目标组件数据列表 data: getEventParameterData(params.controlSource?.context?.data?.value) || [], @@ -1278,12 +1356,25 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS assembleSchemaFieldsByComponent, assembleStateVariables, assembleSchemaFieldsUnderBoundEntity, - getEditor: (propertyItem: any, onChangeValue: CallbackFn) => - getParameterEditorByCommand( - propertyItem, - parameterItem.Code, - cloneParams.controlSource?.type || 'Default', - onChangeValue), + getEditor: ( + modelValue: string, + propertyItem: any, + currentCommand: any, + viewModelId: string, + onChangeValue: CallbackFn) => + parameterItem.controlSource?.type === 'MappingFieldsEditor' ? + getFieldMappingEditor( + modelValue, + propertyItem, + currentCommand, + viewModelId, + onChangeValue + ) : + getParameterEditorByCommand( + propertyItem, + parameterItem.Code, + cloneParams.controlSource?.type || 'Default', + onChangeValue), }, // 回调方法或状态机动作或目标组件数据列表 data: getEventParameterData(parameterItem.controlSource?.context?.data?.value) || [], diff --git a/packages/designer/src/components/composition/use-component-provider.ts b/packages/designer/src/components/composition/use-component-provider.ts index eaf2fdcc421abeb471484845bfe2a453e878c71b..3be0bc84040d5ff0fc334e7a715e512f4cc3cc27 100644 --- a/packages/designer/src/components/composition/use-component-provider.ts +++ b/packages/designer/src/components/composition/use-component-provider.ts @@ -49,12 +49,16 @@ export function useComponentProvider() { } }; }, - fieldMapping: (beforeOpen) => { + fieldMapping: ( + modelValue: string, + parameter: ParamConfig, + onChangeValue: CallbackFn, beforeOpen) => { return { modalWidth: 800, modalHeight: 600, editable: false, beforeOpen: beforeOpen, + modelValue, fromData: { editable: true, formatter: (cell, data) => { @@ -79,6 +83,10 @@ export function useComponentProvider() { return `${data.raw['name']} [${data.raw['bindingPath']}]`; }, displayFormatter: mapFieldsDisplayFormatter + }, + onMappingFieldsChanged: (value: string) => { + parameter.value = value; + onChangeValue(value); } }; } diff --git a/packages/designer/src/components/designer.component.tsx b/packages/designer/src/components/designer.component.tsx index 5ce01172df99a07a9c9f1ee44fb3bb8de3ff06e5..e3a6f3f3995c772b6ae723b59caa6295782de218 100644 --- a/packages/designer/src/components/designer.component.tsx +++ b/packages/designer/src/components/designer.component.tsx @@ -46,14 +46,7 @@ export default defineComponent({ const commandBuilderService = designerContext.useCommandBuilderService(useFormSchemaComposition); const useFormStateMachineComposition = useFormStateMachine(useFormSchemaComposition); provide('useFormStateMachine', useFormStateMachineComposition); - // 注册 命令服务 - const formCommandService = useFormCommandService(useFormSchemaComposition, useFormStateMachineComposition, loadingService, commandBuilderService); - provide('useFormCommand', formCommandService); - // 注册事件编辑器服务 - const useEventsEditorService = useEventsEditor(formCommandService, useFormSchemaComposition); - provide('useEventsEditor', useEventsEditorService); - const eventsEditorUtils = useEventsEditorUtils(formCommandService, useFormSchemaComposition, useEventsEditorService); - provide('eventsEditorUtils', eventsEditorUtils); + // 操作表单DOM Schema的工具类 const schemaService = useSchemaService(metadataService, useFormSchemaComposition); provide('schemaService', schemaService); @@ -61,6 +54,22 @@ export default defineComponent({ const designViewModelService = useDesignViewModel(useFormSchemaComposition, schemaService); provide('designViewModelUtils', designViewModelService); designerContext.instances = { formDesigner: formDesignerRef }; + + // 注册 命令服务 + const formCommandService = useFormCommandService( + useFormSchemaComposition, + useFormStateMachineComposition, + loadingService, + commandBuilderService, + designViewModelService, + schemaService + ); + provide('useFormCommand', formCommandService); + // 注册事件编辑器服务 + const useEventsEditorService = useEventsEditor(formCommandService, useFormSchemaComposition); + provide('useEventsEditor', useEventsEditorService); + const eventsEditorUtils = useEventsEditorUtils(formCommandService, useFormSchemaComposition, useEventsEditorService); + provide('eventsEditorUtils', eventsEditorUtils); // metadatFullPath const metadataPath: string = inject(MetadataPathToken, ''); // 控件创建服务 diff --git a/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json b/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json index f76f755d4b73925977ef476f68c5a2c4661abbb6..384303f5ef3e6db995ab80f6d51a5ae03e9c01db 100644 --- a/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json +++ b/packages/ui-vue/components/data-grid/src/schema/data-grid.schema.json @@ -554,6 +554,11 @@ "selection": { "type": "object", "properties": { + "multiSelectMode": { + "description": "多选模式", + "type": "string", + "default": "OnCheckAndClick" + }, "enableSelectRow": { "description": "允许选中行", "type": "boolean", diff --git a/packages/ui-vue/components/events-editor/src/components/parameter-editor/parameter-editor.component.tsx b/packages/ui-vue/components/events-editor/src/components/parameter-editor/parameter-editor.component.tsx index c2949fb0e86654084a195a2894d8a52464c5c9d0..b4f51f629c71f0c1f91251cded2fea9436543010 100644 --- a/packages/ui-vue/components/events-editor/src/components/parameter-editor/parameter-editor.component.tsx +++ b/packages/ui-vue/components/events-editor/src/components/parameter-editor/parameter-editor.component.tsx @@ -7,6 +7,7 @@ import './parameter-editor.css'; import { FNotifyService as NotifyService } from "@farris/ui-vue/components/notify"; import { cloneDeep } from "lodash-es"; import { VisualData } from "@farris/ui-vue/components/data-view"; +import { UseMethods } from "../../composition/types"; /** * 参数编辑器，包含下列内容： @@ -38,6 +39,7 @@ export default defineComponent({ const shouldShowParameterEditorGroup = ref(props.showParameter); const useFormSchema = inject('useFormSchema') as any; + const methodsComposition = inject('useMethodsComposition') as UseMethods; function getDefaultTargetComponentVM(): string { const { targetComponent } = command.value; @@ -146,7 +148,21 @@ export default defineComponent({ context.emit('change', command.value); } + function getViewModelId() { + let commandViewModelId = ''; + if (targetComponentId.value) { + commandViewModelId = useFormSchema.getViewModelIdByComponentId(targetComponentId.value); + } else { + commandViewModelId = methodsComposition.getViewModeId(); + } + return commandViewModelId; + } + function renderParameterEditor(propertyItem: any, commandValue: any) { + const viewModelId = getViewModelId(); + const viewModel = useFormSchema.getViewModelById(viewModelId); + const currentCommand = viewModel.commands.find((command: any) => command?.id === props.command?.id); + // todo: ide-parameter-editor const data = reactive(propertyItem.context.data); const { @@ -163,7 +179,7 @@ export default defineComponent({ }; const customStatus = (visualData: VisualData) => { - if(propertyItem?.origin?.controlSource?.context?.data?.value === ':Entity') { + if (propertyItem?.origin?.controlSource?.context?.data?.value === ':Entity') { return visualData; } if (visualData.raw.children && visualData.raw.children.length) { @@ -176,19 +192,25 @@ export default defineComponent({ defaultValue={propertyItem?.origin.defaultValue} v-model={propertyItem.value} data={data} - editor={getEditor(propertyItem, onChangeValue)} + editor={getEditor( + propertyItem.value, + propertyItem, + currentCommand, + viewModelId, + onChangeValue)} fieldData={assembleSchemaFieldsByComponent()} formData={assembleOutline()} varData={assembleStateVariables()} activeViewModelFieldData={assembleSchemaFieldsUnderBoundEntity(targetComponentId.value)} // editorType={propertyItem?.origin?.controlSource?.type || 'Default'} editorControlSource={propertyItem?.origin?.controlSource} + customRowStatus={customStatus} // idField={propertyItem?.origin?.controlSource?.context?.valueField?.value // || propertyItem?.origin?.controlSource?.context?.idField?.value || 'id'} idField={ propertyItem?.origin?.controlSource?.context?.data?.value === ':Entity' ? 'bindTo' : - propertyItem?.origin?.controlSource?.context?.valueField?.value - || propertyItem?.origin?.controlSource?.context?.idField?.value || 'id'} + propertyItem?.origin?.controlSource?.context?.valueField?.value + || propertyItem?.origin?.controlSource?.context?.idField?.value || 'id'} textField={ propertyItem?.origin?.controlSource?.context?.textField?.value || 'label' } @@ -202,6 +224,21 @@ export default defineComponent({ onValueChange={(event) => { onEditorChangeHandler(event, propertyItem); onEditorBlurHandler(); + // 隐藏帮助命令下，切换帮助后，字段映射值清空 + if (propertyItem.origin?.Code === 'lookupId') { + const fieldMappingParamItem = command.value.property?.find((param: any) => { + return param.name === 'mappingFields'; + }); + if (fieldMappingParamItem && fieldMappingParamItem.value) { + fieldMappingParamItem.value = ''; + } + const fieldMappingParam = currentCommand.params.find((param: any) => { + return param.name === 'mappingFields'; + }); + if (fieldMappingParam && fieldMappingParam.value) { + fieldMappingParam.value = ''; + } + } }} > ; @@ -259,8 +296,8 @@ export default defineComponent({ const commandStyles = computed(() => { return { - 'cursor': showAbandonedIcon.value || controller.value.isCommon || controller.value?.label.indexOf(useFormSchema?.getModule().code) === -1 ? 'default': 'pointer' - }; + 'cursor': showAbandonedIcon.value || controller.value.isCommon || controller.value?.label.indexOf(useFormSchema?.getModule().code) === -1 ? 'default' : 'pointer' + }; });