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 5e487923d64b247be0e6a29f42d474626f795b3e..a79b2d2dd1402d4bfc69ca465f3dfa0d8c96f7f3 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,7 +38,10 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe } function getConvertedPropertyData(): any { - let convertedPropertyData = propertyData; + if(convertedPropertyData){ + return convertedPropertyData; + } + if (propertyData.type === 'lookup') { convertedPropertyData = { id: propertyData.id, @@ -47,6 +49,11 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe type: 'form-group', editor: propertyData } + externalLookupPropertyConfig.events.forEach(event => { + convertedPropertyData[event.label] = propertyData[event.label]; + }) + }else{ + convertedPropertyData = propertyData; } return convertedPropertyData; @@ -58,7 +65,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 9c93d51cd6da63735e917dc393bfa992ac57b961..7058a4e1ed9ec5391e84361cd813df59a2d5b481 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 3c00582b8aa6506e45f45a8a41e816037e302e9b..e6bb5ffb837e734fe0d8add24719309d9fb59bcc 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 @@ -273,7 +273,7 @@ export default defineComponent({ {/* - */} + */} = {}; 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); } } 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 index 9950ac12f7343500da2ce492af5003a4824f193b..eed6c6486409a4a2eabb27782bff552958adce05 100644 --- 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 @@ -1,6 +1,8 @@ +import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property"; +import { ExternalLookupEvents } from "./lookup-events"; import { LookupPropertyConfig } from "./lookup.property-config"; -export class ExternalLookupPropertyConfig { +export class ExternalLookupPropertyConfig extends BaseControlProperty { private propertyConfigFilters = { lookup: ['dataSource', 'displayType', 'idField', 'textField', 'multiSelect', 'showSelections', @@ -13,7 +15,10 @@ export class ExternalLookupPropertyConfig { 'showCloseButton'], } - constructor(private designerHostService) { + public events = ExternalLookupEvents; + + constructor(componentId: string, designerHostService) { + super(componentId, designerHostService); } /** @@ -28,6 +33,7 @@ export class ExternalLookupPropertyConfig { const pager = propertyConfigService.getPageConfig(propertyData.editor); const treeConfig = propertyConfigService.getTreePropConfig(propertyData.editor); const dialog = propertyConfigService.getDialogPropertyConfig(propertyData); + const eventsEditor = this.getEventPropConfig(propertyData); const propertyConfig = { type: 'object', categories: { @@ -39,6 +45,8 @@ export class ExternalLookupPropertyConfig { }; this.filterLookupPropertyConfig(propertyConfig); + + propertyConfig.categories['eventsEditor'] = eventsEditor; return propertyConfig; } @@ -59,4 +67,41 @@ export class ExternalLookupPropertyConfig { }) } + + private getEventPropConfig(propertyData: any) { + const self: any = this; + const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, this.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 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 88e7ad2028ef2055993141e3fda8d0fcc9c19dd1..824e10d4217ac85ee9961b14bc390651893d8295 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 1630f0368b118b709338e035ab2647121b714aaf..ad3ecbcd0c2d234ef4f7c71139670e15efe37d8f 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 92272db84605dea7796c82f7827ccddf614c7670..a892598924b9980d0bd0a99c5e7a8440f9a1589f 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; @@ -101,3 +105,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 0000000000000000000000000000000000000000..28bb12e1c92f0f9b36edf7f83d94da76f68b373a --- /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 0000000000000000000000000000000000000000..f6b532641afd712ca5d95defcf0690a52c5708b8 --- /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 0000000000000000000000000000000000000000..03e766e4bf1e5089087e1f843ed894127ecc85cf --- /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 0000000000000000000000000000000000000000..2ca33ca080647b9edc66a133396282d6a3b1698f --- /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 0000000000000000000000000000000000000000..d36ae7457434b7381b796814e9926d352feacff6 --- /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; +}