自定义组件

1. 定义组件介绍

平台提供了大多数的通用组件,面对企业个性话需求、复杂的业务场景,我们也提供了自定义组件的能力,帮助企业更快实施业务需求。

自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。

1.1 组件与元件

在介绍如何自定义组件前,需要先了解以下概念:

组件:页面设计的组件库中看到的是组件。每个组件都有自己的属性面板,通过属性、字段决定组件逻辑,而自定义组件就是需要构建出组件自身的属性信息,再结合业务配置组件的属性、使用组件。

一个组件在不同的业务类型、视图类型、单值/多值,其属性面板是不同的,不同业务类型、视图类型、单值/多值的组合我们成为元件,多种组合即为多个元件,所以一个组件包括多个元件。

image.png

元件:一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型,在画布中切换元件时,会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。

image.png

image.png此处切换的也是元件。

示例:创建一个“下拉选”的组件,其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时,设置单值时使用“下拉单选”元件,设置多值时使用“下拉多选”元件。

image.png

2. 组件管理

2.1 组件创建

  • 在组件画廊页面,点击添加组件,在弹窗中完善信息创建组件。

image.png

2.2 组件操作

  • 自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。
  • 搜索:默认搜索可见组件,可切换“全部、可用、废弃”搜索组件,也可使用组件名称搜索。
  • 删除:若组件未被引用,则可以直接删除。
  • 作废:组件作废后,不可在画布中展示,不可在组件切换时使用,但已使用的数据不影响。
  • 查看引用关系:可以查看存在引用关系的页面,支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。

image.png

  • 管理元件:点击进入元件的管理页面。

image.png

  • 编辑:可修改组件名称、组件图表、组件描述。

image.png

  • 低无一体:比较复杂,在第5章中单独讲解。
  • 排序:进入排序页,可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。

image.png

image.png

3. 元件管理

3.1 元件创建

  • 在元件画廊页面,点击添加元件,在弹窗中完善信息创建一个元件。

image.png

3.2 元件操作

  • 元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。
  • 删除:若元件未被引用,则可以直接删除。
  • 作废:元件作废后,不影响原来已使用的元件,无法新添加、使用该元件。
  • 查看引用关系:可以查看存在引用关系的页面,支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。
  • 编辑:可修改元件名称、支持视图类型、元件描述。

image.png

  • 设计元件属性:比较复杂,将在第4章中单独讲解。

4. 设计元件属性

  • 元件属性设计页面主要操作集中在这三部分,分别是①视图切换②属性面板设计区③复制功能

image.png

  • 视图切换:元件创建时选择的支持视图类型,在①区域平铺可切换对应视图的属性面板进行设计。
  • 属性面板设计区:可将组件拖入属性面板设计区进行设计,设计的是自定义组件的属性面板,左侧组件库和页面设计的组件库相同,仍然支持创建字段或使用模型字段,右侧进行元数据面板、属性面板设置。
  • 复制功能:可将已设置好的属性面板复制到其他视图,提高设计效率。

image.png

5. 低无一体

  • 低无一体简单讲就是组件代码上传,通过载入代码使组件在设计页面和实现页面可见和交互。
  • 系统内置的属性不满足需求时,要用低无一体写代码,定制属性,比如从模型中拖拽设计就是内置的属性,从组件库中设置,就要配合低无一体,否则无效。
  1. 首次进入组件设计或组件中的元件变更时需要生成SDK。

image.png

  1. 生成结束后展示SDK生成时间,并且“下载模版工程”按钮可用。

image.png

  1. 点击下载模版工程,会自动下载模板工程。

  2. 在模版工程中编写前端代码。

  3. 根据实际需求上传JS、CSS文件后提交即可。

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

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

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

相关推荐

  • 4.5.2 研发辅助之SQL优化

    Oinone体系中是不需要针对模型写SQL的,默认提供了通用的数据管理器。在带来便利的情况下,也导致传统的sql审查就没办法开展。但是我们可以以技术的手段收集慢SQL和限制问题SQL执行。 慢SQL搜集目的:去发现非原则性问题的慢SQL,并进行整改 限制问题SQL执行:对应一些不规范的SQL系统上直接做限制,如果有特殊情况手动放开 一、发现慢SQL 这个功能并没有直接加入到oinone的版本中,需要业务自行写插件,插件代码如下。大家可以根据实际情况进行改造比如: 堆栈入口,例子中只是放了pamirs,可以根据实际情况改成业务包路径 对慢SQL的定义是5s还是3s,根据实际情况变 package pro.shushi.pamirs.demo.core.plugin; import org.apache.ibatis.executor.Executor; import org.apache.ibatis.mapping.MappedStatement; import org.apache.ibatis.plugin.*; import org.apache.ibatis.session.ResultHandler; import org.apache.ibatis.session.RowBounds; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; @Intercepts({ @Signature(type = Executor.class,method = "query",args = {MappedStatement.class,Object.class, RowBounds.class, ResultHandler.class}) }) @Component @Slf4j public class SlowSQLAnalysisInterceptor implements Interceptor { @Override public Object intercept(Invocation invocation) throws Throwable { long start = System.currentTimeMillis(); Object result = invocation.proceed(); long end = System.currentTimeMillis(); if (end – start > 10000) {//大于10秒 try { StackTraceElement[] stackTraceElements = Thread.currentThread().getStackTrace(); StringBuffer slowLog = new StringBuffer(); slowLog.append(System.lineSeparator()); for (StackTraceElement element : stackTraceElements) { if (element.getClassName().indexOf("pamirs") > 0) { slowLog.append(element.getClassName()).append(":").append(element.getMethodName()).append(":").append(element.getLineNumber()).append(System.lineSeparator()); } } Object parameter = null; if (invocation.getArgs().length > 1) { parameter = invocation.getArgs()[1]; } MappedStatement mappedStatement = (MappedStatement) invocation.getArgs()[0]; BoundSql boundSql = mappedStatement.getBoundSql(parameter); Configuration configuration = mappedStatement.getConfiguration(); String originalSql = showSql(configuration, boundSql); originalSql = originalSql.replaceAll("\'", "").replace("\"", ""); log.warn("检测到的慢SQL为:" + originalSql); log.warn("业务慢SQL入口为:" + slowLog.toString()); } catch (Throwable e1) { //忽略 } } return result; } public String showSql(Configuration configuration, BoundSql boundSql) { Object parameterObject = boundSql.getParameterObject(); List<ParameterMapping> parameterMappings = boundSql.getParameterMappings(); String sql = boundSql.getSql().replaceAll("[\\s]+", " "); if (parameterMappings.size() > 0 && parameterObject != null) { TypeHandlerRegistry typeHandlerRegistry…

    Oinone 7天入门到精通 2024年5月23日
    1.7K00
  • 3.5.6 DSL配置大全(略)

    因为默认视图很难满足客户的个性化需求,所以日常开发中view的配置是避免不了的。本系列篇是比较全面地介绍View配置的各个方面涉及:视图、字段、动作、布局等

    Oinone 7天入门到精通 2024年5月23日
    1.6K00
  • 3.1.1 环境准备(Mac版)

    工欲善其事,必先利其器。 在进行学习前,大家务必先检查环境。为了降低大家环境准备难度,基础环境全程用安装包无脑模式进行环境配置,安装请从附件下载(提供mac版本安装包,其他操作系统请自行网上下载与安装)。 后端相关 基础环境准备 安装 jdk 1.8 (下载地址见书籍【附件一】) 安装 mysql 8.0.26 (下载地址见书籍【附件一】) 安装mysql,并配置环境变量详见本文中的【环境变量设置】部分 如果mysql启动失败则,在命令行加执行以下命令 Shell mysqld –initalize-insecure sudo chmod -R a+rwx /usr/local/mysql/data/ 图3-1-1 mysql启动失败需执行的命令 安装 idea社区版 (官方下载链接见书籍【附件一】) 根据不同版本下载不同的idea插件 (联系Oinone官方客服) b. 点击Preferences菜单(快捷键 comand+,) c. 选择Plugins,进入插件管理页面,接下来按图操作就可以了 d. 图3-1-3 插件管理页面操作示意 e. 选择.zip文件,不需要解压 如果安装了Lombok,请禁用 idea的Java Complier,不然java反射获取方法入参名会变成arg*,导致元数据默认取值出错。或者pom中加入Complier插件,此方法为正解,不然上线也会有问题,我们学习的工程都会选用mvn插件方式 图3-1-4 界面操作示意图 图3-1-5 界面操作示意图 图3-1-6 界面操作示意图 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <compilerArgument>-parameters</compilerArgument> <source>${maven.compiler.source}</source> <target>${maven.compiler.source}</target> <encoding>${project.build.sourceEncoding}</encoding> </configuration> </plugin> 图3-1-7 pom文件代码 安装 dataGrip 最新版本的 过期就去删“ ~/Library/Application\ Support/JetBrains/DataGrip202xxxx”相关的目录,无限期试用,或者安装其他mysql GUI 工具 安装 git 2.2.0(下载地址见书籍【附件一】) 安装 GraphQL的客户端工具 Insomnia 第一次使用可以参考3.2.1【构建第一个Module】一文中在模块启动后如何用该工具验证后端启动成功,更多使用技巧自行百度,Insomnia.Core-2022.4.2.dmg.txt(186.9 MB)(下载地址见书籍【附件一】),下载文件后修改文件名去除.txt后缀 安装 maven ,并配置环境变量(下载地址见书籍【附件一】) 配置mvn的settings,下载附件settings-open.xml,并重命名为settings.xml,建议直接放在~/.m2/下面。下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 把settings.xml拷贝一份到maven安装目录conf目录下 环境变量设置 vi ~/.bash_profile ,并执行 source ~/.bash_profile ##按实际情况设置 export PATH=$PATH:/usr/local/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_0221.jdk/Contents/Home ##替换掉${mavenHome},为你的实际maven的安装路径 export M2_HOME=${mavenHome} export PATH=$PATH:$M2_HOME/bin 图3-1-8 环境变量设置 查看主机名 #查看主机名 echo $HOSTNAME 图3-1-9 查看主机名 根据主机名,配置/etc/hosts文件。此步如果没有配置,可能导致mac机器在启动模块时出现dubbo超时,从而导致系统启动巨慢,记得把oinonedeMacBook-Pro.local换成自己的主机名 #oinonedeMacBook-Pro.local 需要换成自己对应的主机名,自己的主机名用 echo $HOSMNAME 127.0.0.1 oinonedeMacBook-Pro.local ::1 oinonedeMacBook-Pro.local 图3-1-10 配置/etc/hosts文件 必备中间件安装脚本(rocketmq、zk、redis) zk 下载并解压(下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ZOOKEEPER_HOME=${basePath}/apache-zookeeper-3.5.8-bin export PATH=$PATH:$ZOOKEEPER_HOME/bin 图3-1-11 配置zk环境变量 启动zk ##启动 zkServer.sh start ##停止 zkServer.sh stop 图3-1-12 启停zk rocketmq (下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ROECET_MQ_HOME=${basePath}/rocketmq-all-4.7.1-bin-release export PATH=$PATH:$ROECET_MQ_HOME:$ROECET_MQ_HOME/bin 图3-1-13 配置rocketmq环境变量 到bin目录下修改配置文件 runserver.sh 和 runbroker.sh ##注释掉下面一行 ##choose_gc_log_directory ##修改java启动所需内存,按自己实际情况改,1g或者512m JAVA_OPT = "${JAVA_OPT} -server -Xms1g -Xmx1g -Xmn1g -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=320m" 图3-1-14 bin目录下修改配置文件 启停rocketmq ##启动 nameserver nohup…

    2024年5月23日
    2.5K00
  • 3.3.8 字段类型之基础与复合

    模型字段是描述实体的特征属性,本文介绍重点介绍字段的基础类型与复合类型 使用@Field注解来描述模型的字段。如果未配置字段类型,系统会根据Java代码的字段声明类型来自动获取业务类型。建议配置displayName属性来描述字段在前端的显示名称。可以使用defaultValue配置字段的默认值。 一、安装与更新 使用@Field.field来配置字段的不可变更编码。字段一旦安装,无法在对该字段编码值进行修改,之后的字段配置更新会依据该编码进行查找并更新;如果仍然修改该注解的配置值,则系统会将该字段识别为新字段,存储模型会创建新的数据库表字段,而原字段将会rename为废弃字段。 二、字段类型 类型系统由基本类型、复合(组件)类型、引用类型和关系类型四种类型系统构成。通过类型系统描述应用程序、数据库和前端视觉视图如何进行交互,数据及数据间关系如何处理的协议。其中引用类型和关系类型介绍详见3.3.9【字段类型之关系与引用】一文,字段命名规范参见3.3.1【构建第一个Model】一文,这里不再赘述。 基本类型 业务类型 Java类型 数据库类型 规则说明 BINARY ByteByte[] TINYINTBLOB 二进制类型,不推荐使用 INTEGER ShortIntegerLongBigInteger smallintintbigintdecimal(size,0) 整数, 包括整数(10-11位有效数字)、长整数(19-20位有效数字)和大整数(超过19位)。【数据库规则】:默认使用int;如果size小于6则使用smallint;如果size超过6则使用int;如果size超过10位数字,即大于11(包含符号位),则使用长整数bigint;如果size超过19位数字,即大于20(包含符号位),则使用大数decimal。若未配置size,则按Java类型推测。【前端交互规则】:整数使用Number类型,长整数和大整数前后端协议使用字符串类型。 FLOAT FloatDoubleBigDecimal float(M,D)double(M,D)decimal(M,D) 浮点数,?包括单精度浮点数(7-8位有效数字)、双精度浮点数(15-16位有效数字)和大数(超过15位)。【数据库规则】:默认使用单精度浮点数float;如果size超过7位数字,即大于等于8,则使用双精度浮点数double;如果size超过15位数字,即大于等于16,则使用大数decimal。若未配置size,则按Java类型推测。【前端交互规则】:单精度浮点数float和双精度浮点数double使用Number类型(因为都使用IEEE754协议64位进行存储),大数前后端协议使用字符串类型。 BOOLEAN Boolean tinyint(1) 布尔类型,值为1,true(真)或0,false(假) ENUM Enum 与数据字典指定基本类型一致 【前端交互规则】:可选项从ModelField的options字段获取,options字段值为字段指定数据字典子集的JSON序列化字符串。前后端传递的是可选项的name,数据库存储使用可选项的value。multi属性为true,则使用多选控件;multi属性为false,则使用单元控件 STRING String varchar(size) 字符串,size为长度限制默认值参考,前端可以view中覆盖该配置 TEXT String text 多行文本,编辑态组件为多行文本框,长度限制为配置项size值 HTML String text 富文本编辑器 DATETIME java.util.Datejava.sql.Timestamp datetime(fraction)timestamp(fraction) 日期时间类型【数据库规则】:日期和时间的组合,时间格式为?YYYY-MM-DD HH:MM:SS[.fraction],默认精确到秒,在默认的秒精确度上,可以带小数,最多带6位小数,即可以精确到?microseconds (6 digits) precision。可以通过设置fraction来设置精确小数位数,最终存储在字段的decimal属性上。【前端交互规则】:前端默认使用日期时间控件,根据日期时间类型格式化格式format格式化日期时间 YEAR java.util.Date year 年份类型日期类型【数据库规则】:默认“YYYY”格式表示的日期值【前端交互规则】:前端默认使用年份控件,根据日期类型格式化格式format格式化日期 DATE java.util.Datejava.sql.Date datedate 日期类型【数据库规则】:默认“YYYY-MM-DD”格式表示的日期值【前端交互规则】:前端默认使用日期控件,根据日期类型格式化格式format格式化日期 TIME java.util.Datejava.sql.Time time(fraction)time(fraction) 时间类型【数据库规则】:默认“HH:MM:SS”格式表示的时间值【前端交互规则】:前端默认使用时间控件,根据日期类型格式化格式format格式化日期 表3-3-8-1 字段基本类型 复合类型 业务类型 Java类型 数据库类型 规则说明 MONEY BigDecimal decimal(M,D) 金额,前端使用金额控件,可以使用currency设置币种字段 表3-3-8-2 字段复合类型 不可变更字段 使用immutable属性来描述该字段前后端都无法进行更新操作,系统会忽略不可变更字段的更新操作。 自动生成编码的字段 详见3.3.5【模型编码生成器】一文。 字段的序列化与反序列化 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式,最终会以序列化后的字符串持久化到存储中。 详见3.3.7【字段之序列化方式】一文 前端默认配置 可以使用@Field注解中的以下属性来配置前端的默认视觉与交互规则,也可以在前端设置覆盖以下配置。 @Field(required),是否必填 @Field(invisible),是否不可见 @Field(priority),字段优先级,列表的列使用该属性进行排序 更多前端默认视图配置详见:3.5.4【Ux注解详解】一文,如:readonly是否只读等。 举例 回顾我们前面学习例子 现有PetShop代码如下 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.core.common.enmu.DataStatusEnum; import pro.shushi.pamirs.demo.api.enumeration.PetShopOptionEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import java.sql.Time; import java.util.List; @Model.model(PetShop.MODEL_MODEL) @Model(displayName = 宠物店铺,summary=宠物店铺,labelFields ={shopName} ) @Model.Code(sequence = DATE_ORDERLY_SEQ,prefix = P,size=6,step=1,initial = 10000,format = yyyyMMdd) public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL=demo.PetShop; @Field(displayName = 店铺编码) private String code; @Field(displayName = 店铺编码2) @Field.Sequence(sequence = DATE_ORDERLY_SEQ,prefix = C,size=6,step=1,initial = 10000,format = yyyyMMdd) private String codeTwo; @Field(displayName = 店铺名称,required = true) private String shopName; @Field(displayName = 开店时间,required = true) private Time openTime; @Field(displayName = 闭店时间,required = true) private Time closeTime; @Field(displayName =…

    2024年5月23日
    1.6K00

Leave a Reply

Please Login to Comment