From 85390f807e55e19e9410e3ff01cbf0571976d4c1 Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Sat, 5 Jul 2025 14:57:04 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=B8=AE=E5=8A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../external-component-template.component.tsx | 2 +- .../external-component.component.tsx | 9 ++- .../composition/types.ts | 11 +-- .../use-external-component-property.ts | 75 +++++++++++++++++++ .../composition/use-external-component.ts | 67 ++++++++++++----- .../external-component-panel.scss | 3 +- .../form-designer/form-designer.component.tsx | 12 ++- .../designer/src/components/types/metadata.ts | 4 +- .../src/designer-canvas.component.tsx | 2 +- packages/ui-vue/components/designer.ts | 2 +- .../src/schema/form-group.schema.json | 5 ++ packages/ui-vue/components/lookup/index.ts | 4 +- .../external-lookup.property-config.ts | 62 +++++++++++++++ .../property-config/lookup.property-config.ts | 9 +-- 14 files changed, 225 insertions(+), 42 deletions(-) create mode 100644 packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts create mode 100644 packages/ui-vue/components/lookup/src/property-config/external-lookup.property-config.ts diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-template/external-component-template.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-template/external-component-template.component.tsx index fc79c749e6..6ec3a08e67 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-template/external-component-template.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-template/external-component-template.component.tsx @@ -24,7 +24,7 @@ export default function () {
-
{name}
+
{name}
diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component.component.tsx index 2d11b3b90e..00f2ff713e 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component.component.tsx @@ -18,7 +18,12 @@ export default defineComponent({ /** 删除按钮的样式 */ const deleteButtonStyle = computed(() => { - return isSelected.value ? 'display: flex;position:relative' : 'display: none'; + return { + 'top': '-24px', + 'right': '4px', + 'position': isSelected.value ? 'relative' : '', + 'display': isSelected.value ? 'flex' : 'none' + }; }) /** 图片路径 */ const imagePath = computed(() => { @@ -76,7 +81,7 @@ export default defineComponent({
-
{name}
+
{name}
diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts index 0ea20b5f6f..933087a52d 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts @@ -5,14 +5,9 @@ export type ExternalComponentType = 'Implant' | 'Independence' | 'Lookup'; export interface ExternalComponentSchema { id: string, - componentType: ExternalComponentType, - nameSpace: string, - code: string, - name: string, - fileName: string, - bizobjectID: string, - relativePath: string, - projectName: string, + name: string; + type: string; + [key: string]: any; } export interface UseExternalComponent { diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts new file mode 100644 index 0000000000..5e487923d6 --- /dev/null +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts @@ -0,0 +1,75 @@ +import { DesignerHostService, ExternalLookupPropertyConfig } from "@farris/ui-vue/components"; +import { ExternalComponentSchema } from "./types"; + +export function useExternalComponentProperty(designerHostService: DesignerHostService, propertyData: ExternalComponentSchema) { + + const externalLookupPropertyConfig = new ExternalLookupPropertyConfig(designerHostService); + + /** + * 获取弹窗的属性 + * @param propertyData + * @returns + */ + function getModalPropertyConfig(): any { + const propertyConfig = { + type: 'object', + categories: {} + }; + return propertyConfig; + + } + + function getBasePropertyConfig(): any { + return { + description: 'Basic Information', + title: '基本信息', + properties: { + id: { + title: '标识', + type: 'string', + readonly: true + }, + name: { + title: '名称', + type: 'string', + readonly: true + } + } + }; + } + + function getConvertedPropertyData(): any { + let convertedPropertyData = propertyData; + if (propertyData.type === 'lookup') { + convertedPropertyData = { + id: propertyData.id, + name: propertyData.name, + type: 'form-group', + editor: propertyData + } + } + + return convertedPropertyData; + } + function getPropConfig(componentId: string) { + let propertyConfig: any; + + if (propertyData.type === 'lookup') { + const convertedPropertyData = getConvertedPropertyData(); + propertyConfig = externalLookupPropertyConfig.getPropertyConfig(convertedPropertyData); + } else { + return getModalPropertyConfig(); + } + + const basic = getBasePropertyConfig(); + propertyConfig.categories = { basic, ...propertyConfig.categories } + return propertyConfig; + + } + + return { + getPropConfig, + getConvertedPropertyData + } + +} diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts index fae3ce1ee4..9c93d51cd6 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts @@ -1,8 +1,9 @@ import { inject, Ref, ref } from "vue"; import { ExternalComponentSchema, ExternalComponentType, UseExternalComponent } from "./types"; -import { SchemaItem, FNotifyService } from "@farris/ui-vue/components"; +import { SchemaItem, FNotifyService, getSchemaByType, lookupDataSourceConverter } from "@farris/ui-vue/components"; import { UseFormSchema } from "../../../../../../components/types"; import { IdService } from "../../../../../../components/components/view-model-designer/method-manager/service/id.service"; +import { MetadataService } from "../../../../../../components/composition/metadata.service"; export default function (): UseExternalComponent { @@ -10,36 +11,68 @@ export default function (): UseExternalComponent { notifyService.globalConfig = { position: 'top-center' }; const formSchemaUtils = inject('useFormSchema') as UseFormSchema; const idService = new IdService(); + const metadataService = new MetadataService(); const module = formSchemaUtils.getModule(); - module.externalComponents ??= []; - const externalComponents: Ref = ref(module.externalComponents); + module.hiddenComponents ??= []; + const externalComponents: Ref = ref(module.hiddenComponents); function getComponents(): Ref { return externalComponents; } + /** + * 获取帮助属性 + * @param component + * @returns + */ + function getLookupPropertyValue(component: SchemaItem): Promise { + const formInfo = formSchemaUtils.getFormMetadataBasicInfo(); + const helpPropertyValue = getSchemaByType('lookup') || {}; + const propertyValue = { + editor: helpPropertyValue + } + return metadataService.getPickMetadata(formInfo.relativePath, component) + .then((result: any) => { + const metadataContent = JSON.parse(result?.metadata.content); + const metadata = { + id: metadataContent.id, + code: metadataContent.code, + name: metadataContent.name, + metadataContent + } + lookupDataSourceConverter.convertTo(propertyValue, 'dataSource', [metadata]); + + propertyValue.editor.name = metadataContent.name; + return propertyValue; + }); + } + + function getModalPropertyValue(component: SchemaItem): any { + const propertyValue = getSchemaByType('modal') || {}; + return propertyValue; + } + /** * 添加外部组件 * @param component * @param externalComponentType */ function addComponent(component: SchemaItem, externalComponentType: ExternalComponentType) { - const idSuffix = idService.uuid().slice(0, 6); - const id = `external-component-${idSuffix}`; - const externalComponentSchema: ExternalComponentSchema = { - id: component.id, - nameSpace: component.nameSpace, - code: component.code, - name: component.name, - fileName: component.fileName || '', - bizobjectID: component.bizobjectID, - relativePath: component.relativePath, - projectName: component.projectName, - componentType: externalComponentType - } + const idSuffix = idService.uuid().slice(5, 10); + const propertyValueId = `external-component-${idSuffix}`; - externalComponents.value.push(externalComponentSchema); + if (externalComponentType === 'Lookup') { + getLookupPropertyValue(component).then(propertyValue => { + const helpPropertyValue = propertyValue.editor; + helpPropertyValue.id = propertyValueId; + externalComponents.value.push(helpPropertyValue); + }); + } else { + const propertyValue = getModalPropertyValue(component); + propertyValue.id = propertyValueId; + externalComponents.value.push(propertyValue); + } } /** diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss index 730b3a3a76..ff049899b2 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss @@ -58,7 +58,7 @@ .f-external-component-template-img-container { width: 138px; - height: 109px; + height: 106px; } .f-external-component-template-text-container { @@ -67,7 +67,6 @@ background: rgb(248, 250, 251); display: flex; align-items: center; - padding-left: 5px; } /* 左侧外部组件 */ diff --git a/packages/designer/src/components/components/form-designer/form-designer.component.tsx b/packages/designer/src/components/components/form-designer/form-designer.component.tsx index c1db9972b9..5e19804965 100644 --- a/packages/designer/src/components/components/form-designer/form-designer.component.tsx +++ b/packages/designer/src/components/components/form-designer/form-designer.component.tsx @@ -9,6 +9,9 @@ import { afterPropeControlPropertyChangedService } from "../../composition/contr import { UseDesignViewModel, UseFormSchema, UseSchemaService } from "../../types"; import FCustomClassEditor from './components/custom-class-editor/custom-class-editor.component'; import { UseDesignerContext } from "../../types/designer-context"; +import FExternalComponentPanel from "./components/external-component-panel/external-component-panel.component"; +import { useExternalComponentProperty } from "./components/external-component-panel/composition/use-external-component-property"; +import { ExternalComponentSchema } from "./components/external-component-panel/composition/types"; export default defineComponent({ name: 'FFormDesigner', @@ -109,8 +112,13 @@ export default defineComponent({ } } - function onClickExternalComponent(selectedComponent: any) { - + function onClickExternalComponent(propertyData: ExternalComponentSchema) { + // 点击外部组件后，更新属性面板 + const externalComponentProperty = useExternalComponentProperty(canvasRef.value.designerHostService, propertyData); + const propertyConfig = externalComponentProperty.getPropConfig(componentId.value); + const convertedPropertyData = externalComponentProperty.getConvertedPropertyData(); + propertyPanelInstance.value.updatePropertyConfig(propertyConfig, convertedPropertyData, true); + propertyPanelInstance?.value?.updateDesignerItem(externalComponentProperty, componentId); } const showDesignerView = computed(() => (itemType: string) => { diff --git a/packages/designer/src/components/types/metadata.ts b/packages/designer/src/components/types/metadata.ts index 251c5455ee..42d71030d0 100644 --- a/packages/designer/src/components/types/metadata.ts +++ b/packages/designer/src/components/types/metadata.ts @@ -1,5 +1,5 @@ import { Ref } from "vue"; -import { ExternalComponentSchema } from "../components/form-designer/components/external-component-panpel/composition/types"; +import { ExternalComponentSchema } from "../components/form-designer/components/external-component-panel/composition/types"; import { FormComponent, FormExpression, FormStateMachine, FormWebCmd } from "./basic"; import { DesignViewModel } from "./design-viewmodel"; import { DesignerMode, UseDesignerContext } from "./designer-context"; @@ -106,7 +106,7 @@ export interface FormMetaDataModule { /** 表单元数据id */ metadataId?: string; - externalComponents: ExternalComponentSchema[]; + hiddenComponents: ExternalComponentSchema[]; } export interface FormMetadaDataDom { diff --git a/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx b/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx index 591c9fd24c..fc83f2e3ac 100644 --- a/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx +++ b/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx @@ -148,7 +148,7 @@ export default defineComponent({ resizeObserver = null; } }); - context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef }); + context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef, designerHostService }); return () => { return (
diff --git a/packages/ui-vue/components/designer.ts b/packages/ui-vue/components/designer.ts index b8aabcb5d1..6ad7105c7d 100644 --- a/packages/ui-vue/components/designer.ts +++ b/packages/ui-vue/components/designer.ts @@ -3,7 +3,7 @@ export * from './designer-canvas'; export { FDesignerOutline } from './designer-outline'; export { FDesignerToolbox } from './designer-toolbox'; export { FFlowCanvas } from './flow-canvas'; -export { F_LOOKUP_HTTP_SERVICE_TOKEN, LookupSchemaRepositoryToken } from './lookup'; +export { F_LOOKUP_HTTP_SERVICE_TOKEN, LookupSchemaRepositoryToken, ExternalLookupPropertyConfig ,lookupDataSourceConverter} from './lookup'; export { FPropertyPanel, SchemaDOMMapping, type FormPropertyChangeObject } from './property-panel'; export { FEventParameter } from './event-parameter'; export * from './schema-selector'; diff --git a/packages/ui-vue/components/dynamic-form/src/schema/form-group.schema.json b/packages/ui-vue/components/dynamic-form/src/schema/form-group.schema.json index 73ebf8b5d1..02da021f82 100644 --- a/packages/ui-vue/components/dynamic-form/src/schema/form-group.schema.json +++ b/packages/ui-vue/components/dynamic-form/src/schema/form-group.schema.json @@ -65,6 +65,11 @@ "description": "", "type": "object", "default": null + }, + "name": { + "description": "The name string of form group component", + "type": "string", + "default": "form group" } }, "required": [ diff --git a/packages/ui-vue/components/lookup/index.ts b/packages/ui-vue/components/lookup/index.ts index f5d8d2057d..bbd2d72462 100644 --- a/packages/ui-vue/components/lookup/index.ts +++ b/packages/ui-vue/components/lookup/index.ts @@ -20,7 +20,9 @@ import FLookup from './src/lookup.component'; import { callbackResolver, propsResolver } from './src/lookup.props'; import { LookupSchemaRepositoryToken } from './src/property-config/lookup.property-config'; import './lookup-style.scss'; +import { lookupDataSourceConverter } from './src/property-config/converters/lookup-property.converter'; +export { ExternalLookupPropertyConfig } from './src/property-config/external-lookup.property-config'; export * from './src/lookup.props'; export * from './src/composition/types'; @@ -38,5 +40,5 @@ FLookup.registerDesigner = (componentMap: Record, propsResolverMap: propsResolverMap.lookup = propsResolver; }; -export { FLookup, LookupSchemaRepositoryToken }; +export { FLookup, LookupSchemaRepositoryToken,lookupDataSourceConverter }; export default FLookup as typeof FLookup & Plugin; diff --git a/packages/ui-vue/components/lookup/src/property-config/external-lookup.property-config.ts b/packages/ui-vue/components/lookup/src/property-config/external-lookup.property-config.ts new file mode 100644 index 0000000000..9950ac12f7 --- /dev/null +++ b/packages/ui-vue/components/lookup/src/property-config/external-lookup.property-config.ts @@ -0,0 +1,62 @@ +import { LookupPropertyConfig } from "./lookup.property-config"; + +export class ExternalLookupPropertyConfig { + + private propertyConfigFilters = { + lookup: ['dataSource', 'displayType', 'idField', 'textField', 'multiSelect', 'showSelections', + 'separator', 'enableSearchBar', 'searchAnyField', 'enableFavorite', 'enableUserData' + ], + pager: ['showLimits', 'sizeLimits', 'size'], + treeConfig: ['cascadeStatus', 'enableCascade', 'enableFullTree', 'expandLevel', 'loadTreeDataType', 'navTreeToList', 'onlySelectLeaf', + 'showCascadeControl', 'treeToList'], + dialog: ['title', 'width', 'height', 'showNavigation', 'navigatorWidth', 'resizeable', 'rememberSize', 'enableEsc', 'showMaxButton', + 'showCloseButton'], + } + + constructor(private designerHostService) { + } + + /** + * 获取帮助的属性 + * @param propertyData + * @returns + */ + public getPropertyConfig(propertyData: any) { + const propertyConfigService = new LookupPropertyConfig('root-component', this.designerHostService); + + const lookup = propertyConfigService.getLookupConfig(propertyData); + const pager = propertyConfigService.getPageConfig(propertyData.editor); + const treeConfig = propertyConfigService.getTreePropConfig(propertyData.editor); + const dialog = propertyConfigService.getDialogPropertyConfig(propertyData); + const propertyConfig = { + type: 'object', + categories: { + lookup, + treeConfig, + pager, + dialog + } + }; + + this.filterLookupPropertyConfig(propertyConfig); + return propertyConfig; + } + + /** + * 过滤帮助的属性配置 + * @param propertyConfig + */ + private filterLookupPropertyConfig(propertyConfig: any) { + Object.keys(propertyConfig.categories).forEach(categoryKey => { + const propertyFilters = this.propertyConfigFilters[categoryKey]; + const propertyCategory = propertyConfig.categories[categoryKey]; + + Object.keys(propertyCategory.properties).forEach(propertyKey => { + if (!propertyFilters.includes(propertyKey)) { + delete propertyCategory.properties[propertyKey]; + } + }); + }) + } + +} diff --git a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts index d7e33b4da9..fecf5413cf 100644 --- a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts +++ b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts @@ -12,7 +12,6 @@ import { DesignerComponentInstance } from "@farris/ui-vue/components/designer-ca import { LookupEvents } from "./lookup-events"; import { cascadeItems } from "../composition/types"; import { ExpressionProperty } from "@farris/ui-vue/components/property-panel"; -import { isUndefined } from "util"; export const LookupSchemaRepositoryToken = Symbol('schema_repository_token'); @@ -145,7 +144,7 @@ export class LookupPropertyConfig extends InputBaseProperty { return editorOptions.displayType ? editorOptions.displayType.toUpperCase() : ''; } - private getLookupConfig(propertyData: any) { + public getLookupConfig(propertyData: any) { const editorOptions = propertyData.editor; const getRemoteParams = () => { const viewModelId = this.formSchemaUtils.getFormSchema().module.entity[0].id; @@ -536,7 +535,7 @@ export class LookupPropertyConfig extends InputBaseProperty { return false; } - private getDialogPropertyConfig(propertyData: any) { + public getDialogPropertyConfig(propertyData: any) { return { description: "帮助窗口尺寸配置", title: "帮助窗口", @@ -655,7 +654,7 @@ export class LookupPropertyConfig extends InputBaseProperty { return show; } - private getPageConfig(editorOptions: any) { + public getPageConfig(editorOptions: any) { const disablePager = !editorOptions.pagination?.enable; return { @@ -747,7 +746,7 @@ export class LookupPropertyConfig extends InputBaseProperty { return this.getDisplayType(editorOptions) === 'TREELIST' && !editorOptions.treeToList; } - private getTreePropConfig(editorOptions: any) { + public getTreePropConfig(editorOptions: any) { return { hide: this.getDisplayType(editorOptions) !== 'TREELIST' && this.getDisplayType(editorOptions) !== 'NAVTREELIST', description: "树形数据配置", -- Gitee From 246de2ebfa6e59b6cff7fbcf21d34b312ebb3bad Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Sat, 5 Jul 2025 15:47:13 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../external-component-panel/external-component-panel.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss index ff049899b2..1abe5098a2 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss @@ -116,7 +116,6 @@ flex: 1; box-shadow: rgba(91, 163, 255, 0.1) 0px 0px 8px 0px; border-radius: 6px; - display: flex; justify-content: center; align-items: center; } @@ -129,7 +128,6 @@ width: 140px; height: 20px; opacity: 0.55; - font-family: PingFangSC-Regular; font-size: 14px; color: #3F4764; text-align: center; -- Gitee From f415a8be55e13367bc1599835fa921276be189ff Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Wed, 9 Jul 2025 14:16:24 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feature:=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=BC=B9=E7=AA=97=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../use-external-component-property.ts | 26 ++-- .../composition/use-external-component.ts | 38 ++++-- .../form-designer/form-designer.component.tsx | 4 +- .../designer/src/components/types/metadata.ts | 2 +- packages/ui-vue/components/designer.ts | 1 + .../external-lookup.property-config.ts | 49 +++++++- .../src/property-config/lookup-events.ts | 28 ++++- packages/ui-vue/components/modal/index.ts | 9 +- .../components/modal/src/modal.props.ts | 6 + .../modal/src/property-config/modal-events.ts | 15 +++ .../property-config/modal.property-config.ts | 117 ++++++++++++++++++ .../modal/src/schema/modal.schema.json | 109 ++++++++++++++++ .../modal/src/schema/schema-mapper.ts | 5 + .../modal/src/schema/schema-resolver.ts | 5 + 14 files changed, 387 insertions(+), 27 deletions(-) create mode 100644 packages/ui-vue/components/modal/src/property-config/modal-events.ts create mode 100644 packages/ui-vue/components/modal/src/property-config/modal.property-config.ts create mode 100644 packages/ui-vue/components/modal/src/schema/modal.schema.json create mode 100644 packages/ui-vue/components/modal/src/schema/schema-mapper.ts create mode 100644 packages/ui-vue/components/modal/src/schema/schema-resolver.ts diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts index 5e487923d6..42ebca9ac9 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts @@ -1,9 +1,11 @@ import { DesignerHostService, ExternalLookupPropertyConfig } from "@farris/ui-vue/components"; import { ExternalComponentSchema } from "./types"; +import { ModalProperty } from "@farris/ui-vue/components"; export function useExternalComponentProperty(designerHostService: DesignerHostService, propertyData: ExternalComponentSchema) { - - const externalLookupPropertyConfig = new ExternalLookupPropertyConfig(designerHostService); + const componentId = 'root-component'; + const externalLookupPropertyConfig = new ExternalLookupPropertyConfig(componentId,designerHostService); + let convertedPropertyData ; /** * 获取弹窗的属性 @@ -11,11 +13,8 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe * @returns */ function getModalPropertyConfig(): any { - const propertyConfig = { - type: 'object', - categories: {} - }; - return propertyConfig; + const propertyConfig = new ModalProperty(componentId,designerHostService); + return propertyConfig.getPropertyConfig(propertyData); } @@ -39,14 +38,21 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe } function getConvertedPropertyData(): any { - let convertedPropertyData = propertyData; + if(convertedPropertyData){ + return convertedPropertyData; + } + if (propertyData.type === 'lookup') { convertedPropertyData = { id: propertyData.id, name: propertyData.name, type: 'form-group', - editor: propertyData + editor: propertyData, + dictPicked: propertyData.dictPicked } + externalLookupPropertyConfig.events.forEach(event => { + convertedPropertyData[event.label] = propertyData[event.label]; + }) } return convertedPropertyData; @@ -58,7 +64,7 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe const convertedPropertyData = getConvertedPropertyData(); propertyConfig = externalLookupPropertyConfig.getPropertyConfig(convertedPropertyData); } else { - return getModalPropertyConfig(); + propertyConfig = getModalPropertyConfig(); } const basic = getBasePropertyConfig(); diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts index 9c93d51cd6..7058a4e1ed 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts @@ -14,8 +14,8 @@ export default function (): UseExternalComponent { const metadataService = new MetadataService(); const module = formSchemaUtils.getModule(); - module.hiddenComponents ??= []; - const externalComponents: Ref = ref(module.hiddenComponents); + module.externalComponents ??= []; + const externalComponents: Ref = ref(module.externalComponents); function getComponents(): Ref { return externalComponents; @@ -42,14 +42,38 @@ export default function (): UseExternalComponent { metadataContent } lookupDataSourceConverter.convertTo(propertyValue, 'dataSource', [metadata]); - + helpPropertyValue.dialog ??= {}; + helpPropertyValue.dialog.title = metadataContent.name; propertyValue.editor.name = metadataContent.name; return propertyValue; }); } - + function getModalPropertyValue(component: SchemaItem): any { const propertyValue = getSchemaByType('modal') || {}; + propertyValue.title = component.name; + propertyValue.name = component.name; + const idSuffix = idService.uuid().slice(5, 10); + const externalContainerId = `external-container-${idSuffix}`; + + propertyValue["contents"] = [ + { + id: externalContainerId, + type: "external-container", + appearance: { + class: "position-relative h-100" + }, + externalComponent: { + id: component.id, + code: component.code, + name: component.name, + fileName: component.fileName || '', + relativePath: component.relativePath + }, + onCommunication: "" + } + ] + return propertyValue; } @@ -64,13 +88,11 @@ export default function (): UseExternalComponent { if (externalComponentType === 'Lookup') { getLookupPropertyValue(component).then(propertyValue => { - const helpPropertyValue = propertyValue.editor; - helpPropertyValue.id = propertyValueId; + const helpPropertyValue = { id: propertyValueId, ...propertyValue.editor }; externalComponents.value.push(helpPropertyValue); }); } else { - const propertyValue = getModalPropertyValue(component); - propertyValue.id = propertyValueId; + const propertyValue = { id: propertyValueId, ...getModalPropertyValue(component) }; externalComponents.value.push(propertyValue); } } diff --git a/packages/designer/src/components/components/form-designer/form-designer.component.tsx b/packages/designer/src/components/components/form-designer/form-designer.component.tsx index 3c00582b8a..2b16118d79 100644 --- a/packages/designer/src/components/components/form-designer/form-designer.component.tsx +++ b/packages/designer/src/components/components/form-designer/form-designer.component.tsx @@ -270,10 +270,10 @@ export default defineComponent({ components={componentsToRegister} canvasMode={designerMode} > - {/* - */} + { + self.eventsEditorUtils.jumpToMethod(commandInfo); + } + } + }; + return { + title: '事件', + hideTitle: true, + properties, + refreshPanelAfterChanged: true, + tabId: 'commands', + tabName: '交互', + setPropertyRelates(changeObject: any, newPropertyData: any) { + const propertyData = newPropertyData.editor; + + const parameters = changeObject.propertyValue; + delete propertyData[self.viewModelId]; + if (parameters) { + self.eventsEditorUtils.saveRelatedParameters(propertyData, self.viewModelId, parameters['events'], parameters); + } + self.events.forEach(event => { + newPropertyData[event.label] = propertyData[event.label]; + }) + } + }; + } + + } diff --git a/packages/ui-vue/components/lookup/src/property-config/lookup-events.ts b/packages/ui-vue/components/lookup/src/property-config/lookup-events.ts index 88e7ad2028..824e10d421 100644 --- a/packages/ui-vue/components/lookup/src/property-config/lookup-events.ts +++ b/packages/ui-vue/components/lookup/src/property-config/lookup-events.ts @@ -6,13 +6,35 @@ export const LookupEvents = [ { label: 'dictPicking', name: '帮助前事件' - }, { + }, + { label: 'beforeLoadData', name: '数据加载前事件' - }, { + }, + { label: 'beforeSelectData', name: '选择数据确认前事件' - }, { + }, + { + label: 'dictPicked', + name: '帮助后事件' + } +]; + +export const ExternalLookupEvents = [ + { + label: 'dictPicking', + name: '帮助前事件' + }, + { + label: 'beforeLoadData', + name: '数据加载前事件' + }, + { + label: 'beforeSelectData', + name: '选择数据确认前事件' + }, + { label: 'dictPicked', name: '帮助后事件' } diff --git a/packages/ui-vue/components/modal/index.ts b/packages/ui-vue/components/modal/index.ts index 1630f0368b..ad3ecbcd0c 100644 --- a/packages/ui-vue/components/modal/index.ts +++ b/packages/ui-vue/components/modal/index.ts @@ -16,6 +16,8 @@ import type { App, Plugin } from 'vue'; import FModal from './src/modal.component'; import FModalService from './src/composition/modal.service'; +import { propsResolver } from './src/modal.props'; +import { ModalProperty } from './src/property-config/modal.property-config'; export * from './src/composition/type'; export * from './src/modal.props'; @@ -31,5 +33,10 @@ FModal.install = (app: App) => { app.provide('FModalService', modalInstance); }; -export { FModal, FModalService }; +FModal.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { + componentMap.modal = FModal; + propsResolverMap.modal = propsResolver; +}; + +export { FModal, FModalService, ModalProperty }; export default FModal as typeof FModal & Plugin; diff --git a/packages/ui-vue/components/modal/src/modal.props.ts b/packages/ui-vue/components/modal/src/modal.props.ts index b94bc6cd17..3ffb5c0b42 100644 --- a/packages/ui-vue/components/modal/src/modal.props.ts +++ b/packages/ui-vue/components/modal/src/modal.props.ts @@ -14,7 +14,11 @@ * limitations under the License. */ import { ExtractPropTypes, PropType } from 'vue'; +import { createPropsResolver } from "@farris/ui-vue/components/dynamic-resolver"; import { ModalButton } from './composition/type'; +import modalSchema from './schema/modal.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export type DragHandleType = HTMLElement | string; @@ -100,3 +104,5 @@ export const modalProps = { }; export type ModalProps = Partial>; + +export const propsResolver = createPropsResolver(modalProps as any, modalSchema, schemaMapper, schemaResolver); diff --git a/packages/ui-vue/components/modal/src/property-config/modal-events.ts b/packages/ui-vue/components/modal/src/property-config/modal-events.ts new file mode 100644 index 0000000000..28bb12e1c9 --- /dev/null +++ b/packages/ui-vue/components/modal/src/property-config/modal-events.ts @@ -0,0 +1,15 @@ + +export const ModalEvents = [ + { + label: 'beforeClose', + name: '关闭前回调事件' + }, + { + label: 'onAccept', + name: '确定事件' + }, + { + label: 'onCancel', + name: '取消事件' + } +]; diff --git a/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts b/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts new file mode 100644 index 0000000000..f6b532641a --- /dev/null +++ b/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts @@ -0,0 +1,117 @@ +import { BaseControlProperty } from "../../../property-panel"; +import { ModalEvents } from "./modal-events"; +export class ModalProperty extends BaseControlProperty { + private numberEditor = { + type: "number-spinner", + useThousands: false + }; + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + + public getPropertyConfig(propertyData: any) { + const eventsEditor = this.getEventPropConfig(propertyData); + + this.propertyConfig.categories['dialog'] = this.getDialogPropertyConfig(propertyData); + this.propertyConfig.categories['eventsEditor'] = eventsEditor; + + return this.propertyConfig; + } + + public getDialogPropertyConfig(propertyData: any) { + return { + description: "窗口尺寸配置", + title: "窗口", + parentPropertyID: 'dialog', + properties: { + title: { + description: "标题", + title: "标题", + type: "string", + visible: true + }, + width: { + description: "窗口宽度，最小值：300px", + title: "宽度", + type: "number", + editor: { + ...this.numberEditor, + min: 300 + } + }, + height: { + description: "窗口高度，最小值：200px", + title: "高度", + type: "number", + editor: { + ...this.numberEditor, + min: 200 + } + }, + resizeable: { + description: "允许鼠标拖拽窗口边缘调整尺寸", + title: "允许调整窗口尺寸", + type: "boolean", + visible: true + }, + enableEsc: { + description: "允许ESC关闭", + title: "允许ESC关闭", + type: "boolean", + visible: true + }, + showMaxButton: { + description: "显示最大化按钮", + title: "显示最大化按钮", + type: "boolean", + visible: true + }, + showCloseButton: { + description: "显示关闭按钮", + title: "显示关闭按钮", + type: "boolean", + visible: true + } + } + }; + } + + + private getEventPropConfig(propertyData: any) { + const self: any = this; + const events = ModalEvents; + const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); + const properties = {}; + properties[self.viewModelId] = { + type: 'events-editor', + editor: { + initialData, + viewSourceHandle: (commandInfo: any) => { + self.eventsEditorUtils.jumpToMethod(commandInfo); + } + } + }; + return { + title: '事件', + hideTitle: true, + properties, + refreshPanelAfterChanged: true, + tabId: 'commands', + tabName: '交互', + setPropertyRelates(changeObject: any, newPropertyData: any) { + + const parameters = changeObject.propertyValue; + delete propertyData[self.viewModelId]; + if (parameters) { + self.eventsEditorUtils.saveRelatedParameters(propertyData, self.viewModelId, parameters['events'], parameters); + } + events.forEach(event => { + newPropertyData[event.label] = propertyData[event.label]; + }) + + } + }; + } + +} diff --git a/packages/ui-vue/components/modal/src/schema/modal.schema.json b/packages/ui-vue/components/modal/src/schema/modal.schema.json new file mode 100644 index 0000000000..03e766e4bf --- /dev/null +++ b/packages/ui-vue/components/modal/src/schema/modal.schema.json @@ -0,0 +1,109 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/modal.schema.json", + "title": "modal", + "description": "弹窗组件", + "type": "object", + "properties": { + "id": { + "description": "组件唯一标识", + "type": "string" + }, + "type": { + "description": "组件类型", + "type": "string", + "default": "modal" + }, + "appearance": { + "description": "组件外观", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "title": { + "description": "标题", + "type": "string" + }, + "name": { + "description": "名称", + "type": "string", + "default": null + }, + "width": { + "description": "窗口宽度", + "type": "number", + "default": 500 + }, + "height": { + "description": "窗口高度", + "type": "number", + "default": 320 + }, + "contents": { + "description": "弹窗子组件集合", + "type": "array", + "default": [] + }, + "modelValue": { + "description": "是否显示", + "type": "boolean", + "default": false + }, + "fitContent": { + "description": "是否自适应", + "type": "boolean", + "default": false + }, + "showButtons": { + "description": "是否显示底部按钮", + "type": "boolean", + "default": true + }, + "mask": { + "description": "是否模态", + "type": "boolean", + "default": true + }, + "onAccept": { + "description": "确定事件", + "type": "object", + "default": null + }, + "onCancel": { + "description": "取消事件", + "type": "object", + "default": null + }, + "showCloseButton": { + "description": "显示关闭按钮", + "type": "boolean", + "default": true + }, + "showMaxButton": { + "description": "显示最大化按钮", + "type": "boolean", + "default": true + }, + "enableEsc": { + "description": "允许ESC关闭", + "type": "boolean", + "default": true + }, + "resizeable": { + "description": "允许调整窗口尺寸", + "type": "boolean", + "default": true + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/ui-vue/components/modal/src/schema/schema-mapper.ts b/packages/ui-vue/components/modal/src/schema/schema-mapper.ts new file mode 100644 index 0000000000..2ca33ca080 --- /dev/null +++ b/packages/ui-vue/components/modal/src/schema/schema-mapper.ts @@ -0,0 +1,5 @@ +import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver'; + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/ui-vue/components/modal/src/schema/schema-resolver.ts b/packages/ui-vue/components/modal/src/schema/schema-resolver.ts new file mode 100644 index 0000000000..d36ae74574 --- /dev/null +++ b/packages/ui-vue/components/modal/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver"; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} -- Gitee From d5c44dae3e7db79c6f7ff97d51b9a0af0215bb16 Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Wed, 9 Jul 2025 14:23:02 +0800 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20=E5=B1=8F=E8=94=BD=E5=A4=96?= =?UTF-8?q?=E9=83=A8=E7=BB=84=E4=BB=B6=E5=85=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/form-designer/form-designer.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/designer/src/components/components/form-designer/form-designer.component.tsx b/packages/designer/src/components/components/form-designer/form-designer.component.tsx index 2b16118d79..e6bb5ffb83 100644 --- a/packages/designer/src/components/components/form-designer/form-designer.component.tsx +++ b/packages/designer/src/components/components/form-designer/form-designer.component.tsx @@ -270,10 +270,10 @@ export default defineComponent({ components={componentsToRegister} canvasMode={designerMode} > - - + */} Date: Wed, 9 Jul 2025 15:13:44 +0800 Subject: [PATCH 5/6] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composition/use-external-component-property.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts index 42ebca9ac9..024366a2aa 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts @@ -47,8 +47,7 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe id: propertyData.id, name: propertyData.name, type: 'form-group', - editor: propertyData, - dictPicked: propertyData.dictPicked + editor: propertyData } externalLookupPropertyConfig.events.forEach(event => { convertedPropertyData[event.label] = propertyData[event.label]; -- Gitee From 24bc9e6c59749c2e8aeb4e0634933e10000db27d Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Thu, 10 Jul 2025 09:41:58 +0800 Subject: [PATCH 6/6] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9?= =?UTF-8?q?=E6=A1=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composition/use-external-component-property.ts | 2 ++ packages/ui-vue/components/dynamic-view/src/components/maps.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts index 024366a2aa..a79b2d2dd1 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts @@ -52,6 +52,8 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe externalLookupPropertyConfig.events.forEach(event => { convertedPropertyData[event.label] = propertyData[event.label]; }) + }else{ + convertedPropertyData = propertyData; } return convertedPropertyData; diff --git a/packages/ui-vue/components/dynamic-view/src/components/maps.ts b/packages/ui-vue/components/dynamic-view/src/components/maps.ts index 62809978b0..f0b435a319 100644 --- a/packages/ui-vue/components/dynamic-view/src/components/maps.ts +++ b/packages/ui-vue/components/dynamic-view/src/components/maps.ts @@ -70,6 +70,7 @@ import FExpressionEditor from '@farris/ui-vue/components/expression-editor'; import FCodeEditor from '@farris/ui-vue/components/code-editor'; import FHtmlTemplate from '@farris/ui-vue/components/html-template'; import FCollectionPropertyEditor from '@farris/ui-vue/components/collection-property-editor'; +import FModal from '@farris/ui-vue/components/modal'; const componentMap: Record = {}; const componentPropsConverter: Record = {}; @@ -156,6 +157,7 @@ function loadRegister() { FCodeEditor.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); FHtmlTemplate.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); FCollectionPropertyEditor.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); + FModal.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); } } -- Gitee