3.5.7 前端组件自定义(初级篇)

相关推荐

• 数式Oinone新人入门

  前端学习路径

  准备工作 环境准备-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日

  991000
• 未分类

  如何通过业务数据拿到工作流用户任务待办

  在模型里面建一个非存储字段，用来传输工作流用户任务待办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成功传到表单里面。

  yexiu

  2025年1月10日

  2.2K000
• 未分类

  Oinone 初级学习路径

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

  shao

  2024年6月15日

  1.3K000
• 未分类

  外部系统接入SSO-OAuth2（6.3.x 之后版本支持）

  一、概述 统一身份认证系统提供了单点登录功能。本文档详述了统一身份认证系统单点登录接口，介绍了应用系统对接统一身份认证系统的过程和方法，用以帮助开发人员将应用系统接入统一身份认证系统。 本文档支持的协议：OAuth2 二、统一认证集成规范 2.1 SSO登录场景 序号 场景 预期结果 确认 1 登录跳转，在未登录的条件下，直接访问业务系统 跳转到单点登录界面 是 2 登录跳转，在已登录的条件下，直接访问业务系统 直接进入业务系统 是 3 正常登录，先登录认证，然后访问业务系统 直接进入业务系统 是 4 正常登出，在单点登录系统登出 访问业务系统要重新登录 是 5 正常登出，在业务系统登出 单点登录系统同步登出 是 2.2 认证流程 OAuth2 登录和认证流程 后端验证 token 后，创建本地会话（如 JSESSIONID 或自定义 Cookie）； 后续应用请求靠本地会话维持登录状态，不再依赖原始 token； 本地会话有过期时间（如 30 分钟无操作过期）； 三、认证服务接口 3.1 SSO服务端认证 浏览器登录 分类 说明 请求地址（开发环境） http://${host}:${port}/pamirs/sso/auth?client_id={client_id}&redirect_uri={redirect_uri}&state={state} 请求地址（测试环境） http://${host}:${port}/pamirs/sso/auth?client_id={client_id}&redirect_uri={redirect_uri}&state={state} 请求方式 GET 请求参数 redirect_uri：应用系统回调地址client_id：SSO 服务端颁发的应用 IDstate：可选但推荐，用于防止 CSRF 的随机字符串（UUID 随机码） 请求示例 http://${host}:${port}/pamirs/sso/auth?client_id=client123456&redirect_rui=http://app.example.com&state=abc123 响应说明 1. 已登录：重定向到 redirect 地址并携带授权码 code，如 http://app.example.com&state=abc123&code=xxx2. 未登录：重定向到服务器 SSO 登录地址 备注 SSO 登录成功后，会携带授权码并重定向到 redirect 地址 3.2 验证授权码 分类 说明 请求地址（开发环境） http://${host}:${port}/pamirs/sso/oauth2/authorize 请求地址（测试环境） http://${host}:${port}/pamirs/sso/oauth2/authorize 请求方式 POST 请求 Body {"grant_type":"authorization_code","client_id":"xxxx","client_secret":"xxxxx","code":"xxxx"} 请求示例 http://${host}:${port}/pamirs/sso/oauth2/authorize 响应说明 {"code":"0","msg":"成功","data":{"access_token":"xxxxx","expires_in":7200,"refresh_token":"xxxxxx","refresh_token_expiresIn":604800}} 备注 — 3.2 根据token获取用户信息 分类 说明 请求地址（开发环境） http://${host}:${port}/pamirs/sso/oauth2/getUserInfo 请求地址（测试环境） http://${host}:${port}/pamirs/sso/oauth2/getUserInfo 请求方式 POST 请求头 Authorization: Bearer xxxxxxxx 请求 Body {"client_id":"xxxx"} 请求示例 http://${host}:${port}/pamirs/sso/oauth2/getUserInfo 响应 {"code":"0","msg":"成功","data":{"name":"xxxxx","email":"xxxxx","login":"xxxxxx","id":"xxxxxxx"}} 备注 成功返回用户信息；失败返回错误码：1 根据实际情况其他协议的验证接口 3.3 单点登出接口 分类 说明 请求地址（开发环境） http://${host}:${port}/pamirs/sso/oauth2/logout 请求地址（测试环境） http://${host}:${port}/pamirs/sso/oauth2/logout 请求方式 POST 请求头 Authorization: Bearer xxxxxxxx 请求 Body {"client_id":"xxxx"} 请求示例 http://${host}:${port}/pamirs/sso/oauth2/logout 响应头 HTTP/1.1 200；Content-Type: application/html;charset=UTF-8 响应体 登出成功页面 备注 应用系统向 SSO 系统发起登出请求，SSO 收到后会通知所有其它系统登出该用户 四、服务注册 添加以下依赖 <!– sso相关 –> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-common</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-server</artifactId> </dependency> 配置文件 pamirs sso: enabled: true server: loginUrl: http://127.0.0.1:8091/login authType:…

  yexiu

  2026年1月7日

  440000
• 未分类

  开放应用中的ip黑白名单

  IP白名单配置 入口：集成应用>开放管理>应用>授权调整>IP白名单配置 IP白名单取请求头中的X-Forwarded-For属性的最后一个值，X-Forwarded-For以英文,分割ip地址。 X-Forwarded-For: clientIP, proxy1IP, proxy2IP, …, proxyNIP 根据 RFC 7239 标准所述，X-Forwarded-For含义如下： clientIP：最左边的 IP，表示最初发起请求的客户端 IP（即真实用户 IP）。 proxyXIP：从左往右依次为中间各级代理服务器的 IP。 最右边的 IP：表示离当前 Web 服务器最近的一层代理服务器（IP白名单拦截的此IP）。 Nginx配置示例 以Nginx为例，为确保X-Forwarded-For拿到的是真实的IP地址，需要增加配置。 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; IP黑名单配置 入口：集成应用>开放管理>应用>黑名单 取值来源：从请求头 X-Real-IP 中提取客户端 IP。 验证逻辑： 若 X-Real-IP 不存在，直接拦截并返回异常提示：未获取到真实IP地址。 检查提取的 IP 是否在阻止列表中。 相关文章 IP黑白名单实现拦截三方用户

  夜神月

  2025年5月15日

  576000