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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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低代码应用平台体验

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

相关推荐

  • 计算属性如何配置按条件展示不同的值

    1.打开计算公式,点击“fx”字样的图标添加函数 2.选择逻辑函数分类下的条件函数 3.在第一个输入框填写条件,这里可以手写条件的表达式,后面2个输入框分别是条件成立时的值和条件不成立时的值,可以手动输入表达式 表达式中的activeRecord,在表格中代表当前表格行的数据,在表单中为整个表单的数据

    2024年5月16日
    1.2K00
  • Oinone License 许可证使用常见问题

    如何获取许可证? 联系数式运维人员获取许可证。(以下内容全部使用表示许可证文件路径) subject:授权主体名称 license.lic:许可证文件 不同许可证类别有什么不同? 许可证类型 LicenseType 限制功能 适用环境 研发授权 DEVELOP 1.每次安装时效1天,超时后无法正常访问设计器相关功能2.限制CPU和主板序列号或限制许可证使用人数3.不能用于容器启动4.有页面水印 开发环境(开发人员本地启动业务工程时使用该授权) 伙伴授权 TRIAL 1.无安装时效限制2.无部署环境限制3.有页面水印 非生产环境(测试环境、预发环境等使用该授权) 客户授权 BUSINESS 1.无安装时效限制2.仅能部署一套生产环境3.无页面水印 生产环境 PS: 一套环境是指共用Base库的所有JVM称为一套环境。 如何配置许可证? 在yaml中配置许可证 单个许可证配置 pamirs: license: subject: <subject> path: <license.lic> 多个许可证配置 pamirs: license: subject: <subject> path: – <license1.lic> – <license2.lic> pamirs.license.path可以是相对路径、绝对路径以及URL路径。 在Program Arguments中配置许可证 java -jar -Psubject=<subject> -Plicense=<license1.lic> -Plicense=<license1.lic> <boot.jar> 如何在开发中安装许可证? 将许可证放入后端运行时工作目录中即可。(一般为idea项目根目录) 如何在物理机生产环境安装许可证? 将许可证放入与jar包平级目录中即可。 如何在docker环境中安装许可证? 在docker运行时目录添加挂载卷映射,并在yaml中配置对应的路径即可。 如何获取CPU序列号和主板序列号 在Linux环境中使用dmidecode命令 # 获取CPU序列号 dmidecode -s system-serial-number # CPU序列号 7*****1 # 获取主板序列号 dmidecode -s baseboard-serial-number # 主板序列号 ..CN*******V01Y7. # 获取系统UUID dmidecode -s system-uuid # 系统UUID 4c4xxxxx-xxxx-xxxx-xxxx-xxxxxxxx5831 在Mac环境中使用system_profiler命令 # 获取CPU序列号 system_profiler SPHardwareDataType | grep 'Serial Number' | awk -F ':' '{print $2}' # CPU序列号 C02******03Y # 获取主板序列号 system_profiler SPHardwareDataType | grep 'Hardware UUID' | awk -F ':' '{print $2}' # 主板序列号 1AAxxxxx-xxxx-xxxx-xxxx-xxxxxxxxF0FC 在Windows环境中使用wmic命令 # 获取CPU序列号 wmic cpu get processorid # CPU序列号 BFExxxxxxxxxx6A3 # 获取主板序列号 wmic baseboard get serialnumber # 主板序列号 PFxxxxBY # 获取系统UUID wmic csproduct get uuid # 系统UUID D0Exxxxx-xxxx-xxxx-xxxx-xxxxxxxx78B8 在Linux环境出现dmidecode命令执行失败该如何处理? 1. 命令未找到,可使用如下方式尝试安装 # debian (eg: Ubuntu) apt-get install dmidecode # rpm (eg: Fedora/CentOS/RedHat) yum install dmidecode 2. 无权限执行命令,尝试切换当前执行用户或为当前用户提高执行权限 在docker环境出现证书安装失败该如何处理? 1. 由于docke环境非物理环境,不支持CPU序列号和主板序列号校验,尝试更换许可证。 2. 检查许可证在镜像中的位置是否与配置文件中一致。 许可证安装失败该如何处理? 1. 日志出现License installation failed.信息 PS:对JDK版本依赖的问题已在5.0.0版本以上得到完整解决,此问题仅会出现在低版本的平台版本中。 请检查jdk版本是否高于1.8_221以上。 如无法升级jdk版本的环境下,请点击下载 jce_policy-8.zip 并按照如下步骤进行操作:…

    2024年6月19日
    4.7K00
  • 如何添加数据可视化运行时依赖

    前端 package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/data-designer-open-pc'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖 <properties> <pamirs.data.visualization.version>4.7.8</pamirs.data.visualization.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization-core</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – datavi 注意:datavi 这个模块在业务工程和设计器指定数据源要保持一致。

    2024年5月15日
    1.5K00
  • 自定义的复杂字段配置透出字段

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

    2023年11月9日
    2.0K00
  • 无网络环境下 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.0K00

Leave a Reply

Please Login to Comment