{renderCommandSource()}
{renderHandlerSource()}
{renderParameterPanel()}
diff --git a/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/use-method.ts b/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/use-method.ts
index 553ce60ce78f1b114157707803d92b5db6b0d6b0..11c6e1b8bed70213774a9eca48635f65ac9ef286 100644
--- a/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/use-method.ts
+++ b/packages/designer/src/components/components/view-model-designer/method-manager/components/method-list/use-method.ts
@@ -61,17 +61,24 @@ export function useViewModelMethod(props: MethodListProps) {
return;
}
- activeViewModel.value.commands = commands.length > 0 ? commands
- .filter((command: any) => command.data instanceof Command && command.data.toJson)
- .map((commandData: any) => {
- return commandData.data.toJson();
- }) : [];
+ const commandsJson: any[] = [];
+ if (commands.length > 0) {
+ for (const command of commands) {
+ if (command.data instanceof Command && command.data.toJson) {
+ commandsJson.push(command.data.toJson());
+ } else if (command['layer'] === 0) {
+ commandsJson.push(command.data.data);
+ }
+ }
+ activeViewModel.value.commands = commandsJson;
+ } else {
+ activeViewModel.value.commands = [];
+ }
const originalViewModel = useFormSchema?.getViewModelById(activeViewModel.value.id);
if (originalViewModel) {
originalViewModel.commands = activeViewModel.value.commands;
}
-
}
/**
diff --git a/packages/designer/src/components/components/view-model-designer/method-manager/composition/build-method.ts b/packages/designer/src/components/components/view-model-designer/method-manager/composition/build-method.ts
index 778d8dc625776d2e745304f30aa8881d0efcd7a3..0b83ea9531849353bb5a15fc738aa62a96b7d6a1 100644
--- a/packages/designer/src/components/components/view-model-designer/method-manager/composition/build-method.ts
+++ b/packages/designer/src/components/components/view-model-designer/method-manager/composition/build-method.ts
@@ -331,8 +331,19 @@ export class MethodBuilder {
return;
}
- activeViewModel.commands = commands.length > 0 ? commands.filter((command: Command) => command instanceof Command && command.toJson)
- .map((command: Command) => command.toJson()) : [];
+ const commandsJson: any[] = [];
+ if (commands.length > 0) {
+ for (const command of commands) {
+ if (command instanceof Command && command.toJson) {
+ commandsJson.push(command.toJson());
+ } else if (command.data) {
+ commandsJson.push(command.data);
+ }
+ }
+ activeViewModel.commands = commandsJson;
+ } else {
+ activeViewModel.commands = [];
+ }
const originalViewModel = this.useFormSchema?.getViewModelById(activeViewModel.id);
if (originalViewModel) {
diff --git a/packages/designer/src/components/composition/command.service.ts b/packages/designer/src/components/composition/command.service.ts
index 162daeef35fe495e5b49ed493d35931aecb4aacf..486713c9465bbb45eef41870a80fba560a9bd40e 100644
--- a/packages/designer/src/components/composition/command.service.ts
+++ b/packages/designer/src/components/composition/command.service.ts
@@ -3,7 +3,7 @@
/* eslint-disable no-use-before-define */
import { clone, cloneDeep } from "lodash-es";
import axios, { AxiosResponse } from 'axios';
-import { FLoadingService, FMessageBoxService } from "@farris/ui-vue/components";
+import { FLoadingService, FMessageBoxService, schemaMap } from "@farris/ui-vue/components";
import { MetadataService } from "./metadata.service";
import { FormWebCmd, UseFormSchema, UseFormStateMachine } from "../types";
import { CommandMetadataConvertor } from "./command/command-metadata";
@@ -333,7 +333,7 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS
viewModel.commands.map(curCommand => {
const webCmd = webCmds.find(item => item.Id === curCommand.cmpId);
// 不可用或者已有参数，不需要特殊处理
- if (curCommand.isInvalid || !curCommand.params || curCommand.params.length>0) {
+ if (curCommand.isInvalid || !curCommand.params || curCommand.params.length > 0) {
return;
}
const commandInWebCmd = webCmd.Commands.find(commandItem => commandItem.Code === curCommand.handlerName);
@@ -366,9 +366,6 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS
components = components.filter(c => !c.fakeDel);
const findEvents = [];
let allBoundEvents = findBoundEvent(components, findEvents, 'root-viewmodel');
- if (formSchemaService.getFormSchema().module.toolbar) {
- allBoundEvents = findBoundEventInToolbar(formSchemaService.getFormSchema().module.toolbar, allBoundEvents);
- }
getUniqueEvent(allBoundEvents);
const array = [];
const viewModel = cloneDeep(formSchemaService.getFormSchema().module.viewmodels);
@@ -380,186 +377,61 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS
}
/** 4-1-1.遍历components节点，找到所有事件 */
function findBoundEvent(components, findEvents, viewModelId, excludedEvents?: string[]) {
- // ----------------------ToDo--------------------------------
- // controlService = injector.get(DesignerHostSettingService).controlService;
+
components.forEach((componentsItem) => {
if (componentsItem['viewModel']) { viewModelId = componentsItem['viewModel']; }
if (componentsItem['contents']) {
findBoundEvent(componentsItem['contents'], findEvents, viewModelId);
}
- if (componentsItem['items']) {
- findBoundEvent(componentsItem['items'], findEvents, viewModelId);
- }
- if (componentsItem['children']) {
- findBoundEvent(componentsItem['children'], findEvents, viewModelId);
- }
- if (componentsItem['fields']) {
- findBoundEvent(componentsItem['fields'], findEvents, viewModelId);
- }
- if (componentsItem['editor']) {
- const editor = [] as any;
- editor.push(cloneDeep(componentsItem['editor']));
- findBoundEvent(editor, findEvents, viewModelId, ['linkedLabelClick']);
+ // 表格
+ if (componentsItem['columns']) {
+ findBoundEvent(componentsItem['columns'], findEvents, viewModelId);
}
+ // 响应式工具栏
if (componentsItem['toolbar']) {
- if (componentsItem['toolbar']['contents']) {
- findBoundEvent(componentsItem['toolbar']['contents'], findEvents, viewModelId);
- }
- // 移动：导航工具栏
- if (componentsItem['toolbar']['items']) {
- findBoundEvent(componentsItem['toolbar']['items'], findEvents, viewModelId);
- }
- }
- // ListView
- if (componentsItem['type'] === "ListView") {
- if (componentsItem['contentTemplate']) {
- const contentTemplateDom = componentsItem['contentTemplate'];
- if (contentTemplateDom['toolbar']) {
- if (contentTemplateDom['toolbar']['contents']) {
- findBoundEvent(contentTemplateDom['toolbar']['contents'], findEvents, viewModelId);
- }
- }
- }
- // 移动：列表滑动
- if (componentsItem['swipeToolbar'] && componentsItem['swipeToolbar']['items']) {
- findBoundEvent(componentsItem['swipeToolbar']['items'], findEvents, viewModelId);
+ if (componentsItem['toolbar']['buttons']) {
+ findBoundEvent(componentsItem['toolbar']['buttons'], findEvents, viewModelId);
}
-
- }
- // table类型
- if (componentsItem['type'] === "Table" && componentsItem['rows']) {
- const rows = componentsItem['rows'];
- rows.forEach(rowsItem => {
- if (rowsItem['columns']) {
- const columns = rowsItem['columns'];
- columns.forEach(columnsItem => {
- if (columnsItem['editor']) {
- findBoundEvent([columnsItem['editor']], findEvents, viewModelId);
- }
- });
- }
- });
}
// 筛选方案
- if (componentsItem['fieldConfigs']) {
- const fieldConfigs = componentsItem['fieldConfigs'];
- fieldConfigs.forEach(fieldConfigsItem => {
- if (fieldConfigsItem['control']) {
- findBoundEvent([fieldConfigsItem['control']], findEvents, viewModelId);
- }
- });
- }
- // 筛选条
- if (componentsItem['filterList']) {
- const fieldConfigs = componentsItem['filterList'];
+ if (componentsItem['fields']) {
+ const fieldConfigs = componentsItem['fields'];
fieldConfigs.forEach(fieldConfigsItem => {
- if (fieldConfigsItem['control']) {
- findBoundEvent([fieldConfigsItem['control']], findEvents, viewModelId);
+ if (fieldConfigsItem['editor']) {
+ findBoundEvent([fieldConfigsItem['editor']], findEvents, viewModelId);
}
});
}
- // 侧边栏
- if (componentsItem['type'] === "Sidebar" && componentsItem['toolbar'] && componentsItem['toolbar']['items']) {
- findBoundEvent(componentsItem['toolbar']['items'], findEvents, viewModelId);
- }
-
- // 智能输入框的弹出表单模式
- if (componentsItem['modalConfig'] && componentsItem['modalConfig']['footerButtons'] && componentsItem['modalConfig']['footerButtons'].length) {
- findBoundEvent(componentsItem['modalConfig']['footerButtons'], findEvents, viewModelId);
- }
-
- // 列表右键菜单中的按钮
- if (componentsItem['type'] === "DataGrid" && componentsItem['contextMenuItems'] && componentsItem['contextMenuItems'].length) {
- findBoundEvent(componentsItem['contextMenuItems'], findEvents, viewModelId);
- }
-
- // 查询结果工具栏中的按钮
- if (componentsItem['type'] === "QdpFramework" && componentsItem['inputTemplate'] && componentsItem['inputTemplate'].length) {
- findBoundEvent(componentsItem['inputTemplate'], findEvents, viewModelId);
- }
- // ----------------------ToDo--------------------------------
- // const controlEventPropertyIDList = controlService.getControlEventPropertyIDList();
- const controlEventPropertyIDList = [];
- const eventKeys = Object.keys(controlEventPropertyIDList);
- for (let i = 0; i < eventKeys.length; i++) {
- if (excludedEvents && excludedEvents.length && excludedEvents.includes(eventKeys[i])) {
- continue;
- }
- const exist = Object.prototype.hasOwnProperty.call(componentsItem, eventKeys[i]);
- if (exist && componentsItem[eventKeys[i]]) {
- // 判定三段式路径
- const paths = componentsItem[eventKeys[i]].includes('.') ? componentsItem[eventKeys[i]].split('.') : undefined;
- const vmId = paths !== undefined ? paths[1] : viewModelId;
- const cmdLabel = paths !== undefined ? paths[2] : componentsItem[eventKeys[i]];
- const findEventsItem = {
- id: componentsItem['id'],
- eventLabel: eventKeys[i],
- eventName: controlEventPropertyIDList[eventKeys[i]],
- commandLabel: cmdLabel,
- viewModelId: vmId
- };
- findEvents.push(cloneDeep(findEventsItem));
+ const controlEventPropertyIDList = schemaMap[componentsItem.type]?.events;
+ if (controlEventPropertyIDList) {
+ const eventKeys = Object.keys(controlEventPropertyIDList);
+ for (let i = 0; i < eventKeys.length; i++) {
+ if (excludedEvents && excludedEvents.length && excludedEvents.includes(eventKeys[i])) {
+ continue;
+ }
+ const exist = Object.prototype.hasOwnProperty.call(componentsItem, eventKeys[i]);
+ if (exist && componentsItem[eventKeys[i]]) {
+ // 判定三段式路径
+ const paths = componentsItem[eventKeys[i]].includes('.') ? componentsItem[eventKeys[i]].split('.') : undefined;
+ const vmId = paths !== undefined ? paths[1] : viewModelId;
+ const cmdLabel = paths !== undefined ? paths[2] : componentsItem[eventKeys[i]];
+ const findEventsItem = {
+ id: componentsItem['id'],
+ eventLabel: eventKeys[i],
+ eventName: controlEventPropertyIDList[eventKeys[i]],
+ commandLabel: cmdLabel,
+ viewModelId: vmId
+ };
+ findEvents.push(cloneDeep(findEventsItem));
+ }
}
}
+
});
return findEvents;
}
- /** 4-1-2.遍历查看是否存在toolbar节点，若有，则找到所有事件 */
- function findBoundEventInToolbar(toolbar, findEvents) {
- if (toolbar['items']) {
- const items = toolbar['items'];
- const vmKeys = Object.keys(items);
- for (let j = 0; j < vmKeys.length; j++) {
- const vmValue = items[vmKeys[j]];
- vmValue.forEach(vmValueItem => {
- // const controlEventPropertyIDList = controlService.getControlEventPropertyIDList();
- // ----------------------ToDo--------------------
- const controlEventPropertyIDList = [];
- const eventKeys = Object.keys(controlEventPropertyIDList);
- for (let i = 0; i < eventKeys.length; i++) {
- const exist = Object.prototype.hasOwnProperty.call(vmValueItem, eventKeys[i]);
- if (exist && vmValueItem[eventKeys[i]]) {
- // 判定三段式路径
- const paths = vmValueItem[eventKeys[i]].includes('.') ? vmValueItem[eventKeys[i]].split('.') : undefined;
- const vmId = paths !== undefined ? paths[1] : vmKeys[j];
- const cmdLabel = paths !== undefined ? paths[2] : vmValueItem[eventKeys[i]];
- const findEventsItem = {
- id: vmValueItem['id'],
- eventLabel: eventKeys[i],
- eventName: controlEventPropertyIDList[eventKeys[i]],
- commandLabel: cmdLabel,
- viewModelId: vmId
- };
- findEvents.push(cloneDeep(findEventsItem));
- }
-
- // 识别二级按钮
- if (vmValueItem.items && vmValueItem.items.length) {
- vmValueItem.items.forEach(childItem => {
- if (!childItem[eventKeys[i]]) {
- return;
- }
- const paths = childItem[eventKeys[i]].includes('.') ? childItem[eventKeys[i]].split('.') : undefined;
- const vmId = paths !== undefined ? paths[1] : vmKeys[j];
- const cmdLabel = paths !== undefined ? paths[2] : childItem[eventKeys[i]];
- const findEventsItem = {
- id: childItem['id'],
- eventLabel: eventKeys[i],
- eventName: controlEventPropertyIDList[eventKeys[i]],
- commandLabel: cmdLabel,
- viewModelId: vmId
- };
- findEvents.push(cloneDeep(findEventsItem));
- });
- }
- }
- });
- }
- }
- return findEvents;
- }
/** 4-2.去重-去除特殊情况下存储的相同事件及命令 */
function getUniqueEvent(allBoundEvents) {
const value = cloneDeep(allBoundEvents);
@@ -1345,6 +1217,7 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS
assembleSchemaFieldsByComponent,
assembleStateVariables,
assembleSchemaFieldsUnderBoundEntity,
+ getEventParameterData
};
}
diff --git a/packages/designer/src/components/composition/command/supported-controllers/pc-supported-controller.json b/packages/designer/src/components/composition/command/supported-controllers/pc-supported-controller.json
index ea32e4edb696e123fe1cdc2a2923a50c26bf87f8..625dab8338121c608afb9d4e8f5d1af7cf7e5c1c 100644
--- a/packages/designer/src/components/composition/command/supported-controllers/pc-supported-controller.json
+++ b/packages/designer/src/components/composition/command/supported-controllers/pc-supported-controller.json
@@ -520,5 +520,27 @@
"id": "d5f67e0a-767d-a238-5ad4-b1285476c16f",
"code": "copyRow"
}
+ ],
+ "3f40288a-d11e-4dbd-89ba-388abf931ca3": [
+ {
+ "id": "2e237692-05ae-8c84-6ec9-5f9c42ad7f82",
+ "code": "DataImport"
+ },
+ {
+ "id": "474eb4bb-f218-664d-dc2d-796ab04d79a1",
+ "code": "DataExport"
+ },
+ {
+ "id": "608a3c5f-448d-2b05-d58f-de72af9a3566",
+ "code": "CardDataImport"
+ },
+ {
+ "id": "6a8d583c-3a7b-db67-5910-ab4e1e518f6b",
+ "code": "DownloadTemplate"
+ },
+ {
+ "id": "9194b00d-1b61-a33f-ad3d-38ebbf6ef022",
+ "code": "ListDataExport"
+ }
]
}
\ No newline at end of file
diff --git a/packages/designer/src/components/composition/control-creator/use-pc-control-creator.service.ts b/packages/designer/src/components/composition/control-creator/use-pc-control-creator.service.ts
index 89be721bdc9a0f3ca9b158a2a00d2feaebaae04f..9d49be2ea1605cb5dad22234016ba9f026fa2347 100644
--- a/packages/designer/src/components/composition/control-creator/use-pc-control-creator.service.ts
+++ b/packages/designer/src/components/composition/control-creator/use-pc-control-creator.service.ts
@@ -253,8 +253,29 @@ export function usePCControlCreator(schemaService: UseSchemaService): UseControl
formGroupMetadata.binding = null;
const formEditor = getSchemaByType(editorType) || {};
-
formGroupMetadata.editor = formEditor;
+
+ // 因为设计器需要创建的控件属性与控件默认属性不一致，所以这里单独赋值
+ switch (formEditor?.type) {
+ case 'textarea': {
+ // 多行文本
+ formEditor.resizable = true;
+ break;
+ }
+ case 'number-spinner': {
+ // 数字
+ formEditor.nullable = true;
+ break;
+ }
+ case 'radio-group': case 'check-group': case 'combo-list': {
+ // 枚举类控件
+ formEditor.data = [];
+ formEditor.idField = 'value';
+ formEditor.valueField = 'value';
+ formEditor.textField = 'name';
+ break;
+ }
+ }
return formGroupMetadata;
}
return {
diff --git a/packages/designer/src/components/composition/events-editor-utils.ts b/packages/designer/src/components/composition/events-editor-utils.ts
index ba8316a5e8ed67de36c14a4846d1e390450ca4c3..ecfda42e44fdeb8085c887a6d7135a3b85c8ae09 100644
--- a/packages/designer/src/components/composition/events-editor-utils.ts
+++ b/packages/designer/src/components/composition/events-editor-utils.ts
@@ -42,7 +42,7 @@ export function useEventsEditorUtils(commandService: UseFormCommandService, form
/** 开关控制类按钮的回调函数 */
getEventList: () => refreshEventsAndCommandList(propertyData, commandList, viewModelId, allComponentList, eventList, switchEvents),
/** 获取事件的路径 */
- getEventPath: () => eventEditorService.getEventPath(propertyData.id, viewModelId),
+ getEventPath: () => eventEditorService.getEventPath(propertyData.id, viewModelId, commandList),
/** 组件通讯相关的源表单信息 */
sourceCommunication: resolveSourceCommunication(propertyData)
};
diff --git a/packages/designer/src/components/composition/schema-repository/lookup/lookup-field-selector.service.ts b/packages/designer/src/components/composition/schema-repository/lookup/lookup-field-selector.service.ts
index 467851f1916273c2d1daa50b4e2ae7a9effb9cc6..ba1561ac73b9cc146f974af00ec3efb8342b6d5d 100644
--- a/packages/designer/src/components/composition/schema-repository/lookup/lookup-field-selector.service.ts
+++ b/packages/designer/src/components/composition/schema-repository/lookup/lookup-field-selector.service.ts
@@ -1,8 +1,11 @@
import axios from 'axios';
+import { DesignerMode } from '../../../../components/types/designer-context';
+import { useDesignerContext } from '../../designer-context/use-designer-context';
import { MetadataService } from "../../metadata.service";
export class LookupFieldSelectorService {
+ private designerMode = useDesignerContext().designerMode;
constructor(private metadataService: MetadataService) {
}
@@ -131,6 +134,7 @@ export class LookupFieldSelectorService {
}
}
}
+ this.setFilterExpressionAndDimensionForRtc(requestHelpConfig, editorParams);
requestHelpConfig.helpConfig = JSON.stringify(requestHelpConfig.helpConfig);
@@ -173,4 +177,23 @@ export class LookupFieldSelectorService {
}
+ /**
+ * 运行时定制：在帮助配置中添加FilterExpression以及维度信息
+ */
+ private setFilterExpressionAndDimensionForRtc(requestHelpConfig: any, editorParams: any) {
+ if (requestHelpConfig.helpConfig && editorParams.formBasicInfo && this.designerMode === DesignerMode.PC_RTC) {
+
+ const { dimension1, dimension2 } = editorParams.formBasicInfo;
+ requestHelpConfig.helpConfig.FilterExpression = requestHelpConfig.filterCondition || '';
+ requestHelpConfig.helpConfig.CustomizationInfo = {
+ Customized: true,
+ DimensionInfo: {
+ FirstDimension: dimension1,
+ FirstDimensionCode: dimension1,
+ SecondDimension: dimension2,
+ SecondDimensionCode: dimension2,
+ }
+ }
+ }
+ }
}
diff --git a/packages/designer/src/components/composition/use-events-editor.ts b/packages/designer/src/components/composition/use-events-editor.ts
index 1e172a598899cc167d8be843b2b175663fe6cb40..1e7378b0f9a9704edbbf0de1539676866900bba9 100644
--- a/packages/designer/src/components/composition/use-events-editor.ts
+++ b/packages/designer/src/components/composition/use-events-editor.ts
@@ -3,6 +3,8 @@ import { ControllerListItem, EventsEditorActions, EventsEditorMapItem, UseEvents
import { inject } from "vue";
import { UseFormSchema } from "../types";
import { UseFormCommandService } from "../types/command";
+import { useParameterEditorData } from "./use-parameter-editor-data";
+import { useEventParameterData } from "./use-event-parameter-data";
export function useEventsEditor(commandService: UseFormCommandService, useFormSchema: UseFormSchema): UseEventsEditor {
@@ -102,7 +104,7 @@ export function useEventsEditor(commandService: UseFormCommandService, useFormSc
id: boundEventItem.command?.targetComponent,
viewModelId: '',
};
- if (allComponentList.length && boundEventItem.command&&boundEventItem.command.targetComponent !== undefined) {
+ if (allComponentList.length && boundEventItem.command && boundEventItem.command.targetComponent !== undefined) {
let viewModelId;
allComponentList.forEach(component => {
viewModelId = component.componentId === targetComponent.id ? component.viewModelId : viewModelId;
@@ -262,6 +264,7 @@ export function useEventsEditor(commandService: UseFormCommandService, useFormSc
isNewGenerated: commandItem.isNewGenerated || false,
isRtcCommand: commandItem['isRtcCommand'],
isInvalid: commandItem.isInvalid || false,
+ cmpId: controllerName.id
},
controller: {
id: controllerName.id,
@@ -313,6 +316,38 @@ export function useEventsEditor(commandService: UseFormCommandService, useFormSc
}
return action;
}
+ /** 事件编辑器-已有方法-附加参数context */
+ function mergeCommandParamterData(action: any, commandList: any) {
+ action.map((actionItem: any) => {
+ if (actionItem.sourceComponent?.map?.length) {
+ actionItem.sourceComponent.map.forEach(mapItem => {
+ if (mapItem?.command?.params?.length) {
+ let originalCommand;
+ commandList.find(originController => {
+ // 在完整的控制器数据中查找当前方法参数所需要的上下文信息
+ const mapControllerId = mapItem.command.cmpId || mapItem.controller.id;
+ if (originController.controllerName?.id === mapControllerId) {
+ const command = originController.controllerList.find(originCommand => originCommand.label === mapItem.command.handlerName);
+ if (command) {
+ originalCommand = command;
+ return true;
+ }
+ }
+ });
+ if (originalCommand) {
+ mapItem.command.params.forEach(param => {
+ const originalParam = originalCommand.property.find(property => property.name === param.name);
+ if (originalParam) {
+ param.context = cloneDeep(originalParam.context);
+ param.origin = cloneDeep(originalParam.origin);
+ }
+ });
+ }
+ }
+ });
+ }
+ });
+ }
/**
* 事件编辑器-已有方法-命令路径处理
@@ -320,7 +355,7 @@ export function useEventsEditor(commandService: UseFormCommandService, useFormSc
* @param viewModelId 视图模型id
* @returns
*/
- function getEventPath(propertyDataId: string, viewModelId: string) {
+ function getEventPath(propertyDataId: string, viewModelId: string, commandList: any) {
const domJson = useFormSchema.getFormSchema();
const actionData = cloneDeep(domJson.module.actions);
@@ -392,6 +427,8 @@ export function useEventsEditor(commandService: UseFormCommandService, useFormSc
let action = [];
action = cloneDeep(selectedCommandRules(viewModelId, actionWithPath, action));
+ mergeCommandParamterData(action, commandList);
+
return {
actionWithPath: action,
viewModelDisplay: savedViewModel
diff --git a/packages/designer/src/components/designer.component.tsx b/packages/designer/src/components/designer.component.tsx
index 49a3237425c0f4909c85de47efb87b0801ae66ec..7851c465a16d485263ec44b9a2065a642320aa97 100644
--- a/packages/designer/src/components/designer.component.tsx
+++ b/packages/designer/src/components/designer.component.tsx
@@ -113,6 +113,7 @@ export default defineComponent({
}
// 切换到页面时，触发属性面板的更新
if (itemType === 'formDesigner' && formDesignerRef.value?.reloadPropertyPanel) {
+ formCommandService.checkCommands();
formDesignerRef.value?.reloadPropertyPanel();
}
activeShowDesignerType.value = itemType;
diff --git a/packages/designer/src/components/types/events-editor.ts b/packages/designer/src/components/types/events-editor.ts
index 7cc3e94423dffbcb26ccd67350711dcc5e500a87..b8a4bf9cda9759bbe99286a77e3b8ef1722b83d7 100644
--- a/packages/designer/src/components/types/events-editor.ts
+++ b/packages/designer/src/components/types/events-editor.ts
@@ -99,7 +99,7 @@ export interface UseEventsEditor {
* @param webCmdService
* @returns
*/
- getEventPath: (propertyDataId: string, viewModelId: string) => { actionWithPath: any, viewModelDisplay: any };
+ getEventPath: (propertyDataId: string, viewModelId: string, commandList: any) => { actionWithPath: any, viewModelDisplay: any };
getAllComponentList: () => Array
;
formTargetComponent: (boundEventItem: any, vmid: string) => void;
diff --git a/packages/ui-vue/components/checkbox-group/src/checkbox-group.component.tsx b/packages/ui-vue/components/checkbox-group/src/checkbox-group.component.tsx
index 639e8b8f6683ccf90c0720dcdee984a646f49b7c..6b4acd97269f13d5f8ddad21b9f0303a0032824e 100644
--- a/packages/ui-vue/components/checkbox-group/src/checkbox-group.component.tsx
+++ b/packages/ui-vue/components/checkbox-group/src/checkbox-group.component.tsx
@@ -13,11 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { defineComponent, computed, ref, watch, provide } from 'vue';
-import type { SetupContext } from 'vue';
+import { defineComponent, computed, ref, watch, provide, type SetupContext } from 'vue';
+import { CHECKBOX_CONTEXT, useGuid } from '@farris/ui-vue/components/common';
import { CheckboxGroupProps, checkboxGroupProps } from './checkbox-group.props';
import { useCheckboxGroup } from './composition/use-checkbox-group';
-import { CHECKBOX_CONTEXT, useGuid } from '@farris/ui-vue/components/common';
export default defineComponent({
name: 'FCheckboxGroup',
diff --git a/packages/ui-vue/components/checkbox-group/src/checkbox-group.props.ts b/packages/ui-vue/components/checkbox-group/src/checkbox-group.props.ts
index ceac70d854348295c41135de578ca6596ced7d46..a95ea978ba5a9c4bd8c948c3299effe4a5695f13 100644
--- a/packages/ui-vue/components/checkbox-group/src/checkbox-group.props.ts
+++ b/packages/ui-vue/components/checkbox-group/src/checkbox-group.props.ts
@@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ExtractPropTypes, PropType } from 'vue';
-import { Checkbox } from './composition/types';
+import { ExtractPropTypes } from 'vue';
import { radioCheckboxCommonProps } from '@farris/ui-vue/components/common';
+import { Checkbox } from './composition/types';
export const checkboxGroupProps = {
...radioCheckboxCommonProps,
diff --git a/packages/ui-vue/components/checkbox-group/src/composition/types.ts b/packages/ui-vue/components/checkbox-group/src/composition/types.ts
index 8e5b241ef78263e674b5d343d1673720b0451ee8..b4fda30c4ec1a300130f1ed899f6501c8662c384 100644
--- a/packages/ui-vue/components/checkbox-group/src/composition/types.ts
+++ b/packages/ui-vue/components/checkbox-group/src/composition/types.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ComputedRef, Ref } from 'vue';
+import { Ref } from 'vue';
export interface Checkbox {
[key: string]: any;
diff --git a/packages/ui-vue/components/checkbox-group/src/composition/use-checkbox-group.ts b/packages/ui-vue/components/checkbox-group/src/composition/use-checkbox-group.ts
index 5e244085ee16d51c4dec7c5e97645ddc8a8e7fbf..9392fa267eaf70024d04f127dda466f3de0353fd 100644
--- a/packages/ui-vue/components/checkbox-group/src/composition/use-checkbox-group.ts
+++ b/packages/ui-vue/components/checkbox-group/src/composition/use-checkbox-group.ts
@@ -13,8 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ChangeCheckbox, Checkbox } from './types';
import { computed, Ref, SetupContext, ref, watch } from 'vue';
+import { ChangeCheckbox, Checkbox } from './types';
import { CheckboxGroupProps } from '../checkbox-group.props';
export function useCheckboxGroup(
diff --git a/packages/ui-vue/components/checkbox-group/src/designer/checkbox-group.design.component.tsx b/packages/ui-vue/components/checkbox-group/src/designer/checkbox-group.design.component.tsx
index bbec341e5938cc5dd221281973d232fa31435c30..5d53ee08d3713e2c2c96bef24c0c8befe8337131 100644
--- a/packages/ui-vue/components/checkbox-group/src/designer/checkbox-group.design.component.tsx
+++ b/packages/ui-vue/components/checkbox-group/src/designer/checkbox-group.design.component.tsx
@@ -13,12 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { defineComponent, computed, ref, watch, inject, onMounted } from 'vue';
-import type { SetupContext } from 'vue';
+import { defineComponent, computed, ref, watch, inject, onMounted, type SetupContext } from 'vue';
+import { useDesignerComponent, DesignerItemContext } from '@farris/ui-vue/components/designer-canvas';
import { CheckboxGroupProps, checkboxGroupProps } from '../checkbox-group.props';
import { useCheckboxGroup } from '../composition/use-checkbox-group';
-import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
-import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { useCheckGroupDesignerRules } from './use-rules';
export default defineComponent({
diff --git a/packages/ui-vue/components/checkbox-group/src/designer/use-rules.ts b/packages/ui-vue/components/checkbox-group/src/designer/use-rules.ts
index e3af56d98523237dffc1f95cdc5b8b875b26bb73..d583636e08a3124f5f33f0e7c5384fb83204d96c 100644
--- a/packages/ui-vue/components/checkbox-group/src/designer/use-rules.ts
+++ b/packages/ui-vue/components/checkbox-group/src/designer/use-rules.ts
@@ -1,6 +1,5 @@
-import { UseDesignerRules } from "../../../designer-canvas/src/composition/types";
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../../designer-canvas/src/types";
+import { UseDesignerRules, ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "@farris/ui-vue/components/designer-canvas";
import { CheckGroupProperty } from "../property-config/check-group.property-config";
diff --git a/packages/ui-vue/components/checkbox-group/src/property-config/check-group.property-config.ts b/packages/ui-vue/components/checkbox-group/src/property-config/check-group.property-config.ts
index b98207025a8dbad5a2977490c160c0b8d8eda03a..abadb8ec8caf9900c67a0926cd1eed1d2cd8118b 100644
--- a/packages/ui-vue/components/checkbox-group/src/property-config/check-group.property-config.ts
+++ b/packages/ui-vue/components/checkbox-group/src/property-config/check-group.property-config.ts
@@ -1,4 +1,4 @@
-import { InputBaseProperty } from "../../../property-panel/src/composition/entity/input-base-property";
+import { InputBaseProperty } from "@farris/ui-vue/components/property-panel";
export class CheckGroupProperty extends InputBaseProperty {
diff --git a/packages/ui-vue/components/checkbox-group/src/schema/schema-mapper.ts b/packages/ui-vue/components/checkbox-group/src/schema/schema-mapper.ts
index 97964aee23bbb8b523c7692723ea02db00d4f4c0..2ca33ca080647b9edc66a133396282d6a3b1698f 100644
--- a/packages/ui-vue/components/checkbox-group/src/schema/schema-mapper.ts
+++ b/packages/ui-vue/components/checkbox-group/src/schema/schema-mapper.ts
@@ -1,4 +1,4 @@
-import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver';
+import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver';
export const schemaMapper = new Map([
['appearance', resolveAppearance]
diff --git a/packages/ui-vue/components/checkbox-group/src/schema/schema-resolver.ts b/packages/ui-vue/components/checkbox-group/src/schema/schema-resolver.ts
index b02bdf93eec9060948f579c53aa81e3963a7d706..d36ae7457434b7381b796814e9926d352feacff6 100644
--- a/packages/ui-vue/components/checkbox-group/src/schema/schema-resolver.ts
+++ b/packages/ui-vue/components/checkbox-group/src/schema/schema-resolver.ts
@@ -1,4 +1,4 @@
-import { DynamicResolver } from "../../../dynamic-resolver";
+import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver";
export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record {
return schema;
diff --git a/packages/ui-vue/components/checkbox/src/designer/checkbox.design.component.tsx b/packages/ui-vue/components/checkbox/src/designer/checkbox.design.component.tsx
index 831220238e98d9be84931331fc86344edb58ab25..bbf5f1af06cf95d4ac3e7da276ce3bb734edb484 100644
--- a/packages/ui-vue/components/checkbox/src/designer/checkbox.design.component.tsx
+++ b/packages/ui-vue/components/checkbox/src/designer/checkbox.design.component.tsx
@@ -14,8 +14,7 @@
* limitations under the License.
*/
import { defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue';
-import { DesignerItemContext } from '../../../designer-canvas/src/types';
-import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
+import { DesignerItemContext, useDesignerComponent } from '@farris/ui-vue/components/designer-canvas';
import { useCheckBoxDesignerRules } from './use-rules';
import { checkboxProps, CheckboxProps } from '../checkbox.props';
diff --git a/packages/ui-vue/components/checkbox/src/designer/use-rules.ts b/packages/ui-vue/components/checkbox/src/designer/use-rules.ts
index db4c484b8b64bd9a9f037ae456d4c86779fb7201..8119618dcbe3e1061f2bd05a7382d9ca52cdcd4a 100644
--- a/packages/ui-vue/components/checkbox/src/designer/use-rules.ts
+++ b/packages/ui-vue/components/checkbox/src/designer/use-rules.ts
@@ -1,6 +1,5 @@
-import { UseDesignerRules } from "../../../designer-canvas/src/composition/types";
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../../designer-canvas/src/types";
+import { ComponentSchema, DesignerComponentInstance, DesignerItemContext, UseDesignerRules } from "@farris/ui-vue/components/designer-canvas";
import { CheckBoxProperty } from "../property-config/checkbox.property-config";
export function useCheckBoxDesignerRules(designItemContext: DesignerItemContext, designerHostService): UseDesignerRules {
diff --git a/packages/ui-vue/components/checkbox/src/schema/schema-mapper.ts b/packages/ui-vue/components/checkbox/src/schema/schema-mapper.ts
index 97964aee23bbb8b523c7692723ea02db00d4f4c0..2ca33ca080647b9edc66a133396282d6a3b1698f 100644
--- a/packages/ui-vue/components/checkbox/src/schema/schema-mapper.ts
+++ b/packages/ui-vue/components/checkbox/src/schema/schema-mapper.ts
@@ -1,4 +1,4 @@
-import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver';
+import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver';
export const schemaMapper = new Map([
['appearance', resolveAppearance]
diff --git a/packages/ui-vue/components/checkbox/src/schema/schema-resolver.ts b/packages/ui-vue/components/checkbox/src/schema/schema-resolver.ts
index b02bdf93eec9060948f579c53aa81e3963a7d706..d36ae7457434b7381b796814e9926d352feacff6 100644
--- a/packages/ui-vue/components/checkbox/src/schema/schema-resolver.ts
+++ b/packages/ui-vue/components/checkbox/src/schema/schema-resolver.ts
@@ -1,4 +1,4 @@
-import { DynamicResolver } from "../../../dynamic-resolver";
+import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver";
export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record {
return schema;
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 28a03e2cee311b813b30cea01122f70ad20c525f..c15eff3082e8a9ed143fa5134d671419747b12cc 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { computed, defineComponent, nextTick, Ref, ref, SetupContext, watch } from 'vue';
+import FButtonEdit from '@farris/ui-vue/components/button-edit';
import { comboListProps, ComboListProps, Option } from './combo-list.props';
import ComboListContainer from './components/list-container.component';
-import FButtonEdit from '@farris/ui-vue/components/button-edit';
import { useDataSource } from './composition/use-data-source';
export default defineComponent({
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.props.ts b/packages/ui-vue/components/combo-list/src/combo-list.props.ts
index 842b02602bdde997a7246c3b74df31901c714d16..3a60e886b034697c2ccab8c05a9e05bd0e4b9511 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.props.ts
+++ b/packages/ui-vue/components/combo-list/src/combo-list.props.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { ExtractPropTypes, PropType } from 'vue';
-import { createPropsResolver } from '../../dynamic-resolver';
+import { createPropsResolver } from '@farris/ui-vue/components/dynamic-resolver';
import { schemaMapper } from './schema/schema-mapper';
import comboListSchema from './schema/combo-list.schema.json';
import { schemaResolver } from './schema/schema-resolver';
diff --git a/packages/ui-vue/components/combo-list/src/components/list-container.component.tsx b/packages/ui-vue/components/combo-list/src/components/list-container.component.tsx
index 21a83a0b4b8d47b5a918dd346a695ca7860de269..561174c674c06ba9f757be49791f859c6e3f7afb 100644
--- a/packages/ui-vue/components/combo-list/src/components/list-container.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/components/list-container.component.tsx
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { computed, defineComponent, onMounted, ref, watch } from 'vue';
-import { ListContainerProps, listContainerProps } from './list-container.props';
-import FListView from '@farris/ui-vue/components/list-view';
import { isUndefined } from 'lodash-es';
+import FListView from '@farris/ui-vue/components/list-view';
+import { ListContainerProps, listContainerProps } from './list-container.props';
export default defineComponent({
name: 'FComboListContainer',
diff --git a/packages/ui-vue/components/combo-list/src/designer/combo-list.design.component.tsx b/packages/ui-vue/components/combo-list/src/designer/combo-list.design.component.tsx
index 32ab321e413c4a7c5aea7ec6bba10ea2ac4cf95c..e4f60e5e3a9efe60861dcb6ea8bae4c582e1fbaa 100644
--- a/packages/ui-vue/components/combo-list/src/designer/combo-list.design.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/designer/combo-list.design.component.tsx
@@ -14,10 +14,10 @@
* limitations under the License.
*/
import { defineComponent, inject, onMounted, ref, SetupContext } from 'vue';
-import { comboListDesignProps, ComboListDesignProps } from '../combo-list.props';
import FButtonEditDesign from '@farris/ui-vue/components/button-edit/designer';
-import { useComboListDesignerRules } from './use-rules';
import { DesignerItemContext, useDesignerComponent } from '@farris/ui-vue/components/designer-canvas';
+import { comboListDesignProps, ComboListDesignProps } from '../combo-list.props';
+import { useComboListDesignerRules } from './use-rules';
export default defineComponent({
name: 'FComboListDesign',
diff --git a/packages/ui-vue/components/combo-list/src/designer/use-rules.ts b/packages/ui-vue/components/combo-list/src/designer/use-rules.ts
index bfdc09bb58a342c3223bb66405b26abe4ddd5bc1..ee7b99176f7c317dc5e570ceb197595cf48cb89c 100644
--- a/packages/ui-vue/components/combo-list/src/designer/use-rules.ts
+++ b/packages/ui-vue/components/combo-list/src/designer/use-rules.ts
@@ -1,6 +1,5 @@
-import { UseDesignerRules } from "../../../designer-canvas/src/composition/types";
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../../designer-canvas/src/types";
+import { UseDesignerRules, ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "@farris/ui-vue/components/designer-canvas";
import { ComboListProperty } from "../property-config/combo-list.property-config";
export function useComboListDesignerRules(designItemContext: DesignerItemContext, designerHostService): UseDesignerRules {
diff --git a/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts b/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts
index ce5195c648972928671a62c45847fe2887619cda..0f926b00a14ca0bf1b90d83a410e69e6b177ab7f 100644
--- a/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts
+++ b/packages/ui-vue/components/combo-list/src/property-config/combo-list.property-config.ts
@@ -1,7 +1,6 @@
import { FormSchemaEntityFieldType$Type } from "@farris/ui-vue/components/common";
+import { FormPropertyChangeObject, InputBaseProperty } from "@farris/ui-vue/components/property-panel";
import { DesignerComponentInstance } from "@farris/ui-vue/components/designer-canvas";
-import { FormPropertyChangeObject } from "../../../property-panel";
-import { InputBaseProperty } from "../../../property-panel/src/composition/entity/input-base-property";
import { comboListRemoteConverter } from "./converters/combo-list-property.converter";
export class ComboListProperty extends InputBaseProperty {
constructor(componentId: string, designerHostService: any) {
@@ -95,7 +94,7 @@ export class ComboListProperty extends InputBaseProperty {
multiSelect: {
description: "",
title: "启用多选",
- visible: fieldType === 'StringType',
+ visible: !fieldType || fieldType === 'StringType',
type: "boolean",
refreshPanelAfterChanged: true,
},
diff --git a/packages/ui-vue/components/combo-list/src/schema/schema-mapper.ts b/packages/ui-vue/components/combo-list/src/schema/schema-mapper.ts
index 97964aee23bbb8b523c7692723ea02db00d4f4c0..2ca33ca080647b9edc66a133396282d6a3b1698f 100644
--- a/packages/ui-vue/components/combo-list/src/schema/schema-mapper.ts
+++ b/packages/ui-vue/components/combo-list/src/schema/schema-mapper.ts
@@ -1,4 +1,4 @@
-import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver';
+import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver';
export const schemaMapper = new Map([
['appearance', resolveAppearance]
diff --git a/packages/ui-vue/components/combo-list/src/schema/schema-resolver.ts b/packages/ui-vue/components/combo-list/src/schema/schema-resolver.ts
index b02bdf93eec9060948f579c53aa81e3963a7d706..d36ae7457434b7381b796814e9926d352feacff6 100644
--- a/packages/ui-vue/components/combo-list/src/schema/schema-resolver.ts
+++ b/packages/ui-vue/components/combo-list/src/schema/schema-resolver.ts
@@ -1,4 +1,4 @@
-import { DynamicResolver } from "../../../dynamic-resolver";
+import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver";
export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record {
return schema;
diff --git a/packages/ui-vue/components/component/src/designer/use-designer-rules.ts b/packages/ui-vue/components/component/src/designer/use-designer-rules.ts
index 2bbc428dfd8a92700210ccc296035887a37744f9..b5b93521355d7a262c74f69fb81ed9e82723c52a 100644
--- a/packages/ui-vue/components/component/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/component/src/designer/use-designer-rules.ts
@@ -4,6 +4,8 @@ import { UseTemplateDragAndDropRules } from "../../../designer-canvas/src/compos
import { ComponentProperty } from "../property-config/component.property-config";
import { useSiblingComponent } from "../composition/use-sibling-component";
import { useSplitFormComponent } from "../composition/use-split-component";
+import { DgControl } from "../../../designer-canvas";
+import { ComponentType } from "../../../designer-outline";
export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules {
const dragAndDropRules = new UseTemplateDragAndDropRules();
@@ -159,5 +161,69 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
return customToolbarConfigs;
}
- return { canAccepts, checkCanDeleteComponent, checkCanMoveComponent, hideNestedPaddingInDesginerView, getStyles, getPropsConfig, onRemoveComponent, getCustomButtons };
+
+ function getComponentTitle() {
+ if (!designerHostService || !designItemContext?.schema) {
+ return '组件';
+ }
+ switch (designItemContext.schema.componentType) {
+ case ComponentType.Frame: {
+ return '根组件';
+ }
+ case ComponentType.dataGrid: {
+ const { formSchemaUtils } = designerHostService;
+ const treeGridSchema = formSchemaUtils.selectNode(designItemContext.schema, item => item.type === DgControl['tree-grid'].type);
+ const title = treeGridSchema ? '树表格' : '表格';
+ return `${title}组件`;
+ }
+ case ComponentType.attachmentPanel: {
+ return '附件组件';
+ }
+ case ComponentType.listView: {
+ return '列表视图组件';
+ }
+
+ default: {
+ return '组件';
+ }
+ }
+ }
+ /**
+ * 配置组件的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const { formSchemaUtils } = designerHostService;
+
+ let parentTitle = '';
+ let reliedComponentId = '';
+ const rootViewModelId = formSchemaUtils.getRootViewModelId();
+ const rootComponent = formSchemaUtils.getComponentByViewModelId(rootViewModelId);
+ const parentSchemaOfComponent = formSchemaUtils.selectNode(rootComponent, item => {
+ return item.contents && item.contents.find(childItem => childItem.component === designItemContext.schema.id);
+ });
+ // 父级为tab-page
+ if (parentSchemaOfComponent?.type === DgControl['tab-page']?.type && parentSchemaOfComponent?.contents?.length) {
+ parentTitle = parentSchemaOfComponent.title || '';
+ }
+ // 父级为section
+ if (parentSchemaOfComponent?.type === DgControl.section?.type && parentSchemaOfComponent?.showHeader !== false) {
+ parentTitle = parentSchemaOfComponent.mainTitle || '';
+ }
+ parentTitle = parentTitle ? `${parentTitle} > ` : '';
+ reliedComponentId = parentTitle ? parentSchemaOfComponent.id : '';
+
+ const componentTitle = getComponentTitle();
+ formSchemaUtils.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle,
+ parentPathName: `${parentTitle}${componentTitle}`,
+ reliedComponentId
+ });
+ }
+
+ }
+ return {
+ canAccepts, checkCanDeleteComponent, checkCanMoveComponent, hideNestedPaddingInDesginerView, getStyles, getPropsConfig, onRemoveComponent, getCustomButtons,
+ setComponentBasicInfoMap
+ };
}
diff --git a/packages/ui-vue/components/condition/index.ts b/packages/ui-vue/components/condition/index.ts
index 98ef092477ad131d323202a55cc978134eb61302..f3a0bd38ce320577157c28e4e673b85842be1402 100644
--- a/packages/ui-vue/components/condition/index.ts
+++ b/packages/ui-vue/components/condition/index.ts
@@ -16,6 +16,7 @@
import type { App, Plugin } from 'vue';
import FConditionFields from './src/condition-fields.component';
import FConditionList from './src/condition-list.component';
+import FConditionFieldsDesign from './src/condition-fields.design.component';
export * from './src/condition.props';
export * from './src/types';
@@ -24,12 +25,11 @@ export * from './src/composition/condition-value/types';
export * from './src/composition/use-compare';
export * from './src/composition/use-condition';
export * from './src/composition/use-condition-value';
-export * from './src/condition-fields.design.component';
FConditionList.install = (app: App) => {
app.component(FConditionFields.name as string, FConditionFields)
.component(FConditionList.name as string, FConditionList);
};
-export { FConditionFields, FConditionList };
+export { FConditionFields, FConditionList, FConditionFieldsDesign };
export default FConditionList as typeof FConditionList & Plugin;
diff --git a/packages/ui-vue/components/data-grid/src/designer/use-column-rules.ts b/packages/ui-vue/components/data-grid/src/designer/use-column-rules.ts
index 4abe19de7abca1c9798a5b3ef37a55b344561183..02a3998a0a124384b4fc638d4711982fc10acb57 100644
--- a/packages/ui-vue/components/data-grid/src/designer/use-column-rules.ts
+++ b/packages/ui-vue/components/data-grid/src/designer/use-column-rules.ts
@@ -1,9 +1,10 @@
-
-
+
+
import { ref } from "vue";
import { DraggingResolveContext, UseDesignerRules } from "../../../designer-canvas/src/composition/types";
import { ComponentSchema, DesignerItemContext } from "../../../designer-canvas/src/types";
import { DataGriColumnProperty } from "../property-config/data-grid-column.property-config";
+import { DgControl } from "../../../designer-canvas/src/composition/dg-control";
export function useDesignerRulesForDataGridColumn(designItemContext: DesignerItemContext, designerHostService): UseDesignerRules {
const schema = designItemContext.schema as ComponentSchema;
@@ -44,7 +45,30 @@ export function useDesignerRulesForDataGridColumn(designItemContext: DesignerIte
return gridColumnProp.getPropertyConfig(schema, designItemContext?.parent?.schema);
}
+ /**
+ * 配置表格的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (!designerHostService || !designItemContext) {
+ return;
+ }
+ const { formSchemaUtils } = designerHostService;
+
+ let parentPath = DgControl['data-grid'].name || '表格';
+ const controlBasicInfoMap = formSchemaUtils.getControlBasicInfoMap();
+ // 先取父级表格上的路径信息
+ const dataGridBasicInfo = controlBasicInfoMap.get(designItemContext.parent?.schema?.id);
+ if (dataGridBasicInfo && dataGridBasicInfo.parentPathName) {
+ parentPath = dataGridBasicInfo.parentPathName;
+ }
+ // 列的展示名称和路径
+ controlBasicInfoMap.set(schema.id, {
+ showName: schema.title,
+ parentPathName: `${parentPath} > ${schema.title}`,
+ reliedComponentId: dataGridBasicInfo.reliedComponentId
+ });
+ }
return {
canAccepts,
checkCanDeleteComponent,
@@ -52,7 +76,8 @@ export function useDesignerRulesForDataGridColumn(designItemContext: DesignerIte
hideNestedPaddingInDesginerView,
triggerBelongedComponentToMoveWhenMoved,
triggerBelongedComponentToDeleteWhenDeleted,
- getPropsConfig
+ getPropsConfig,
+ setComponentBasicInfoMap
} as UseDesignerRules;
}
diff --git a/packages/ui-vue/components/data-grid/src/designer/use-designer-rules.ts b/packages/ui-vue/components/data-grid/src/designer/use-designer-rules.ts
index 0f730c481d5b1c34ea5b0beb717115d68df3bc37..f7af4f88054d7a68eadbebd1061c4251f7704cbf 100644
--- a/packages/ui-vue/components/data-grid/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/data-grid/src/designer/use-designer-rules.ts
@@ -1,5 +1,6 @@
import { ref } from "vue";
import { DraggingResolveContext, DesignerHTMLElement, UseDesignerRules, DesignerHostService } from "../../../designer-canvas/src/composition/types";
+import { DgControl } from "../../../designer-canvas/src/composition/dg-control";
import { ComponentSchema, DesignerItemContext } from "../../../designer-canvas/src/types";
import { DataGridProperty } from "../property-config/data-grid.property-config";
@@ -47,7 +48,42 @@ export function useDesignerRulesForDataGrid(designItemContext: DesignerItemConte
return dataGridProp.getPropertyConfig(schema);
}
+ /**
+ * 配置表格的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const belongedComponentId = designItemContext?.componentInstance?.value.belongedComponentId;
+ let parentTitle = '';
+ let reliedComponentId = '';
+ const { formSchemaUtils } = designerHostService;
+ if (belongedComponentId) {
+ const rootViewModelId = formSchemaUtils.getRootViewModelId();
+ const rootComponent = formSchemaUtils.getComponentByViewModelId(rootViewModelId);
+ const parentSchemaOfComponent = formSchemaUtils.selectNode(rootComponent, item => {
+ return item.contents && item.contents.find(childItem => childItem.component === belongedComponentId);
+ });
+ // 父级为tab-page
+ if (parentSchemaOfComponent?.type === DgControl['tab-page']?.type && parentSchemaOfComponent?.contents?.length) {
+ parentTitle = parentSchemaOfComponent.title || '';
+ }
+ // 父级为section
+ if (parentSchemaOfComponent?.type === DgControl.section?.type && parentSchemaOfComponent?.showHeader !== false) {
+ parentTitle = parentSchemaOfComponent.mainTitle || '';
+ }
+ parentTitle = parentTitle ? `${parentTitle} > ` : '';
+ reliedComponentId = parentTitle ? parentSchemaOfComponent.id : '';
+ }
+ const dataGridName = DgControl['data-grid'].name;
+ designerHostService?.formSchemaUtils.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle: dataGridName,
+ parentPathName: `${parentTitle}${dataGridName}`,
+ reliedComponentId
+ });
+ }
+
+ }
return {
canAccepts,
checkCanDeleteComponent,
@@ -55,7 +91,8 @@ export function useDesignerRulesForDataGrid(designItemContext: DesignerItemConte
hideNestedPaddingInDesginerView,
triggerBelongedComponentToMoveWhenMoved,
triggerBelongedComponentToDeleteWhenDeleted,
- getPropsConfig
+ getPropsConfig,
+ setComponentBasicInfoMap
} as UseDesignerRules;
}
diff --git a/packages/ui-vue/components/designer-canvas/index.ts b/packages/ui-vue/components/designer-canvas/index.ts
index c9435dd29509c5f3ffe30235cf0ac20915e2ab15..43befcbf47d8bc73291d630be287140ce7f948c0 100644
--- a/packages/ui-vue/components/designer-canvas/index.ts
+++ b/packages/ui-vue/components/designer-canvas/index.ts
@@ -1,5 +1,6 @@
import FDesignerCanvas from './src/designer-canvas.component';
import FDesignerItem from './src/components/designer-item.component';
+import FDesignerInnerItem from './src/components/designer-inner-item.component';
import { DgControl } from './src/composition/dg-control';
import type { DesignerHostService, UseDesignerRules, DesignerHTMLElement, DraggingResolveContext } from './src/composition/types';
@@ -11,4 +12,4 @@ export * from './src/composition/rule/use-dragula-common-rule';
export * from './src/composition/types';
export * from './src/types';
-export { FDesignerCanvas, FDesignerItem, DgControl, UseDesignerRules, DesignerHostService, DesignerHTMLElement, DraggingResolveContext };
+export { FDesignerCanvas, FDesignerItem, DgControl, UseDesignerRules, DesignerHostService, DesignerHTMLElement, DraggingResolveContext, FDesignerInnerItem };
diff --git a/packages/ui-vue/components/designer-canvas/src/components/designer-inner-item.component.tsx b/packages/ui-vue/components/designer-canvas/src/components/designer-inner-item.component.tsx
index d3b415032dc26553562261e07d7b766711683efd..781b227ee9291515c5b16cb227ea348624743e76 100644
--- a/packages/ui-vue/components/designer-canvas/src/components/designer-inner-item.component.tsx
+++ b/packages/ui-vue/components/designer-canvas/src/components/designer-inner-item.component.tsx
@@ -1,6 +1,6 @@
import { Ref, SetupContext, computed, defineComponent, inject, onMounted, provide, ref, watch, onBeforeUnmount, withModifiers } from 'vue';
import { DesignerButtonItem, DesignerInnerItemPropsType, designerInnerItemProps } from '../composition/props/designer-inner-item.props';
-import { DraggingResolveContext, UseDragula } from '../composition/types';
+import { DesignerHostService, DraggingResolveContext, UseDragula } from '../composition/types';
import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from '../types';
import { canvasChanged, setPositionOfButtonGroup, setPositionOfButtonGroupInContainer, resetPositionOfButtonGroup } from '../composition/designer-canvas-changed';
import { useDesignerInnerComponent } from '../composition/function/use-designer-inner-component';
@@ -25,6 +25,7 @@ const FDesignerInnerItem = defineComponent({
const parent = inject('design-item-context');
const designItemContext = { designerItemElementRef, componentInstance, schema: schema.value, parent, setupContext: context as SetupContext };
provide('design-item-context', designItemContext);
+ const designerHostService = inject('designer-host-service');
const designerItemClass = computed(() => {
const customButtons = componentInstance.value?.getCustomButtons && componentInstance.value.getCustomButtons();
@@ -202,7 +203,7 @@ const FDesignerInnerItem = defineComponent({
const innerComponentInstance = useDesignerInnerComponent(innerComponentElementRef, designItemContext);
return innerComponentInstance.value;
}
-
+
onMounted(() => {
if (designerItemElementRef.value) {
const draggableContainer = designerItemElementRef.value.querySelector(
@@ -223,6 +224,7 @@ const FDesignerInnerItem = defineComponent({
designerItemElementRef.value.componentInstance = componentInstance;
designerItemElementRef.value.designItemContext = designItemContext;
}
+ componentInstance.value.setComponentBasicInfoMap(designerHostService);
}
bindingScrollEvent();
canvasChanged.value++;
diff --git a/packages/ui-vue/components/designer-canvas/src/components/designer-item.component.tsx b/packages/ui-vue/components/designer-canvas/src/components/designer-item.component.tsx
index 973f42f5e749818facc5297bd02638de92101a8e..6ba42d0c89b5160fa0c6616a80f6eee05dcb1df1 100644
--- a/packages/ui-vue/components/designer-canvas/src/components/designer-item.component.tsx
+++ b/packages/ui-vue/components/designer-canvas/src/components/designer-item.component.tsx
@@ -306,6 +306,7 @@ const FDesignerItem = defineComponent({
}
componentInstance.value.belongedComponentId = componentId.value;
+ componentInstance.value.setComponentBasicInfoMap(designerHostService);
}
bindingScrollEvent();
diff --git a/packages/ui-vue/components/designer-canvas/src/components/maps.ts b/packages/ui-vue/components/designer-canvas/src/components/maps.ts
index 66f61bb31ce7b56de977622a85f0d747778d1056..82663933c44b595fab6dc7860b7bba3396546d47 100644
--- a/packages/ui-vue/components/designer-canvas/src/components/maps.ts
+++ b/packages/ui-vue/components/designer-canvas/src/components/maps.ts
@@ -54,7 +54,7 @@ import FVideo from '@farris/ui-vue/components/video';
import FTextArea from '@farris/ui-vue/components/textarea';
import FTreeGrid from '@farris/ui-vue/components/tree-grid';
import FFieldset from '@farris/ui-vue/components/fieldset';
-import FDrawer from '@farris/ui-vue/components/drawer';
+import FDrawer from '@farris/ui-vue/components/drawer/designer';
import FHtmlTemplate from '@farris/ui-vue/components/html-template';
import { RegisterContext } from '@farris/ui-vue/components/common';
import { propertyConfigSchemaMapForDesigner, propertyEffectMapForDesigner } from '@farris/ui-vue/components/dynamic-resolver';
diff --git a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
index b004a38664bcafb73c9ee62df4c242663a4169b6..d1db5a781705b9e625762a866a5e91c0778c053a 100644
--- a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
+++ b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
@@ -2,6 +2,7 @@ import { Ref, ref } from "vue";
import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDesignerRules } from "../types";
import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../types";
import { getSchemaByTypeForDesigner } from '@farris/ui-vue/components/dynamic-resolver';
+import { DgControl } from "../dg-control";
export function useDesignerComponent(
elementRef: Ref,
@@ -12,6 +13,8 @@ export function useDesignerComponent(
const styles = (designerRules && designerRules.getStyles && designerRules.getStyles()) || '';
const designerClass = (designerRules && designerRules.getDesignerClass && designerRules.getDesignerClass()) || '';
const componentInstance = ref();
+
+ let useFormSchema: any;
/**
* 校验组件是否支持移动
*/
@@ -223,10 +226,66 @@ export function useDesignerComponent(
}
+ /**
+ * 配置控件的基础信息（展示标题、路径）
+ */
+ function setComponentBasicInfoMap(designerHostService?: DesignerHostService) {
+ if (!designItemContext?.schema?.id) {
+ return;
+ }
+ if (!useFormSchema && designerHostService) {
+ useFormSchema = designerHostService.formSchemaUtils;
+ }
+ if (designerRules?.setComponentBasicInfoMap) {
+ designerRules.setComponentBasicInfoMap();
+ return;
+ }
+ let componentTitle = '';
+ if (designerRules?.getComponentTitle) {
+ componentTitle = designerRules.getComponentTitle();
+ } else {
+ const { text, title, label, mainTitle, name, type } = designItemContext.schema;
+ componentTitle = text || title || label || mainTitle || name || DgControl[type]?.name;;
+ }
+ if (componentTitle) {
+ useFormSchema.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle,
+ parentPathName: componentTitle
+ });
+ }
+ }
+
+ /**
+ * 标题类的属性变更后，更新控件的路径信息
+ */
+ function resetComponentBasicInfoMap(event: any) {
+ const { changeObject } = event;
+ const { propertyID, propertyValue } = changeObject;
+ if (['text', 'title', 'label', 'name', 'mainTitle'].includes(event?.changeObject?.propertyID)) {
+ if (propertyID && propertyValue) {
+ setComponentBasicInfoMap();
+
+ // 更新依赖当前组件的其他组件的路径信息。暂时认为路径信息中当前组件在第一位
+ if (useFormSchema) {
+ const controlBasicInfoMap = useFormSchema.getControlBasicInfoMap();
+ const componentIdsReliedOn = controlBasicInfoMap.keys().toArray().filter(componentId => controlBasicInfoMap.get(componentId)?.reliedComponentId === designItemContext?.schema?.id);
+ if (componentIdsReliedOn?.length) {
+ componentIdsReliedOn.forEach(componentId => {
+ const pathArray = controlBasicInfoMap.get(componentId).parentPathName.split(' > ');
+ pathArray[0] = propertyValue;
+ controlBasicInfoMap.get(componentId).parentPathName = pathArray.join(' > ');
+ })
+ }
+ }
+ }
+ }
+ }
+
/**
* 控件属性变更后事件
*/
function onPropertyChanged(event: any) {
+ resetComponentBasicInfoMap(event);
if (designerRules && designerRules.onPropertyChanged) {
return designerRules.onPropertyChanged(event);
}
@@ -255,7 +314,8 @@ export function useDesignerComponent(
triggerBelongedComponentToDeleteWhenDeleted: !!designerRules && designerRules.triggerBelongedComponentToDeleteWhenDeleted || ref(false),
onRemoveComponent,
getCustomButtons,
- onPropertyChanged
+ onPropertyChanged,
+ setComponentBasicInfoMap
} as DesignerComponentInstance;
return componentInstance as any;
diff --git a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts
index c49852495370000d3369eeb7895acbd6a8439466..46c731227f2550ff997415e030d9e7346a5e8e3d 100644
--- a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts
+++ b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts
@@ -2,6 +2,7 @@ import { inject, Ref, ref } from "vue";
import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDesignerRules } from "../types";
import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../types";
import { getSchemaByTypeForDesigner } from '@farris/ui-vue/components/dynamic-resolver';
+import { DgControl } from "../dg-control";
export function useDesignerInnerComponent(
elementRef: Ref,
@@ -10,6 +11,7 @@ export function useDesignerInnerComponent(
): Ref {
const styles = (designerRules && designerRules.getStyles && designerRules.getStyles()) || '';
const componentInstance = ref();
+ let useFormSchema: any;
/**
* 校验组件是否支持移动
*/
@@ -152,11 +154,54 @@ export function useDesignerInnerComponent(
}
function onRemoveComponent() {
+ }
+ /**
+ * 配置控件的基础信息（展示标题、路径）
+ */
+ function setComponentBasicInfoMap(designerHostService?: DesignerHostService) {
+ if (!designItemContext?.schema) {
+ return;
+ }
+ if (designerRules?.setComponentBasicInfoMap) {
+ designerRules.setComponentBasicInfoMap();
+ return;
+ }
+ let componentTitle = '';
+
+ if (designerRules?.getComponentTitle) {
+ componentTitle = designerRules.getComponentTitle();
+ } else {
+ const { text, title, label, mainTitle, name, type } = designItemContext.schema;
+ componentTitle = text || title || label || mainTitle || name || DgControl[type]?.name;
+ }
+ if (componentTitle) {
+ if (!useFormSchema && designerHostService) {
+ useFormSchema = designerHostService.formSchemaUtils;
+ }
+ useFormSchema.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle,
+ parentPathName: componentTitle
+ });
+ }
+ }
+
+ /**
+ * 标题类的属性变更后，更新控件的路径信息
+ */
+ function resetComponentBasicInfoMap(event: any) {
+ const { changeObject } = event;
+ const { propertyID, propertyValue } = changeObject;
+ if (['text', 'title', 'label', 'name', 'mainTitle'].includes(event?.changeObject?.propertyID)) {
+ if (propertyID && propertyValue) {
+ setComponentBasicInfoMap();
+ }
+ }
}
/**
* 控件属性变更后事件
*/
function onPropertyChanged(event: any) {
+ resetComponentBasicInfoMap(event);
if (designerRules && designerRules.onPropertyChanged) {
return designerRules.onPropertyChanged(event);
}
@@ -185,7 +230,8 @@ export function useDesignerInnerComponent(
triggerBelongedComponentToMoveWhenMoved: !!designerRules && designerRules.triggerBelongedComponentToMoveWhenMoved || ref(false),
triggerBelongedComponentToDeleteWhenDeleted: !!designerRules && designerRules.triggerBelongedComponentToDeleteWhenDeleted || ref(false),
onPropertyChanged,
- getCustomButtons
+ getCustomButtons,
+ setComponentBasicInfoMap
} as DesignerComponentInstance;
return componentInstance as Ref;
diff --git a/packages/ui-vue/components/designer-canvas/src/composition/types.ts b/packages/ui-vue/components/designer-canvas/src/composition/types.ts
index 9d751003a5de6bc3f531e8e46bb7a5c883360a80..04062e51409a010b73093cf5fd6a58384331182f 100644
--- a/packages/ui-vue/components/designer-canvas/src/composition/types.ts
+++ b/packages/ui-vue/components/designer-canvas/src/composition/types.ts
@@ -165,4 +165,10 @@ export interface UseDesignerRules {
/** 获取可拖拽的上层容器 */
getDraggableDesignItemElement?: (context: DesignerItemContext) => Ref | null;
+
+ /** 获取组件的展示标题 */
+ getComponentTitle?: () => string;
+
+ /** 配置组件的基础信息（展示标题、路径） */
+ setComponentBasicInfoMap?: () => void;
}
diff --git a/packages/ui-vue/components/designer-canvas/src/types.ts b/packages/ui-vue/components/designer-canvas/src/types.ts
index e6c9fcd775e520f8030ce206d1ed4bac8f1b354e..86d3fea0b9c72650c8b0eecd28f818165df11b7f 100644
--- a/packages/ui-vue/components/designer-canvas/src/types.ts
+++ b/packages/ui-vue/components/designer-canvas/src/types.ts
@@ -78,6 +78,9 @@ export interface DesignerComponentInstance {
/** 控件属性变更后事件 */
onPropertyChanged?: (event: any) => void;
+
+ /** 配置控件的基础信息（展示标题、路径） */
+ setComponentBasicInfoMap: (designerHostService?: DesignerHostService) => void;
}
export interface DesignerItemContext {
@@ -100,7 +103,7 @@ export interface DesignerItemContext {
export interface DesignerComponentButton {
id: string;
title: string;
- text?:string;
+ text?: string;
icon: string;
class?: string;
onClick: (payload: MouseEvent) => void;
diff --git a/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts b/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
index 39ba686b2ccee5396d1f9a40ee38784d326f2d4f..bc6c23abcc522e2bfe05b9d36c0fd481839b9e00 100644
--- a/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
+++ b/packages/ui-vue/components/designer-outline/src/composition/use-outline-node.ts
@@ -109,8 +109,7 @@ export function useOutlineNode(designerHostService: DesignerHostService, context
case ComponentType.Frame: {
return '根组件';
}
- case ComponentType.dataGrid:
- case ComponentType.table: {
+ case ComponentType.dataGrid: {
const treeGrid = designerHostService?.formSchemaUtils.selectNode(componentsItem, (item) => item.type === (DgControl['tree-grid'] && DgControl['tree-grid'].type));
if (treeGrid) {
return '树表格组件';
@@ -123,21 +122,15 @@ export function useOutlineNode(designerHostService: DesignerHostService, context
case ComponentType.listView: {
return '列表视图组件';
}
- case ComponentType.modalFrame: {
- return '弹窗页面';
- }
- case ComponentType.appointmentCalendar: {
- return '预约日历组件';
+ case ComponentType.form: {
+ return '卡片组件';
}
default: {
- if (componentType.startsWith('form')) {
- return '卡片组件';
- }
+ return '组件';
}
}
-
- return '组件';
}
+
function getTitle(componentsItem: any, parentComponentsItem: any) {
const text = componentsItem.name || componentsItem.text || componentsItem.label || componentsItem.title || componentsItem.mainTitle;
diff --git a/packages/ui-vue/components/designer-outline/src/types.ts b/packages/ui-vue/components/designer-outline/src/types.ts
index 4ad3310d602378f38bf85ce58686e0c67e155deb..be7789b776b92d0e63f3bcc110d8a5e4db567303 100644
--- a/packages/ui-vue/components/designer-outline/src/types.ts
+++ b/packages/ui-vue/components/designer-outline/src/types.ts
@@ -18,25 +18,14 @@ export enum ComponentType {
listView = 'list-view',
/**
- * 卡片类（待优化，目前类型中带有控件列布局信息）
+ * 卡片类
*/
form = 'form',
/**
* 附件
*/
- attachmentPanel = 'attachment-panel',
-
- /**
- * 子表弹出编辑后创建的模态框组件---运行态是动态创建的
- */
- modalFrame = 'modal-frame',
-
- /** 表格类 */
- table = 'table',
-
- /** 预约日历 */
- appointmentCalendar = 'appointment-calendar'
+ attachmentPanel = 'attachment-panel'
}
/**
diff --git a/packages/ui-vue/components/drawer/designer.ts b/packages/ui-vue/components/drawer/designer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93490f132cc1a670fd475b901d7d008b394e82cf
--- /dev/null
+++ b/packages/ui-vue/components/drawer/designer.ts
@@ -0,0 +1,39 @@
+
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createPropsResolver } from '@farris/ui-vue/components/dynamic-resolver';
+import { withInstall } from '@farris/ui-vue/components/common';
+import FDrawer from './src/drawer.component';
+import FDrawerDesign from './src/designer/drawer.design.component';
+import { schemaResolver } from './src/schema/schema-resolver';
+import { schemaMapper } from './src/schema/schema-mapper';
+import drawerSchema from './src/schema/drawer.schema.json';
+import { drawerPropsDesignerProps } from './src/designer/drawer.design.props';
+
+export * from './src/drawer.props';
+
+export const propsResolver = createPropsResolver(drawerPropsDesignerProps, drawerSchema, schemaMapper, schemaResolver);
+
+FDrawerDesign.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record) => {
+ componentMap['drawer'] = FDrawer;
+ propsResolverMap['drawer'] = propsResolver;
+};
+
+FDrawerDesign.registerDesigner = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record) => {
+ componentMap['drawer'] = FDrawerDesign;
+ propsResolverMap['drawer'] = propsResolver;
+};
+export default withInstall(FDrawerDesign);
diff --git a/packages/ui-vue/components/drawer/index.ts b/packages/ui-vue/components/drawer/index.ts
index b40a1033354bda808e2d35a389cf50de70349903..648212efc152311d44a34c1a98785d2ff6f4b314 100644
--- a/packages/ui-vue/components/drawer/index.ts
+++ b/packages/ui-vue/components/drawer/index.ts
@@ -14,21 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import FDrawer from './src/drawer.component';
-import { propsResolver } from './src/drawer.props';
-import FDrawerDesign from './src/designer/drawer.design.component';
import { withInstall } from '@farris/ui-vue/components/common';
+import FDrawer from './src/drawer.component';
export * from './src/drawer.props';
-
-FDrawer.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record) => {
- componentMap['drawer'] = FDrawer;
- propsResolverMap['drawer'] = propsResolver;
-};
-
-FDrawer.registerDesigner = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record) => {
- componentMap['drawer'] = FDrawerDesign;
- propsResolverMap['drawer'] = propsResolver;
-};
export { FDrawer };
export default withInstall(FDrawer);
diff --git a/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx b/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
index c2169ec2da2694d7f3e39a88ffd35a92e1496a98..98206a4427ea696e0901b3fdc54df9f2f962d5f3 100644
--- a/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
+++ b/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
@@ -16,15 +16,10 @@
*/
import { defineComponent, ref, inject, onMounted, Teleport, Transition, withModifiers, computed, watch, CSSProperties } from 'vue';
-import { drawerPropsDesignerProps } from '../drawer.props';
-
-import { DesignerItemContext } from '../../../designer-canvas/src/types';
-import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
+import { DesignerItemContext, DesignerHostService, useDesignerComponent, FDesignerInnerItem } from '@farris/ui-vue/components/designer-canvas';
+import FResponseToolbarDesignComponent, { responseToolbarResolver } from '@farris/ui-vue/components/response-toolbar';
import { useDesignerRules } from './use-designer-rules';
-import { DesignerHostService } from '../../../designer-canvas/src/composition/types';
-import { responseToolbarResolver } from '../../../response-toolbar';
-import FResponseToolbarDesignComponent from '../../../response-toolbar/src/designer/response-toolbar.design.component';
-import FDesignerInnerItem from '../../../designer-canvas/src/components/designer-inner-item.component';
+import { drawerPropsDesignerProps } from './drawer.design.props';
export default defineComponent({
name: 'FDrawerDesign',
diff --git a/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b63627747905f9e5883bb11c58127483d52052c
--- /dev/null
+++ b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
@@ -0,0 +1,7 @@
+import { ExtractPropTypes } from "vue";
+import { drawerProps } from "../drawer.props";
+
+export const drawerPropsDesignerProps = Object.assign({}, drawerProps, {
+ componentId: { type: String, default: '' }
+});
+export type DrawerDesignerProps = ExtractPropTypes;
diff --git a/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts b/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
index 083b618f372c14e13dc75250fdc05b2d39441cf3..c1e399eff4b1155cd20c638c4554089e2769f311 100644
--- a/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
@@ -1,6 +1,4 @@
-import { DesignerHostService, UseDesignerRules } from "../../../designer-canvas/src/composition/types";
-import { DesignerItemContext } from "../../../designer-canvas/src/types";
-import { UseTemplateDragAndDropRules } from "../../../designer-canvas/src/composition/rule/use-template-rule";
+import { UseTemplateDragAndDropRules, DesignerItemContext, DesignerHostService, UseDesignerRules } from "@farris/ui-vue/components/designer-canvas";
import { DrawerProperty } from "../property-config/drawer.property-config";
export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules {
diff --git a/packages/ui-vue/components/drawer/src/drawer.component.tsx b/packages/ui-vue/components/drawer/src/drawer.component.tsx
index 26103150a1ee2b3b98866875fe3db478cce58e7e..ff64f33d2763e1df335bcbf3d59ecce5000dcb5f 100644
--- a/packages/ui-vue/components/drawer/src/drawer.component.tsx
+++ b/packages/ui-vue/components/drawer/src/drawer.component.tsx
@@ -28,6 +28,23 @@ export default defineComponent({
const modelValue = ref(props.modelValue);
+ // const host = computed(() => {
+ // if (typeof props.host === 'string') {
+ // const container = document.querySelector(props.host);
+ // return container;
+ // }
+ // return props.host;
+ // });
+ const drawerContainerClass = computed(() => {
+ const showNotInBody = typeof props.host === 'string' ? props.host !== 'body' :
+ document.querySelector(props.host) !== document.body;
+ return {
+ 'f-drawer': true,
+ // 在某个DOM内部打开抽屉
+ 'f-drawer-inline': showNotInBody
+ };
+ });
+
const wrapperClassObject = computed(() => {
return {
@@ -102,21 +119,21 @@ export default defineComponent({
return () => {
return (
-
-
+
+
{modelValue.value && {
props.allowClickMaskToClose && onClose(e as MouseEvent);
}, ['stop'])}>
}
-
- {modelValue.value &&
+
+
+ }} v-show={modelValue.value}>
-
}
+
diff --git a/packages/ui-vue/components/drawer/src/drawer.css b/packages/ui-vue/components/drawer/src/drawer.css
index 342036c3427e7b8ca33a97447f5de0d48af795cb..11acd12529f3a1de5c5d391337c0231569dc3508 100644
--- a/packages/ui-vue/components/drawer/src/drawer.css
+++ b/packages/ui-vue/components/drawer/src/drawer.css
@@ -1,9 +1,12 @@
.f-drawer {
- position: absolute;
+ position: fixed;
z-index: 1000;
inset: 0;
pointer-events: none;
}
+.f-drawer.f-drawer-inline {
+ position: absolute;
+}
.f-drawer-container {
display: flex;
flex-direction: column;
diff --git a/packages/ui-vue/components/drawer/src/drawer.props.ts b/packages/ui-vue/components/drawer/src/drawer.props.ts
index 8776e2e8ed03d4efddc75fe491d3cf5c55ea1542..56a30365150bf98a84e027c32dc8812b804adf6f 100644
--- a/packages/ui-vue/components/drawer/src/drawer.props.ts
+++ b/packages/ui-vue/components/drawer/src/drawer.props.ts
@@ -15,10 +15,6 @@
* limitations under the License.
*/
import { ExtractPropTypes, PropType } from 'vue';
-import { createPropsResolver } from '../../dynamic-resolver';
-import { schemaResolver } from './schema/schema-resolver';
-import { schemaMapper } from './schema/schema-mapper';
-import drawerSchema from './schema/drawer.schema.json';
export const drawerProps = {
/** 背景色 */
@@ -54,14 +50,11 @@ export const drawerProps = {
/** 标题 */
title: { type: String, default: '' },
/** 宽度 */
- width: { type: String as PropType
, default: 300 }
+ width: { type: String as PropType, default: 300 },
+ /**
+ * 渲染的DOM容器
+ */
+ host: { type: Object as PropType, default: 'body' }
} as Record;
export type DrawerProps = ExtractPropTypes;
-
-export const drawerPropsDesignerProps=Object.assign({}, drawerProps, {
- componentId: { type: String, default: '' }
-});
-export type DrawerDesignerProps = ExtractPropTypes;
-
-export const propsResolver = createPropsResolver(drawerPropsDesignerProps, drawerSchema, schemaMapper, schemaResolver);
diff --git a/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts b/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
index 596b322605f0b45ba14b863c7143b69879d7f0cc..3e01edb9d4daa18d1c537e7378b34ebb245bcb35 100644
--- a/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
+++ b/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
@@ -1,4 +1,4 @@
-import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property";
+import { BaseControlProperty } from "@farris/ui-vue/components/property-panel";
export class DrawerProperty extends BaseControlProperty {
constructor(componentId: string, designerHostService: any) {
diff --git a/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts b/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
index 97964aee23bbb8b523c7692723ea02db00d4f4c0..2ca33ca080647b9edc66a133396282d6a3b1698f 100644
--- a/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
+++ b/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
@@ -1,4 +1,4 @@
-import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver';
+import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver';
export const schemaMapper = new Map([
['appearance', resolveAppearance]
diff --git a/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts b/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
index b02bdf93eec9060948f579c53aa81e3963a7d706..d36ae7457434b7381b796814e9926d352feacff6 100644
--- a/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
+++ b/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
@@ -1,4 +1,4 @@
-import { DynamicResolver } from "../../../dynamic-resolver";
+import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver";
export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record {
return schema;
diff --git a/packages/ui-vue/components/dynamic-form/src/designer/response-form-use-designer-rules.ts b/packages/ui-vue/components/dynamic-form/src/designer/response-form-use-designer-rules.ts
index 7863c860357f7597737145ac17a42cd2d5ea889d..e07fc739ccd6799589d5c973edd3af552f79a8c4 100644
--- a/packages/ui-vue/components/dynamic-form/src/designer/response-form-use-designer-rules.ts
+++ b/packages/ui-vue/components/dynamic-form/src/designer/response-form-use-designer-rules.ts
@@ -539,14 +539,14 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
if (componentClassList.includes('f-form-layout') && resolveContext.componentCategory === 'input') {
const { label } = resolveContext;
let formGroupElementSchema;
+ const controlCreatorUtils = designerHostService?.controlCreatorUtils;
// 控件若有绑定信息，则根据绑定信息创建控件
if (resolveContext.bindingSourceContext?.entityFieldNode) {
- const controlCreatorUtils = designerHostService?.controlCreatorUtils;
formGroupElementSchema = controlCreatorUtils.setFormFieldProperty(resolveContext.bindingSourceContext?.entityFieldNode, componentSchema?.type);
} else {
- formGroupElementSchema = getSchemaByTypeForDesigner('form-group') as ComponentSchema;
- formGroupElementSchema.editor = componentSchema;
+ formGroupElementSchema = controlCreatorUtils.createFormGroupWithoutField(componentSchema?.type);
formGroupElementSchema.label = label;
+
}
resolveFormGroupAppearance(formGroupElementSchema);
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 4d1970af0bf9f36b7476bb3a6136e245e22c5d3b..62809978b0e442112537bab8be79caff32caa3e8 100644
--- a/packages/ui-vue/components/dynamic-view/src/components/maps.ts
+++ b/packages/ui-vue/components/dynamic-view/src/components/maps.ts
@@ -63,7 +63,7 @@ import FFilterConditionEditor from '@farris/ui-vue/components/filter-condition-e
import FFieldset from '@farris/ui-vue/components/fieldset';
import FSortConditionEditor from '@farris/ui-vue/components/sort-condition-editor';
import FMenuLookup from '@farris/ui-vue/components/menu-lookup';
-import FDrawer from '@farris/ui-vue/components/drawer';
+import FDrawer from '@farris/ui-vue/components/drawer/designer';
import FJsonEditor from '@farris/ui-vue/components/json-editor';
import FPropertyEditor from '@farris/ui-vue/components/property-editor';
import FExpressionEditor from '@farris/ui-vue/components/expression-editor';
diff --git a/packages/ui-vue/components/events-editor/src/components/view-model/view-model.component.tsx b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.component.tsx
similarity index 36%
rename from packages/ui-vue/components/events-editor/src/components/view-model/view-model.component.tsx
rename to packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.component.tsx
index 350001f0661c31c0d606af7eaebd631e7378b6fe..c9c2e5c7d7a161462b5d8a3a473f05e9fd5935db 100644
--- a/packages/ui-vue/components/events-editor/src/components/view-model/view-model.component.tsx
+++ b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.component.tsx
@@ -1,25 +1,59 @@
-import { SetupContext, defineComponent, ref } from "vue";
-import { ViewModelProps, viewModelProps } from "./view-model.props";
+import { SetupContext, defineComponent, ref, onBeforeMount, inject } from "vue";
+import { boundEventSelectorProps, BoundEventSelectorProps } from "./bound-event-selector.props";
import FInputGroup from '@farris/ui-vue/components/input-group';
+import { cloneDeep } from "lodash-es";
+import './bound-event-selector.css';
+import { FNotifyService } from "@farris/ui-vue/components/notify";
+/**
+ * 选择已有方法
+ */
export default defineComponent({
- name: 'FViewModel',
- props: viewModelProps,
- emits: [],
- setup(props: ViewModelProps, context: SetupContext) {
+ name: 'FBoundEventSelector',
+ props: boundEventSelectorProps,
+ emits: ['cancel', 'submit'] as (string[] & ThisType) | undefined,
+ setup(props: BoundEventSelectorProps, context: SetupContext) {
+ const viewModelDisplay = ref();
const viewModelData = ref([]);
- const groupIcon = ref('');
+ const groupIcon = ref('');
const searchValue = ref('');
-
- function onChange() {
-
- }
-
- function onClear() {
-
- }
-
- function onClickHandle() {
+ const selectedCommand = ref();
+
+ onBeforeMount(() => {
+ if (props.getEventPath) {
+ const eventInfo = props.getEventPath();
+ viewModelDisplay.value = eventInfo.viewModelDisplay;
+ const { actionWithPath } = eventInfo;
+ actionWithPath.forEach(vmItem => {
+ vmItem.sourceComponent.map.forEach(mapItem => {
+ mapItem['active'] = false;
+ mapItem['hide'] = false;
+ });
+ });
+ viewModelData.value = cloneDeep(actionWithPath);
+
+ }
+ });
+ /** 匹配满足条件的方法并显示 */
+ function matchCommand(changeValue = '') {
+ changeValue = changeValue.replace(/ /g, '').replace(/>/g, '').toLowerCase();
+ if (changeValue === '') {
+ changeValue = ' ';
+ }
+ viewModelData.value.forEach(viewModelDataItem => {
+ const pathString = viewModelDataItem.path;
+ viewModelDataItem.sourceComponent.map.forEach(mapItem => {
+ const commandString = mapItem.command.name;
+ const eventString = mapItem.event.name;
+ const commandLabelString = mapItem.command.label;
+ const searchContent = `${pathString}${commandString}${eventString}${commandLabelString}`.toLowerCase();
+ if (!searchContent.includes(changeValue)) {
+ mapItem['hide'] = true;
+ } else {
+ mapItem['hide'] = false;
+ }
+ });
+ });
}
@@ -27,8 +61,8 @@ export default defineComponent({
return (
);
@@ -42,8 +76,27 @@ export default defineComponent({
return classObject;
}
- function getViewModelCommand(mapItem: any, viewModelDataItem: any) {
-
+ function getViewModelCommand(value: any, viewModelDataItem: any) {
+ let count = 0;
+ viewModelData.value.forEach(vmItem => {
+ vmItem.sourceComponent.map.forEach(mapItem => {
+ if (!mapItem.command['isInvalid'] && value.controller.id === mapItem.controller.id && value.command.id === mapItem.command.id && value.event.label === mapItem.event.label && viewModelDataItem.sourceComponent.id === vmItem.sourceComponent.id) {
+ value['active'] = !value['active'];
+ selectedCommand.value = cloneDeep(value);
+ }
+ else {
+ if (mapItem.command['isInvalid'] && value.controller.id === mapItem.controller.id && value.command.id === mapItem.command.id && value.event.label === mapItem.event.label && viewModelDataItem.sourceComponent.id === vmItem.sourceComponent.id) {
+ count++;
+ if (count === 1) {
+ const notifyService = new FNotifyService();
+ notifyService.info({ position: 'top-center', message: '该方法已失效' });
+ selectedCommand.value = null;
+ }
+ }
+ mapItem['active'] = false;
+ }
+ });
+ });
}
function viewModelItemCommandClass(mapItem: any) {
@@ -79,16 +132,33 @@ export default defineComponent({
{viewModelData.value.map((viewModelDataItem: any) => {
return renderViewModelMapItem(viewModelDataItem);
- })};
+ })}
;
}
+ function onCancel() {
+ context.emit('cancel');
+ }
+
+ function onSubmit() {
+ if (!selectedCommand.value) {
+ props.notifyService.info({ position: 'top-center', message: '请选择需要绑定的方法' });
+ return;
+ }
+ context.emit('submit', {
+ selectedCommand: selectedCommand.value
+ });
+ }
return () => {
return (
{renderViewModelSearchBar()}
{renderViewModels()}
+
);
};
diff --git a/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.css b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f67d8d95317bb41ffca55898c35ed07d125dc08
--- /dev/null
+++ b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.css
@@ -0,0 +1,142 @@
+.f-vm-all {
+ min-width: 180px;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.f-vm-search {
+ height: 60px;
+ background-color: #fff;
+ width: 96%;
+ z-index: 2;
+ margin: 0px 2%;
+}
+
+.f-vm-searchBar {
+ margin: 15px 10px;
+}
+
+.f-vm-viewModel {
+ display: block;
+ overflow: auto;
+ flex: 1;
+}
+
+.f-vm-viewModel>:first-child {
+ border-top: 1px solid #e5e9ef;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+}
+
+.f-vm-viewModel>:last-child {
+ border-bottom: 1px solid #e5e9ef;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+}
+
+.f-event-commandItem {
+ display: flex;
+}
+
+.f-icon-command {
+ width: 16px;
+ height: 16px;
+ background-color: #DBF4E7;
+ margin: 10px 6px 4px 16px;
+ display: flex;
+ padding: 1px 2px 0px 3px;
+ vertical-align: top;
+ border-radius: 2px;
+ align-items: center;
+}
+
+input::-webkit-input-placeholder {
+ font-family: PingFangSC-Regular;
+ font-size: 13px;
+ color: #B4BCCC;
+ font-weight: 400;
+}
+
+.f-event-path {
+ margin: 5px 50px;
+ color: #949BA7;
+ font-family: PingFangSC-Regular;
+ font-size: 12px;
+ font-weight: 400;
+ margin: 0px 0px 8px 16px;
+}
+
+.f-event-func {
+ margin: 9px 0 4px 0px;
+ font-family: PingFangSC-Regular;
+ font-size: 13px;
+ vertical-align: top;
+ color: #2d2f33;
+ font-weight: 400;
+ height: 18px;
+ display: inline-block;
+ max-width: 92%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.f-event-func-invalid {
+ margin: 9px 0 4px 0px;
+ font-family: PingFangSC-Regular;
+ font-size: 13px;
+ vertical-align: top;
+ color: #949BA7;
+ font-weight: 400;
+ height: 18px;
+ display: inline-block;
+ max-width: 92%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+.f-vm-item {
+ margin: 0px 30px;
+ border-bottom: 1px solid #e5e9ef;
+ border-left: 1px solid #e5e9ef;
+ border-right: 1px solid #e5e9ef;
+}
+
+.f-vm-item:hover {
+ cursor: pointer;
+ border-bottom: 1px solid #e5e9ef;
+ border-left: 1px solid #e5e9ef;
+ border-right: 1px solid #e5e9ef;
+ background-color: #EDF5FC !important;
+}
+
+.f-vm-viewModel>:first-child .f-vm-item:hover {
+ border-top: 1px solid #e5e9ef;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+}
+
+.f-vm-viewModel>:last-child>:last-child .f-vm-item:hover {
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+}
+
+.f-vm-item-focus {
+ border-bottom: 1px solid #e5e9ef;
+ border-left: 1px solid #e5e9ef;
+ border-right: 1px solid #e5e9ef;
+ background-color: #EDF5FC !important;
+ margin: 0px 30px;
+}
+
+.f-vm-item-focus:hover {
+ border-bottom: 1px solid #e5e9ef;
+ border-left: 1px solid #e5e9ef;
+ border-right: 1px solid #e5e9ef;
+ background-color: #EDF5FC !important;
+ margin: 0px 30px;
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.props.ts b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bfc533bc4e8d9d66addd957edc72a230d0f682c4
--- /dev/null
+++ b/packages/ui-vue/components/events-editor/src/components/bound-event-selector/bound-event-selector.props.ts
@@ -0,0 +1,8 @@
+import { ExtractPropTypes } from "vue";
+
+export const boundEventSelectorProps = {
+ getEventPath: { type: Function, default: null },
+ notifyService: { type: Object }
+} as Record;
+
+export type BoundEventSelectorProps = ExtractPropTypes;
diff --git a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx
index 6aaf20edabdf36dd5bab6b031bb998db4f3d2d33..9706cef7005be94987048fe9791879edb5c87416 100644
--- a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx
+++ b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx
@@ -1,6 +1,6 @@
-import { SetupContext, computed, defineComponent, inject, ref, watch, onMounted } from "vue";
+import { SetupContext, computed, defineComponent, inject, ref, onMounted } from "vue";
import { CommandSourceProps, commandSourceProps } from "./command-source.props";
-import { Command, CommandItem, MethodChangedEventArgs, PropertyItem } from "../../types";
+import { MethodChangedEventArgs } from "../../types";
import { FSchemaSelector } from '@farris/ui-vue/components/schema-selector';
import { F_MODAL_SERVICE_TOKEN } from '@farris/ui-vue/components/modal';
import { UseMethods } from '../../composition/types';
@@ -9,6 +9,8 @@ import './command-source.css';
import FCommandList from '../command-list/command-list.component';
import { ControllerSchemaRepositorySymbol } from "@farris/ui-vue/components/common";
import { FNotifyService as NotifyService } from "@farris/ui-vue/components/notify";
+import FBoundEventSelector from '../bound-event-selector/bound-event-selector.component';
+
/**
* 命令来源
* 选择事件后，点击【+】展开的下拉面板，下拉面板的内容：
@@ -28,8 +30,7 @@ export default defineComponent({
emits: [
'addInternalCommandListChanged',
'newImportChanged',
- 'currentCommandChanged',
- 'originalDataChanged',
+ 'selectBoundMethod',
'click',
'existChanged',
'newFunctionChanged',
@@ -42,7 +43,6 @@ export default defineComponent({
const formCommandService = inject('useFormCommand') as any;
const notifyService = new NotifyService();
const { checkIfNewControllerExists, addNewController } = methodsComposition;
- const haveBoundCommand = ref(false);
const runtimeCustom = ref(props.canAddNewMethod);
const controllers = ref(props.controllers);
@@ -50,10 +50,6 @@ export default defineComponent({
return !runtimeCustom.value;
});
- const shouldShowBondEvents = computed(() => {
- return haveBoundCommand.value;
- });
-
const actionButtonStyle = computed(() => {
return {
'font-size': '15px',
@@ -65,6 +61,7 @@ export default defineComponent({
const useFormSchema = inject('useFormSchema') as any;
const modalService = inject(F_MODAL_SERVICE_TOKEN) as any;
let newFuncModal: any;
+ let existedMethodModal: any;
const shoulShowCommunication = ref(false);
onMounted(() => {
@@ -93,7 +90,7 @@ export default defineComponent({
* @param selectedController 控制器元数据
*/
async function onSubmitController(selectedController: any) {
- formCommandService['getSupportedControllerMetadata'](selectedController).then((result: any) => {
+ formCommandService['getSupportedControllerMetadata']().then((result: any) => {
if (result) {
// 引入控制器
importNewController(result['controller'], result['code'], result['nameSpace']);
@@ -130,13 +127,40 @@ export default defineComponent({
context.emit('newFunctionChanged');
}
+ function onCancelExsitedMethodModal() {
+ if (existedMethodModal && existedMethodModal.destroy) {
+ existedMethodModal.destroy();
+ }
+ }
+ function onSubmitExsitedMethodModal(value: any) {
+ const { selectedCommand } = value;
+ methodsComposition.selectBoundCommand(selectedCommand, props.iteractionDisplayOrder);
+ onCancelExsitedMethodModal();
+ context.emit('selectBoundMethod');
+ }
+ /** 渲染已有方法窗口 */
+ function renderBoundEvents() {
+ const { getEventPath } = methodsComposition;
+ return ;
+ }
function showBoundEvents() {
+ existedMethodModal = modalService.open({
+ title: '已有方法',
+ width: 950,
+ height: 500,
+ fitContent: false,
+ render: renderBoundEvents,
+ showButtons: false,
+ enableEsc: false,
+ draggable: true
+ });
}
- function renderBondEvents() {
-
- }
function onClose() {
context.emit('close', null);
@@ -165,11 +189,10 @@ export default defineComponent({
generateNewFunc()}>添加新方法
+ {props.haveBoundCommand &&
showBoundEvents()}>已有方法
-
*/}
+
openFormCommunicationPanel()}>配置组合表单通讯
@@ -178,24 +201,6 @@ export default defineComponent({
);
}
- function renderControllerTitle(controller: Command) {
- return (
-
-
- {controller.controllerName.name}
-
-
- );
- }
-
- function renderMethod(methods: CommandItem[]) {
- return methods.map((command: CommandItem) => (
-
- ));
- }
-
function onSelectMethodChanged(selectedMethodChangeArgs: MethodChangedEventArgs) {
context.emit('selectMethod', selectedMethodChangeArgs);
}
diff --git a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.props.ts b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.props.ts
index b8ad427ed39bddb83b4cb900b5f088eeb5ef81a4..6b16404581991b146ffbb51443b08d0958286e23 100644
--- a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.props.ts
+++ b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.props.ts
@@ -11,8 +11,9 @@ export const commandSourceProps = {
/** 判断是否为：点击“导入此方法”后，绑定了新增值 */
exit: { Type: Number, default: -1 },
/** 接收是否显示「可选择方法」功能 */
- haveBoundcommand: { Type: Boolean, default: false },
- controllers: { type: Array
, default: [] }
+ haveBoundCommand: { Type: Boolean, default: false },
+ controllers: { type: Array, default: [] },
+ iteractionDisplayOrder: { Type: Number, default: 0 }
} as Record;
export type CommandSourceProps = ExtractPropTypes;
diff --git a/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.component.tsx b/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.component.tsx
index c227d7ead710081af4723156481eb41661087126..abcb07be0af357ae40f33f8213f9b6ace35b62e6 100644
--- a/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.component.tsx
+++ b/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.component.tsx
@@ -234,6 +234,27 @@ export default defineComponent({
interaction.value.communication = null;
}
+
+ /**
+ * 选择「已有方法」后，切换页面的显示状态
+ */
+ function onSelectBoundMethod() {
+ const switchOption = interaction.value.showSwitch[0];
+ // 1. 切换至已绑定方法状态
+ switchOption.showSwitchNumber = 2;
+ // 2. 隐藏方法列表
+ switchOption.showSection[switchOption.showSwitchNumber][2] = false;
+ // 3. 显示方法名
+ switchOption.showSection[switchOption.showSwitchNumber][3] = true;
+ methodSelectedChanged.value = false;
+
+ // 隐藏组件通讯窗口
+ shouldShowCommunicationPanel.value = false;
+ // 清除已有的通讯
+ clearCommunication(interaction.value);
+ emitFinalState(false, null);
+ }
+
function renderMethodSource() {
return onNewFunctionChangedHandler()}
onSwitchToCommunicationPanel={onSwitchToCommunicationPanel}
+ haveBoundCommand={props.haveBoundCommand}
+ iteractionDisplayOrder={props.displayOrder}
+ onSelectBoundMethod={onSelectBoundMethod}
>;
}
/**
diff --git a/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.props.ts b/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.props.ts
index 874b827f1b0860619049f300a3bf980382d6aaa1..22f54926b8ed17a07cef2416a7d75f85d9f21742 100644
--- a/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.props.ts
+++ b/packages/ui-vue/components/events-editor/src/components/interaction-item/interaction-item.props.ts
@@ -7,7 +7,9 @@ export const interactionItemProps = {
interaction: { type: Object as PropType, default: {} },
controllers: { type: Array, default: [] },
sourceCommunication: { type: Object, default: {} },
- viewSourceHandle: {type: Function as PropType<() => void>, default: () => { }}
+ viewSourceHandle: {type: Function as PropType<() => void>, default: () => { }},
+ /** 接收是否显示「可选择方法」功能 */
+ haveBoundCommand: { Type: Boolean, default: false }
} as Record;
export type InteractionItemProps = ExtractPropTypes;
diff --git a/packages/ui-vue/components/events-editor/src/components/view-model/view-model.props.ts b/packages/ui-vue/components/events-editor/src/components/view-model/view-model.props.ts
deleted file mode 100644
index 6e51417f5c7629814f4b1fcf0af542076e14600f..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/events-editor/src/components/view-model/view-model.props.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ExtractPropTypes } from "vue";
-
-export const viewModelProps = {} as Record;
-
-export type ViewModelProps = ExtractPropTypes;
diff --git a/packages/ui-vue/components/events-editor/src/composition/types.ts b/packages/ui-vue/components/events-editor/src/composition/types.ts
index fb586bd9910609a6d8dd80fcb51b8760c7346545..e2481f9ac911a90da6b5a25df7f2437e78b94f86 100644
--- a/packages/ui-vue/components/events-editor/src/composition/types.ts
+++ b/packages/ui-vue/components/events-editor/src/composition/types.ts
@@ -58,16 +58,7 @@ export interface UseEvents {
export interface UseMethods {
controllers: Ref;
-
- // onAddInternalCommandListChanged: (value: any[]) => void;
-
onClosed: (actionIndex: number) => void;
-
- // onExistChanged: (value: number) => void;
-
- onCurrentCommandChanged: (currentCommand: any[], actionIndex: number, commandItemIndex: number) => void;
- // onNewImportChanged: (value: boolean) => void;
-
toggleSelectingMethod: (switchOption: SwitchOption, hasCommunication?: boolean) => void;
emitFinalState: (addNewFunctionState, event) => void;
getComponentList: () => ComponentItem[];
@@ -76,5 +67,9 @@ export interface UseMethods {
addNewController: (webCommand) => void;
checkIfNewControllerExists: (importData) => boolean;
getMethodsOnViewModel: () => Array;
- getViewModeId: () => string
+ getViewModeId: () => string;
+ /** 获取「已有方法」的路径等信息 */
+ getEventPath: () => any;
+ /** 「已有方法」-选择方法后事件 */
+ selectBoundCommand: (selectedCommand: any, iteractionDisplayOrder: number) => void;
}
diff --git a/packages/ui-vue/components/events-editor/src/composition/use-methods.ts b/packages/ui-vue/components/events-editor/src/composition/use-methods.ts
index 134fd3bd429f973fd00dc7fdf5b42d818ecca6e5..9d1424c6ae2fd764ffc09c37e370b15a75ebfd6a 100644
--- a/packages/ui-vue/components/events-editor/src/composition/use-methods.ts
+++ b/packages/ui-vue/components/events-editor/src/composition/use-methods.ts
@@ -13,16 +13,6 @@ export function useMethods(
const { interactions } = useInteractionComposition;
const { setComponentLists } = useEventsEditorUtil();
const controllers = ref(initialData.value.internalCommandList);
- /** 方法-导入新方法值变化事件 */
- // function onNewImportChanged(value: boolean) {
- // newImport.value = value;
- // initTargetComponent(initialData.value);
- // }
-
- /** 内置构件选择“导入新方法”后的值 */
- // function onAddInternalCommandListChanged(value: any[]) {
- // addInternalCommandList.value = cloneDeep(value);
- // }
/** 方法来源关闭按钮事件 */
function onClosed(actionIndex: number) {
@@ -41,18 +31,6 @@ export function useMethods(
// }
}
- /** 方法绑定-下拉框中用户选择绑定的变量 */
- function onCurrentCommandChanged(currentCommand: any[], actionIndex: number, commandItemIndex: number) {
- // eventIndex.value = actionIndex;
- // currentCommand = cloneDeep(currentCommand);
- // interactions.value[actionIndex].showSwitch[commandItemIndex].showSwitchNumber = 2;
- // // 除当前用户点击的这一项展开之外，其余全部收折
- // interactions.value[actionIndex].showSwitch[commandItemIndex].showSection[2][4] = true;
- // // 关闭浮层
- // showPopover.value = false;
- // hasAddNewFunction = false;
- }
-
/** 如果最后用户绑定的方法中有新增的控制器，则传出该方法控制器相关参数 */
function emitNewController(boundEventsList: BoundEventItem[]) {
const newController: NewControllerItem[] = [];
@@ -71,7 +49,7 @@ export function useMethods(
if (initialData.value.repititionCommand.length !== 0) {
initialData.value.repititionCommand.forEach((repititionCommandItem: any) => {
boundEventsList.forEach(boundEventsListItem => {
- if (repititionCommandItem.command.id === boundEventsListItem.controller.id) {
+ if (repititionCommandItem.command.id === boundEventsListItem.command?.id) {
repititionCommandItem.command.params = cloneDeep(boundEventsListItem.command?.property);
const targetComponent = boundEventsListItem.command?.targetComponent;
boundEventsListItem.command?.componentLists.forEach((componentListsItem: any) => {
@@ -106,9 +84,9 @@ export function useMethods(
const newController = initialData.value.newController?.length && boundEventList.length ?
cloneDeep(emitNewController(boundEventList)) : [];
// 传出前更新repititionCommand的值
- // if (initialData.value.repititionCommand) {
- // initialData.value.repititionCommand = updateRepititionCommand(boundEventList);
- // }
+ if (initialData.value.repititionCommand) {
+ initialData.value.repititionCommand = updateRepititionCommand(boundEventList);
+ }
// 当前界面显示的所有事件
const savedCommandList: SavedCommandChanged = {
/** 拼接名称时的前缀 */
@@ -245,12 +223,79 @@ export function useMethods(
}
return checkExist;
}
+ /** 获取已有事件 */
+ function getEventPath() {
+ if (initialData.value?.getEventPath) {
+ return initialData.value.getEventPath();
+ }
+ }
+
+ /** 方法绑定-遍历判断当前的方法是否被其他事件绑定，若已绑定，则及时更新最新值； */
+ function iterateBoundEvents(currentIteraction, newCommand) {
+ interactions.value.forEach(dataItem => {
+ if (dataItem.command?.label === newCommand.label) {
+ dataItem.command = newCommand;
+ }
+ });
+ }
+ /** 方法绑定-下拉框中用户选择绑定的变量 */
+ function onCurrentCommandChanged(currentIteraction, newCommand) {
+ // 遍历判断当前的方法是否被其他事件绑定，若已绑定，则及时更新最新值；
+ iterateBoundEvents(currentIteraction, newCommand);
+ }
+
+ /** 「已有方法」-选择方法后事件 */
+ function selectBoundCommand(selectedCommand, iteractionDisplayOrder: number) {
+ const currentIteraction = interactions.value[iteractionDisplayOrder];
+ // 绑定暂未绑定的命令时，自动默认当前组件下的当前事件
+ selectedCommand['event'] = !selectedCommand['event']['label'] ? cloneDeep(currentIteraction.event) : selectedCommand['event'];
+ let commandExist = false;
+ if (!initialData.value.repititionCommand) {
+ initialData.value.repititionCommand = [];
+ }
+ initialData.value.repititionCommand.forEach(repititionCommandItem => {
+ // 确保用户点击的方法在存储时不重复
+ if (repititionCommandItem.command.id === selectedCommand.command.id && repititionCommandItem.event.label === selectedCommand.event.label && repititionCommandItem.targetComponent.viewModelId === selectedCommand.targetComponent.viewModelId) {
+ commandExist = true;
+ }
+ if (repititionCommandItem.command.id === selectedCommand.command.id && repititionCommandItem.event.label === selectedCommand.event.label && repititionCommandItem.targetComponent.viewModelId !== selectedCommand.targetComponent.viewModelId) {
+ // 仅修改了目标组件值，则替换
+ repititionCommandItem = cloneDeep(selectedCommand);
+ }
+ });
+ // 没有点击过该方法,则增加
+ if (!commandExist) {
+ initialData.value.repititionCommand.push(cloneDeep(selectedCommand));
+ }
+ let newCommand = {
+ id: selectedCommand.command.id,
+ label: selectedCommand.command.label,
+ name: selectedCommand.command.name,
+ handlerName: selectedCommand.command.handlerName,
+ cmpId: selectedCommand.controller.id,
+ componentLists: [],
+ hasPath: false,
+ targetComponent: selectedCommand.targetComponent.id,
+ property: cloneDeep(selectedCommand.command.params),
+ shortcut: {},
+ isRtcCommand: selectedCommand.command['isRtcCommand'],
+ isNewGenerated: selectedCommand.command['isNewGenerated'] || false,
+ isInvalid: false,
+ };
+ const controller = {
+ controllerName: selectedCommand.controller
+ };
+ newCommand = setComponentLists(controller, newCommand, initialData.value);
+
+ currentIteraction.command = cloneDeep(newCommand);
+ currentIteraction.controller = cloneDeep(selectedCommand.controller);
+ onCurrentCommandChanged(currentIteraction, newCommand);
+ }
return {
controllers,
onClosed,
emitFinalState,
- onCurrentCommandChanged,
toggleSelectingMethod,
getViewModeId,
getComponentList,
@@ -258,6 +303,8 @@ export function useMethods(
updateCommandHasPath,
addNewController,
checkIfNewControllerExists,
- getMethodsOnViewModel
+ getMethodsOnViewModel,
+ getEventPath,
+ selectBoundCommand
};
}
diff --git a/packages/ui-vue/components/events-editor/src/events-editor.component.tsx b/packages/ui-vue/components/events-editor/src/events-editor.component.tsx
index eb509830eb9e4cd6b464a4e9b85910d79cdbbf10..0ff296adf244dc3b49acfb42187151bff012f9a6 100644
--- a/packages/ui-vue/components/events-editor/src/events-editor.component.tsx
+++ b/packages/ui-vue/components/events-editor/src/events-editor.component.tsx
@@ -62,6 +62,16 @@ export default defineComponent({
function renderInteraction(interaction: InteractionItem, displayOrder: number) {
const switchElement = interaction.showSwitch[0];
const collapsed = switchElement.showSection[switchElement.showSwitchNumber][3];
+
+ // 检查是否需要显示「已有方法」
+ let haveBoundCommand = false;
+ if (props.initialData.getEventPath) {
+ if (props.initialData.getEventPath().actionWithPath.length !== 0) {
+ haveBoundCommand = true;
+ } else {
+ haveBoundCommand = false;
+ }
+ }
return (
);
}
diff --git a/packages/ui-vue/components/events-editor/src/events-editor.css b/packages/ui-vue/components/events-editor/src/events-editor.css
index e93fe26af26bb9974a97e64e54c71752ab387e94..c4aa4f1cf82d0bc868a8654f90134530d3c18316 100644
--- a/packages/ui-vue/components/events-editor/src/events-editor.css
+++ b/packages/ui-vue/components/events-editor/src/events-editor.css
@@ -160,6 +160,6 @@
border: 1px transparent;
}
-.f-page-events-editor-content .events-display-order:not(:last-child) {
+.f-page-events-editor-content .events-display-order:not(:last-child) .combine-form-container {
box-shadow: 0px 2px 0px 0px rgba(3, 18, 51, 0.07)
}
\ No newline at end of file
diff --git a/packages/ui-vue/components/modal/src/composition/type.ts b/packages/ui-vue/components/modal/src/composition/type.ts
index 7fcca8f0a585c9272d115f0129b6f247475fc154..0512b650a55889d704f5a943897d06ac06195aff 100644
--- a/packages/ui-vue/components/modal/src/composition/type.ts
+++ b/packages/ui-vue/components/modal/src/composition/type.ts
@@ -40,6 +40,7 @@ export interface ModalOptions {
enableEsc?: boolean;
dialogType?: string;
src?: string;
+ host?: string | HTMLElement;
}
export interface ModalFunctions {
diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index e194c8e7824eb92f4e401d0a0cba3a8836745f9c..8cf6c374250e7fd692e289d9ac3ef53c51fb3b25 100644
--- a/packages/ui-vue/components/modal/src/modal.component.tsx
+++ b/packages/ui-vue/components/modal/src/modal.component.tsx
@@ -122,7 +122,7 @@ export default defineComponent({
watch(() => props.modelValue, (newValue, oldValue) => {
if (newValue !== oldValue) {
modelValue.value = newValue;
- if(modelValue.value && props.draggable) {
+ if (modelValue.value && props.draggable) {
// 等待DOM挂载后，注册拖拽handler
nextTick(() => {
if (modalElementRef.value && !containment.value) {
@@ -133,7 +133,7 @@ export default defineComponent({
});
}
if (!newValue) {
- if(containment.value){
+ if (containment.value) {
containment.value = null;
}
removeModalOpenStyle();
@@ -221,7 +221,7 @@ export default defineComponent({
const styleObject: any = {
display: 'block'
};
- if(!props.mask) {
+ if (!props.mask) {
styleObject.pointerEvents = 'none';
styleObject.backgroundColor = 'transparent';
}
@@ -449,13 +449,20 @@ export default defineComponent({
;
}
+ function getHost(host: string | HTMLElement | undefined) {
+ if (!host) {
+ return 'body';
+ }
+ return host;
+ }
+
return () => {
return (
-
+
{showModal.value &&
- , default: 'body' }
};
export type ModalProps = Partial
>;
diff --git a/packages/ui-vue/components/query-solution/src/designer/query-solution.design.component.tsx b/packages/ui-vue/components/query-solution/src/designer/query-solution.design.component.tsx
index 6344bf6a1323374627f28c07b78ad4a161413eeb..0e31fdac4302cd01a44050ad5c00d0e899cb6ef6 100644
--- a/packages/ui-vue/components/query-solution/src/designer/query-solution.design.component.tsx
+++ b/packages/ui-vue/components/query-solution/src/designer/query-solution.design.component.tsx
@@ -15,7 +15,7 @@
*/
import { defineComponent, computed, ref, SetupContext, inject, onMounted, watch } from 'vue';
import { querySolutionProps, QuerySolutionProps } from '../query-solution.props';
-import FConditionFieldsDesign from '@farris/ui-vue/components/condition/src/condition-fields.design.component';
+import { FConditionFieldsDesign } from '@farris/ui-vue/components/condition';
import { DesignerItemContext } from '@farris/ui-vue/components/designer-canvas';
import { useDesignerComponent } from '@farris/ui-vue/components/designer-canvas';
@@ -81,10 +81,10 @@ export default defineComponent({
};
});
modifyCount.value = modifyCount.value + 1;
- },
- {
- immediate:true
- });
+ },
+ {
+ immediate: true
+ });
const shouldShowClearButton = ref(true);
diff --git a/packages/ui-vue/components/response-toolbar/src/designer/use-designer-item-rules.ts b/packages/ui-vue/components/response-toolbar/src/designer/use-designer-item-rules.ts
index 6194fa9a734d7a557e69374678d52b6c38d6f7d8..f4219aed6057ac8ea931d82dd69e2586ab4e6641 100644
--- a/packages/ui-vue/components/response-toolbar/src/designer/use-designer-item-rules.ts
+++ b/packages/ui-vue/components/response-toolbar/src/designer/use-designer-item-rules.ts
@@ -326,11 +326,11 @@ export function useDesignerItemRules(designerItemContext: DesignerItemContext, d
onClick: (event) => {
stopMouseEvent(event);
// 当焦点在输入控件上，先失去焦点，更新面板属性，然后再触发拷贝功能
- const {activeElement} = document;
+ const { activeElement } = document;
const activeTagName = activeElement ? activeElement.tagName.toLowerCase() : '';
if (activeTagName && activeTagName === 'input' || activeTagName === 'textarea') {
activeElement?.['blur'](); // 失去焦点
-
+
nextTick(() => {
isDPItem() ? appendSiblingButton('Copy') : copyButton();
});
@@ -367,6 +367,22 @@ export function useDesignerItemRules(designerItemContext: DesignerItemContext, d
const { schema } = designerItemContext;
deleteExpression(schema);
}
+ /**
+ * 配置按钮的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designerItemContext && designerHostService) {
+ const { formSchemaUtils } = designerHostService;
+ const { schema } = designerItemContext;
+ if (schema.type === 'response-toolbar-item') {
+ formSchemaUtils.getControlBasicInfoMap().set(schema.id, {
+ componentTitle: schema.text,
+ parentPathName: schema.text
+ });
+ }
+ }
+
+ }
return {
canAccepts,
checkCanMoveComponent,
@@ -374,6 +390,7 @@ export function useDesignerItemRules(designerItemContext: DesignerItemContext, d
checkCanAddComponent,
getPropsConfig,
getCustomButtons,
- onRemoveComponent
+ onRemoveComponent,
+ setComponentBasicInfoMap
};
}
diff --git a/packages/ui-vue/components/schema-selector/src/components/nav-list-view.component.tsx b/packages/ui-vue/components/schema-selector/src/components/nav-list-view.component.tsx
index f6b31c41af65eeae8928d3e79d7afa981a5643c4..f98d648a0ebb8d764ae600bf07d2177a923c8d30 100644
--- a/packages/ui-vue/components/schema-selector/src/components/nav-list-view.component.tsx
+++ b/packages/ui-vue/components/schema-selector/src/components/nav-list-view.component.tsx
@@ -56,10 +56,12 @@ export default defineComponent({
selectedController.value = $event[0];
}
- function updateListViewDataScource(items: any[]) {
- controllerListViewRef.value.clearSelection();
- controllerListViewRef.value.updateDataSource(items);
- controllerListViewRef.value.updateSelectionByIds([]);
+ function updateListViewDataSource(items: any[]) {
+ if (controllerListViewRef.value) {
+ controllerListViewRef.value.clearSelection();
+ controllerListViewRef.value.updateDataSource(items);
+ controllerListViewRef.value.updateSelectionByIds([]);
+ }
}
function filterListViewData() {
let resultItems = cloneDeep(dataList.value);
@@ -75,7 +77,7 @@ export default defineComponent({
searchResult.value = resultItems;
- updateListViewDataScource(searchResult.value);
+ updateListViewDataSource(searchResult.value);
}
async function loadData() {
const loadingService: any | null = inject('FLoadingService', null);
@@ -112,7 +114,7 @@ export default defineComponent({
filterListViewData();
selectedController.value = null;
}
- function renderListViewEmpty(){
+ function renderListViewEmpty() {
return ;
}
diff --git a/packages/ui-vue/components/section/src/designer/use-designer-rules.ts b/packages/ui-vue/components/section/src/designer/use-designer-rules.ts
index d494a8eb9411634920e5a0b8104a7101c7ea90ac..ad01dde2d4b3f9de937c7c3e9113db74a598dc38 100644
--- a/packages/ui-vue/components/section/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/section/src/designer/use-designer-rules.ts
@@ -175,6 +175,32 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
function onRemoveComponent() {
removeToolbarExpressions();
}
+ /**
+ * 配置section以及section下按钮的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const { formSchemaUtils } = designerHostService;
+ const controlBasicInfoMap = formSchemaUtils.getControlBasicInfoMap();
+ const { schema } = designItemContext;
+ // 配置页签的路径
+ controlBasicInfoMap.set(schema.id, {
+ componentTitle: schema.mainTitle,
+ parentPathName: schema.mainTitle
+ });
+
+ // 配置页签下按钮的路径
+ if (schema.toolbar?.buttons?.length) {
+ schema.toolbar.buttons.map(button => {
+ controlBasicInfoMap.set(button.id, {
+ componentTitle: button.text,
+ parentPathName: `${schema.mainTitle} > ${button.text}`
+ });
+ });
+ }
+ }
+
+ }
return {
canAccepts,
checkCanDeleteComponent,
@@ -182,6 +208,7 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
hideNestedPaddingInDesginerView,
getPropsConfig,
getCustomButtons,
- onRemoveComponent
+ onRemoveComponent,
+ setComponentBasicInfoMap
} as UseDesignerRules;
}
diff --git a/packages/ui-vue/components/section/src/schema/section-toolbar-item.schema.json b/packages/ui-vue/components/section/src/schema/section-toolbar-item.schema.json
index 40cc7e4a3aadefde261105a68aef4ce7562e12c2..25ba5d48efa58f144fa65fcb3175829b31a45d28 100644
--- a/packages/ui-vue/components/section/src/schema/section-toolbar-item.schema.json
+++ b/packages/ui-vue/components/section/src/schema/section-toolbar-item.schema.json
@@ -77,5 +77,8 @@
"id",
"type",
"text"
- ]
+ ],
+ "events": {
+ "onClick": "点击事件"
+ }
}
\ No newline at end of file
diff --git a/packages/ui-vue/components/section/src/section.props.ts b/packages/ui-vue/components/section/src/section.props.ts
index 783556feceafff45385468b95913bc7fbd02152a..5e8a40e0f31686fe7030a14edaa361f77071e5b9 100644
--- a/packages/ui-vue/components/section/src/section.props.ts
+++ b/packages/ui-vue/components/section/src/section.props.ts
@@ -125,4 +125,4 @@ export const sectionToolbarPropsResolver = createPropsResolver(sectionDesignProps, sectionSchema, schemaMapper, schemaResolver);
\ No newline at end of file
+export const propsDesignResolver = createPropsResolver(sectionDesignProps, sectionSchema, schemaMapper, schemaResolver);
diff --git a/packages/ui-vue/components/tabs/src/composition/types.ts b/packages/ui-vue/components/tabs/src/composition/types.ts
index 9e6ade11d73cedd5b29e4a5b601714bb3f842e7a..aeacdf7c8aabd4a7e3d751f4b5697dddf9b3a140 100644
--- a/packages/ui-vue/components/tabs/src/composition/types.ts
+++ b/packages/ui-vue/components/tabs/src/composition/types.ts
@@ -144,4 +144,4 @@ export interface UseOnePage {
export interface ToolbarItemService {
updateToolbarItems: () => void;
changeSelectedId: (id) => void;
-}
\ No newline at end of file
+}
diff --git a/packages/ui-vue/components/tabs/src/designer/tab-page-use-designer-rules.ts b/packages/ui-vue/components/tabs/src/designer/tab-page-use-designer-rules.ts
index 739e7fd8a0528edddd4fddf90d0eac1bf0c64ebd..69f88fa03fc66c4de5f065542e944bb657b7f281 100644
--- a/packages/ui-vue/components/tabs/src/designer/tab-page-use-designer-rules.ts
+++ b/packages/ui-vue/components/tabs/src/designer/tab-page-use-designer-rules.ts
@@ -32,9 +32,36 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
*/
function onRemoveComponent() {
const { schema, parent } = designItemContext;
- if (parent?.schema.activeId&&schema.id === parent.schema.activeId){
- parent.schema.activeId="";
+ if (parent?.schema.activeId && schema.id === parent.schema.activeId) {
+ parent.schema.activeId = "";
}
}
- return { canAccepts, getDraggableDesignItemElement, onRemoveComponent };
+ /**
+ * 配置页签以及页签下按钮的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const { formSchemaUtils } = designerHostService;
+ const controlBasicInfoMap = formSchemaUtils.getControlBasicInfoMap();
+ const { schema } = designItemContext;
+ // 配置页签的路径
+ controlBasicInfoMap.set(schema.id, {
+ componentTitle: schema.title,
+ parentPathName: schema.title
+ });
+
+ // 配置页签下按钮的路径
+ if (schema.toolbar?.buttons?.length) {
+ schema.toolbar.buttons.map(button => {
+ controlBasicInfoMap.set(button.id, {
+ componentTitle: button.text,
+ parentPathName: `${schema.title} > ${button.text}`
+ });
+ });
+ }
+
+ }
+
+ }
+ return { canAccepts, getDraggableDesignItemElement, onRemoveComponent, setComponentBasicInfoMap };
}
diff --git a/packages/ui-vue/components/tabs/src/designer/tab-use-designer-rules.ts b/packages/ui-vue/components/tabs/src/designer/tab-use-designer-rules.ts
index 61dcfdd3f702e4bfdd12d85ae7b8e47220474f86..5dd5c44b154cdf8b5eefca0efa80bdd5158b9081 100644
--- a/packages/ui-vue/components/tabs/src/designer/tab-use-designer-rules.ts
+++ b/packages/ui-vue/components/tabs/src/designer/tab-use-designer-rules.ts
@@ -1,3 +1,4 @@
+import { DgControl } from "../../../designer-canvas";
import { nextTick } from "vue";
import { UseTemplateDragAndDropRules } from "../../../designer-canvas/src/composition/rule/use-template-rule";
import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDesignerRules } from "../../../designer-canvas/src/composition/types";
@@ -61,14 +62,38 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe
updatePositionOfButtonGroup();
}
}
+ /**
+ * 配置组件的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const { formSchemaUtils } = designerHostService;
+ const tabsTitle = DgControl.tabs.name;
+ formSchemaUtils.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle: tabsTitle,
+ parentPathName: tabsTitle
+ });
+ // 配置各页签的路径
+ const tabContentElement = designItemContext.designerItemElementRef.value.querySelector('.farris-tabs-content');
+ designItemContext.schema.contents?.forEach(tabPageSchema => {
+ const tabPageElement = tabContentElement?.querySelector(`#${tabPageSchema.id}-design-item`) as DesignerHTMLElement;
+ if (tabPageElement && tabPageElement.componentInstance) {
+ tabPageElement.componentInstance.value.setComponentBasicInfoMap();
+ }
+ });
+
+ }
+
+ }
return {
canAccepts,
checkCanDeleteComponent,
checkCanMoveComponent,
getPropsConfig,
hideNestedPaddingInDesginerView,
- onPropertyChanged
+ onPropertyChanged,
+ setComponentBasicInfoMap
} as UseDesignerRules;
}
diff --git a/packages/ui-vue/components/tree-grid/src/designer/use-designer-rules.ts b/packages/ui-vue/components/tree-grid/src/designer/use-designer-rules.ts
index 92ba11e7299d582c346317abc43ea5979aedb361..7f5672df065a609c9c452504ea5d3c553d9e75b5 100644
--- a/packages/ui-vue/components/tree-grid/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/tree-grid/src/designer/use-designer-rules.ts
@@ -2,6 +2,7 @@ import { ref } from "vue";
import { DraggingResolveContext, UseDesignerRules } from "../../../designer-canvas/src/composition/types";
import { ComponentSchema, DesignerItemContext } from "../../../designer-canvas/src/types";
import { TreeGridProperty } from "../property-config/tree-grid.property-config";
+import { DgControl } from "../../../designer-canvas/src/composition/dg-control";
export function useDesignerRulesForTreeGrid(designItemContext: DesignerItemContext, designerHostService): UseDesignerRules {
const schema = designItemContext.schema as ComponentSchema;
@@ -46,7 +47,42 @@ export function useDesignerRulesForTreeGrid(designItemContext: DesignerItemConte
return dataGridProp.getPropertyConfig(schema);
}
+ /**
+ * 配置表格的路径信息，用于事件交互面板显示“已有方法”的事件路径
+ */
+ function setComponentBasicInfoMap() {
+ if (designItemContext && designerHostService) {
+ const belongedComponentId = designItemContext?.componentInstance?.value.belongedComponentId;
+ let parentTitle = '';
+ let reliedComponentId = '';
+ const { formSchemaUtils } = designerHostService;
+ if (belongedComponentId) {
+ const rootViewModelId = formSchemaUtils.getRootViewModelId();
+ const rootComponent = formSchemaUtils.getComponentByViewModelId(rootViewModelId);
+ const parentSchemaOfComponent = formSchemaUtils.selectNode(rootComponent, item => {
+ return item.contents && item.contents.find(childItem => childItem.component === belongedComponentId);
+ });
+ // 父级为tab-page
+ if (parentSchemaOfComponent?.type === DgControl['tab-page']?.type && parentSchemaOfComponent?.contents?.length) {
+ parentTitle = parentSchemaOfComponent.title || '';
+ }
+ // 父级为section
+ if (parentSchemaOfComponent?.type === DgControl.section?.type && parentSchemaOfComponent?.showHeader !== false) {
+ parentTitle = parentSchemaOfComponent.mainTitle || '';
+ }
+ parentTitle = parentTitle ? `${parentTitle} > ` : '';
+ reliedComponentId = parentTitle ? parentSchemaOfComponent.id : '';
+ }
+ const treeGridName = DgControl['tree-grid'].name;
+ designerHostService?.formSchemaUtils.getControlBasicInfoMap().set(designItemContext.schema.id, {
+ componentTitle: treeGridName,
+ parentPathName: `${parentTitle}${treeGridName}`,
+ reliedComponentId
+ });
+ }
+
+ }
return {
canAccepts,
checkCanDeleteComponent,
@@ -54,7 +90,8 @@ export function useDesignerRulesForTreeGrid(designItemContext: DesignerItemConte
hideNestedPaddingInDesginerView,
triggerBelongedComponentToMoveWhenMoved,
triggerBelongedComponentToDeleteWhenDeleted,
- getPropsConfig
+ getPropsConfig,
+ setComponentBasicInfoMap
} as UseDesignerRules;
}
diff --git a/packages/ui-vue/demos/drawer/host.vue b/packages/ui-vue/demos/drawer/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a06f422ddf5b4b02af955db8f8fb8c8d7979ccf6
--- /dev/null
+++ b/packages/ui-vue/demos/drawer/host.vue
@@ -0,0 +1,22 @@
+
+
+
+
+ 打开抽屉
+
+ 右侧打开内容如下：我是一个抽屉组件
+
+ 确定
+
+
+
+
diff --git a/packages/ui-vue/demos/modal/host.vue b/packages/ui-vue/demos/modal/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d475fc650b8d85323bf303d645ec181c09f6ec8
--- /dev/null
+++ b/packages/ui-vue/demos/modal/host.vue
@@ -0,0 +1,27 @@
+
+
+ Modal Content
+ 弹出窗口
+
+
diff --git a/packages/ui-vue/docs/components/drawer/index.md b/packages/ui-vue/docs/components/drawer/index.md
index 467e42b1570413bca8ad0d16f55d5c006745c00f..2248612ffd07678bc20d0c548cb70766db3018fd 100644
--- a/packages/ui-vue/docs/components/drawer/index.md
+++ b/packages/ui-vue/docs/components/drawer/index.md
@@ -21,7 +21,7 @@
:::
-## 显示入口
+
+
+## 渲染在DOM内
+
+:::vdemo
+
+```vue
+{demos/drawer/host.vue}
+```
+
:::
## 属性
diff --git a/packages/ui-vue/docs/components/modal/index.md b/packages/ui-vue/docs/components/modal/index.md
index 482510004489451c646450ccfdfb1ab7edc1c5fa..c7a67720412fe9439cff528dc1a39370cb9bc093 100644
--- a/packages/ui-vue/docs/components/modal/index.md
+++ b/packages/ui-vue/docs/components/modal/index.md
@@ -92,6 +92,16 @@ Modal 组件用来已弹出模态窗口的形式展示页面内容。
:::
+## 自定义host
+
+:::vdemo
+
+```vue
+{demos/modal/host.vue}
+```
+
+:::
+
## 类型
```typescript