【界面设计器】树下拉/级联

阅读之前

你应该:

名词解释

  • 字段组件:为字段提供交互能力的组件,一个字段对应一个组件。
  • 关联关系字段:在模型中与其他模型建立关联关系的字段。
  • 可选项:选择组件使用的具体选项,可以是静态的,也可以是动态的。
  • 选中:用户在使用选择组件时,针对某一选项标记或提取这一选项。

概述

本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充,并非完整教程,有不清楚的地方可以交替阅读进行理解。

场景

沿用【界面设计器】左树右表中的两个场景。

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第1级为【商品类目】,使用自关联依次展开。

将【部门】的【上级部门】组件改为【树下拉】组件。其第1级为【公司】,第2级为【部门】,【部门】使用自关联依次展开。

PS:本章不提供任何步骤介绍,请根据场景内容自行探索。

扩展知识

具备选择行为的组件

常用的选择组件可以进行一些基本的划分。

从可选数量来看
  • 单选:只能选一个值。
  • 多选:可以选择多个值。
从业务类型来看
  • 枚举(Enum):通过数据字典提供可选项。
  • 布尔(Boolean):可以看作一个特殊的枚举,其可选范围只有
  • 一对一(O2O)多对一(M2O)对一(X2O)类型仅支持单选,通过关联模型的数据源提供可选项。
  • 一对多(O2M)以及多对多(M2M)对多(X2M)类型仅支持多选,通过关联模型的数据源提供可选项。
从交互形态来看
  • 单选框(Radio)
  • 多选框(Checkbox)
  • 下拉选择(Select)
  • 树下拉(TreeSelect)
  • 级联(Cascader)

其中,树下拉(TreeSelect)级联(Cascader)组件要求数据源可以构成树结构,因此通常使用这两个字段组件的都是关联关系字段

下拉选择(Select)

在介绍树下拉/级联之前,我们有必要先了解一下在关联关系字段中使用下拉选择(Select)这一字段组件的表现情况。

根据关联关系字段对应的关联模型,我们可以获得其组件所需的可选项,在用户进行选中后,该组件将获得一个选项值,并且在表单提交、计算公式等被使用。

通常情况下,我们通过queryPage接口获取分页后的可选项列表,再通过点击/滚动方式获得其他页的可选项供用户选择。

树下拉(TreeSelect)/级联(Cascader)

与上述介绍的下拉选择(Select)不同点在于,其可选项是通过【联动关系】配置进行获取的,它并不要求直接获取到真正可以被选择的可选项,而是通过树结构依次展开的。用户可选择的可选项一定是与关联关系字段对应的关联模型相同的树节点。对于无法选择的节点,其主要作用在于将数据进行划分,以便于用户进行选择。

由于树节点具备特殊性,无法直接使用平台的任何一个模型。因此树结构被定义在UiTreeNode模型中,该模型是描述树结构的基本模型,其提供了多个接口为树结构的查询提供了基本能力。

通常情况下,在创建页面,我们通过UiTreeNode模型的fetchChildren接口依次获取其子节点。在编辑页面,我们通过fetchAllreverselyQueryreverselyQueryWithSize这三个接口获取回填的数据,根据不同情况进行调用。虽然使用来不同的接口,但最终都会使用当前模型的queryPage接口获取数据。

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

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

(0)
oinone的头像oinone
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 自定义的复杂字段配置透出字段

    学习这篇文章之前,需要先学会使用在界面设计器自定义一个前端组件,如果您还不会,可以先看这篇文章 默认情况下,当开前端发人员自定义了一个复杂字段,比如M2O、O2M、M2M的字段,那么Graphql查询的时候,只会查询id跟name这两个字段,如果还想查询字段的字段,那么可以通过配置化的方式来处理 1: 在界面设计器的组件区域中新增对应的字段 2: 设计元件,在模型区域中搜索选项字段列表,拖到设计区域,然后保存 3: 去对应的设计页面,刷新下页面,选中对应的字段,可以看到右侧有选项字段列表4: 输入期望Graphql查询字段,保存发布

    2023年11月9日
    1.1K00
  • 开放接口怎么使用

    开放接口的具体使用 第一步将接口授权的应用变成启用状态 第二步点击查看密钥,复制API Key与API Secret 第三步利用复制下来的API Key与API Secret生成token 第四步调用开放接口

    2023年11月7日
    56600
  • nginx如何配置后端服务的负载均衡

    要在Nginx中实现对同一套服务部署两遍并且按比例分配请求,你可以利用Nginx的负载均衡功能。具体做法如下: 步骤 1: 配置 upstream 首先,在Nginx的配置文件(通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default,具体路径可能因系统而异)中定义一个upstream块,列出你的两个服务实例。这里假设你的两个服务实例运行在相同的主机上,但监听不同的端口,例如8080和8081。 http { upstream backend { server 192.168.1.100:8091 weight=1; server 192.168.1.101:8091 weight=1; } # … } 在这个例子中,weight=1表示两个服务实例具有相同的权重,Nginx会尽量以1:1的比例分配请求给这两个实例。 步骤 2: 配置 location 或 server 块 接着,在配置文件中找到或添加一个server块,然后在其中的location指令内指定使用刚刚定义的upstream。 server { listen 80; server_name your.domain.com; location / { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 这里的proxy_pass http://backend;告诉Nginx将请求转发到名为backend的upstream定义的服务器列表中。 步骤 3: 重启Nginx 最后,保存配置文件并重启Nginx以使更改生效。 sudo nginx -t # 先测试配置是否正确 sudo systemctl restart nginx # 或者 service nginx restart,取决于你的系统 注意事项 确保你的两个服务实例是完全独立且状态同步的,以避免数据不一致或服务故障。 使用weight参数可以调整分配策略,如果你想改变分配比例,可以通过修改weight值来实现。 考虑到高可用性,还可以配置max_fails和fail_timeout等参数来处理失败的后端连接。

    2024年6月5日
    1.2K00
  • Oinone设计器部署参数说明

    概述 Oinone提供两种设计器部署方式,合作伙伴可以自行选择适合自己的部署方式。 Docker配置参数 环境变量 ARG_ENV:指定spring.profiles.active(默认:dev) ARG_LIFECYCLE:指定-Plifecycle(默认:INSTALL) JVM_OPTIONS:jvm参数 PROGRAM_ARGS:程序参数 JVM_OPTIONS和PROGRAM_ARGS参数说明 java [JVM_OPTIONS?] -jar boot.jar [PROGRAM_ARGS?] 端口说明 PS:以下为目前设计器镜像的全部端口,不同类型镜像的端口由于内置服务不同,使用的端口数量不同,但端口号是完全一致的。 80:前端服务端口(设计器访问入口) 8091:后端服务端口 8093:后端EIP服务端口 20880:Dubbo端口 3306:内置MySQL端口 2181:内置Zookeeper端口 6379:内置Redis端口 9876/10991:内置RocketMQ端口 9999:内置本地OSS默认端口 挂载目录说明(挂载虚拟卷) /opt/pamirs为镜像的工作目录,所有挂载目录均在该目录下。 /opt/pamirs/ext:应用配置文件目录;包含application.yml、logback.xml、license.lic等配置文件 /opt/pamirs/nginx/vhost:Nginx配置文件目录 /opt/pamirs/logs:后端服务日志目录 /opt/mq/conf/broker.conf:RocketMQ的broker配置文件 /opt/pamirs/outlib:非设计器内置包的外部加载目录(外部库),可以添加任何jar包集成到设计器中。 /opt/pamirs/dist:前端服务目录 /opt/pamirs/static:前端静态文件目录;LOCAL类型的OSS上传和下载目录; docker run启动常用参数 -e:指定环境变量 -p:指定端口映射 -v:指定挂载目录(挂载虚拟卷) docker run [OPTIONS] IMAGE [COMMAND] [ARG…] docker compose启动常用配置 services: container: image: $IMAGE container_name: $CONTAINER_NAME restart: always # docker run -e environment: KEY1: VALUE1 KEY2: VALUE2 … # docker run -p ports: – $machinePort1:$containerPort1 – $machinePort2:$containerPort2 … # docker run -v volumes: – $machinePath1:$containerPath1 – $machinePath2:$containerPath2 … docker compose常用命令 # 使用docker-compose.yaml启动 docker compose up -d # 使用docker-compose.yaml停止并删除容器 docker compose down -v # 指定配置文件启动 docker compose -f config.yaml up -d # 指定配置文件停止并删除容器 docker compose -f config.yaml down -v JAR包方式启动 下载Oinone专属启动器 oinone-boot-starter.zip 启动命令变化 # 原命令 java -jar boot.jar # 变更后命令 boot-starter java -jar boot.jar PS:更多命令可查看后端无代码设计器Jar包启动方法

    2024年11月4日
    1.1K00
  • 【界面设计器】模型增删改查基础

    阅读之前 你应该: 已搭建包含界面设计器的基础环境。 对平台元数据有基本了解和认识。(如果不是特别清楚也没关系) 常用元数据简介 平台中包含了许多元数据,以这些元数据为基础,可以较为完整的描述了一个【应用】或【模块】的存储结构以及用户交互。 图解 “` mermaidgraph TDModule —> DataDictionaryModule —> Model Model —> FieldModel —> Function1(Function)Model —> Action Action —> ViewAction —> ViewAction —> ServerAction —> Function2(Function)Action —> UrlActionAction —> ClientAction“` 概念解释 模块(Module):用于定义元数据的作用域。 数据字典(DataDictionary):固定数据可选项。 模型(Model):用于描述一个具体对象的集合。 字段(Field):模型中字段,用于描述对象属性。 函数(Function):模型中的函数,用于定义对象的服务端行为。 动作(Action):模型中的动作,用于定义对象的交互行为。具体表现为以下四个行为。 跳转动作(ViewAction):用于视图与视图之间的跳转。 视图(View):用于定义主内容分发区的页面内容。 服务端动作(ServerAction):用于客户端调用服务端行为。特殊的,当函数被作为API级别开放时,客户端也可以直接调用。 链接动作(UrlAction):用于执行浏览器超链接行为。 客户端动作(ClientAction):用于自定义客户端动作。 其他概念解释 应用(Application):特殊的模块,可以被用户访问的模块。 模块依赖(ModuleDependencies):模块与模块之间具备的一种关系,使得模块可以使用被依赖模块的相关元数据。 场景描述 在以下演示过程中,我们将通过【演示模块】这一应用来引导大家完成【商品】模型的增删改查操作。并根据实际应用场景,为大家提供模型增删改查的最佳实践。 创建第一个无代码应用 (基于低代码开发的应用,可以跳过这一步骤。) 登录进入系统后,将可以按照如下步骤进行操作。(为了方便演示和体验,可直接使用admin用户进入系统) 切换应用到应用中心 创建第一个应用 至此,你已经创建了一个【演示应用】,用于接下来的操作。 创建第一个无代码模型 (基于低代码开发的模型,可以跳过这一步骤。) 切换应用到模型设计器 在模型设计器切换视图为表模式 模型设计器具有表模式和图模式两种模型展示形式,表模式主要用于单个模型的管理,图模式主要用于查看多个模型之间的关联关系。 在这里我们使用表模式。 在模型设计器切换模块到【演示模块】 创建一个存储模型【商品】 在无代码模式中,只能选择【存储模型】和【传输模型】,其代表的含义为: 存储模型:创建模型时同步创建数据库表,具备数据存储能力。 传输模型:仅创建模型,不创建数据库表,不具备数据存储能力,仅作用户交互使用。 创建模型时,一定会继承一个父模型,在模型设计器创建模型都将默认继承【基础存储模型】,该模型中默认包含【编码】和【名称】两个业务字段,以及【ID】、【创建人ID】、【更新人ID】、【创建时间】、【更新时间】五个系统字段。 在专家模式中,可以查看模型的父模型进行查看,也可以在创建模型时修改父模型。这一功能在这里不进行演示。 在下面的操作中,我们仅需使用【编码】和【名称】这两个业务字段来创建相关视图。 创建第一个表格视图 切换应用到界面设计器 选择应用和模型 这里为了方便查看,我们可以使用【全部视图类型】。 创建表格视图 输入【页面标题】,修改【视图类型】为【表格】,直接点击确定即可。会自动进入【页面设计】。 页面设计 设计表格视图 从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表格区】 小贴士: 在左侧组件库可以切换【组件】和【模型】。【组件】用于创建和选择字段,【模型】用于直接使用现有字段。 在模型面板可以查看当前选中字段所在模型。如未选择时,为当前视图模型。 对于存储模型而言,创建字段应该是一个谨慎的操作,在学习阶段尽可能从【模型】中使用现有字段。除非有创建新字段的需求。 大家可以自由发挥,将【编码】和【名称】拖入【列表搜索区】即可使用这两个字段进行搜索。单行文本默认使用模糊搜索。 为表格提供【创建商品】功能 从【组件库】-【组件】中将【跳转动作】组件拖入【动作区】,并填写相关的元数据信息,按图示输入完成后,点击保存即可。(具体解释在文章下方) 这里会创建一个【表单】视图,并绑定至当前动作。设计完表格视图后,我们需要设计表单视图。 为表格提供【编辑商品】功能 从【组件库】-【组件】中将【跳转动作】组件拖入【行内动作区】,并填写相关的元数据信息,按图示输入完成后,点击保存即可。 为表格提供【删除商品】功能 从【组件库】-【模型】中将【删除】动作分别拖入【动作区】和【行内动作区】即可。 将表格绑定到菜单,可以让用户访问 使用【显示母版】可以查看当前页面在母版中的预览效果 添加菜单项【商品管理】并【绑定当前视图】 发布表格视图,并返回列表页 至此,我们已完成了【表格】视图的基本功能设计。 接下来,我们需要设计刚刚在【创建商品】步骤时创建的【表单】视图。点击【商品表单】卡片任意区域进入【页面设计】。 设计表单视图 从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表单区】 为表单提供【创建/更新】功能,使得表单可以提交数据到服务端 从【组件库】-【模型】中将【创建】动作拖入【动作区】 将【创建】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式 从【组件库】-【模型】中将【更新】动作拖入【动作区】 将【更新】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式 为表单提供【返回】功能 将【组件】-【客户端动作】拖入【动作区】添加【返回】功能 发布表单视图,并返回列表页 (同表格视图发布) 切换应用到应用中心,为应用设置首页 使用绑定菜单,将【商品管理】菜单设置为【演示模块】的应用首页。 切换应用到演示模块,查看刚刚设计的视图以及体验增删改查基本功能 至此,一个模型的全部增删改查功能已进行完整演示。下面将对上述步骤中可能产生的疑问点进行解释说明。 跳转动作元数据配置 动作名称:跳转动作的默认显示名称 数据控制类型:用于动作点击后的数据行为控制。 处理单条数据:携带当前可用数据的一行到目标页面中,仅一行,如果勾选了多行也仅有首行(首行按勾选顺序决定)。 处理多条数据:携带当前可用数据的多行到目标页面中,至少是两行。 处理单条或多条数据:携带当前可用数据的多行到目标页面中,至少是一行。 不进行数据处理:不携带任何数据到目标页面。 打开方式:用于动作点击后的跳转行为控制。 当前窗口打开:基本的页面跳转,不打开新的浏览器窗口或标签页。 新窗口打开:打开新的浏览器窗口或标签页。特殊的,使用了平台内置的多标签页时,将不再打开新的浏览器窗口或标签页,仅会在多标签页中添加一个新的标签页。 弹窗打开:使用弹窗打开,并渲染目标页面。 抽屉打开:使用抽屉打开,并渲染目标页面。 页面内容:界面设计器交互属性。 绑定已有视图:从平台中已存在的视图中选择视图作为目标页面。 创建新页面:输入视图相关信息,创建新视图并绑定到当前动作作为目标页面。 绑定页面:【绑定已有视图】时用于选择视图。 页面标题:【创建新页面】时使用的页面信息,与【界面设计器】中【创建视图】的【页面标题】一致。 页面模型:【创建新页面】时使用的页面信息,与【界面设计器】中【创建视图】的【模型】一致。 业务类型:【创建新页面】时使用的页面信息,与【界面设计器】中【创建视图】的【业务类型】一致。 视图类型:【创建新页面】时使用的页面信息,与【界面设计器】中【创建视图】的【视图类型】一致。 操作栏位置:【创建新页面】时使用的页面信息,与【界面设计器】中【创建视图】的【操作栏位置】一致。 禁用数据加载:打开目标页面时不发起服务端查询。 加载函数:打开目标页面时使用指定的加载函数发起服务端查询。 客户端动作元数据配置 动作名称:客户端动作的默认显示名称 客户端行为:平台内置的客户端行为 数据校验:同提交动作的数据校验功能 返回上一页/关闭弹窗/关闭抽屉 刷新数据:同提交动作的刷新当前视图功能 批量更新:在批量动作打开的弹窗中使用的特殊客户端动作 删除数据:在一对多(O2M)和多对多(M2M)使用表格组件时使用的删除功能 Q/A 跳转动作的数据控制类型该如何选择? 通常情况下,我们可以通过目标页面是否需要携带数据以及携带的数据行数,来决定数据控制类型。 在演示内容中,从【表格】视图通过【创建】按钮跳转到表单时,通常我们不需要任何数据,因此我们选择【不进行数据处理】来实现这一目的。从【表格】视图通过【编辑】按钮跳转到表单时,通常我们在行内进行操作,并且我们一次只能编辑一行数据,因此我们选择【处理单条数据】。 【组件库】-【组件】中的动作和【组件库】-【模型】中的动作有什么区别? 【组件库】-【组件】中的动作拖入页面时,会创建一个对应的动作,因此需要输入元数据相关信息。【组件库】-【模型】中的动作为当前模型中的【服务端动作】,因此拖入页面后无需输入元数据相关信息。 【删除】动作为什么可以显示在两个区域? 在模型中内置的【删除】动作,其数据类型为【处理单条或多条数据】,因此可以在表格的【动作区】和【行内动作区】各放置一个。不仅如此,所有的数据类型为【处理单条或多条数据】的【服务端动作】都可以这样做。 表格的【创建】和【编辑】为什么一个使用【创建新页面】,另一个使用【绑定已有视图】? 在新增【创建】这个【跳转动作】时,由于我们在当前模型下没有一个【表单】视图可以直接使用,因此在这里我们使用【创建新页面】的方式直接创建【表单】视图,并绑定至当前动作。 在新增【编辑】这个【跳转动作】时,由于我们在上一步骤已经创建了一个可以直接使用的【表单】视图,因此在这里我们使用【绑定已有视图】。 在演示内容中,我们假设【创建商品】和【编辑商品】使用的【表单】视图可以通过【是否隐藏】属性进行简单区分,因此采取了这样的演示操作。根据我们实践经验,在大多数场景中也的确如此。 表单的【创建】和【更新】配置的【条件隐藏】具有怎样的含义? 在平台任何存储模型/代理模型(不包含中间模型)中,都具备ID这一系统字段。通过【不进行数据处理】的跳转动作跳转至【表单】视图时,ID不会在跳转时进行传递,因此在【表单】中的ID字段为空。通过【处理单条数据】的跳转动作跳转至【表单】视图时,ID会在跳转时进行传递(如URL上可以看到id属性),因此在【表单】中的ID字段不空。 根据这一特性,我们就可以通过【条件隐藏】区分当前这个视图的业务功能。 表单的【创建】可以通过当前视图数据.ID非空进行隐藏,即表示当前ID非空时隐藏(当前ID为空时显示)。 表单的【更新】可以通过当前视图数据.ID为空进行隐藏,即表示当前ID为空时隐藏(当前ID不空时显示)。

    2023年11月1日
    7.1K00

Leave a Reply

登录后才能评论