后台嵌入其他系统的界面,设计器:嵌入网页组件

管理后台如何新增Iframe嵌入其他系统的界面:
后台嵌入其他系统的界面,设计器:嵌入网页组件

1、新建一个模型。模型中有放【url】的字段
2、后台嵌入其他系统的界面,设计器:嵌入网页组件
3、切换组件
后台嵌入其他系统的界面,设计器:嵌入网页组件
4、点击发布
5、测试环境验证下,后端那个字段返回嵌入的【url】就可以展示这个url的内容了
6、最后效果如下:
后台嵌入其他系统的界面,设计器:嵌入网页组件

Oinone社区 作者:冯, 天宇原创文章,如若转载,请注明出处:https://doc.oinone.top/other/20111.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
冯, 天宇的头像冯, 天宇数式员工
上一篇 2024年12月25日 am9:45
下一篇 2024年12月31日 am10:59

相关推荐

  • 前端 快速查询并替换默认组件

    可以借助vue的调试工具快速找到对应的组件,请参考这篇文章 使用vue调试工具快速找到对应的组件 Mask默认组件 重写Mask组件 重写AppSwitcherWidget import Com from './com.vue' /** * SPI注册条件保持根 AppSwitcherWidget 一致,即可覆盖 */ @SPI.ClassFactory( MaskWidget.Token({ widget: 'app-switcher' }) ) export class CustomAppSwitcherWidget extends AppSwitcherWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 MenuWidget import Com from './com.vue' /** * SPI注册条件保持根 MenuWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'nav-menu' })) export class CustomMenuWidget extends MenuWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 NotificationWidget import Com from './com.vue' /** * SPI注册条件保持根 NotificationWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class CustomNotificationWidget extends NotificationWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 LanguageWidget import Com from './com.vue' /** * SPI注册条件保持根 LanguageWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'language' })) export class CustomLanguageWidget extends LanguageWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 UserWidget import Com from './com.vue' /** * SPI注册条件保持根 UserWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class CustomUserWidget extends UserWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props);…

    2025年8月14日
    49900
  • 如何设计公用跳转动作(类似导入导出动作)

    背景 设计一个公共动作,在界面设计器可以拖到页面里,点击之后跳转指定页面。就像导入导出一样。 实现思路 元数据计算时,初始化跳转动作,为本模块以及依赖于本模块的所有模块生成该跳转动作。实现所有模型都有该跳转动作的元数据。 代码示例: package pro.shushi.pamirs.top.core.init; import com.google.common.collect.Lists; import org.apache.commons.collections4.MapUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum; import pro.shushi.pamirs.boot.base.enmu.ActionTypeEnum; import pro.shushi.pamirs.boot.base.model.ViewAction; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.extend.MetaDataEditor; import pro.shushi.pamirs.core.common.InitializationUtil; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.dto.meta.Meta; import pro.shushi.pamirs.meta.api.dto.meta.MetaData; import pro.shushi.pamirs.meta.domain.model.ModelDefinition; import pro.shushi.pamirs.meta.enmu.ActionContextTypeEnum; import pro.shushi.pamirs.meta.enmu.SystemSourceEnum; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; import pro.shushi.pamirs.top.api.TopModule; import pro.shushi.pamirs.top.api.model.Teacher; import java.util.*; import java.util.stream.Collectors; @Slf4j @Component public class DemoModuleAppInstall implements MetaDataEditor { @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { InitializationUtil util = InitializationUtil.get(metaMap, TopModule.MODULE_MODULE, TopModule.MODULE_NAME); if (util == null) { return; } if (MapUtils.isEmpty(metaMap)) { return; } Set<String> dependencyFileModels = metaMap.values().stream() .filter(v -> v.getData().containsKey(TopModule.MODULE_MODULE)) .map(Meta::getModule) .collect(Collectors.toSet()); for (String module : metaMap.keySet()) { if (!dependencyFileModels.contains(module)) { // 不依赖本模块,不生成跳转动作 continue; } Meta meta = metaMap.get(module); MetaData metaData = meta.getCurrentModuleData(); List<ModelDefinition> modelList = metaData.getDataList(ModelDefinition.MODEL_MODEL); for (ModelDefinition data : modelList) { makeDefaultModelViewAction(meta, data, dependencyFileModels); } } } // 跳转的xml模版 name public static final String DEFAULT_VIEW_NAME = "fixed_teacher_table"; private void makeDefaultModelViewAction(Meta meta, ModelDefinition data, Set<String> dependencyFileModels) { if (!dependencyFileModels.contains(data.getModule())) { // 当前模块使用了其他模块的模型,对方模块未依赖本模块,不生成跳转动作 return; } Map<String, Object> context = new HashMap<>(); context.put("model", "'" + data.getModel() + "'"); // 创建 跳转表格页面 viewAction,根据实际需求更改 makeDefaultViewAction(meta, data, "teacherListDialog", "教师表格", null, ActionContextTypeEnum.CONTEXT_FREE, ViewTypeEnum.TABLE, 99, Teacher.MODEL_MODEL, DEFAULT_VIEW_NAME,…

    2025年10月22日
    8700
  • 前端学习路径

    准备工作 环境准备-1h安装基础环境,需要Node和PNPM如果已经安装检查对应版本,体验阶段建议版本保持一致 克隆一个空工程-0.5h全新工程 注意事项-0.5h静态资源解压,如果还没有对应的后端服务。可以使用:https://demo.oinone.top(Oinone演示环境),账号密码:admin/admin 前端基础 1.1.1了解组件-3h– 组件如何开发– 组件如何复用– 组件如何嵌套 1.1.2 更近一步-5h– 构建更复杂的工作台– 如何发起后端请求– 构建一个通用的图表组件 1.1.3 深入了解概念-5h– 通用概念、名词解释– 页面渲染原理– 组件执行原理 1.1.4业务实战-实现通用的甘特图组件-8h– 怎么与第三方结合– 如何在开源组件上接入Oinone, 并复用 1.1.5 业务实战-实现通用的画廊组件-6h–如何更近一步复用–基础学习结束 前端进阶 2.1.1代码和无代码如何结合-4h– 了解无代码如何使用和基础概念 2.1.2使用无代码搭建增删改查-8h– 了解无代码如何使用和基础概念 最后一步 当您实现玩基础和进阶的所有的效果,Oinone的整体使用您已经大致掌握了,接下来您可以找一个当前业务的场景来实现它把!

    2025年9月1日
    69800
  • Oinone 初级学习路径

    文档说明 文档链接 介绍Oinone前端相关知识点 前端基础学习路径 介绍Oinone后端相关知识点 后端基础学习路径 介绍平台基础组件 平台基础组件 介绍平台设计器常用场景实操 设计器基础学习路径 设计器实操案例示例 7.2 实战训练(积分发放)

    2024年6月15日
    91200
  • 如何通过业务数据拿到工作流用户任务待办

    在模型里面建一个非存储字段,用来传输工作流用户任务待办ID。。 界面设计器把这个字段拖到列表页里,并在跳转动作上配置上下文参数,把任务待办id传到表单页里。 重写教师模型的queryPage,通过业务数据id查询出每条业务数据的工作流用户任务待办id返回给前端。 @Function.Advanced(displayName = "查询教师列表", type = FunctionTypeEnum.QUERY, category = FunctionCategoryEnum.QUERY_PAGE, managed = true) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<Teacher> queryPage(Pagination<Teacher> page, IWrapper<Teacher> queryWrapper) { Pagination<Teacher> teacherPagination = new Teacher().queryPage(page, queryWrapper); List<Teacher> content = teacherPagination.getContent(); if (CollectionUtils.isEmpty(content)) { return teacherPagination; } List<Long> teacherIds = content.stream().map(Teacher::getId).collect(Collectors.toList()); List<WorkflowUserTask> workflowUserTasks = Models.data().queryListByWrapper(Pops.<WorkflowUserTask>lambdaQuery() .from(WorkflowUserTask.MODEL_MODEL) .in(WorkflowUserTask::getNodeDataBizId, teacherIds) .orderByDesc(WorkflowUserTask::getCreateDate) ); if (CollectionUtils.isEmpty(workflowUserTasks)) { return teacherPagination; } Map<Long/*业务id*/, WorkflowUserTask> userTaskMap = workflowUserTasks.stream().collect(Collectors.toMap( WorkflowUserTask::getNodeDataBizId, a -> a, (old, n) -> old) ); for (Teacher teacher : content) { if (userTaskMap.containsKey(teacher.getId())) { teacher.setWorkflowUserTaskId(userTaskMap.get(teacher.getId()).getId()); } } return teacherPagination; } 查看效果,任务待办id成功传到表单里面。

    2025年1月10日
    1.7K00

Leave a Reply

登录后才能评论