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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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接口依次获取其子节点。在编辑页面,我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据,根据不同情况进行调用。虽然使用来不同的接口,但最终都会使用当前模型的queryPage接口获取数据。

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

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

Like (0)
oinone's avataroinone
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • Oinone支持的操作系统和中间件

    Oinone支持的操作系统和中间件 操作系统 操作系统 支持版本 说明 银河麒麟-飞腾版 V10 支持Java和go环境即可; Java要求jdk1.8 (1.8_221+); 低于1.8_221版本需要覆盖掉jce 银河麒麟-鲲鹏版 V10 统信服务器操作系统 V4.0 CentOS/Ubuntu/Debian 7,8,9 其他兼容的Linux系统 能安装Docker或运行go和Java环境即可 Windows Server 能安装Docker或运行go和Java环境即可 数据库 数据库类型 支持版本 说明 MySQL 5.7.x、8.0.x MySQL协议相关的,如:MariaDB,TiDB,PolarDB等。推荐使用8.0.X 达梦数据库(Dameng) 7.6、8.1 PostgreSQL 14.x 华为GaussDB/openGauss 5.x SQL Server 2017 人大金仓/电科金仓 9 Kingbase CDN CDN类型 服务 OSS 阿里云OSS UPYUN 又拍云 MINIO MinIO HUAWEI_OBS 华为云OBS TENCENT_COS 腾讯云COS LOCAL NGINX文件存储 可自定义方式进行扩展 应用服务器 应用服务器 支持版本/说明 Tomcat 主流版本都支持 TongWeb 东方通web服务器 SpringBoot内嵌Tomcat 原生的启动方式: java -jar的方式启动 Jetty 主流版本都支持 其他Java web服务器 支持标准Servlet规范和JavaEE规范的应用服务器 消息队列 消息队列 支持版本/说明 RocketMQ 4.x,推荐4.7+ Kafka 2.x, 推荐 2.5+ Rabbitmq 5.x, 推荐5.7+ 可自定义方式进行扩展 注册中心和配置中心 类型 支持版本/说明 Nacos 1.4.1 + 和 2.x都可以; 支持ACL时,必须是1.4.1以上 Zookeeper 3.4.x, 3,5,x 其他基础 类型 支持版本/说明 Java(jdk) 1.8_221+,低于这个版本需要覆盖JCE Reids 4.x、5.x Nginx 版本无特殊要求 Elasticsearch(ES) 7.x, 8.x ,推荐8.x SpringBoot 2.3.8.Release

    2025年3月19日
    1.8K00
  • 自定义的复杂字段配置透出字段

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

    2023年11月9日
    2.7K00
  • 如何配置文件存储地址为相对路径

    介绍 大部分情况下,文件存储的配置都会配置uploadUrl和downloadUrl的值,这样图片和文件类型的业务字段会存储带域名的全路径文件地址,但是有些场景需要用户在专有内网的时候访问内网的文件存储地址,用户在公网的时候通过公网访问(一般情况下这个公网ip内部最后还是会转发到内网)文件存储地址,这个时候就要求存在数据库字段里的不能是全路径的地址,只能是想相对路径,这个时候可以通过前端访问的域名用nginx转发当前域名下的文件请求到所匹配环境的ip内的文件存储服务。 配置参考 cdn: oss: name: 本地文件NG系统 type: LOCAL bucket: pamirs # 此处可以不配置值,也可以配置相对路径前缀方便做转发 uploadUrl: downloadUrl: validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: /test/static 文件上传的路径同步配置nginx转发 location ~ /file/upload { // 此处配置为后端服务的ip+端口 proxy_pass http://127.0.0.1:8190; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } excel导入场景相对路径在后端代码内无法保存导入的文件 在导入任务的前置hook处理相对文件路径的前缀 package pro.shushi.pamirs.demo.core.hook; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.file.api.model.ExcelImportTask; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class DemoExcelImportTaskActionHookBefore implements HookBefore { // 内网访问文件的地址 public static final String INNER_HOST = "http://127.0.0.1:6800"; @Override @Hook(module = {FileModule.MODULE_MODULE}, model = {ExcelImportTask.MODEL_MODEL}, fun = {"createImportTask"}) public Object run(Function function, Object… args) { if (args.length > 0) { ExcelImportTask excelImportTask = (ExcelImportTask) args[0]; if (excelImportTask != null && excelImportTask.getFile() != null && StringUtils.isNotBlank(excelImportTask.getFile().getUrl())) { excelImportTask.getFile().setUrl(INNER_HOST + excelImportTask.getFile().getUrl()); } } return null; } } 注意事项 上面的例子为本地文件NG系统的,如果是阿里云oss、7牛云等第三方文件存储服务,downloadUrl可以按上面方案直接配置,uploadUrl还是要按正常配置

    2024年6月21日
    2.8K00
  • 分部式缓存配置优化

    介绍 分布式缓存是为了解决以下2个场景 开发时,设计器和开发者本地业务工程同步元数据用的 多模块分部式部署架构 单机版的生产环境是不需要这个特性的,所以默认的启动配置不建议加分布式缓存的依赖包,只在开发环境开启即可 boot启动工程的pom.xml文件配置示例 <project> <profiles> <profile> <!– 下面配置的值根据 spring.profiles.active 识别 –> <id>dev</id> <!– 开发环境增加分布式依赖,支持设计器可以正确访问业务工程 –> <dependencies> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-faas</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-session</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-gateway</artifactId> </dependency> </dependencies> </profile> </profiles> </project>

    2024年7月10日
    2.1K00
  • 无网络环境下 RPM离线导出以及部署docker

    1.操作系统 以Centos7.6为例 [root@haibovm ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [root@haibovm ~]# 2.安装yum-config-manager工具 系统默认没有安装这个命令 yum-config-manager ,这个命令在 yum-utils 包里。 yum -y install yum-utils 添加yum软件源信息(国内有很多,我这里添加阿里): yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum缓存 yum makecache fast 3.下载docker所有依赖到指定路径 mkdir -vp /opt/docker-rpm/ yum install docker-ce –downloadonly –downloaddir=/opt/docker-rpm/ 将所有的依赖rpm环境打包 cd /opt tar -czvf docker-ce-24-CentOS7.6-rpm.tar.gz docker-rpm/ 创建安装脚本install-docker-offline.sh #! /bin/bash cd /opt/docker-rpm yum -y localinstall *.rpm 4.在新的目标环境系统中,上传docker-ce-24-CentOS7.6-rpm.tar.gz 以及install-docker-offline.sh cd /opt tar zxvf docker-ce-24-CentOS7.6-rpm.tar.gz sh install-docker-offline.sh 安装完毕以后启动docker #查看启动状态(安装完默认未启动,需要手动执行启动命令) systemctl status docker # 启动docker systemctl start docker # 重新启动docker systemctl restart docker # 重新加载unit配置文件 systemctl daemon-reload

    2023年11月7日
    1.2K00

Leave a Reply

Please Login to Comment