Oinone社区 作者：梁, 丁原创文章，如若转载，请注明出处：https://doc.oinone.top/other/12756.html
访问Oinone官网:https://www.oinone.top获取数式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的整体使用您已经大致掌握了，接下来您可以找一个当前业务的场景来实现它把！
-
前端 快速查询并替换默认组件
可以借助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);…
-
自定义字段样式
在日常开发中，我们经常会遇到需要根据业务规则动态展示字段样式的场景，比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例，带大家实现这一功能。 以下以 自定义表格字段文字颜色 为例。 实现步骤 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: 页面效果图
-
新人引导文档
类型 文档链接 入门参考必看 7天入门到精通 Oinone 初级学习路径 Oinone 初级学习路径 平台部署启动 无代码docker启动说明 低代码启动说明 前端环境和启动前端工程 无代码设计器启动方式 后端无代码设计器Jar包启动方法 平台部署及依赖说明 Oinone平台部署及依赖说明（v5.0） 问题排查方法 问题排查工具使用手册 前后端研发帮助文档 前端文档 后端文档 项目开发实践要点 【前端】项目开发前端知识要点地图 【后端】项目开发后端知识要点地图 版本升级说明 版本更新日志 工具包 【附件一】下载说明 许可证使用说明 pamirs-license 许可证使用常见问题 更多文档新人引导建议，可以下方评论
-
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:…
