diff --git a/how_to_develop_component.md b/how_to_develop_component.md index 32ce3b98364ab8805bdeb5c668d76f80ce63026c..a4aee81ae28e944cd951284f7137d5495a3bc59f 100644 --- a/how_to_develop_component.md +++ b/how_to_develop_component.md @@ -420,7 +420,7 @@ export { componentMap, componentPropsConverter }; { "id": "HtmlTemplate", "type": "HtmlTemplate", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue index 9db1aee6dfc0b3156498c4ae0d91ac80182eec37..4d25d078a0730f1298b3920aac976ed01f43da58 100644 --- a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue @@ -34,7 +34,7 @@ const curTheme = inject('current-theme') as Ref; diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx index bcb7d10ac41ae16abc52c2e7b7c3fa6d5ce4dd6d..d6ea25cf0aeba15cb27387aafad80bbce858e242 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx @@ -83,10 +83,13 @@ export default defineComponent({ const targetFormId = formMetadataDom.module.id; const isCurrentFormSelected = targetFormId === formBasicInfo.id; if (isCurrentFormSelected || containsNestedForm(formMetadataDom)) { - const message = `表单【${formSchema.name}】嵌套了外部表单，不支持作为弹窗使用。`; + const message = isCurrentFormSelected + ? `不支持将当前表单作为弹窗使用。` + : `表单【${formSchema.name}】嵌套了外部表单，不支持作为弹窗使用。`; FMessageBoxService.warning(message, ''); return false; } + selectedComponent.value = result.metadata; // 使用更详细的元数据信息 return true; }).catch((error) => { FMessageBoxService.error(error?.error || `查询表单【${formSchema.name}】失败`, ''); diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx index aa8fe4795732503e18342124b95fc7f469f0ef86..efbbfd6396640079e294a385d04778b6cd3b5419 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx @@ -1,93 +1,82 @@ -import { computed, inject, onMounted, Ref, ref, SetupContext } from "vue"; +import { computed, onMounted, ref } from "vue"; import { useExternalComponentDragula } from "../../composition/use-external-component-dragula"; -import { ExternalComponentPanelProps } from "../../external-component-panel.props"; import FExternalComponent from './external-component.component'; -import useExternalComponent from "../../composition/use-external-component"; -import { ExternalComponentSchema } from "../../composition/types"; +import { ExternalComponentSchema, UseExternalComponent } from "../../composition/types"; export default function ( - props: ExternalComponentPanelProps, - context: SetupContext, + externalComponentComposition: UseExternalComponent, ) { /** 外部组件的容器 */ const componentContainerRef = ref(); - /** 选中的外部组件的内码 */ - const selectedComponentId: Ref = ref(); - const externalComponentComposition = useExternalComponent(); /** 拖拽相关方法 */ const { initDragula, attachToDragulaContainer } = useExternalComponentDragula(externalComponentComposition); const externalComponents = externalComponentComposition.getComponents(); + const { isSelected } = externalComponentComposition; + /** 存在外部组件 */ const hasExternalComponents = computed(() => { return externalComponents.value.length > 0; - }) - /** 外部组件是否选中 */ - const isSelected = computed(() => { - return (externalComponentSchema: ExternalComponentSchema) => externalComponentSchema.id === selectedComponentId.value; - }) + }); /** * 点击外部组件 - * @param selectedComponent - * @param componentInstance + * @param selectedComponent 被点击的外部组件 */ - function onClick(selectedComponent: ExternalComponentSchema, componentInstance: any) { - selectedComponentId.value = selectedComponent.id; - context.emit('selectionChange', selectedComponent, componentInstance); + function onClick(selectedComponent: ExternalComponentSchema) { + externalComponentComposition.selectExternalComponent(selectedComponent); } /** * 删除外部组件 - * @param component */ function onDelete(externalComponentSchema: ExternalComponentSchema) { - selectedComponentId.value = ''; externalComponentComposition.deleteComponent(externalComponentSchema); } onMounted(() => { initDragula(componentContainerRef.value); attachToDragulaContainer(); - }) + }); /** * 渲染外部组件 - * @returns */ function renderComponent(externalComponentSchema: ExternalComponentSchema) { return ( - + - ) + ); } /** * 渲染外部组件所在的容器 - * @returns */ function renderComponentContainer() { return (
{externalComponents.value.map(renderComponent)}
- ) + ); } /** * 渲染空容器 - * @returns */ function renderEmptyContainer() { return (
-
- 从右侧拖拽模版到这里 +
+ 从右侧拖拽模板到这里
- ) + ); } return () => { @@ -99,7 +88,7 @@ export default function ( }}> {hasExternalComponents.value ? renderComponentContainer() : renderEmptyContainer()}
- ) - } + ); + }; } 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 933087a52d2dcf3bbe355049e49b9abd413d7c6d..2184d5279daf0c911cd2f064543d27a7bfdb5308 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 @@ -1,5 +1,5 @@ import { SchemaItem } from "@farris/ui-vue/components"; -import { Ref } from "vue"; +import { Ref, ComputedRef } from "vue"; export type ExternalComponentType = 'Implant' | 'Independence' | 'Lookup'; @@ -14,4 +14,7 @@ export interface UseExternalComponent { getComponents(): Ref; addComponent: (component: SchemaItem, componentType: ExternalComponentType) => void; deleteComponent: (hiddenComponentSchema: ExternalComponentSchema) => void; -} \ No newline at end of file + selectExternalComponent: (externalComponentSchema?: ExternalComponentSchema) => void; + clearExternalComponentSelection: () => void; + isSelected: ComputedRef<(externalComponentSchema: ExternalComponentSchema) => boolean>; +} 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 1e5864660e967497d944fe2386795ff90bac5520..d9fd8b1ea99f5d5cc3de279495b79d238abd2740 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,7 +52,16 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe editor: propertyData }; externalLookupPropertyConfig.events.forEach(event => { - convertedPropertyData[event.label] = propertyData[event.label]; + Object.defineProperty(convertedPropertyData, event.label, { + get(): any { + return propertyData[event.label]; + }, + set(value: any) { + propertyData[event.label] = value; + }, + enumerable: true, + configurable: true, + }); }); } else { convertedPropertyData = propertyData; 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 fed8f4e9beac478f7ade1b51b78ed95224652b53..39d4fcca99766ea6320c7ab3d9a92d95d2fb945e 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,11 +1,11 @@ -import { inject, Ref, ref } from "vue"; +import { inject, Ref, ref, SetupContext, computed } from "vue"; import { ExternalComponentSchema, ExternalComponentType, UseExternalComponent } from "./types"; 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 { +export default function (context: SetupContext): UseExternalComponent { const notifyService = new FNotifyService(); notifyService.globalConfig = { position: 'top-center' }; @@ -109,6 +109,17 @@ export default function (): UseExternalComponent { return propertyValue; } + const selectedComponentId: Ref = ref(); + + function selectExternalComponent(externalComponentSchema?: ExternalComponentSchema): void { + selectedComponentId.value = externalComponentSchema?.id || ''; + context.emit('selectionChange', externalComponentSchema); + } + + function clearExternalComponentSelection(): void { + selectedComponentId.value = ''; + } + /** * 添加外部组件 * @param component 目标元数据 @@ -122,10 +133,12 @@ export default function (): UseExternalComponent { getLookupPropertyValue(component).then(propertyValue => { const helpPropertyValue = { id: propertyValueId, ...propertyValue.editor }; externalComponents.value.push(helpPropertyValue); + selectExternalComponent(helpPropertyValue); }); } else { const propertyValue = { id: propertyValueId, ...getModalPropertyValue(component) }; externalComponents.value.push(propertyValue); + selectExternalComponent(propertyValue); } } @@ -138,12 +151,19 @@ export default function (): UseExternalComponent { if (componentIndex > -1) { externalComponents.value.splice(componentIndex, 1); } + selectExternalComponent(undefined); } + const isSelected = computed(() => { + return (externalComponentSchema: ExternalComponentSchema) => externalComponentSchema.id === selectedComponentId.value; + }); return { getComponents, addComponent, deleteComponent, + selectExternalComponent, + clearExternalComponentSelection, + isSelected, }; } diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx index e41fcfa9580a2977030715b33c108a54eaebf978..4bc0de6529076980403897f6ac697738009fe1ff 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx @@ -1,8 +1,8 @@ -import { defineComponent, ref, watch } from 'vue'; +import { computed, defineComponent, ref, CSSProperties } from 'vue'; import { ExternalComponentPanelProps, externalComponentPanelProps } from './external-component-panel.props'; import getExternalComponentTemplateRender from './components/external-component-template/external-component-template.component'; import getExternalComponentContainerRender from './components/external-component/external-component-container.component'; -import './external-component-panel.scss' +import './external-component-panel.scss'; import useExternalComponent from './composition/use-external-component'; export default defineComponent({ @@ -11,13 +11,15 @@ export default defineComponent({ emits: ['selectionChange'] as (string[] & ThisType) | undefined, setup(props: ExternalComponentPanelProps, context) { const showExternalComponent = ref(false); - const panelStyle = ref(`width:${props.width}px`); - const externalComponentComposition = useExternalComponent(); + const MIN_WIDTH = 200; + const BUTTON_HEIGHT = 30; + + const externalComponentComposition = useExternalComponent(context); const externalComponents = externalComponentComposition.getComponents(); /** 渲染外部组件的容器 */ - const renderExternalComponentContainer = getExternalComponentContainerRender(props, context); + const renderExternalComponentContainer = getExternalComponentContainerRender(externalComponentComposition); /** 渲染外部组件的模板 */ const renderExternalComponentTemplate = getExternalComponentTemplateRender(); @@ -35,53 +37,60 @@ export default defineComponent({ showExternalComponent.value = false; } - watch(() => props.width, (newWidth: number) => { - panelStyle.value = `width:${newWidth}px` - }) + const panelStyle = computed(() => ({ + width: `${Math.max(MIN_WIDTH, props.width)}px`, + })); + const panelTrackStyle = computed(() => ({ + maxHeight: `${Math.max(0, props.maxHeight - BUTTON_HEIGHT)}px`, + })); + + function clearSelection(): void { + externalComponentComposition.clearExternalComponentSelection(); + } + + context.expose({ clearSelection }); /** * 渲染收起面板按钮 - * @returns */ function renderShowedTopBar() { return (
- + - + 收起面板
- ) + ); } /** * 渲染隐藏区域按钮 - * @returns */ function renderCollapsedTopBar() { return (
- + - + fill="#F0F2F8" stroke="#ffffff" stroke-width="2" /> + 隐藏区域 - { externalComponents.value.length } + {externalComponents.value.length}
- ) + ); } return () => { @@ -90,15 +99,16 @@ export default defineComponent({
{showExternalComponent.value ? renderShowedTopBar() : renderCollapsedTopBar()} - ); - } + }; } }); - diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts index 90cc52664b3cc61808337e824c681479cf53b090..1981dfcc07c1f5ec032aa7c6b837e303782aab1e 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts @@ -3,7 +3,8 @@ import { ExtractPropTypes } from "vue"; export const externalComponentPanelProps = { id: { type: String, default: '' }, modelValue: { type: Object }, - width: { type: Number, default: 900 } + width: { type: Number, default: 900 }, + maxHeight: { type: Number, default: 430 }, } as Record; export type ExternalComponentPanelProps = ExtractPropTypes; 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 64eb6ee16301650ebebc8f522b72bedb2d767098..3e45ddc9314f2cef98faab77076596039ae2da55 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 @@ -6,18 +6,37 @@ padding-bottom: 40px; } -.f-external-component-panel-main-content { - display: flex; - height: 400px; +.f-external-component-panel-track { + overflow: auto; background: #F8FAFC; border-radius: 10px 10px 0px 0px; box-shadow: 0px -10px 10px -10px rgba(215, 223, 244, 1); } -.f-external-component-panel-top-bar-container { +.f-external-component-panel-main-content { display: flex; - justify-content: flex-end; - padding-right: 30px; + height: 400px; + min-width: 370px; +} + +.f-external-component-panel-top-bar-container { + display: inline-flex; + position: absolute; + top: -30px; + right: 30px; +} + +.f-external-component-panel-top-bar-container .f-icon { + position: absolute; + top: 10px; +} + +.f-external-component-panel-top-bar-container .f-icon.f-legend-show { + left: 10px; +} + +.f-external-component-panel-top-bar-container .f-icon.f-legend-collapse { + left: 8px; } .f-external-component-panel-mask { @@ -33,6 +52,8 @@ background: white; margin: 10px 10px 10px 0px; width: 15%; + min-width: 160px; + flex-shrink: 0; display: flex; flex-direction: column; align-items: center; @@ -68,6 +89,7 @@ display: flex; align-items: center; } + .f-external-component-template-text-container div { margin: auto; text-overflow: ellipsis; 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 00669c530e633a5fc5e1c0630cad985f37769cbb..0da86153b53d0be7535e64cca58b2db216d8d405 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 @@ -37,18 +37,19 @@ export default defineComponent({ dragulaCompostion.value = dragula; } const canvasRef = ref(); + const externalComponentPanelRef = ref(); const propertyConfig = ref(); const propertyName = ref(); const focusingSchema = ref(); const schemaService = useComponentSchemaService(schema); const externalComponentPanelWidth = ref(900); + const externalComponentPanelMaxHeight = ref(430); const externalComponentPanelResizeObserver = new ResizeObserver(() => { - const { designerCanvasElementRef } = canvasRef.value; - const { width } = designerCanvasElementRef.getBoundingClientRect(); - if (externalComponentPanelWidth.value !== width) { - externalComponentPanelWidth.value = width; - } + const { designerCanvasContainerElementRef } = canvasRef.value; + const { width, height } = designerCanvasContainerElementRef.getBoundingClientRect(); + externalComponentPanelWidth.value = width; + externalComponentPanelMaxHeight.value = height; }); schemaService.load(componentSchema.value); provide('SchemaService', schemaService); @@ -57,7 +58,13 @@ export default defineComponent({ const formCommandService = inject('useFormCommand') as UseFormCommandService; const useFormSchema: any = inject('useFormSchema') as UseFormSchema; - function onDesignItemClicked(schemaType: string, schemaValue: ComponentSchema, componentId: string, componentInstance: DesignerComponentInstance) { + + function clearExternalComponentSelection(): void { + externalComponentPanelRef.value?.clearSelection(); + } + + function onDesignItemClicked(schemaType?: string, schemaValue?: ComponentSchema, componentId?: string, componentInstance?: DesignerComponentInstance) { + clearExternalComponentSelection(); propertyName.value = schemaType; propertyPanelInstance?.value?.updateDesignerItem(componentInstance, componentId); focusingSchema.value = schemaValue; @@ -118,13 +125,43 @@ export default defineComponent({ } } + /** 清除画布中的已选样式 */ + function clearComponentSelectionStyles(): void { + Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentSelected') + ); + Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentFocused') + ); + } + + function clearPropertyPanel(): void { + propertyName.value = undefined; + propertyPanelInstance?.value?.updateDesignerItem(undefined, undefined); + focusingSchema.value = undefined; + propertyPanelInstance.value.updatePropertyConfig({}, {}, true); + } + + function unselectCanvasDesignItem(): void { + clearPropertyPanel(); + controlTreeRef.value?.selectControlTreeNode(undefined); + clearComponentSelectionStyles(); + } + function onClickExternalComponent(propertyData: ExternalComponentSchema) { + if (!propertyData) { + clearPropertyPanel(); + return; + } + unselectCanvasDesignItem(); // 点击外部组件后，更新属性面板 - 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); + nextTick(() => { + 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) => { @@ -162,7 +199,9 @@ export default defineComponent({ function renderExternalComponentPanel() { return shouldRenderExternalComponentPanel && ( ); @@ -190,13 +229,7 @@ export default defineComponent({ propertyPanelInstance?.value?.updateDesignerItem(null, selectionSchema.id); focusingSchema.value = selectionSchema; - // 清除画布中的已选样式 - Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( - (element: HTMLElement) => element.classList.remove('dgComponentSelected') - ); - Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf).forEach( - (element: HTMLElement) => element.classList.remove('dgComponentFocused') - ); + clearComponentSelectionStyles(); } if (activeDesignerView.value === 'formDesignerCode' && selectionSchema) { @@ -244,18 +277,17 @@ export default defineComponent({ } onMounted(() => { - const { designerCanvasElementRef } = canvasRef.value; - designerCanvasElementRef && externalComponentPanelResizeObserver.observe(designerCanvasElementRef); + const { designerCanvasContainerElementRef } = canvasRef.value; + designerCanvasContainerElementRef && externalComponentPanelResizeObserver.observe(designerCanvasContainerElementRef); }); onUnmounted(() => { if (externalComponentPanelResizeObserver) { - const { designerCanvasElementRef } = canvasRef.value; - designerCanvasElementRef && externalComponentPanelResizeObserver.unobserve(designerCanvasElementRef); + const { designerCanvasContainerElementRef } = canvasRef.value; + designerCanvasContainerElementRef && externalComponentPanelResizeObserver.unobserve(designerCanvasContainerElementRef); } }); - return () => { return ( diff --git a/packages/designer/src/components/composition/command.service.tsx b/packages/designer/src/components/composition/command.service.tsx index 1293e5220e9d9edaeb99cc31acc1f4e8200da470..e98a1d7cd18963c8fc912b12207c90868a2051f6 100644 --- a/packages/designer/src/components/composition/command.service.tsx +++ b/packages/designer/src/components/composition/command.service.tsx @@ -637,8 +637,8 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS } function generateCommunication(propertyData: any, event, events) { const eventLabel = propertyData[event.label]; - const communicationIds = eventLabel.slice(eventLabel.indexOf(':') + 1, eventLabel.length); - const communicationIdArray = communicationIds.split(';'); + const communicationLabels = eventLabel.split(';').filter(item => item.includes('communication:')); + const communicationIdArray = communicationLabels.map(item => item.replace('communication:', '')); communicationIdArray.forEach(communicationId => { const boundEventsListItem = { command: {}, @@ -1040,6 +1040,13 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS return results; } + function getControlName(propertyData: any, controlInfo: any): string { + if (propertyData.type === 'lookup' && propertyData.name && typeof propertyData.name === 'string') { + return propertyData.name; + } + return propertyData.title || propertyData.text || propertyData.label || controlInfo.name; + } + /** * 交互面板跳转到代码视图前，收集控件信息，用于自动绑定新增的方法 * @param propertyData 控件schema值 @@ -1059,7 +1066,7 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS const { controlInfo } = parameters; if (controlInfo) { const controlType = controlInfo.type; - const controlName = propertyData.title || propertyData.text || propertyData.label || controlInfo.name; + const controlName = getControlName(propertyData, controlInfo); if (controlType && controlType.length > 1 && controlName) { const lowerControlType = controlType.slice(0, 1).toLowerCase() + controlType.slice(1); methodCode = `${lowerControlType}${upperEventCode}`.replace(/_/g, '').replace(/-/g, ''); diff --git a/packages/designer/src/components/composition/events-editor-utils.ts b/packages/designer/src/components/composition/events-editor-utils.ts index 67a866b13b0e0d07be1bee75d2c3baa133c44de5..4f18afed438630798e30e7483609267d3e2621c2 100644 --- a/packages/designer/src/components/composition/events-editor-utils.ts +++ b/packages/designer/src/components/composition/events-editor-utils.ts @@ -202,13 +202,13 @@ export function useEventsEditorUtils(commandService: UseFormCommandService, form const communicationIds: string[] = []; relatedBoundList.map(boundCommunication => { if (boundCommunication.communication) { - communicationIds.push(boundCommunication.communication.id); + communicationIds.push(`communication:${boundCommunication.communication.id}`); deleteActionItem(data.id, event.label); return; } }); if (communicationIds.length) { - data[event.label] = `communication:${communicationIds.join(';')}`; + data[event.label] = communicationIds.join(';'); } } } diff --git a/packages/designer/src/components/composition/use-form-validation.ts b/packages/designer/src/components/composition/use-form-validation.ts index edeeb22b997c2ea488ad62be7c42b21505072a10..ea7fda42a0b209ef9dbc0f0349592a554d6964eb 100644 --- a/packages/designer/src/components/composition/use-form-validation.ts +++ b/packages/designer/src/components/composition/use-form-validation.ts @@ -128,7 +128,7 @@ export function useFormValidation(useFormSchema: UseFormSchema, formCommandServi // 控件名称 const controlName = (controlInfo && controlInfo.parentPathName) || boundEvent.id; - const communicationIds = commandLabel.replace('communication:', '').split(';'); + const communicationIds = commandLabel.replace(/communication:/g, '').split(';'); if (communicationIds?.length) { const communications = useFormSchema.getFormSchema().module.communications || []; for (const communicationId of communicationIds) { diff --git a/packages/designer/src/components/composition/use-parameter-editor-data.ts b/packages/designer/src/components/composition/use-parameter-editor-data.ts index fbfc76e5ffb9af455af52dac6995611a4d16c5a4..6b32db774adf73960b1236372b898f5f42fecb16 100644 --- a/packages/designer/src/components/composition/use-parameter-editor-data.ts +++ b/packages/designer/src/components/composition/use-parameter-editor-data.ts @@ -24,8 +24,8 @@ export interface ViewModelTreeNode { export function useParameterEditorData(useFormSchemaComposition: UseFormSchema) { - function getComponentRefNode(componentId: string) { - const components = useFormSchemaComposition.getComponents(); + function getComponentRefNode(formSchema: any, componentId: string) { + const { components } = formSchema.module; const rootCmp = components.find(component => component.componentType === 'frame'); let componentRefResult = useFormSchemaComposition.selectNodeAndParentNode(rootCmp, (item) => item.component === componentId, rootCmp); @@ -42,13 +42,13 @@ export function useParameterEditorData(useFormSchemaComposition: UseFormSchema) }); } - function getDataGridComponentName(component: any) { + function getDataGridComponentName(formSchema: any, component: any) { const treeGrid = useFormSchemaComposition.selectNode(component, (item: any) => item.type === 'tree-grid'); if (treeGrid) { return '树表格组件'; } - const componentRefResult = getComponentRefNode(component.id); + const componentRefResult = getComponentRefNode(formSchema, component.id); if (!componentRefResult || !componentRefResult.parentNode) { return; } @@ -64,14 +64,16 @@ export function useParameterEditorData(useFormSchemaComposition: UseFormSchema) return '表格组件'; } - function getViewModelName(component: any, componentName: string) { - + function getViewModelName(component: any, componentName: string, formSchema?: any) { + if (!formSchema) { + formSchema = useFormSchemaComposition.getFormSchema(); + } switch (component?.componentType) { case ComponentType.Frame: { return '根组件'; } case ComponentType.dataGrid: { - return getDataGridComponentName(component); + return getDataGridComponentName(formSchema, component); } case ComponentType.uploader: { return '附件组件'; @@ -208,7 +210,7 @@ export function useParameterEditorData(useFormSchemaComposition: UseFormSchema) const viewModel = formSchema.module.viewmodels.find(item => item.id === viewModelId); const component = formSchema.module.components.find(item => item.viewModel === viewModelId); if (viewModel && component) { - name = getViewModelName(component, viewModel.name); + name = getViewModelName(component, viewModel.name, formSchema); } const cmpTreeData: ComponentTreeNode = { data: cmp, diff --git a/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json b/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json index 2a5084fb69529d983f33084d7e45b5d1f107faf3..6531439aedbb5327dd86087ccb2d9c9e33925ab5 100644 --- a/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json +++ b/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json @@ -102,7 +102,7 @@ { "id": "HtmlTemplate", "type": "html-template", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/designer/src/components/types/toolbox/pc-toolbox.json b/packages/designer/src/components/types/toolbox/pc-toolbox.json index fe406f53b408582beeff91bd22b8ed91b9618778..45fa3db54e7fba5638c1268ac863ca5c2e93d9ae 100644 --- a/packages/designer/src/components/types/toolbox/pc-toolbox.json +++ b/packages/designer/src/components/types/toolbox/pc-toolbox.json @@ -109,7 +109,7 @@ { "id": "HtmlTemplate", "type": "html-template", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/farris-admin/public/assets/functions.json b/packages/farris-admin/public/assets/functions.json index 9d7dc26d255b5a334344dd8f0dd0607461b5be2d..5ac52a1074f5ba8e57272ce14e20ca35606b097e 100644 --- a/packages/farris-admin/public/assets/functions.json +++ b/packages/farris-admin/public/assets/functions.json @@ -4577,7 +4577,7 @@ { "id": "ea049e81-2865-d0dc-ac61-ab9b9d90be2d", "code": "PromptMgr", - "name": "提示词模版管理", + "name": "提示词模板管理", "parentId": "ea14eea9-701b-6949-92b6-3759cdfd4636", "layer": "4", "menuType": "SysMenu", diff --git a/packages/farris-admin/src/assets/data.json b/packages/farris-admin/src/assets/data.json index 2062d038a0e88f5f36b9f0c204c3c1306e21a538..312cc94c6ed7462b41a29f5eb31478ece6b0e5e3 100644 --- a/packages/farris-admin/src/assets/data.json +++ b/packages/farris-admin/src/assets/data.json @@ -4579,7 +4579,7 @@ { "id": "ea049e81-2865-d0dc-ac61-ab9b9d90be2d", "code": "PromptMgr", - "name": "提示词模版管理", + "name": "提示词模板管理", "parentId": "ea14eea9-701b-6949-92b6-3759cdfd4636", "layer": "4", "menuType": "SysMenu", diff --git a/packages/farris-theme/README.md b/packages/farris-theme/README.md index 52151b85e0cf604cb8cd2758b1f2488a7759daec..ff0725c0ff689295d540ccc6f34d261ecbca8f4b 100644 --- a/packages/farris-theme/README.md +++ b/packages/farris-theme/README.md @@ -57,7 +57,7 @@ │ ├── components/ 组件样式，比如基础样式、标签页、按钮、树组件等 │ - ├── interface/ 非组件类的界面展示样式，比如页面模版、面包屑导航、输入控件等 + ├── interface/ 非组件类的界面展示样式，比如页面模板、面包屑导航、输入控件等 │ ├── farris-all.css 所有样式合集 │ diff --git a/packages/farris-theme/theme/components/Readme.md b/packages/farris-theme/theme/components/Readme.md index bef31a6253016bbfdbd0716d7528a546acdc286f..15d44d32856252acfb10b9bf64dfe397b55cb4d7 100644 --- a/packages/farris-theme/theme/components/Readme.md +++ b/packages/farris-theme/theme/components/Readme.md @@ -36,7 +36,7 @@ | input-group | 输入框组 | | Input、Icon | | input-append | 输入控件扩展 | ----- | | | layout | Layout 布局 | | | -| list-nav | ListNav 列表导航 实际依赖 页面模版样式 | | | +| list-nav | ListNav 列表导航 实际依赖 页面模板样式 | | | | listview | 列表视图 | | | | loading | 加载 | | | | message | Message Box 消息弹窗 | | | diff --git a/packages/farris-theme/theme/components/list-nav.scss b/packages/farris-theme/theme/components/list-nav.scss index a0f52989ff8fc28184efda2a8072ce2718d850c0..48139f342e60b58a9dadf74082793d34cf20d7aa 100644 --- a/packages/farris-theme/theme/components/list-nav.scss +++ b/packages/farris-theme/theme/components/list-nav.scss @@ -90,7 +90,7 @@ .splitter-pane-collapse-animate { transition: width 0.5s ease 0s; } -/**与模版相关*/ +/**与模板相关*/ .f-template-listnav-row { .list-nav-link { diff --git a/packages/farris-theme/theme/components/scrollspy.scss b/packages/farris-theme/theme/components/scrollspy.scss index 2d4f3cad2d03a42fdee5f91da97202b2ec8dadfa..529197b5e0b7baa5d72e7cb07a965ae5e40ff25a 100644 --- a/packages/farris-theme/theme/components/scrollspy.scss +++ b/packages/farris-theme/theme/components/scrollspy.scss @@ -36,7 +36,7 @@ // 左右、两侧滚动监听 .f-scrollspy.f-scrollspy-sidetabs { - //避免距离模版外层太近，导致阴影被隐藏 + //避免距离模板外层太近，导致阴影被隐藏 padding:2px 0 2px 2px; .f-scrollspy-sidetabs-inner { background: $f-scrollspy-sidetabs-bg; diff --git a/packages/farris-theme/theme/interface/page-tmpl/_base.scss b/packages/farris-theme/theme/interface/page-tmpl/_base.scss index 73c1a355bd861c8e16de27de6a88a90bf7a6669a..f2a130be3ac978b9469e916d5f3d5db6e91bc01e 100644 --- a/packages/farris-theme/theme/interface/page-tmpl/_base.scss +++ b/packages/farris-theme/theme/interface/page-tmpl/_base.scss @@ -193,7 +193,7 @@ Visual 外观 } /******************************* - 向导模版 + 向导模板 *******************************/ .#{$f-page-prefix}-is-wizard { .#{$f-page-prefix}-main { diff --git a/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue b/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue index fa831512aa0b47442a34e9284a3dd4bb5c4f1ed5..4ece870b9d0df038da4e4751c275b4d8a3dedafa 100644 --- a/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue +++ b/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue @@ -34,7 +34,7 @@ const curTheme = inject('current-theme') as Ref; diff --git a/packages/renderer/src/metadata/data-service/common-web-command-metadata-data-service.ts b/packages/renderer/src/metadata/data-service/common-web-command-metadata-data-service.ts index 6f5d1085190a483f02d23df52cfe7dfc8134c035..d131cc3cedc384ce692518eaed76cbed4effca83 100644 --- a/packages/renderer/src/metadata/data-service/common-web-command-metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/common-web-command-metadata-data-service.ts @@ -23,9 +23,16 @@ export class CommonWebCommandMetadataDataService { }); } + public loadByDto(currentPath: string, metadataDto: any) { + return this.metadataRepository.loadByDto(currentPath, metadataDto).then((response: any) => { + return this.createMetadata(response); + }); + } + private createMetadata(response: any) { const metadata = { id: response.id, + nameSpace: response.nameSpace, content: JSON.parse(response.content), refs: JSON.parse(response.refs) }; diff --git a/packages/renderer/src/metadata/data-service/custom-web-command-metadata-data-service.ts b/packages/renderer/src/metadata/data-service/custom-web-command-metadata-data-service.ts index d0b7375047fe4e322bb307bfb3f19ff02b7a57ae..ca5e4807b31ac38a3355eed41496a035ba9d54e4 100644 --- a/packages/renderer/src/metadata/data-service/custom-web-command-metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/custom-web-command-metadata-data-service.ts @@ -25,6 +25,12 @@ export class CustomWebCommandMetadataDataService { }); } + public loadByDto(currentPath: string, metadataDto: any) { + return this.metadataRepository.loadByDto(currentPath, metadataDto).then((response: any) => { + return this.createMetadata(response); + }); + } + private createMetadata(response: any) { const metadata = { id: response.id, diff --git a/packages/renderer/src/metadata/data-service/custom-web-component-metadata-data-service.ts b/packages/renderer/src/metadata/data-service/custom-web-component-metadata-data-service.ts index becc779e44764e0fa2622340a4af9ce12d5d8871..14fe5fe6ff6885713394e4f65e00a068637726b0 100644 --- a/packages/renderer/src/metadata/data-service/custom-web-component-metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/custom-web-component-metadata-data-service.ts @@ -5,9 +5,9 @@ export class CustomWebComponentMetadataDataService { constructor(private metadataRepository: MetadataRepository) { } public loadByType(metadataPath: string) { - return this.metadataRepository.loadMetadatasByType(metadataPath, ".webcmp").then((metadatas: any[])=>{ - if(metadatas && metadatas.length>0){ - return Promise.all(metadatas.map((metadata: any)=>{ + return this.metadataRepository.loadMetadatasByType(metadataPath, ".webcmp").then((metadatas: any[]) => { + if (metadatas && metadatas.length > 0) { + return Promise.all(metadatas.map((metadata: any) => { return this.loadByFullPath(metadataPath, metadata.id); })); } @@ -31,6 +31,12 @@ export class CustomWebComponentMetadataDataService { }); } + public loadByDto(currentPath: string, metadataDto: any) { + return this.metadataRepository.loadByDto(currentPath, metadataDto).then((response: any) => { + return this.createMetadata(response); + }); + } + private createMetadata(response: any) { const metadata = { id: response.id, diff --git a/packages/renderer/src/metadata/data-service/form-metadata-data-service.ts b/packages/renderer/src/metadata/data-service/form-metadata-data-service.ts index 94726df171c393de9fe212b38d0910ed76e5b8bb..78ea24f9afc2f1249b2c627a1380718277582073 100644 --- a/packages/renderer/src/metadata/data-service/form-metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/form-metadata-data-service.ts @@ -17,6 +17,12 @@ export class FormMetadataDataService { }); } + public loadByDto(currentPath: string, metadataDto: any) { + return this.repository.loadByDto(currentPath, metadataDto).then((response: any) => { + return this.createMetadata(response); + }); + } + private createMetadata(response: any) { const { Contents: content } = JSON.parse(response.content); const refs = JSON.parse(response.refs); diff --git a/packages/renderer/src/metadata/data-service/metadata-data-service.ts b/packages/renderer/src/metadata/data-service/metadata-data-service.ts index 887fdb48ff38f09248c91871ecef204518d83fa7..6c8fe762ca2252273bcfbfc46192a097ad242468 100644 --- a/packages/renderer/src/metadata/data-service/metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/metadata-data-service.ts @@ -14,28 +14,28 @@ export class MetadataDataService { private customWebCommandMetadataDataService: CustomWebCommandMetadataDataService ) { } + /** + * 根据Path加载元数据 + */ public loadMetadataByPath(projectPath: string, metadataPath: string) { return this.formMetadataDataService.loadByFullPath(metadataPath).then((formMetadata: Metadata) => { const schema = formMetadata.content as FormMetadata; + + // 状态机元数据 const { stateMachines = [] } = schema.module; - // const stateMachineRefSchema = stateMachines; const stateMachineMetadataPromise = stateMachines && stateMachines.length > 0 ? stateMachines.map((stateMachine: StateMachineRefMetadata) => { return this.stateMachineMetadataDataService.loadByProjectPath(projectPath, stateMachine.uri); }) : [Promise.resolve(null)]; - // const stateMachineMetadataPromise = stateMachines ? this.stateMachineMetadataDataService.loadByProjectPath(projectPath, stateMachineRefSchema.uri) : Promise.resolve(null); + + // 命令元数据 const commandsMetadataPromise = schema.module.webcmds.map((webCommand: WebCommandRefMetadata) => { const { id } = webCommand; return this.webCommandMetadataDataService.loadByProjectPath(projectPath, id); }); + + // 自定义构件元数据 const customWebComponentMetadataPromise = this.customWebComponentMetadataDataService.loadByType(projectPath); - // 资源元数据, 暂不加载 - // const resourceMetadatas = formMetadata.refs && formMetadata.refs.filter((ref: any) => { - // return ref.DependentMetadata.Type === "ResourceMetadata"; - // }).map((ref: any) => ref.DependentMetadata.ID) || []; - // const resourceMetadataPromise = resourceMetadatas.map((id: string) => { - // return useResourceMetadata(id, useCache); - // }); - // , Promise.all(resourceMetadataPromise) + const promises = [Promise.all(stateMachineMetadataPromise), Promise.all(commandsMetadataPromise), customWebComponentMetadataPromise]; return Promise.all(promises).then(([stateMachineSchema, commandSchemas, customWebComponents]) => { return { @@ -48,6 +48,9 @@ export class MetadataDataService { }); } + /** + * 根据ID加载元数据 + */ public loadMetadataById(metadataId: string) { return this.formMetadataDataService.loadById(metadataId).then((formMetadata: Metadata) => { const schema = formMetadata.content as FormMetadata; @@ -97,4 +100,75 @@ export class MetadataDataService { }); }); } + + /** + * 根据DTO加载元数据 + */ + public loadMetadataByDto(currentPath: any, formMetadataDto: any) { + return this.formMetadataDataService.loadByDto(currentPath, formMetadataDto).then((formMetadata: Metadata) => { + const schema = formMetadata.content as FormMetadata; + + // 状态机 + const { stateMachines } = schema.module; + const stateMachineMetadataPromise = stateMachines && stateMachines.length > 0 ? stateMachines.map((stateMachine: StateMachineRefMetadata) => { + const stateMachineMetadataDto = { + id: stateMachine.uri, + nameSpace: stateMachine.nameSpace + }; + return this.stateMachineMetadataDataService.loadByDto(currentPath, stateMachineMetadataDto); + }) : [Promise.resolve(null)]; + + // 命令构件 + const commandsMetadataPromise = schema.module.webcmds.map((webCommand: WebCommandRefMetadata) => { + const commandMetadataDto = { + id: webCommand.id, + nameSpace: webCommand.nameSpace + }; + return this.webCommandMetadataDataService.loadByDto(currentPath, commandMetadataDto); + }); + + const promises = [Promise.all(stateMachineMetadataPromise), Promise.all(commandsMetadataPromise)]; + + + return Promise.all(promises).then(([stateMachineSchema, commandSchemas]) => { + const customWebComponentDtos: any[] = []; + + if (commandSchemas && commandSchemas.length > 0) { + commandSchemas.forEach((commandSchema: any | null) => { + if (commandSchema && commandSchema.content && commandSchema.content.Extends && commandSchema.content.Extends.IsCommon === false) { + const commands = commandSchema.content.Commands as any[]; + commands.forEach((command: any) => { + const items = command.Items as any[]; + items.forEach((item: any) => { + if (!item.ComponentPath.startsWith('Gsp/')) { + const componentId = item.ComponentId; + const existedCustomWebComponentDto = customWebComponentDtos.find((customWebComponentDto) => { + return customWebComponentDto.id === componentId; + }); + if (!existedCustomWebComponentDto) { + customWebComponentDtos.push({ id: componentId, nameSpace: commandSchema.nameSpace }); + } + } + }); + }); + } + }); + } + + // 自定义Web构件 + const customWebComponentMetadataPromise = customWebComponentDtos.length > 0 ? Promise.all(customWebComponentDtos.map((customWebComponentDto: string) => { + return this.customWebComponentMetadataDataService.loadByDto(currentPath, customWebComponentDto); + })) : Promise.resolve(null); + + return customWebComponentMetadataPromise.then((customWebComponents: Metadata[] | null) => { + return { + form: formMetadata, + stateMachines: stateMachineSchema as Metadata[], + commands: commandSchemas as Metadata[], + webComponents: customWebComponents as Metadata[] + }; + }); + }); + }); + } } diff --git a/packages/renderer/src/metadata/data-service/state-machine-metadata-data-service.ts b/packages/renderer/src/metadata/data-service/state-machine-metadata-data-service.ts index a1df8a868dfa210e8523f686046c65c5e46d0ce8..e1fbead530d60518db667d1405f0332cb5e54e96 100644 --- a/packages/renderer/src/metadata/data-service/state-machine-metadata-data-service.ts +++ b/packages/renderer/src/metadata/data-service/state-machine-metadata-data-service.ts @@ -22,6 +22,12 @@ export class StateMachineMetadataDataService { }); } + public loadByDto(currentPath: string, metadataDto: any) { + return this.metadataRepository.loadByDto(currentPath, metadataDto).then((response: any) => { + return this.createMetadata(response); + }); + } + private createMetadata(response: any) { const metadata = { content: JSON.parse(response.content), diff --git a/packages/renderer/src/metadata/metadata-loader.ts b/packages/renderer/src/metadata/metadata-loader.ts index 995c73f327fbc9063b8e507e75937c767bd339a8..38c4693c67a8b5a63571bf7802185ba9d9bb5a55 100644 --- a/packages/renderer/src/metadata/metadata-loader.ts +++ b/packages/renderer/src/metadata/metadata-loader.ts @@ -36,7 +36,7 @@ class MetadataLoader { this.normalizeExternalComponents(formMetadataQuery, metadatas); this.metadataManager.setMetadatasCache(metadatas.form.id, metadatas); - await this.loadExternalMetadataByPath(metadatas.form); + await this.loadExternalMetadataByPath(formMetadataPath, metadatas.form); } /** @@ -53,22 +53,35 @@ class MetadataLoader { await this.loadExternalMetadataById(metadatas.form); } + /** + * 根据路径加载表单元数据 + */ + public async loadMetadataByDto(currentPath: string, formMetadataDto: any): Promise { + const metadatas = await this.metadataDataService.loadMetadataByDto(currentPath, formMetadataDto); + + const formMetadataQuery = new FormMetadataQuery(metadatas.form); + this.normalizeStatemachines(formMetadataQuery, metadatas); + this.normalizeExternalComponents(formMetadataQuery, metadatas); + + this.metadataManager.setMetadatasCache(metadatas.form.id, metadatas); + } + /** * 根据Path加载外部表单元数据 */ - public async loadExternalMetadataByPath(formMetadata: any): Promise { + public async loadExternalMetadataByPath(formMetadataPath: string, formMetadata: any): Promise { const formMetadataQuery = new FormMetadataQuery(formMetadata); const externalFormInfos = formMetadataQuery.getExternalFormInfos(); for (const externalFormInfo of externalFormInfos) { - if (externalFormInfo.formMetadataPath) { - - // 开发模式下优先使用path加载，以便能实时预览外部表单 - await this.loadMetadataByPath(externalFormInfo.formMetadataPath, externalFormInfo.formMetadataPath); + if (externalFormInfo.relativePath) { + const metadataPath = `${externalFormInfo.relativePath}/${externalFormInfo.fileName}`; + await this.loadMetadataByPath(metadataPath, metadataPath); } else { - await this.loadMetadataById(externalFormInfo.formMetadataId); + const { id, nameSpace } = externalFormInfo; + const metadataDto = { id, nameSpace }; + await this.loadMetadataByDto(formMetadataPath, metadataDto); } - } } @@ -80,7 +93,7 @@ class MetadataLoader { const externalFormInfos = formMetadataQuery.getExternalFormInfos(); for (const externalFormInfo of externalFormInfos) { - await this.loadMetadataById(externalFormInfo.formMetadataId); + await this.loadMetadataById(externalFormInfo.id); } } diff --git a/packages/renderer/src/metadata/repository/metadata-repository.ts b/packages/renderer/src/metadata/repository/metadata-repository.ts index bab8adb2437699dffb98fd3f742a73fbdc443fde..5a7dffc82b64ca4dfab7a5631230dcb56e10bd6c 100644 --- a/packages/renderer/src/metadata/repository/metadata-repository.ts +++ b/packages/renderer/src/metadata/repository/metadata-repository.ts @@ -16,6 +16,18 @@ export class MetadataRepository { return this.httpClient.get(`/api/dev/main/v1.0/metadatas/load`, { params: httpParams }); } + /** + * 根据DTO加载元数据 + */ + public loadByDto(currentPath: string, metadataDto: any): Promise { + const url = `/api/dev/main/v1.0/mdservice/pickMetadata?currentPath=${currentPath}`; + const body = metadataDto; + const requestConfig: HttpRequestConfig = { headers: { accept: 'application/json' } }; + return this.httpClient.post(url, body, requestConfig).then((result: any) => { + return result.metadata; + }); + } + /** * 根据元数据类型获取表单定义的其他元数据 * @param metadataPath 元数据工程路径 diff --git a/packages/renderer/src/metadata/types.ts b/packages/renderer/src/metadata/types.ts index b6d5002dea11ba56b38aae8659538940f5c93659..2acd6ae62b2dd3028f946f851782bf9e90233469 100644 --- a/packages/renderer/src/metadata/types.ts +++ b/packages/renderer/src/metadata/types.ts @@ -2,7 +2,13 @@ * 外部表单信息 */ export interface ExternalFormInfo { - externalContainerId: string, - formMetadataId: string, - formMetadataPath?: string + id: string, + code: string, + name: string, + fileName: string, + bizobjectID: string, + nameSpace: string, + relativePath?: string, + projectName?: string, + externalContainerId: string; } diff --git a/packages/renderer/src/service/form-metadata-query.ts b/packages/renderer/src/service/form-metadata-query.ts index 1d19d09f16b8fe4fe6fec769d46dc9666d346f49..4face9a08478d1252a7938c6d7f56a227c1a9fea 100644 --- a/packages/renderer/src/service/form-metadata-query.ts +++ b/packages/renderer/src/service/form-metadata-query.ts @@ -226,13 +226,9 @@ class FormMetadataQuery { return null; } - const formMetadataDir = externalComponent.relativePath; - const formMetadataFileName = externalComponent.fileName; - const formMetadataPath = formMetadataDir && formMetadataFileName ? `${formMetadataDir}/${formMetadataFileName}` : undefined; const externalFormInfo = { externalContainerId: externalContainer.id, - formMetadataId: externalComponent.id, - formMetadataPath: formMetadataPath + ...externalComponent }; return externalFormInfo; 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 fc83f2e3acb3f978c38399d9bbf1cd81acb819f8..7f541e6569f714db0f9fde3d8cb7aaf3012d9f8b 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 @@ -87,7 +87,6 @@ export default defineComponent({ return classObject; }); - watch([() => props.modelValue, () => props.componentId], ([newSchema, newComponentId]) => { schema.value = newSchema; @@ -148,7 +147,9 @@ export default defineComponent({ resizeObserver = null; } }); - context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef, designerHostService }); + + context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef, designerCanvasContainerElementRef, designerHostService }); + return () => { return (
diff --git a/packages/ui-vue/components/event-parameter/src/composition/editors/use-combo-tree.ts b/packages/ui-vue/components/event-parameter/src/composition/editors/use-combo-tree.ts index e3d2dbd322c0a273047ff5481ce8650415077316..174ced10ffbd0e562c32bb901ee42d2c33fc928a 100644 --- a/packages/ui-vue/components/event-parameter/src/composition/editors/use-combo-tree.ts +++ b/packages/ui-vue/components/event-parameter/src/composition/editors/use-combo-tree.ts @@ -29,7 +29,7 @@ export default function ( type: 'combo-tree', componentProps: { data: props.data, - placeholder: LocaleService.getLocaleValue('eventParameter.comboTree.placeholder'), + placeholder: '请选择', enableSearch: false, enableClear: true, editable: false, diff --git a/packages/ui-vue/components/event-parameter/src/composition/editors/use-json-editor.ts b/packages/ui-vue/components/event-parameter/src/composition/editors/use-json-editor.ts index f4c45b7d41088e1605961682e868c9e73ca308b2..d7a13b9e512dfc01e4928347376e5bc28da9d533 100644 --- a/packages/ui-vue/components/event-parameter/src/composition/editors/use-json-editor.ts +++ b/packages/ui-vue/components/event-parameter/src/composition/editors/use-json-editor.ts @@ -19,7 +19,7 @@ export default function ( } return []; } catch (error) { - console.error(`${LocaleService.getLocaleValue('eventParameter.jsonEditor.error')}`, error); + console.error(`Expected array of parameter schema for JsonEditor, but received invalid JSON.`, error); return []; } } @@ -46,11 +46,11 @@ export default function ( formData: props.formData, }, beforeOpen, - dialogTitle: LocaleService.getLocaleValue('eventParameter.jsonEditor.dialogTitle'), - keyColumnTitle: LocaleService.getLocaleValue('eventParameter.jsonEditor.keyColumnTitle'), - valueColumnTitle: LocaleService.getLocaleValue('eventParameter.jsonEditor.dialogTitle'), - addButtonText: LocaleService.getLocaleValue('eventParameter.jsonEditor.dialogTitle'), - keyColumnPlaceholder: LocaleService.getLocaleValue('eventParameter.jsonEditor.dialogTitle'), + dialogTitle: '可配置参数编辑器', + keyColumnTitle: '参数', + valueColumnTitle: '参数值', + addButtonText: '添加配置参数', + keyColumnPlaceholder: '请输入参数', }, }; } diff --git a/packages/ui-vue/components/event-parameter/src/composition/use-general-editor.ts b/packages/ui-vue/components/event-parameter/src/composition/use-general-editor.ts index d177e32822f1ed0645c8ba454ed093e86e1abe6a..d9e90aeb2dfe402850be77bd749eff7b949909e5 100644 --- a/packages/ui-vue/components/event-parameter/src/composition/use-general-editor.ts +++ b/packages/ui-vue/components/event-parameter/src/composition/use-general-editor.ts @@ -8,7 +8,7 @@ export function useGeneralEditor( const tabs = reactive([ { id: 'tabField', - title: LocaleService.getLocaleValue('eventParameter.generalEditor.field'), + title: '字段', treeConfigs: { id: 'tabFieldTree', columns: [{ field: 'name' }], @@ -20,7 +20,7 @@ export function useGeneralEditor( }, { id: 'tabVar', - title: LocaleService.getLocaleValue('eventParameter.generalEditor.tabVar'), + title: '变量', treeConfigs: { id: 'tabVarTree', data: props.varData, @@ -29,7 +29,7 @@ export function useGeneralEditor( }, { id: 'tabForm', - title: LocaleService.getLocaleValue('eventParameter.generalEditor.form'), + title: '表单组件', treeConfigs: { id: 'tabFormTree', data: props.formData, 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 1979274201f69c12c392c50ab43dff5e9b1b318d..afa00f9f34e8f6106bd7b00fcf9b0bb47c3307f0 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 @@ -587,24 +587,26 @@ export class LookupPropertyConfig extends InputBaseProperty { visible: propertyData.editor.openType !== 'Popup' }, width: { - description: "窗口宽度，最小值：300px", + description: "窗口宽度，最小值：300px，最大值：3000px", title: "宽度", type: "number", refreshPanelAfterChanged: true, $converter: lookupDialogOptionsConverter, editor: { ...this.numberEditor, - min: this.showNavigatiorWidth(propertyData.editor) ? 520 : 300 + min: this.showNavigatiorWidth(propertyData.editor) ? 520 : 300, + max: 3000, } }, height: { - description: "窗口高度，最小值：200px", + description: "窗口高度，最小值：200px，最大值：2000px", title: "高度", type: "number", $converter: lookupDialogOptionsConverter, editor: { ...this.numberEditor, - min: 200 + min: 200, + max: 2000, } }, showNavigation: { 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 index 1fe574377825f3421568f16197aaad31f382b5e7..72a57b7d066d77f675826a294d0ae1fd3fed4564 100644 --- 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 @@ -32,21 +32,23 @@ export class ModalProperty extends BaseControlProperty { visible: true }, width: { - description: "窗口宽度，最小值：300px", + description: "窗口宽度，最小值：300px，最大值：3000px", title: "宽度", type: "number", editor: { ...this.numberEditor, - min: 300 + min: 300, + max: 3000, } }, height: { - description: "窗口高度，最小值：200px", + description: "窗口高度，最小值：200px，最大值：2000px", title: "高度", type: "number", editor: { ...this.numberEditor, - min: 200 + min: 200, + max: 2000, } }, resizeable: { diff --git a/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts b/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts index 31600ddf207e1c475908594c784634765a3778bf..88f107097488d5dd42e07c7a02f75f918282d574 100644 --- a/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts +++ b/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts @@ -82,7 +82,7 @@ export class PageHeaderProperty extends BaseControlProperty { contentHtml: { title: '内容模板', type: 'string', - description: '设置页头中间区域的模版', + description: '设置页头中间区域的模板', refreshPanelAfterChanged: true, editor: { type: "code-editor", @@ -97,7 +97,7 @@ export class PageHeaderProperty extends BaseControlProperty { downContentHtml: { title: '扩展模板', type: 'string', - description: '设置页头下方区域的模版', + description: '设置页头下方区域的模板', refreshPanelAfterChanged: true, editor: { type: "code-editor", diff --git a/packages/ui-vue/components/uploader/src/composition/use-uploader.ts b/packages/ui-vue/components/uploader/src/composition/use-uploader.ts index d4421e28f503c6e5df709a55828e5c95641943c3..9697ab6fd53a460900f7ec56d045ee1e1988d8b2 100644 --- a/packages/ui-vue/components/uploader/src/composition/use-uploader.ts +++ b/packages/ui-vue/components/uploader/src/composition/use-uploader.ts @@ -35,7 +35,7 @@ export function useUploader(props: UploaderProps, ctx: SetupContext, fileSelectR const previewSelectAllBtnChecked = ref(false); // 记录选中数据 const previewMultiSelected: Ref> = ref([]); - // 用于模版的展示 + // 用于模板的展示 const previewMultiSelectedLength = computed(() => { return previewMultiSelected.value.length; }); @@ -112,7 +112,7 @@ export function useUploader(props: UploaderProps, ctx: SetupContext, fileSelectR }; /** - * 找到模版 + * 找到模板 */ const hasColumnHtmlFunc = (columnInfo: FUploadPreviewColumn, type = 'preview') => { if (columnInfo.formatter) { diff --git a/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx b/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx index 28ef40e04487a65edbeeb843625bdbc023d2dc9a..b0794e529e4998145319a90e06b99ddf06743aae 100644 --- a/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx +++ b/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx @@ -38,7 +38,7 @@ export default defineComponent({ const innerFileInfos = [{ id: "attach01", name: "" }, { id: "attach02", name: "" }]; /** - * 获取模版相关参数 + * 获取模板相关参数 */ const { disabled, @@ -105,7 +105,7 @@ export default defineComponent({ return null; } /** - * 返回预览文件的名称模版 + * 返回预览文件的名称模板 * @param previewInfo * @returns */ @@ -121,7 +121,7 @@ export default defineComponent({ }; /** - * 返回文件大小的模版 + * 返回文件大小的模板 * @param state * @param fileInfo * @returns @@ -147,7 +147,7 @@ export default defineComponent({
; } /** - * 返回预览按钮模版 + * 返回预览按钮模板 * @param previewInfo * @returns */ @@ -178,7 +178,7 @@ export default defineComponent({ return
; }; /** - * 找到模版 + * 找到模板 */ function findColumnHtmlFunc(state, previewInfo: any, columnInfo: FUploadPreviewColumn) { let result = null; @@ -207,7 +207,7 @@ export default defineComponent({ return result; }; /** - * 获取附件上传子组件模版 + * 获取附件上传子组件模板 * @returns */ function getFileSelectHtml() { @@ -219,7 +219,7 @@ export default defineComponent({ return null; } /** - * 获取头部按钮的模版 + * 获取头部按钮的模板 */ function getHeaderButtonHtml() { const canShowOneButton = !downloadButtonDisable.value || !props.deleteButtonDisable; @@ -233,7 +233,7 @@ export default defineComponent({ return null; } /** - * 获取列表头部模版 + * 获取列表头部模板 */ function getListHeaderHtml() { return previewColumns.value.map((column: FUploadPreviewColumn) => ( @@ -250,7 +250,7 @@ export default defineComponent({ )); } /** - * 获取预览列表模版 + * 获取预览列表模板 */ function getPreviewListHtml() { return innerFileInfos.map((previewInfo: FUploadFileExtend) => ( diff --git a/packages/ui-vue/components/uploader/src/uploader.component.tsx b/packages/ui-vue/components/uploader/src/uploader.component.tsx index fc389706b7efa00783bc7c01503819edda5f5868..110d24b89be240a41c5c15e46fb6075e108a808e 100644 --- a/packages/ui-vue/components/uploader/src/uploader.component.tsx +++ b/packages/ui-vue/components/uploader/src/uploader.component.tsx @@ -46,7 +46,7 @@ export default defineComponent({ const fileSelectRef = ref(null); /** - * 获取模版相关参数 + * 获取模板相关参数 */ const { disabled, @@ -148,7 +148,7 @@ export default defineComponent({ } /** - * 返回上传附件的名称模版 + * 返回上传附件的名称模板 * @param uploadInfo * @returns */ @@ -172,7 +172,7 @@ export default defineComponent({ }; /** - * 返回预览文件的名称模版 + * 返回预览文件的名称模板 * @param previewInfo * @returns */ @@ -195,7 +195,7 @@ export default defineComponent({ }; /** - * 返回文件大小的模版 + * 返回文件大小的模板 * @param state * @param fileInfo * @returns @@ -246,7 +246,7 @@ export default defineComponent({ ); }; /** - * 返回预览按钮模版 + * 返回预览按钮模板 * @param previewInfo * @returns */ @@ -278,7 +278,7 @@ export default defineComponent({ }; /** - * 找到模版 + * 找到模板 */ function findColumnHtmlFunc(state, uploadInfo: UploadOutput | null, previewInfo: any, columnInfo: FUploadPreviewColumn) { let result; @@ -327,7 +327,7 @@ export default defineComponent({ return result; }; /** - * 获取附件上传子组件模版 + * 获取附件上传子组件模板 * @returns */ function getFileSelectHtml() { @@ -340,7 +340,7 @@ export default defineComponent({ return null; } /** - * 获取附件个数、附件已选信息的模版 + * 获取附件个数、附件已选信息的模板 * @returns */ function getAttachCountHtml() { @@ -356,7 +356,7 @@ export default defineComponent({ return null; } /** - * 获取头部按钮的模版 + * 获取头部按钮的模板 */ function getHeaderButtonHtml() { const canShowOneButton = !downloadButtonDisable.value || !props.deleteButtonDisable; @@ -375,7 +375,7 @@ export default defineComponent({ return null; } /** - * 获取列表头部模版 + * 获取列表头部模板 */ function getListHeaderHtml() { return previewColumns.value.map((column: FUploadPreviewColumn) => ( @@ -393,7 +393,7 @@ export default defineComponent({ )); } /** - * 获取上传列表模版 + * 获取上传列表模板 */ function getUploadListHtml() { return uploadFiles.value.map((uploadInfo: UploadOutput) => ( @@ -416,7 +416,7 @@ export default defineComponent({ )); } /** - * 获取预览列表模版 + * 获取预览列表模板 */ function getPreviewListHtml() { return innerFileInfos.value.map((previewInfo: FUploadFileExtend) => ( diff --git a/packages/ui-vue/demos/input-group/extend.vue b/packages/ui-vue/demos/input-group/extend.vue index 5293b20944aad30fa40bc467f282d5a894d0ac28..f2a0d8d78dde41599fd0a8a0954d05be9c02bf05 100644 --- a/packages/ui-vue/demos/input-group/extend.vue +++ b/packages/ui-vue/demos/input-group/extend.vue @@ -47,7 +47,7 @@ function onUpdateExtendInfo() {
- +