高级组件

本篇主要结合业务场景介绍高级组件的使用方法。

级联选择/树选择

级联选择与树选择是同一类业务场景、不同的交互体验,在这里我们一起说明。

业务场景

行业分类、产品类目/分类等自关联场景,案例以行业分类说明。

操作步骤

Step1:搭建模型

搭建行业模型,在行业模型中创建多对一字段“上级行业”,指多个子行业对应一个上级行业。如下图:

image.png

Step2:界面设计

  • 创建行业的表格视图,绑定菜单,并且在此视图中增加“跳转动作 - 新增行业”;
  • 创建新增行业表单,将“上级行业”拖进画布中,组件切换为“级联选择”,属性面板配置“选项字段、搜索字段、透出字段”,平台低代码为每个模型自动生成了名称、编码字段,如果不使用平台提供的名称、自建名称时,需要配置这三个字段;

image.png

  • 为“上级行业”设置联动关系,自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。

image.png

  • 配置后发布表格、表单视图,即可获得级联选择效果。
  • 表单视图中将“上级行业”切换为“树选择”组件,在发布后,即可获得树选择效果。

Step3:效果展示

级联选择

image.png

树选择

image.png

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9408.html

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

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年6月20日 am9:49
Next 2024年6月20日 am9:49

相关推荐

  • 4.1.13 Action之校验

    在3.5.3【Action的类型】一文中有涉及到“ServerAction之校验”部分,本文介绍一个特殊的写法,当内置函数和表达式不够用的时候,怎么扩展。还是拿PetShopProxyAction举例,修改如下: package pro.shushi.pamirs.demo.core.action; ……引依赖类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { ……其他代码 // @Validation(ruleWithTips = { // @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), // @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"), // }) @Validation(check = "checkName") @Action(displayName = "启用") @Action.Advanced(rule="activeRecord.code !== undefined && !IS_BLANK(activeRecord.code)") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function public Boolean checkName(PetShopProxy data) { String field = "name"; String name = data.getShopName(); boolean success = true; if (StringUtils.isBlank(name)) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称为必填项")); success = false; } if (name.length() > 128) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称过长,不能超过128位")); success = false; } return success; } ……其他代码 } 图4-1-13-1 PetShopProxyAction扩展配置 注: check属性指定了校验函数名称,命名空间必须与服务器动作一致。 校验函数的入参必须与服务器动作一致 使用PamirsSession#getMessageHub方法可通知前端错误的属性及需要展示的提示信息,允许多个。

    Oinone 7天入门到精通 2024年5月23日
    1.7K00
  • 3.1 环境搭建

    一、基础环境说明 内容 是否必须 说明 后端基础环境 JDK1.8 必须 java的基础运行环境, 要求高于1.8_221以上,低于这个版本需要覆盖jce (原因:https://www.cnblogs.com/jinloooong/p/10619353.html) Mysql 必须 8.0.26 版本以上需要注意点:修改:my.cnf (macOS ) / my.ini (windows)时区、大小写敏感设置lower_case_table_names = 2default-time-zone = ‘+08:00’ Idea 必须 需要注意点:1.禁用Lombok插件2.java Compiler 增加 -parameters(不然java反射获取方法入参名会变成arg*) 指令3.安装oinone插件 DB GUI 非必须 Datagrip、MySQLWorkbench、DBEaver 选其一 Insomnia 非必须 GraphQL测试工具 Git 必须 2.2.0以上 Maven 必须 3.6.3需要注意点:1配置mvn的settings文件下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员2把settings.xml拷贝一份到maven安装目录conf目录下 RocketMQ 必须 4.7.1以上 Redis 必须 5.0.2以上 Zookeeper 必须 3.5.8以上 前端基础环境 nvm 非必须 方便node的版本管理 nodejs 必须 版本要求为12.12.0注意事项:1.npm的源配置为http://nexus.shushi.pro/repository/kunlun/2.源的用户名、密码见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 vue-cli 必须 vue脚手架工具 表3-1-1基础环境说明 其他:canal和Es的环境搭建见具体学习章节 二、基础知识准备 前端必备知识 vue3、typescript、graphql 后端必备知识 SpringBoot、MybatisPlus 表3-1-2基础知识准备 三、下载快速安装包 Mac版 Windows版 四、学习安装 推荐,虽然慢点对环境有比较深入的了解,对自身能力提升和日后排查问题都有好处。 mac见:3.1.1【环境准备(Mac版)】一文 windows见:3.1.2【环境准备(Windows版)】一文

    Oinone 7天入门到精通 2024年5月23日
    3.0K00
  • 3.4 Oinone以函数为内在

    函数(Function):是oinone可管理的执行逻辑单元,跟模型绑定则对应模型的方法 描述满足数学领域函数定义,含有三个要素:定义域A、值域C{f(x),x属于A}和对应法则f。其中核心是对应法则f,它是函数关系的本质特征 满足面向对象原则,可设置不同开放级别,本地与远程智能切换。 本章会带大家更加详细地了解Function的方方面面,主要以几下几个维度 构建第一个Function 函数的开放级别与类型 函数的相关特性 函数元数据详解

    Oinone 7天入门到精通 2024年5月23日
    1.7K00
  • 7.4 Oinone的低无一体

    基础介绍 前面我们学习了基于低代码开发平台进行快速开发,以及通过oinone的设计器进行零代码开发两种模式。当然低无一体不是简单地说两种模式还指:低无两种模式可以融合。 在做核心产品的时候以低代码开发为主,以无代码为辅助。见低代码开发的基础入门篇中设计器的结合一文 在做实施或临时性需求则是以无代码为主,以低代码为辅助 本文主要介绍第二种模式,它是www.oinone.top官网在SaaS模式下的专有特性。满足客户安装标品后通过设计器进行适应性修改后,但对于一些特殊场景还是需要通过代码进行完善或开发 在该模式下,我们提供了jar模式和代码托管两种模式,客户只要选择需要进行代码开发的模块,点击生产SDK,下载扩展工程模版,按Oinone低代码开发平台规范进行研发,后上传扩展工程即可。 操作手册 低无一体这个模块是连接无代码设计器的桥梁,可以为一个模块或应用设计低代码的逻辑,可以在界面设计器或流程设计器中使用低代码的逻辑。 1.选择模块 首先需要在下拉单选中选择需要低代码的模块或应用。 下拉选中只展示在「应用中心」中已安装的模块或应用,可前往「应用中心」安装后继续低代码操作。 选择模块中不展示系统的基础模块或应用,因为这些模块或应用无法自定义模型。 2.模块信息 模块信息展示的是选择模块的基础信息:模块名称、模块编码、模块作者、模块版本、包的前缀、工程模板下载地址,下载地址仅在上传jar包模式时候用到。 3.低无一体操作 低无一体支持了两种使用模式:上传jar包模式、源码托管模式。 上传控制工程或创建研发分支动作完成会生成一条数据,可以对单条数据进行部署、卸载、修改、删除。 3.1 上传jar包模式 在这个模式下,需要做四步动作。 生成SDK,点击按钮之后,会把模块的当前模型状态打成一个SDK包,SDK最新生成时间更新。当模型变更但未生成SDK时,使用低无一体就会出错,请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右,若第一次使用低无一体模块,可能需要更长时间,请耐心等待。 下载扩展工程模板,点击按钮之后,会将SDK包和工程模板生成一个下载链接,复制模块信息中的卸载地址打开即可下载。 技术人员在工程模板的基础上写低代码逻辑。 上传扩展工程,点击按钮展开弹窗,在弹窗中设置标签、备注,并将最终的jar包上传,完成上传之后表格中就会新增一条数据。 上传jar包模式下,模板工程中代码需要注意的点参考下图: 3.2 源码托管模式 在这个模式下,需要做三步动作。 生成SDK,点击按钮之后,会把模块的当前模型状态打成一个SDK包,SDK最新生成时间更新。当模型变更但未生成SDK时,使用低无一体就会出错,请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右,若第一次使用低无一体模块,可能需要更长时间,请耐心等待。 创建研发分支,点击按钮展开弹窗。首次创建时需要设置git账号名称、git账号邮箱来创建一个账号,另外在弹窗中设置分支名称、标签、备注,完成创建后表格中就会新增一条数据。 通过表格中的Gitlab地址,技术人员写低代码逻辑。 3.3 行内操作 部署:工程状态为未部署、部署失败、已卸载时展示行内的部署按钮,点击之后进行部署,工程状态变为部署中。部署过程大致需要5-10分钟,请耐心等待。部署完成之后,会生成一个新的模块:“原模块名称”扩展工程。 卸载:工程状态为已部署时展示行内的卸载按钮,点击之后会卸载这个已部署的工程,工程状态变为已卸载。同一模块只能有一个已部署的工程(与选择的模式无关),若需要使用新的工程请先卸载已部署的工程。 修改:行内操作修改按钮始终展示,只允许修改标签、备注。 删除:工程状态为未部署、部署失败、已卸载时展示行内的删除按钮,点击之后删除这一条工程记录。 3.4 部署效果 低无一体部署成功之后,可以进入对应模块的模型页面中使用提交动作来使用低代码逻辑,也可以在流程设计器中的引用逻辑节点中使用低代码逻辑。

    2024年5月23日
    2.8K00
  • 2.3 Oinone独特性之源,元数据与设计原则

    让我们来揭开Oinone元数据的神秘面纱,了解它的核心组成、获取方式、面向对象特性以及带来的好处。您或许会想,这些特性能否解决企业数字化转型中互联网架构遇到的挑战呢? 元数据是本文多次提到的重要概念。作为LCDP的基础,元数据支持企业所有研发范式。它数字化描述了软件本身,包括数据、行为和视图等方面。在描述数据时,元数据本身就是数据的数据;在描述行为时,它就是行为的数据;在描述视图时,它就是视图的数据。只有深入理解元数据,才能全面了解Oinone的其他特性。 本章节将介绍元数据的整体概览(如下图2-3所示),带领您了解其核心组成、面向对象特性以及组织方式。请注意,本章节将不会详细展开元数据的细节,这些细节将在后续的相关章程中深入介绍。 图2-3 元数据整体视图 一:以下是元数据的核心组成介绍: 模块(Module):它是将程序划分成若干个子功能,每个模块完成了一个子功能,再把这些模块总起来组成一个整体。它是按业务领域划分和管理的最小单元,是一组功能、界面的集合。 模型(Model):Oinone一切从模型出发,是数据及对行为的载体。它是对所需要描述的实体进行必要的简化,并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。它包括元信息、字段、数据管理器和自定义函数。同时遵循面向对象设计原则,包括封装、继承和多态。 交互组件(UI Componment):它用菜单、视图和Action来勾绘出模块的前端交互拓扑,并且用组件化的方式统一管理、布局和视图。它用Action来描述所有可操作行为。 函数(Function):它是Oinone可执行逻辑单元,跟模型绑定则对应模型的方法。它描述满足数学领域函数定义,含有三个要素:定义域A、值域C{f(x),x属于A}和对应法则f。其中核心是对应法则f,它是函数关系的本质特征。它满足面向对象原则,可以设置不同开放级别,本地与远程智能切换。 元数据注册表:它以模块为单位的安装记录,在模块安装时,相关的元数据都会在元数据注册表中记录。 二:元数据的产生方式,既可以通过代码注解扫描获取,也可以通过可视化编辑器直接添加。 从代码注解中扫描获取,示例如下代码(如下图2-4所示)。 @Model.model(ResourceBank.MODEL_MODEL) @Model(displayName = "银行",labelFields = "name") public class ResourceBank extends IdModel { public static final String MODEL_MODEL = "resource.ResourceBank"; @Field.String @Field(required = true, displayName = "名称") private String name; @Field.String @Field(required = true, displayName = "银行识别号码", summary = "Bank Identifier Code, BIC 或者 Swift") private String bicCode; …… } 图2-4 从代码注解中扫描获取元数据 可视化的编辑器添加元数据,具体介绍详见7.1《Oinone的设计器》章节 三:Oinone是一种通用低代码开发平台,其元数据设计满足应用开发所需的所有元素,并支持所有研发范式。 它基于元数据的具体实现秉承以下原则: 部署与研发无关; 以模型驱动,符合面向对象设计原则; 代码与数据相互融合,编辑器产生的元数据以面向对象的方式继承扩展标准产品的元数据。 这些原则的集合使整个平台能够实现以下功能特性: 开发分布式应用与单体应用一样简单,部署方式由后期决定。如果要部署为分布式应用,则需要在boot工程中引入Oinone的rpc包。详见4.3《Oinone的分布式体验》一章节; 面向对象的特性使得每个需求都可以是独立模块,独立安装与卸载,让系统像乐高积木一样搭建; 支持两种元数据产生方式,融合的原则确保标准产品迭代与个性化保持独立,真正做到低无一体。 四:这些特性刚好也解决了2.2《互联网架构作为最佳实践为何失效》一章节中客户挑战的三个刺眼问题 互联网架构落地企业数字化转型面临的问题 Oinone应对的策略 不是说敏捷响应吗?为什么改个需求这么慢,不单时间更长,付出的成本也更高了? 特性1、特性2、特性3 不是说能力中心吗?当引入新供应商或有新场景开发的时候,为什么前期做的能力中心不能支撑了? 特性2、特性3 不是说性能好吗?为什么我投入的物理资源更多了? 特性1 表2-2互联网架构落地企业数字化转型面临的问题及Oinone应对策略

    2024年5月23日
    2.0K00

Leave a Reply

Please Login to Comment