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

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

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

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

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

Like (0)
冯, 天宇's avatar冯, 天宇数式员工
Previous 2024年12月25日 am9:45
Next 2024年12月31日 am10:59

相关推荐

  • SSO单点登录(5.3.x — 6.2.x)

    SSO相关 1、SSO服务端:在应用中找到【单点登录】,创建一个应用标识2、SSO登录认证,选择grant_type=password,后面带上用户名和密码。参考下面的链接(POST请求):http://127.0.0.1:8190/pamirs/sso/authorize?redirect_uri=http://127.0.0.1:8193/page;module=ysps;model=ysps.notify.ProjectPosting;action=homepage;scene=homepage;target=OPEN_WINDOW;path=/ysps/homepage&response_type=code&client_id=替换为已创建的应用唯一标识&grant_type=password&username=admin&password=admin 其中: redirect_uri是认证通过后的跳转,目前的场景可忽略 client_id替换为在单点登录也上创建的应用唯一标识 认证方式grant_type=password固定,后面是实际的用户名和密码 操作步骤: 请求服务端工程SSO登录认证,会返回token信息,拿着这个信息去客户端工程访问即可。 请求服务端工程返回token信息: curl –location –request POST ‘http://127.0.0.1:8190/pamirs/sso/authorize’ \ –header ‘User-Agent: Apifox/1.0.0 (https://apifox.com)’ \ –header ‘Accept: */*’ \ –header ‘Host: 127.0.0.1:8190’ \ –header ‘Connection: keep-alive’ \ –header ‘Content-Type: application/x-www-form-urlencoded’ \ –header ‘Cookie: pamirs_uc_session_id=88fd2459446a4a20ab0a505bdaf78ebe’ \ –data-urlencode ‘appkey=1d2195bac42e44e895ea8e030aaa4e52’ \ –data-urlencode ‘appSecret=JNEyibFBIb2N3tdLmW/M9bnpf120/I6fFMMf86OQlP/wlL5qhJCF3KdAKHlJT0jECmXmJRfTCSlnmB5cWHRsenNGND+TMoXObzDPK7umxazCnaZYiW7JDeuZUOzqskhBPkEJSURAZR5xu1c6UYv542BlHAPsEi+ujnKeCYcKiFHyw7fIB1aijNyCz8d9teUEGYYTtYTXoNp/4Ts8AIJn8xkTjvEq6V9uYOExDEuYGxMgN76ZaiwpbT5387eZy4XCDIy0XWfZo/kv7X+s+rjwlsxWA7jp1w5dDaRmSd4rPO2GSEcL64Pje/Ct5xznhNwH6T5KDd2BLfbZikonh624nqW4hdlVxx/EQUpYp6Yc4Wet6b/DkggCVIZPpcO9pSuRJoC2jGPMrGHM3vYR0YtfFqCJ2/x3m/lQr2v+bP4pGzcRuuCy2tyOZA1uurA23xlssehz4geGiJArkpAUKKUkcafx+dLWODHOcgBKBz6wY38PAcbLkgn6gK6lmmR7cUiDmzmEEor6pYb64YG6tPmpm4AQeBoQYrsyCorA4Ds08nAiPFWUCXcHQCVUbHPTOwHHChFO1lXH/VjkfDv0OI1CD8mZI7ZeK794aIBZdvQGCI+ayQU+5CD1asDNg/M01nnNdWKB7rS9rMvbUOlSNguboAgRbiz3pEAxGJrZUPvkDHM=’ { “access_token”: “eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyNTk2MTcsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcIjM0MDBiYzY0Njk1MzQzODA4ZTlhNmZhNWRmZjU0MTc2XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.iJ-meyxAGW189Y3aK9Z2rMbf9_MsTKVTfnf3XsDR4iq6qvCGYkiq5197r4A54wwdKAzPZ-iDgkQOjWDh8AYu4A”, “token_type”: null, “refresh_token”: “eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQ4NTcyMTcsInN1YiI6IntcImRhdGVUaW1lXCI6XCIxNzQ0MjUyNDE3NDc3XCIsXCJjbGllbnRJZFwiOlwicGFtaXJzXzI3OWI3MDAwZTQxNzQzMTJhZjQwMjAzNGI4ZWYxYTlkXCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.TZaK8OuPKudd3YX6AF23m7aplJF7OQlBEDkj0AnPkQdw7aja2WhS7q-VwjPfhqSmfAp-oaaUIcN7Zlune9VLTA”, “expires_in”: 7200, “refresh_token_expiresIn”: 604800 } 发起客户端工程请求。 注意:请求Headers中需携带token参数信息,token为服务端工程返回token信息,且请求时Authorization参数需加上标识 Bearer+空格 –header 'loginType: OAUTH' –header 'Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyMDYwNjUsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcImEzZWZkNjZkMDNlNjQ5MDY4OGU4Y2FhYmIwNjZmZGU4XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.gapCpvM8PCit1oSHv-zJ2tATkCuVQBzqWGebvBcUX2O0bqP9aAhVqQxdNLM19vCqP5s3CXoNk-xzMUu-mo-hSg' curl –location –request POST ‘http://127.0.0.1:8092/pamirs/base’ \ –header ‘loginType: OAUTH’ \ –header ‘Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyMDYwNjUsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcImEzZWZkNjZkMDNlNjQ5MDY4OGU4Y2FhYmIwNjZmZGU4XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.gapCpvM8PCit1oSHv-zJ2tATkCuVQBzqWGebvBcUX2O0bqP9aAhVqQxdNLM19vCqP5s3CXoNk-xzMUu-mo-hSg’ \ –header ‘User-Agent: Apifox/1.0.0 (https://apifox.com)’ \ –header ‘Content-Type: application/json’ \ –data-raw ‘{“query”:”mutation {\n teacherMutation {\n queryTea(\n data: {id: 672564120180166836, teacherName: \”““`\”, readStatus: NO_READ, createDate: \”2024-11-05 11:30:36\”, writeDate: \”2024-11-05 11:30:36\”, createUid: 10001, writeUid: 10001}\n ) {\n id\n teacherName\n enumType\n petStoreId\n professionalId\n professional {\n professionalName\n id\n }\n readStatus\n nonStoredField\n createDate\n writeDate\n createUid\n writeUid\n }\n }\n}\n”,”variables”:{}}’ SSO服务端工程(5.3.X以上版本支持) 1、服务端工程依赖 1.1 pom依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-oauth2-server</artifactId> </dependency> 1.2 application.yml配置文件里面添加sso启动模块。 pamirs: boot: modules: – sso SSO客户端工程(5.3.X以上版本支持) 1、客户端工程依赖 客户端工程即需要加入SSO的应用 1.1 pom依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-oauth2-client</artifactId> </dependency> 1.2 application.yml配置 pamirs: sso: enabled: true client: # SSO服务端提供 client-id: pamirs_1fb51c50acbb4842b36844c5fbdc8d25 # SSO服务端提供 client-secret: B3ySNQEJdD8kZXuwmtaUtbWTo1vlIevmd0t4MIqRHfuM8VXzkMcs6YOox6cPPIESAL3yd2xQa+SCBNbLwYchQYSJonGPpvAmqapc5ZdskPicNENc8T2vTAMkc/YgvgUUK4U+/OuP5PrtRKC536nNXIZy1VHdf+whi44qOgd4RQYN0sIrog70CXsDQP3/2CHkcXWVRCqvZa/4mFmL1SBhQ+TLAIQg0jXlWr4lThUdL/X9M0YFXBaLJPKTlKi9l7K/8kTdJL2IgvSpByU0kGXjk0O/jZRBq1bHd/ZsC3Rw4kjiygIdxfL7Q/lw1/WAZ5XXibc5dlylUsnSJBZ9I4ZeCWq7lEZj//ctR7WZJCCeqi8rmCu+N2FQvye7kgiFIoZTFMNSRhW7ZMBBrsoJuf6DGWGvXvBE9w3P/IVFJMDmsopNbbFYTRcmY5e5tc775OCGMQDrW6j8IitTrOdRYzie0S2Jj9+Xw+Va1sEQLXWj0tBNQ9Tzv7fnRr5D6EBNtXra1TntKrvH/quBI5ujncBZXZ2cfEoMjFSw38edoTA8WPJv10WUA5EZsvfxqJLEiXFriJ9nleUBbCvL3Zuggn64CW4cH8mxGk7qvHQvXmwmp8phKyoKa8UDfDD2x7eNW3oNcQUMz+gdGNF5dNXt4iArpYK5/xktpLxdCM5Yz7SpHoc= # login-url和login-url根据实际情况修改 login-url: http://test1.oinone.top:9095/login logout-url: https://test1.oinone.top:9095/pamirs/sso/logout expires:…

    2025年4月25日
    81100
  • 自定义字段样式

    在日常开发中,我们经常会遇到需要根据业务规则动态展示字段样式的场景,比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例,带大家实现这一功能。 以下以 自定义表格字段文字颜色 为例。 实现步骤 1. 在界面设计器中添加组件 通过界面设计器,添加一个组件 2. 创建元件 以表格的「金额字段」为例,创建对应的元件(可根据自己的业务场景调整)。 3. 配置元件属性 进入元件设计页面,从组件库中拖入「单行文本」到设计区域。在右侧属性面板中填写相关配置并保存 4. 保存元件 完成配置后,保存元件。 5. 发布元件 将元件发布,供页面设计使用。 6. 切换表格字段 进入页面设计器,将表格中的字段切换为刚刚创建的元件。 7. 配置字段颜色 在右侧属性面板中,配置字段的文字颜色: 固定颜色:直接输入颜色值(如 red)。 动态颜色:输入表达式,根据业务逻辑动态展示颜色。例如:当前行的名称等于 1 时显示红色,否则为蓝色。 示例表达式: activeRecord.name === '1' ? 'red' : 'blue' 8: 在代码中,自定义对应的表格字段 import { SPI, BaseFieldWidget, ModelFieldType, ViewType, TableCurrencyFieldWidget, Widget, RowContext, numberZeroFill, numberAddThousandth, Expression, ExpressionRunParam } from '@kunlun/dependencies'; import { toString } from 'lodash-es'; import { createVNode, VNode } from 'vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Table], ttype: [ModelFieldType.Currency], widget: 'TableCurrencyColor' }) ) export class TableCustomCurrencyFieldWidget extends TableCurrencyFieldWidget { computedFieldColor(context: RowContext) { const { fieldColor = ' ' } = this.getDsl(); if (!fieldColor) { return null; } // 如果当前颜色是表达式,则需要计算 if (Expression.hasKeywords(fieldColor)) { const params: ExpressionRunParam = { activeRecords: [context.data], rootRecord: {}, openerRecord: {}, scene: '' }; return Expression.run(params, fieldColor, fieldColor)!; } return fieldColor; } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { let value = numberZeroFill(toString(super.compute(context)), this.getPrecision(context)); if (this.getShowThousandth(context)) { value = numberAddThousandth(value); } return [ createVNode( 'div', { style: { color: this.computedFieldColor(context) } }, value ) ]; } } 9: 页面效果图

    2025年1月9日
    6.5K00
  • 设计器基础学习路径

    模块 内容 目标 doc 链接 模型设计器 模型 1.熟悉模型管理和字段管理 模型 数据字典 熟悉数据字典的创建 数据字典 数据编码 了解数据编码的操作创建 数据编码 界面设计器 了解页面 了解界面设计器中的页面 页面 页面设计 增删改查 【界面设计器】模型增删改查基础 页面设计 左树右表 【界面设计器】左树右表 页面设计 树形表格 【界面设计器】树形表格 页面设计 树下拉 【界面设计器】树下拉/级联 页面设计 自定义组件基础 【界面设计器】自定义字段组件基础 页面设计 熟悉页面设计的操作 页面设计 自定义组件 熟悉如何使用自定义组件 自定义组件 流程设计器 流程组成 了解流程的组成 流程 流程设计 熟悉流程设计内容 流程设计 熟悉流程的触发节点 流程触发 熟悉流程的节点动作与设计使用 节点动作 低代码与无代码结合 示例讲解 Outsourcing相关 低无一体的开发方式、设计数据的导入导出等

    2024年6月15日
    1.9K00
  • 模版名称如何翻译

    导出翻译项: mutation { excelExportTaskMutation { createExportTask( data: { workbookDefinition: { model: "file.ExcelWorkbookDefinition" name: "excelLocationTemplate" } } ) { name } } } { "path": "/file", "lang": "en-US" } 导入翻译项: mutation { excelImportTaskMutation { createImportTask( data: { workbookDefinition: { model: "file.ExcelWorkbookDefinition" name: "excelLocationTemplate" } file: { url: "https://minio.oinone.top/pamirs/upload/zbh/test/2024/06/03/导出国际化配置模板_1717390304285_1717391684633.xlsx" } } ) { name } } } PS:导入自行修改url进行导入

    2025年2月7日
    1.2K00
  • 用户审批意见回填到审批表单

    需求 将审批同意时填写的审批意见以及图片回填到审批表单中。(填写节点同理) 实现方式一 通过审批后置函数操作流程参数的数据,并将流程参数数据回写到流程中。 流程设计 流程参数中自定义需要传递的字段。 审批节点设计审批后置函数,后置函数由后端定义。 添加更新数据节点,选择需要更新的业务表单字段,并在表达式中选择流程参数中自定义的字段。我这里更新审批意见和图片两个字段。 后置函数定义: /** * 审批后数据处理 * * @param approvalNode 审批节点 * @param context 上下文 * @param dataJson 审批提交数据 * @param result 审批结果 */ @Function(name = "approvalDataProcessFun", openLevel = API) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "审批后数据处理", category = FunctionCategoryEnum.CUSTOM_DESIGNER) public void approvalDataProcessFun(ApprovalNode approvalNode, WorkflowContext context, String dataJson, Boolean result) { List<WorkflowUserTask> workflowUserTasks = Models.origin().queryListByWrapper(Pops.<WorkflowUserTask>lambdaQuery() .from(WorkflowUserTask.MODEL_MODEL) .eq(WorkflowUserTask::getTaskId, context.getLastTaskInstanceId()) ); // 获取审批意见等放入流程参数 for (WorkflowUserTask userTask : workflowUserTasks) { String remark = userTask.getRemark(); List<String> pics = userTask.getPics(); List<PamirsFile> attachments = userTask.getAttachments(); Map<String, Object> paramMap = (Map<String, Object>) context.getContext().getOrDefault(ParamNode.PARAM_PREFIX, new HashMap<String, Object>()); paramMap.put("remark", remark); paramMap.put("pics", pics); } } 实现方式二 通过审批动作(WorkflowUserTaskAction )扩展点实现 1、扩展点的定义 package pro.shushi.pamirs.work.core.extpoint; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import pro.shushi.pamirs.workflow.app.api.model.WorkflowUserTask; // @see:pro.shushi.pamirs.workflow.app.core.action.WorkflowUserTaskAction /** * Oinone所有的函数都提供了默认的前置扩展点、重载扩展点和后置扩展点, * 其技术名称的规则是所扩展函数的函数编码fun加上“Before”、“Override”和“After”后缀 * * 根据实际情况保留扩展点的接口和实现(可增加、可删减) */ @Ext(WorkflowUserTask.class) public interface WorkflowUserTaskDealExtPoint { // 实际需要几个扩展点根据业务情况自行 增加 和 删除 @ExtPoint(displayName = "审批同意后") WorkflowUserTask approveAgreeAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批撤销后") WorkflowUserTask recallAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审后") WorkflowUserTask approveTrangerAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审前") WorkflowUserTask approveFallbackBefore(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批拒绝后") WorkflowUserTask approveRejustAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审后") WorkflowUserTask approveFallbackAfter(WorkflowUserTask workflowUserTask); // ………… } 2、扩展点的实现 package pro.shushi.pamirs.work.core.extpoint; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.Ext; import…

    2026年2月10日
    70100

Leave a Reply

Please Login to Comment